heeney.log

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

1. 카카오 개발자 페이지에 가서 로그인 후 내 애플리케이션에서 애플리케이션을 추가한다. 2. Javascript 앱 키를 env 파일에 저장해둔다. 3. 웹 플랫폼을 등록한다. www. 으로 시작하는 사이트를 가장 첫줄에 둔다. 나의 경우 개발서버, 상용서버, localhost를 등록해두었다. 4. 해당 스크립트를 index.html에 추가한다. 5. 코드를 작성한다. 가이드는 카카오 개발자 페이지에 나와있으니 따라하면 된다. const shareKakao = () => { // kakao init try { if (window.Kakao) { window.Kakao.init(KAKAO_KEY); } } catch (e) { console.log(e); } window.Kakao.Link.sendDef..

거두절미하고 document.exeCommand() 방식은 정상적으로 동작은 하지만 웹 표준에서 Deprecated 되었기 때문에 공식문서에서도 사용되지 않으며, 대체 방법으로 Clipboard API 사용이 권장되고 있다. 그럼에도 불구하고 exeCommand를 사용해야했는데 이유는 http 사이트였기 때문이다. Clipboard API는 https OR localhost인 사이트에서만 동작한다. http 사이트에서는 복사가 안되는 문제가 발생하는 것이다.. 추후에 https로 변경될 가능성이 있으나 안전하게 가보기로 했다. 이 부분을 보완하기 위해 조건에 따라 실행하기로 결정했다. if (navigator.clipboard !== undefined) { navigator.clipboard .write..

내가 만든 로직이 제대로 작동하는지 확인하기 위해 작성하는 테스트 코드이다. 환경설정 /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이라는 라이브러리를 활용해 캐러셀을 만들었다. 역시 유명한 만큼 편리하고 좋았지만 공식 문서를 보아도 해결되지 않는 ..

[JS] 객체안에 객체에서 원하는 값만 가져오기 (feat. entries, filter) 2차 프로젝트 - 마이리얼트립 (마이코드트립)를 진행하는 도중에 mock data에서 데이터를 가져오려는데 객체 안에 객체에서 조건에 맞는 데이터만 가져와야만 했다. 객체에 접근하는건 어려워도 천천히 생각하면 다 가능했는데 이건 조건이 들어가니까 어렵게 느껴져서 끙끙대고 있었다. 어떤 조건? 👩🏻‍🎨 마이리얼트립에서 항공권을 검색하는 부분에서 인원 및 좌석을 선택하는 곳이 있다. 성인, 소아, 유아의 데이터를 mock data에서 관리했는데 데이터를 관리할 때 0명인 승객은 보여주지 않아야 한다. 승객이 1명 이상일 때에만 표시된다. 예시) 성인 1, 소아 0, 유아 2일 경우 성인 1, 유아 2만 보여주도록 한다..

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

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

[JS] westagram - 댓글 게시 기능 구현 메인 페이지 내에서 피드에 댓글을 다는 기능을 구현하였다. 쉽게 말해서 해당 댓글 게시 기능은 사용자가 입력한 input값을 담은 요소가 새로 생성되는 것이다. Check List ✅ 사용자가 원하는 내용의 댓글을 입력할 수 있도록 input 요소가 있어야 한다. => input ❌, textarea ⭕️ input으로 구성하려던 도중 인스타그램의 경우 textarea로 구성되어 있었다. 생각해보니 사용자가 정말 긴 내용을 코멘트로 달 수도 있었다. 실제로 인스타그램에서는 많은 양의 내용을 담은 코멘트를 다는 사용자도 있으니 필요한 부분이었다. 사용자가 댓글을 입력을 할 때에만 게시 버튼이 활성화 되어야 한다. keyup 이벤트를 줘서 사용자가 입력하면..