React에서의 CSS 리액트에서 CSS를 적용하는 방법은 여러 가지가 있다. CSS 파일을 import 하거나 module로 사용할 수도 있고, SASS 같은 전처리기나 tailwind 등의 프레임워크를 이용할 수도 있다. 그중에서 오늘은 Styled-components에 대해서 정리해보려 한다. Styled-components에 대해서 몰랐던 부분이 많았고, 무엇보다 사용해보니 생각보다 더 편한 라이브러리라는 것을 알게 되었기 때문이다! Styled-components Styled-components는 자바스크립트 안에 CSS를 작성하는 CSS-in-JS 방식이다. 자바스크립트를 이용해서 CSS 코드를 만들어내서 컴포넌트를 꾸밀 수 있다. 이런 CSS-in-JS 방식의 패키지가 Styled-compo..

리액트의 state와 props에 대해서 가볍게 정리해보려 한다..! 현재 내용은 추후 덧붙여지거나 수정될 수 있다. 😇 ((잘못된 부분에 대한 첨언은 언제나 환영입니다..)) State 컴포넌트 내부에서 바뀔 수 있는 값. useState 훅을 통해 리액트에 state의 변화를 알려서 컴포넌트가 재평가될 수 있도록 한다. 이후 JSX가 다시 평가되며 변화된 부분을 화면에 렌더링한다. const [state, setState] = useState(''); state에 바로 변경하면 안 될까? useState가 const로 작성된 이유는?? 🤔 우선 state는 setState 함수를 통해서만 변경이 가능하다. state를 바로 쓰면 안 되나? 싶을 수 있는데, 이렇게 state가 직접 수정될 위험을 방지..

리액트로 투두 리스트 만들기 useState와 useRef 훅 만을 이용해서 투두 리스트를 만들었다. 배포된 주소는 아래. https://todolist-phi-rouge.vercel.app/ 다른 훅은 이용하지 않았기 때문에 새로고침을 했을 때 유지가 된다거나.. 이런 부분은 안되지만! 한동안 바닐라 자바스크립트만 하다가 리액트로 다시 돌아오니 State란 녀석이 새롭게 다가와서 투두 리스트를 만들며 좀 헤맨 부분을 정리해보려 한다. 투두 객체에 id값 넣어주기 투두마다 각각의 아이디를 달아주기 위해서 여러 방법이 있지만, useRef 훅을 이용해보았다. useRef() useRef는 current라는 속성을 가지고 있는 객체를 반환한다. 이때 인자를 갖고 있다면, 이 값을 초기값으로 current에 ..

PropTypes 리액트에서는 props를 통해서 다른 컴포넌트에 데이터를 전달할 수 있고, 이를 통해 재사용 가능한 컴포넌트를 만들 수 있다. 우연찮게 props에 타입 검사를 할 수 있다는 것을 알게 되어 정리해보려 한다. props에 타입 검사를? 요새 핫한 타입스크립트는를 쓰는 이유 중 하나는 타입을 엄격하게 체크해서 에러를 줄이기 위함도 있다. props에 타입 검사가 필요한 이유도 이와 결이 같다고 본다. 컴포넌트가 잘못된 타입의 props를 전달받거나, 필요한 props가 누락된다면 의도치 않은 에러로 이어질 것!.. PropTypes는 이런 에러를 방지해줄 수 있다. 참고로 리액트 공식문서에 따르면 PropTypes는 React v15.5부터 prop-types라는 패키지로 분리되었다!....

자바스크립트의 '?' ES2020에서 도입된 새로운 문법들 중 옵셔널 체이닝 연산자 ?. 와 null 병합 연산자 ?? 는 모두 물음표를 쓴다. 사용되는 방식도 null이나 undefined 값을 체크할 수 있다는 점에서 비슷한 것 있는 것 같아, 이 둘을 한번 묶어서 정리해보면 좋겠다 싶어서 작성하게 되었다. 🙂 null 병합 연산자 우선 null 병합 연산자(nullish coalescing) ??은 간단하게 값이 할당되어 있는 변수를 쉽게 찾을 수 있다. 즉 undefined이나 null이 아닌 값이 할당된 경우를 말한다. a ?? b 이 연산자는 위와 같이 쓸 수 있는데, 이런 식으로 해석할 수 있다. a가 null 도 아니고 undefined가 아니라면 a 그 외(null이나 undefined)..

실행 컨텍스트를 알아보자! 실행 컨텍스트를 위해 책을 읽던 나날들... 그러나 텍스트만으로는 쉽게 이해할 수 없었던 나.. 하지만 이대로 넘어갈 수 없지.. 🤔 이번 기회에 자바스크립트를의 동작 원리를 보다 깊게 이해하기 위해 실행 컨텍스트에 대해 정리해보자! 실행 컨텍스트를 알기 위해서는 먼저 콜 스택에 대해서 알아야 한다. 콜 스택 우선 스택은 위와 같이 하나하나 차례대로 쌓고 빼고를 반복하는 자료구조다. 콜 스택은 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하여 코드의 실행 순서와 환경을 관리한다. 현재 실행중인 코드의 실행 컨텍스트가 콜 스택의 최상위에 존재한다! 이런 콘텍스트를 실행 중인 실행 컨텍스트 (running execution context)라고 한다. 그럼 컨텍스트가 뭐길래 콜 ..

참조형 데이터 먼저 자바스크립트의 데이터 타입 중 참조형으로는 이런 것들이 있다. Object Array 함수(function) Date 정규표현식 Map, Set 자료 구조 + null도 object 타입! 참조형 타입들은 아래와 같은 형태로 값을 참조하고 있다. 실제 객체 내 프로퍼티들이 담긴 주소 값들을 데이터로 갖고 있는 주소 값!.. 을 복사해서 참조하고 있기 때문에 참조형이라고 부른다. 1. obj1을 위한 별도의 데이터 영역 안의 프로퍼티들은 또 그 안에서 각각의 메모리를 할당받고 있다. (위의 주소 7103~7104 부분) 2. 데이터 영역 안에 프로퍼티들의 주소 값이 별도의 메모리 할당을 받는다. 3. obj1은 2의 주소 값을 참조한다. 결국 기본형과의 차이는 기본형은 값을 가리키는 주..

기초 프로젝트를 마치며 아주 열심히 달린 기초 프로젝트가 끝이 났다!.. 피곤과 스트레스로 인해 인후염을 얻고 말았지만.. 🥺 지난 프로젝트 회고를 기반으로 더 계획적이고 완성도 높은 프로젝트를 발표해서 기쁘다. 미니 프로젝트처럼 튜터님의 피드백을 바탕으로, 또 개인적으로 좋았던 부분과 아쉬운 부분을 정리해보려 한다. 아쉬웠던 부분 뒤로 가기가 안 되는 점 이번 프로젝트의 특성상 SPA로 구현을 했기 때문에 hash URL을 이용해야만 했는데, 우리 프로젝트는 브랜드별 신발 > 각 신발들의 모든 리뷰 > 리뷰 상세페이지로 이어지는 구조였기 때문에?.. 이벤트 타겟으로 값을 지정해서 넘어갈 수밖에 없었다. 더 좋은 방법이 있었겠지만.. 🥺 지금은 모름... 파이어베이스 요금제 읽기 할당량이 이렇게 빨리 채..

Uncaught FirebaseError: The query requires an index. You can create it here: 파이어베이스로 프로젝트를 진행하던 도중 만난 에러!.. 지금까지는 DB에 있는 모든 댓글을 가져와서 렌더링 해주고 있었는데, 각 리뷰에만 작성한 댓글을 불러오기 위해 코드를 짜다가 만났다. 위의 에러 메세지를 보면 인덱스(색인)를 생성해야 한다고 해결 방법을 알려주고 있다. 아래 쿼리문 보면 where와 orderBy를 함께 쓰고 있는데 복합 쿼리여서 그런지 저 부분에 색인이 필요한 것 같다. 해결 파이어베이스 콘솔에서 firestore에 들어오면 탭에 색인이라는 것이 있다. 색인 추가를 누르면 아래와 같이 복합 색인을 만들 수 있는데, 적용할 컬렉션과 필요한 필드들의..

Today, What I learned? 어느덧 프로젝트가 중후반 정도 왔다. 😇 나의 담당 기능을 얼추 마무리 한 날!... 오늘은 파이어베이스의 DB에서 데이터를 집계해주는 함수에 대해서 정리해보려 한다. 삽질을 꽤 많이 하기도 함 ㅎ (2시간가량..) getCountFromServer getCountFromServer 라는 파이어베이스 API가 있다. 이 메서드는 스냅샷을 찍어서 데이터의 개수를 가져올 수 있는 함수이고, 현재 백엔드 서버에서 직접적인 응답을 통해서만 동작하는 함수다. 아래와 같은 방식으로 구동한다. const coll = collection(db, "cities"); const query_ = query(coll, where('state', '==', 'CA')); const sn..