Styled Component에서 컴포넌트 확장하기 옛날에 리액트 처음 익힐때 다 공부했던 것 같은데, 프로젝트들을 하다보니 비슷한 컴포넌트를 생성하는 경우가 많은데 무시하고 계속 하다가 .. '아 옛날에 이거 공부했었는데 .. ' 싶어서 정리하게됐다. 일단 그 전에 styled component 를 쓰는 이유는 기존에 div를 만들고 className 이나 style을 부여하는 식이었지만,대신 styled를 임포트 해서 우리가 사용할 html 에서 사용하고 싶은 태그를 지정하고, 백틱 안에 css코드를 적어준다. -> 컴포넌트 이렇게 하게 되면 스타일링 된 컴포넌트를 사용함으로써, 컴포넌트 함수 안에 스타일을 적을 필요가 없고, 가독성이 좋아진다. 나는 큼직한 or 많이 사용할만한 컴포넌트들은 스타일 컴포넌트로 지정하고, 그 안의 자잘한 텍스트나 버.. Firebase 보안규칙 수정 : 파이어베이스에 안전하지 않은 규칙이 있습니다 메일 올 경우 해결 방법 파베 보안규칙보안 규칙 시작하기 | Firestore | Google Cloud 보안 규칙 시작하기 | Firestore | Google Cloud의견 보내기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 보안 규칙 시작하기 Firestore 보안 규칙을 사용하면 인프라를 관리하거나 서버 측 인증 및 승인cloud.google.com징글징글하게 이메일을 보내오던 firebase 보안규칙을 수정했습니다1. 보안규칙 버전 작성rules_version = '2';기존의 rules_version = '1' 은 와일드 카드를 사용할 때 한 개 혹은 두 개 이상의 path를 포함하고 있어야하기 때문에 자유롭게 와일드카드를 사용하기 위해서는 zero path를 허용하는 .. React validation 리액트 유효성 검사 Formik VS REACT Hook form https://nyeongnyeong.tistory.com/299 [React] Form Validation (Formik VS React Hook Form) Validation 이란? 서버에 데이터를 제출하기 전에 양식이 올바른지 확인하는 과정 사용자가 데이터를 목적지로 보내기 전에, 올바를 데이터를 입력했는지 유효성을 체크해주는 것. Client Validation rea nyeongnyeong.tistory.com react iframe에 의해 클릭 안되는 문제 해결 https://www.inflearn.com/questions/404668/react-%EC%A0%80%EC%9E%A5-%EC%8B%9C-iframe-%EA%B0%95%EC%A0%9C-%EC%9E%AC%EC%83%9D%EC%84%B1-%EB%AC%B8%EC%A0%9C react 저장 시 iframe 강제 재생성 문제 - 인프런 | 질문 & 답변 create react app을 통해 프로젝트를 진행 중입니다. 원래 컴퓨터에서는 프로젝트가 정상적으로 작동 되었는데, 다른 컴퓨터에서 git clone을 받아 npm install 후 npm start 진행하니, 1. Cannot read pro... www.inflearn.com 리액트 팝업창/모달/다이얼로그 구현하기, 삭제버튼 구현, 구조분해할당 https://jaeseokim.dev/React/React-Portal_Render%EC%9D%98_%EC%B0%A8%EC%9D%B4%EC%A0%90_%ED%99%9C%EC%9A%A9%EB%B0%A9%EC%95%88_%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0/ [React] Portal, Render의 차이점, 활용방안 알아보기!최근 Kakao Map Api를 React Component 라이브러리로 개발을 진행하며 자주 사용하게 된 ReactDom의 Portal 기능에 대해서 공부를 하면서 Render와 어떠한 차이점이 있는지 그리고 활용방안에 대해서 정리 해jaeseokim.dev Portalcreate를 이용하여 구현 나는 navbar 안에 있는 login butt.. styled-component 로 코드 리팩토링하기 0. 왜 공부하나해커톤 웹사이트를 만들며 팀원의 코드 간에 css 간섭이 일어나 몇번의 수정을 거쳤다. 리액트에 css를 주는 방법이 다양하지만, styled-component는 알고만 있었지 사용해본 적은 한번밖에 없는 기술이다.시행착오의 해결책으로 styled-component로 방식을 바꾸기로 하였고, 생코 교수님 강의를 들어보려 한다. 강의 시간이 14분밖에 안되니까 정리겸 한시간안에 끝내는 걸 목표로 하며 블로그를 켰다. 1. 기존의 인라인 css 선언과 styled-component의 비교 - 왼쪽은 함수를 정의하고 리턴값으로 버튼태그를 두어 버튼 태그를 최상위 태그로 하는 컴포넌트를 생성한다. - 오른쪽에서 styled-component를 살펴보면, styled-components를 .. Three.js 로 움직이는 지구본 만들기 https://velog.io/@whdnjsdyd111/Three.js-%EA%B8%B0%EB%B3%B8-%EA%B5%AC%EC%A1%B0 [Three.js] 기본 구조 원시 모델 Three.js 의 원시 모델이란, 런타임에 다양한 인자들로 정의한 3D 모양을 의미한다. 주로 공, 육면체 등으로 3D 그래프를 만드는데 사용한다. BoxGeomtry 육면체 CircleGeometry 원  기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다. AOS 라이브러리는 자바스크립트를 깊 inpa.tistory.com 이번에 만들고 있는 외주 사이트에서 많이 쓰이는 애니메이션 라이브러리이다. 이 효과 하나만으로도 웹이 한층 더 다이나믹해보여서 앞으로도 자주 쓸 것 같다. 사진이 가운데서부터 커지는 효과 아래에서 하나씩 올라오게 이전 1 2 3 4 다음