Tech is created to fix problem

리액트를 사용하다보면 map 함수를 정말 많이 사용한다. 객체.map() map을 돌려서 각 객체수 만큼 요소들을 렌더링할 때 각 요소들에 고유한 key값을 주지 않으면 경고가 뜬다. 그런데 코드 리뷰를 받은 것 중에 key 값을 흔히 index로 많이 넣고는 하는데 ${item}-{index} 등 말그대로 고유한 키값을 줄 것을 권장해주셔서 그 이유에 대해 궁금해졌다. 일단 key 자체는 왜 필요할까? key는 react가 어떤 항목을 변경, 추가, 삭제할 지 식별하는 것을 도와준다. react는 업데이트 요소들을 기존의 요소들과 비교 후 변경하는데 이때 key로 식별을 하기 때문에 해당 엘리먼트에 고유성을 부여해 그 고유성을 비교해서 렌더링을 효과적으로 수행할 수 있다. 그럼 key에 index를 넣..

미니 프로젝트인 포토프로젝트를 진행하면서 겪었던 2가지 이슈에 대해 적고자 한다. 1. Kakao map index.html head 에 카카오맵 스크립트를 삽입하고 컴포넌트에 옵션들과 함께 #map 에 지도와 마커를 생성해주었다. 오류 1) 그런데 kakao 와 kakao.map 객체를 찾지 못하는 오류가 발생했다. index.html 의 스크립트를 로드하지 못하는 상황 주로 스크립트를 불러오는 상황에서 비동기적으로 처리할 때 이슈가 발생하는 것 같다. 스크립트가 완전히 로드되기 전에 코드가 실행되어서 오류가 나는 것이다. 해결책 1) useEffect 를 사용해서 스크립트 로딩을 시키고 로딩 후에 지도 생성하는 함수 실행 (순서가 보장되게끔) useEffect(() => { const script =..

이번 프로젝트 초기세팅 중 시행착오를 겪었던 몇 가지에 대해 적어보고자 한다. 1. public 폴더 정말 초보적인 내용인데,, 로고 이미지를 Public에 넣어주었다. 그런데 왜 꼭 Public 이어야 하지? Public 은 컴파일이 되지 않는 폴더이고 Src는 컴파일이 되는 폴더이다. 그래서 컴파일이 필요없는 기본적인 이미지 같은 경우는 public 에 넣어주고 경로는 항상 절대경로로 사용한다. 2. css 아키텍처 팔레트를 어떻게 만들까 하다가 styled-component 와 scss 두 개를 사용했다. 이유는 페이지별로 스타일을 잡고 싶은 마음에 scss를 사용하고 싶었고 그 안에 상세한 컴포넌트들은 styled-component 를 사용해 목적성에 다르게 스타일 라이브러리를 사용하고 싶었다. ..

Wiki 프로젝트가 끝나고 파이어베이스 용량 초과, 한 컴포넌트에 200~300줄 가까이 되는 코드량, 더딘 로딩 속도 등등... 리팩토링의 필요성을 느꼈고 팀원들과 개선점을 논의하고 코드 수정을 진행했다. 먼저, 성능최적화할 때 고려해야 할 사항들을 팀장님이 정리해왔고 아래 항목들에서 각자 선택해서 리팩토링을 진행했다. 1. 로딩성능 1) 이미지 최적화 - 이미지 확장자 : png => webp 파일로 변환 🏁 - 이미지 자체 크기 조절 - 용량 압축 - 디바이스 크기에 대응하는 이미지 사이즈 srcset - 파이어베이스 이미지 업로드 전 최적화 - image 프록시 - Lazy / Pre Loading 적용하기 2) 번들 사이즈 최적화 - cra-bundle-analyzer 전체 : 6.51MB sr..

🗼리팩토링 리뷰1 "index.html 정보를 관리하자" index.html You need to enable JavaScript to run this app. 이 태그의 의미는 자바스크립트를 활성화하지 않아서 활성화하라고 안내하는 태그이다. React에서도 index.html에서 해야할 일들이 있기 때문에 활성화를 해주어야 하며 보통 해야할 일들은 google analytics 와 같이 분석할 때도 index.html 에 코드를 넣어준다. 혹은 특정 페이지나 컴포넌트에서만 불러와야 할 스크립트가 있다면? React Helmet을 사용하면 된다. React Helmet은 정보를 동적으로 변경할 수 있게 해주는 라이브러리이다. 이 라이브러리를 사용하면 다른 컴포넌트에서 정보를 변경할 수 있다. 🗼리팩토링 ..

상세페이지에서 브라우저가 제공하는 뒤로가기 버튼을 누르면 내가 이동했던 이전 history URL 들이 계속 나와서 계속 back back back 눌러줘야하는 번거로움이 있었다. http://localhost:3000/btc-bitcoin/price ⬇️ http://localhost:3000/btc-bitcoin/chart ⬇️ http://localhost:3000/btc-bitcoin/price ⬇️ http://localhost:3000/btc-bitcoin/chart 상세페이지에서는 뒤로가기 버튼을 누르면 이를 감지해 바로 Home 으로 보내주도록 적용해보았다. // 뒤로가기 버튼 const history = useHistory(); // 페이지가 로드될 때 실행되는 useEffect useE..

useParams() useParams() 를 처음 사용하면서, 순수 js 로 url 의 id값을 구했을 때를 생각하면 너무 간단해서 놀랐다,,, useParams 를 import 해 온 후에, id 변수에 저장해주고 Route 태그의 path 에는 "경로/:id" element 에는 자식 컴포넌트를 적어주면 해당 id 값의 url 로 이동할 수 있게 해준다. const { id } = useParams(); useEffect 잘못 사용한 예시 의존성 배열에 '갤러리' 컬렉션에서 참조한 usersCollectionRef 라는 객체 값을 넣어주었다. 그랬더니 무한루프에 빠져 렌더링 되면서 useEffect 실행이 되고 실행되니까 state 값이 바뀌고 그래서 또 렌더링 되고,, useEffect 파이어베이..

Q. index.js 에서 ReactDOM이 뭘까? ReactDOM 은 라이브러리이다. 돔 조작하는 라이브러리 React 도 사용자 UI 를 만들기 위한 라이브러리, React-Router-Dom 도 라우팅을 관리하기 위한 라이브러리, Styled-component 도 CSS-in-JS 라이브러리 알고보면 리액트는 전부 다 라이브러리의 조합이다,, 버튼에 이벤트를 걸어줄 때, () => 화살표 함수 말고 즉시실행함수로 했더니 렌더링 중에 상태 업데이트를 피하라는 오류가 났다!! 예전에 리액트 배웠을 때도, 항상 처음에 접했던 오류같다. 삭제 //즉시실행(에러) {handleDelete(expense.id)}}>삭제 react-dom.development.js:86 Warning: Cannot update..

함수를 map 으로 돌릴 때 매개변수 생략이 가능한가? const foodList = [{id:1, name:'kimchi', image:'#'}, {id:2, name:'soup', image:'#'}] function renderFood(dish){ console.log(dish) return } function App() { return ( {foodList.map(renderFood)} ); }​ foodList.map(renderFood(item)) 이렇게 넣어줘야하지 않나 싶었는데 현재 요소가 매개변수로 전달이 되기 때문에 매개변수 생략이 가능하다 foodList의 name, image, id 가 각각 렌더링 될 때 들어갈 것이다. 리액트의 생명주기 용어 크게 3가지이다 Mounting = 태..

npm이 무엇인가? npm(Node Package Manager)은 node.js를 위한 패키지 매니저이자, node.js를 위한 오픈소스 생태계이다. npm은 node.js에서 사용하는 모듈들을 패키지로 만들어 관리하고 배포하고 있다. 기본적으로는 package.json은 문서다. 개발자가 배포한 패키지에 대해, 다른 사람들이 관리하고 설치하기 쉽게 하기 위한 문서. npm에 패키지를 배포하고 npm registry에 올리기 위해서 반드시 필요한 문서파일이다. 자신의 프로젝트가 의존하는 패키지의 리스트 자신의 프로젝트의 버전을 명시 다른 환경에서도 빌드를 재생 가능하게 만들어, 다른 개발자가 쉽게 사용할 수 있도록 한다. package.json은 확장자로 알 수 있듯, json파일로 속성-값의 쌍으로 ..