혼자 적어보는 노트

프로젝트를 조금씩 하고있는데 백엔드없이 작업을 하려니 무언가 프로젝트가 미완성된 느낌을 받을 때가 있었다. node로 서버구현을 해본적은 있지만 좀 더 간편하게 백엔드를 연결해서 사용할 수 있는 firebase를 사용해보기로 했다! 몇차례 알아보고 테스트를 해보니 생각보다 간단해서 놀랐다. 참고로 9버전이다. 1. firebase console에서 프로젝트를 생성 https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 테스트로 만들어 보는 것이기 때문에 test로 작성했다. 프로젝트 이름은 test로 했지만 중복된 네임이기 때문에 아래의 test-88e5b가 ..

배열을 이용하여 state를 관리 할 경우 state 데이터들의 내부 프로퍼티를 수정할 때 복잡함이 생긴다. 예를들면 const usersState = [ { id: 1, name: "Jay", age: "28", job: "Developer", }, { id: 2, name: "Luby", age: "30", job: "Designer", }, { id: 3, name: "Kate", age: "30", job: "Planner", }, ]; 위와 같이 3명의 유저 데이터를 관리한다고 했을 때 만약 유저의 name을 변경한다고 하면 어떻게 처리해야할까? 변경된 값과 변경할 name을 가진 데이터의 id값을 보내고 기존의 state에서 id값과 일치하는 데이터를 찾아서 일치한다면 수정된 데이터를, 일치하..

몇번의 시도와 테스트를 통한 youtube api사용법을 정리 해 보겠다. https://console.cloud.google.com/apis/dashboard Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 유튜브 api를 사용하려면 위의 링크에서 key를 만들어주어야 한다. https://developers.google.com/youtube/v3/docs API Reference | YouTube Data API | Google Developers API Reference YouTube Data API를 사용하면 YouTube 웹사이트에서 일반적으로 실행하는 기능을 ..

Cannot read property 'map' of undefined Cannot read property '???' of undefined React에서 api로 데이터를 가지고와서 state에 데이터를 담고 해당 state의 프로퍼티를 참조하려고 할 때 위와같은 에러가 발생한다. 아직 데이터가 할당되지 않은 상태에서 해당 객체의 데이터를 읽으려 하니 발생하는 것으로 추정된다. 그럴땐 아래와 같이 삼항연산자로 해당 데이터가 할당되었는지 체크를 한 후 에 프로퍼티를 참조 하면 된다. (할당이 되지 않았다면 false이기 때문에 노출이 안됨) //ex1 {video && ( {video.title} )} //ex2 {video && video.map(()=>( //코드작성 )) )}

이전에 강의를 들을 땐 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 도입 안의 모든 와 는 상대적으로 변경되었다. 및 가 이전 보다 간결하고 표현이 ..

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

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

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