heeney.log

원티드의 프리온보딩 챌린지를 통해 작성하게된 글임을 밝힙니다. Next.js 좋다 좋다 말만 들었지 (도입을 시도했으나)사내에서 사용하고 있지 않아서 더더욱 궁금한 유니콘 같은 존재라 원티드 프리온보딩을 통해 공부해볼 수 있는 좋은 기회가 생겨서 감사히 참여하게 되었다. 1. CSR이란 무엇일까? 클라이언트가 렌더링 할게! client-side-rendering, 영문 뜻 그대로 클라이언트 단(웹 브라우저)에서 JavaScript를 사용하여 동적으로 콘텐츠를 생성하고 렌더링하겠다는 의미이다. 서버에는 데이터를 요청하고, JavaScript로 컨트롤 한다. SSR은 반대로 서버에서 동적으로 콘텐츠를 생성하고 렌더링하겠다는 의미가 된다. CSR, 장점? 깜빡임이 없는 매끄러운 UX 클라이언트에서 응답 데이터..

내가 만든 로직이 제대로 작동하는지 확인하기 위해 작성하는 테스트 코드이다. 환경설정 /src 폴더 위치에 test라는 폴더를 만들고 그 안에 테스트 코드를 작성한 파일을 두면 된다. 파일명은 __test__ 혹은 .test.ts로 지정해준다. 함수를 테스트하는 경우 해당 컴포넌트를 import해와서 테스트를 진행하면 된다. 우선 필요한 라이브러리를 설치해야 한다. yarn add -D jest @types/jest yarn add -D ts-jest yarn add -D @testing-library/jest-dom @testing-library/react 필요한 파일로는 우선 테스트를 돌려볼 수 있는 파일이 필요할 것이다. /src/test/app.test.tsx ... root 위치에 jest.co..

React manifest.json 파일의 정체 { "short_name": "React App", "name": "Create React App Sample", "icons": [ { "src": "favicon.ico", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, { "src": "logo192.png", "type": "image/png", "sizes": "192x192" }, { "src": "logo512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": ".", "display": "standalone", "theme_color": "#000000", "back..

[React / 2차 프로젝트] react-slick 적용법 2차 프로젝트부터는 라이브러리를 써보게 되었다. 1차 프로젝트에서는 학습을 위해 지양했었다. 라이브러리라고 무조건 좋지 않은 것도 아니고, 무조건 좋은 것도 아니다. 적재적소에 필요할 때 사용할 수 있어야 한다. 가스레인지를 쓰면 되는데 굳이 부싯돌로 불을 피울 필요 없기도 하다. 다양한 라이브러리를 만나면서 배울 수 있는 것도 많다. 그 코드를 뜯어보면서 학습효과를 본다던가 혹은 라이브러리 사용법을 익히면서 점점 다양하게 마주칠 라이브러리에 대한 진입장벽이 좀 낮아진다고 해야할까? 2차 프로젝트를 진행하면서 react-slick이라는 라이브러리를 활용해 캐러셀을 만들었다. 역시 유명한 만큼 편리하고 좋았지만 공식 문서를 보아도 해결되지 않는 ..

[React] fetch로 백엔드와 통신하면서 놓쳤던 부분 장바구니를 구현하면서 백엔드와 통신할 일이 많았는데, 이때 다양한 실수를 범했기에 기록한다. 다음 통신때는 절대 이런 실수를 하지 않으리 다짐해본다. 우선 내가 장바구니에서 백엔드와 통신해야했던 부분, 중요한 부분을 이야기 해보자면, 장바구니는 회원만 이용이 가능하다. 백엔드에 POST로 보내줄 body 내용은 JSON 문자열로 변환해야 한다. 전체 삭제 및 선택 삭제, 제품 직접 삭제가 가능하고 삭제한 내용은 DB에서 지워져야 한다. 구매하기를 누르면 구매한 데이터가 백엔드 측에서 따로 저장되어야 한다. 장바구니는 회원만 이용이 가능하다. 회원만 가능하다는 뜻은 결국 Token을 갖고 있는 회원만 장바구니에 접근이 가능하다는 뜻이다. 회원만 가..

[React] map 함수 적용시 key props를 부여하는 이유 본론부터 말하자면 key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 랜더링을 진행한다. key값 부여 안하면 어떻게 될까? 🤓 콘솔에 에러 메세지가 뜬다. 너 동일한 형제들로 구성된 list(map에서 뿌려준 그 lists) 유닠크한 키 prop을 줘야돼. 왜 필요하지? 🤔 map으로 요소를 하나씩 뿌려준다고 하자. 리액트는 내용이 바뀔 때 다시 랜더링을 하는데 10개의 리스트중에 하나의 리스트만 바뀌었다면 리액트가 하나씩 리스트를 읽다가 여기서 달라졌네? 하고 전체를 재 랜더링 한다. 그걸 방지하기 위해 각각의 요소들이 고유한 정체성을 가지도록 key값을 부여하는 것이다. 그러면 리액트는 key값으로 변한 내용인지, 아..

react에서 jsx, css에 넣을 이미지 경로를 입력하는 방법 css background에 배경으로 넣거나 이미지 디렉토리를 src가 아닌 public에 보관하는 등 우리가 알고있는 평소의 html,css처럼 넣으려고 한다면 에러가 발생할 수 있다. 이미지 파일을 src에 배치할 경우 - jsx 이미지가 많아지면 코드가 길어져서 지저분하다. (비추) import Image from './ImageName.jpg'; - css background: url(./ImageName.jpg); 우리가 알고있는 방식대로 이미지 경로를 넣어주면 된다. 이미지 파일을 public폴더 안에 넣기 절대 경로로 연결해주어야 한다. - jsx - css 어쩔 수 없이 무조건 bg에 넣어주어야 한다 할때.. jsx내 태그안..