혼자 적어보는 노트

이전에 강의를 들을 땐 v5를 기준으로 진행했었는데 react-router-dom version이 업데이트됨으로써 변경되는 사항을 숙지할 필요가 생겼다. 기존의 react-router-dom이 ver 5라면 npm i react-router-dom@6 위와 같이 기존의 버전을 업데이트 할 수 있다. 기존의 버전변경이 아닌 아닌 새롭게 설치 시에 자동으로 최신버전으로 적용된다는 점을 알아두자. React Router v6은 react hooks를 많이 사용하기 때문에 ver6으로 업그레이드 하기 전에 react16.8이상을 사용해야 한다. react router v5는 React 15와 호환된다. switch대신 Routes 도입 안의 모든 와 는 상대적으로 변경되었다. 및 가 이전 보다 간결하고 표현이 ..

flex box css를 처음 접했을 때 div의 레이아웃 구조를 잡을 때 float를 자주 사용하곤 했다. 사실 float는 이미지 및 box요소를 텍스트와 함께 배치할 때 자연스럽게 어우러 질 수 있도록 만들어진 속성이였지만 box를 정렬할 때 별다른 대안이 없어서 어쩔수 없이 사용하긴 했다. 이후에 flex box가 생기고 나서 좀 더 편하게 레이아웃을 구성할 수 있게 되었다. flexbox는 레이아웃을 유연하게 짤 수 있는 박스 모델이다 반응형 레이아웃을 만들기에도 적합하며 코드를 유지보수하기도 편하다. flex를 이용한 정렬의 중요 키워드는 주축(main axis)와 교차축(cross axis)이다. flexbox의 속성들 [flex contianer 속성] :display: flex;를 한 대..

앱을 배포하다 보면 secret key들이 존재한다. 다른 누군가에게 공유되면 안되는 key들이 존재하는데 이 것을 코드에 직접적으로 노출하면 안된다. 보통 그러한 secret key들은 환경변수로 만들어서 숨겨서 관리를 하고 배포할 사이트에서 숨겨진 변수를 사용할 수 있게 설정을 하게 된다. React에서 환경변수 설정을 하는 법을 알아보자. 예를들어 abcdefg라는 key를 가지고 있다면 나의 react프로젝트의 최상위 폴더에 .env라는 폴더를 만들어준다. (src폴더의 바깥, package.json이 있는 곳) // .env REACT_APP_SECRET_KEY=abcdefg 위와 같이 적어준다. *이름은 마음대로 지정할 순 있지만 변수명의 앞부분은 REACT_APP_이 필수적으로 들어가야한다 ..

this란 무엇인가? 자바스크립트를 배우게되면서 this에 대해 많이 접해보았는데 내가 알고있는 개념이 맞는지, 책이나 유튜브 등 여러가지로 알아보게 되었는데 초심자인 내가 이해한 방식으로 적어보겠다. this를 제대로 이해하려면 실행컨텍스트, 스코프, 객체라는개념, 프로퍼티, 프로토타입, 활용된 사례 등 밀접하게 연결되어 있는 부분을 이해해야 하는 듯 하다. 개인적으로 this자체가 어렵다기 보다는 연결된 다른 개념들을 이해해야해서 복잡했던 것 같다. ES6문법부터 시작해서 그런지 이전의 개념들이 와닿지 않았던 것들도 있었다 자바스크립트에서의 this는 실행컨텍스트가 생성될 때 결정되는 것이다. 즉 함수를 호출할 때 결정이 되며. 호출자가 누구냐에 따라 달라진다. 전역공간에서의 this console...

api를 이용해서 데이터를 불러오는 도중 description 데이터가 줄바꿈이 되지 않고 불러와지는 현상을 겪게 되었다. console로 데이터를 확인하면 줄바꿈이 되어있는데 왜 안될까 알아보던 중 react.js에서는 \n을 처리를 안해주는 것으로 확인되었다. 어떻게 처리하면 좋을까? const textTransformation = (text) => { return text.split("\n").map((line) => ( {line} )); }; 처음에는 위와 같이 text에 "\n"을 기준으로 배열로 나누어서 과 함께 출력을 했는데 너무 비효율 적인것 같아서 찾아보던 중 css기능 중에 줄바꿈 기능이 있다! white-spase: pre-wrap; \n을 인식하여 줄바꿈 처리를 해준다.

new Date()함수를 쓰거나 날짜데이터를 받아서 쓸 때 예쁘게 노출하는 방법 ex) Tue Dec 21 2021 10:27:27 GMT+0900 (한국 표준시) >> 2021-12-21 function formatDate(date) { let month = "" + (date.getMonth() + 1); let day = "" + date.getDate(); let year = date.getFullYear(); if (month.length < 2) month = "0" + month; if (day.length < 2) day = "0" + day; // 월, 일이 한자리일 경우 0을 붙여준다 return [year, month, day].join("-"); } function formatDat..

리액트에서 부모 컴포넌트에 state를 만들고 해당 state값을 변경하는 이벤트를 실행 했을 때 해당 state를 사용하는 자식 컴포넌트가 아닌 다른 자식 컴포넌트들 전부 render함수가 호출되는 것을 볼 수 있다. state변경시 VDOM의 스마트한 특성으로 elements창에서는 해당하는 요소들만 변경이 되지만 각 부모, 자식1, 자식2 컴포넌트에 console.log함수를 넣어놓는다면 이상하게도 자식 1번의 컴포넌트에서 props를 통한 state변경을 한다면 해당 state에 관여하지 않는 자식 2번의 컴포넌트의 re-render되어 console.log가 찍히는 것을 확인할 수 있다. 리렌더링을 막을 수 있는 방법엔 어떤 것들이 있을까? class 컴포넌트에서의 PureComponent 클래..

다양한 브라우저의 크기에서 px단위를 사용할 경우 고정크기로 적용되기 때문에 반응형 웹을 만들 때 불편함이 있다. 언뜻 보긴 했지만 적용은 망설였던, px보다는 조금 더 유연한 가변 단위인 em, rem을 알아보자. em, rem은 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다. 폰트사이즈를 16px로 지정했을 경우 1em, 1rem은 16px로 변환된다. 그러면 언제 em을 쓰고 언제 rem을 쓰는가? - rem의 픽셀 단위 변환 기준 rem은 페이지 최상위인 root요소인 html요소의 폰트 사이즈가 기준이 된다. html에 설정한 폰트크기가 16px이면 10rem은 160px가 된다. - em의 픽셀 단위 변환 기준 em은 지정한 요소의 폰트 사이즈를 기준으로 한다. 예를들어 div에..