코딩 헬스장

✅ 사이드프로젝트를 하면서 발생했던 이슈에 대해서 정리합니다. Next.js 환경에서 dotenv로 환경변수 저장하는 법 📌 dotenv dotenv 라이브러리는 .env 파일로부터 환경 변수를 읽을 수 있습니다. 따라서 .env 파일에 키=값 포멧으로 나열하고 dotenv 라이브러리를 이용해서 process.env 에 설정할 수 있습니다. 디폴트로 현재 디렉토리에 위치한 .env 파일을 읽어옵니다. 만약 .env가 다른 경로에 있다면, config() 함수 호출 시 path 옵션을 넘겨주면 됩니다. ◼ 설치 npm i dotenv ◼ 사용예시 저는 Next.js 에서 사용했습니다. config 폴더 // .env.development MODE= DEV // .env.production MODE= PRO..

✅ 쓰로틀링과 디바운싱은 모두 웹에서 발생하는 이벤트를 제어하는 방법으로 불필요한 이벤트가 호출되는 것을 방지합니다. 예를 들어 검색어 자동완성 기능, 스크롤 관련 동작과 같은 이벤트에서 매번 입력, 스크롤에 대한 콜백이 발생하고 계속해서 콜백을 수행하는 일은 큰 리소스를 요구하기 때문에 서비스의 성능 저하 및 사용자 경험 저하를 야기합니다. 따라서 상황에 맞게 쓰로틀링이나 디바운싱을 적용하면 최적화하는데 큰 도움이 됩니다. 📌 쓰로틀링(throttling) 쓰로틀링은 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 제어하는 것 입니다. 개발자가 몇 초마다 한 번씩 실행되게 제한을 두는 것입니다. 주로 스크롤 이벤트에서 많이 사용합니다. 쓰로틀링 구현 포인트 ! 1. 함수가 실행 ..

2022년에 9월 목표를 세우고, 말일에 스스로 결과를 판단하여 회고해보자! 1. React 처음부터 다시 공부해보기 [ 목표 ] FE 개발자로 현재 3년차.. 원래는 BE 개발자로 들어왔는데 당시 부서에 FE 신규 메뉴들이 많이 쌓여있었고 어쩌다 보니 BE 메뉴가 아닌 FE 메뉴들을 분장받아 개발하다 보니 그때부터 FE 개발자로 일하고 있다. 공부 없이 거의 바로 메뉴를 개발하다 보니 React의 개념 및 동작 과정에 대한 이해 같은 부분들이 가끔 부족하다는 생각이 든다! 따라서 React에 대해 심층적으로 학습하고 원래 알고 있었던 것들은 복습하면서 처음부터 다시 한번 공부해보기로 결정! (노션 페이지로 정리) [ 결과 ] - 9월 30일에 업데이트 하기! 기초 개념부터 천천히 정리해봤다. 원래는 한..

✅ 전에 React 무한 스크롤을 구현해 본 경험이 있는데, 최근에 해당 기능을 또 구현해 볼 기회가 생겨서 이참에 공부한 내용을 정리하고자 글을 작성합니다. (잘못된 정보가 있다면 말씀해주시면 감사하겠습니다.) 저는 테스트 데이터를 msw를 사용하여 데이터를 Mocking 하여 사용했습니다. (더보기 란에 간단한 설정법을 적어뒀습니다.) 더보기 msw 설치 npm install msw / yarn add msw src 폴더 하위에 mocks 폴더 생성 후 browser.js, handlers.js 파일 만들기 index.js 에 mock 설정 코드 추가하기 /* browser.js */ import { setupWorker } from 'msw' import { handlers } from './han..

✅ React 가상 스크롤은 렌더링 최적화 방법 중 하나입니다. 라이브러리를 사용하여 구현해본 경험은 있으나, 직접 구현해보고 더 자세히 이해하기 위한 과정을 글로 작성합니다! * ps) 가상스크롤의 대표적인 라이브러리는 react-virtualized와 react-window 가 있습니다. 📌 Virtual Scroll ? API를 호출하여 100, 1000개 이상의 데이터를 불러와 화면에 렌더링한다고 가정했을 때 스크롤이 뻑뻑하거나, 심할 경우 브라우저가 다운되는 현상이 발생합니다. 이는 DOM에 대한 작업이 브라우저에 큰 부하를 걸기 때문입니다. 이러한 현상을 개선하기 위해 Virtual Scroll 개념을 도입하면 많은 데이터라 하더라도 무리 없이 정상적으로 스크롤할 수 있습니다. Virtual ..