여태 React로 개발을 하면서 아마 가장 자주 쓴 hook이 뭐냐고 묻는다면 useState가 Top 3안에 무조건 든다고 장담할 수 있을 것이다. 근데 개발을 하면서 왜 useState는 배열로 묶어서 선언하는 방식으로 해야 하는 것인지에 대해 생각을 해본 적이 없다. 그래서 길진 않지만 알아본 내용을 살짝 풀어 보려고 한다. 배열 디스트럭처링(Array Destructuring) 본론으로 넘어가기 앞서 배열 디스트럭쳐링(Array Destructuring)이란 무엇일까 배열 디스트럭처링(Array Destructuring)은 JavaScript에서 배열에서 원소들을 추출하여 개별 변수로 할당하는 문법적인 기능이며, 이를 통해 배열의 각 원소에 접근하고 값을 할당하거나 읽을 수 있다. 기본적인 배열 ..
토이프로젝트 진행 중에 useDebounce라는 훅을 사용해야 하는 일이 생겼다. https://usehooks-ts.com/react-hook/use-debounce useDebounce() react hook - usehooks-ts This React hook helps to limit that the component is re-rendered too many times. Imagine that you want to execute a function on an event that executes… usehooks-ts.com 위 페이지의 훅으로 debounce 기능을 사용하였는데, 디바운스(debounce) : 과도하게 이벤트 처리 함수(콜백함수)가 호출되지 않도록 하여 부하방지를 위해 쓰이는 방..
ESLint "Jsx-a11y/anchor-is-valid" 태그에 기본적으로 href가 들어있어야 적합하다 판단하며, href=# 의 형태 역시 하이퍼링크의 임무를 수행하기에 적합하지 않다고 인식을 해서 오류메세지를 개발자에게 전달해주는 속성이다. 기본값은 true 이며 eslint 파일의 rules 키 부분에 "Jsx-a11y/anchor-is-valid":0 을 추가하면 태그에 더이상 href를 넣지않아도 경고 메세지가 보여지지 않는다. false 값으로 설정해둔다고 해서 딱히 개발하는데 문제될 것 같은 속성이 아니기에 앞으로 쭉 false로 선언하고 시작할 듯하다. "@typescript-eslint/no-unused-vars" 선언 되었으나 사용되지않는 변수가 있으면 알려주는 규칙이다. 기본값은..
회사 입사 후 첫 1주일이 지났다. 거의 환경세팅과 기존 코드 파악하는 시간을 많이 보냈는데 앞으로 매주간 알게된 지식들에 대해 꾸준히 기록 해두려고 한다. NVM의 필요성 체감 NVM 이란 Node Version Manager 의 줄임말로 노드의 버전을 관리할 수 있는 도구이다. 그동안 혼자 공부하면서 NVM이 왜 필요한지 알지 못했었다. 하지만 이번에 회사에서 사용되는 프로젝트를 구동하면서 느꼈다. 프로젝트별로 구성된 node 버전이 다를떄 해당 버전에 맞게 node 버전을 맞추지 않고 실행하면 실행에러가 발생한다. 예를들어 10.17.0 버전으로 세팅된 프로젝트에 16.17.1 버전으로 모듈을 설치(npm install & yarn)하려면 버전이 맞지 않아서 설치가 불가능하다고 알림이 나온다. 이때..
프로젝트를 진행하면서 소셜 로그인 구현을 맡게 되었다. 다들 프론트엔드는 소셜 로그인에서 할게 많이 없다 쉽다~, 그중에서 카카오가 가장 쉽다~ 이렇게 얘기해서 방심했다. 그렇게 6일간의 소셜 삽질이 시작되었다. 구글링을 해보니 똑같은 카카오 로그인 구현인데도 정말 신기하게 포스팅한 사람들마다 다들 다른 방법을 사용하여 매우 혼란스러웠고 이해하는데 한참 걸렸다. 마침내 성공을 했을 때 극한의 희열감과 이건 반드시 포스팅으로 남겨 놓으리라 다짐하여 지금 글을 작성 중이다. 카카오 개발자 홈페이지를 정말 많이 읽었음에도 프론트엔드가 소셜 로그인을 할 때 어떤 역할을 해주어야 하는지 명확히 감이 오질 않았고 API 활용 방법만 적혀있을 뿐이었다. 프론트와 백엔드의 역할 구분에 대한 개념이 확실히 잡히질 않았기..
21.04.19(월) - 댓글 조회, 댓글 작성, 댓글 삭제 구현 성공 저번 주 클론 코딩 때 근처에 가보지도 못했던 댓글 기능을 구현하였다. 초반에 조금 헤맸는데 하고 나니 생각보다 별거 없었다. 처음 리액트를 배울 때 과제로 엄청나게 헤맸던 기억이 트라우마로 남았었던 모양이다. 댓글 기능과 비슷하게 트라우마로 남은 기능들이 몇몇 더 있는데 앞으로 하나씩 정복해나가는 것도 재밌을 듯하다. 21.04.20(화) - 좋아요 기능 구현 성공 바로 전날 트라우마 기능 중 하나였던 댓글을 부수고 이번엔 또 다른 트라우마였던 좋아요 기능을 구현했다. 굳이 트라우마라고 표현하기도 창피하지만 과제를 하면서 스스로 구현해내지 못했던 부분이 찝찝함으로 남아있었는데 오늘 속 시원하게 풀었다. - CSS로 외부 폰트 적용하..
눈누 라는 굉장히 이쁜 무료 폰트가 많은 사이트를 찾았다. 리액트로 외부 폰트 적용하는 법은 처음이라 구글링을 통해 알아냈고 하고 나면 정말 쉬운데 딱 입맛에 맞는 정보를 주는 블로그가 없는 것 같아 직접 포스팅하려 한다. 우선 아래 사진은 눈누 페이지에 들어가면 바로 보이는 폰트들이다. 대충 봐도 무료가 맞나 싶은 퀄리티다. 여하튼 이중에 맘에 드는 폰트를 하나 골라서 클릭하고 상세페이지로 이동하면 아래의 화면이 보일 것이다. @font-face { font-family: 'twaysky'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_tway@1.0/twaysky.woff') format('woff'); font-weight: norm..
프로젝트 설명 관심사에 대한 짧은 이야기와 이미지를 올리고 댓글과 좋아요를 통해 소통하는 공간 구현한 카테고리 : 음악 / 여행 / 맛집 / 반려동물 프로젝트 기간 2021.04.12 - 22 (10일) 팀 구성 / Tool Front-End(2) : React Back-End(2) : Node.js 와이어프레임 Figma 활용 노션을 이용한 협업 기획부터 API 설계, 임무분장, 진행상황 등을 노션을 통해 공유하며 프로젝트를 진행하였다. 소스트리(GUI)를 활용한 깃 협업 여태껏 깃을 협업할 때 사용하는 것에 대한 개념이 아예 없었기 때문에 프로젝트 진행 때마다 막연한 부담감이 있었다. 그래서인지 이번만큼은 확실하게 깃의 활용법에 대해 개념 정립을 한 상태로 프로젝트를 진행해보고 싶었고, 그래서 개발단..
