api를 사용하여 개발을 하다보면 API_KEY, Admin_Id 등 처럼 외부로 알려지면 안되는 보안이 필요한 값들이 있다. 이러한 값들을 보안이나 유지보수를 좋게하기 위하여 .env라는 파일에 환경변수로 만들어서 변수를 꺼내와서 사용하게 된다. 이번에 만들어본 것도 API_KEY를 발급받아서 사용해야했기 때문에 환경변수로 만들어 사용하던 중 제대로 알지 못하고 계속 검색을 해서 사용했기 때문에 이번에 내가 정리를 하고자 간단하게 작성하려한다. Vite와 CRA는 환경변수 사용방법이 다르기 때문에 Vite빌드 도구를 활용한다는 가정하에 작성한다. 먼저, 최상위 루트에 .env라는 파일을 만든다. 그리고 잊지 말아야하는게 .env파일을 반드시 gitIgnore에 추가해줘야한다. 추가를 하지 않으면 깃에 ..
이전에 작성했던 리팩토링 / 최적화를 마저 이어가보려고한다. 먼저, 저번 포스팅에서도 말했듯이 이정도의 규모에서는 크게 코드의가독성, 유지보수에 대한 리팩토링 외에는 최적화에 대한 의미가 크게 와닿지도 않고, 오히려 메모리공간만 차지할 수 있지만 그냥 이런 방법도 있구나 라는걸 경험해보기 위해 이어가본다. RAWG-API 사용 store 리팩토링/최적화 -1 역시는 역시였나..? 만드는 도중에도 계속해서 렌더링횟수를 생각한다고 생각했는데 어림도없었다. 해치웠나..? 생각해보고 성능테스트를 돌려보았지만 라이트하우스에서 나오는 점수는 56... jhbljs92.tistory.com 저번 포스팅에서 개선방법3까지 진행했으니, 개선방법4부터 가보자 개선방법4 react-icons 번들사이즈 줄이기 항상 reac..
역시는 역시였나..? 만드는 도중에도 계속해서 렌더링횟수를 생각한다고 생각했는데 어림도없었다. 해치웠나..? 생각해보고 성능테스트를 돌려보았지만 라이트하우스에서 나오는 점수는 56... 하하하 라이트하우스에서 제공해주는 지표를 하나하나보면서 다시 리팩토링을 해보자 ✅ 개선사항 개선방법1 useCallback사용, loadGames함수 컴포넌트 밖으로 빼기 첫번째로 진행한 리팩토링은 useCallback을 활용하여 콜백함수를 메모이제이션 하는 방법을 진행해보았다. 사용한 방법은 아주 간단했다. 리렌더링이 될 때마다 초기화되는 함수를 useCallback으로 감싸서 초기화를 막고, 함수가 다시 필요할 때마다 함수를 새로 생성하는 것이 아닌 메모리에서 가져와서 재사용할 수 있게 만들어주는 것이다. 직접 바꾼 ..
요즘 지금까지 해왔던 프로젝트들에 대한 최적화에 대한 리팩토링을 계속해서 고민하고 고치려고 노력중이다. 아직 리팩토링하는 방법, 해야하는 기준에 대해 공부가 잘 안되어있기 때문에 프로젝트의 코드들을 쭉보면서 반복되는 코드들에 대한 리팩토링부터 시작하기로 했다. 1. Board 컴포넌트의 엄청난 반복코드 처음에 이 프로젝트를 구현할 때 왜이렇게 했는지 지금생각해보면 이해가 가지는 않지만, 어쨌든 내가 친 코드니까,, 페이지 좌측에 backgroundnoise를 주는 보드가 있다. ReactAudioPlayer, Slider mui라이브러리를 사용하여 slider를 이용하여 볼륨을 조절하고 자동재생, 반복, 소스(src) 등등을 속성으로 하여 총 11개의 noise를 아래의 사진처럼 하나씩 다 주고 앉아있었..
포트폴리오 제작 중에 브라우저의 화면 너비를 구해서 너비에 따라 화면구성을 달리해줘야 했다. 그래서 window의 resize 이벤트를 사용하기로 하였다. 하지만 이대로 사용하였을 때 브라우저 창 resizing마다 콜백 코드가 계속해서 실행되었다. resizing마다 콜백 코드를 계속해서 실행해줘야할 수도 있지만 저는 resizing마다 실행할 필요가 없기 때문에 매우 비효율적이라 생각하였다. 그렇게해서 찾아보게 된 개념이 디바운싱과 쓰로틀링이다. 디바운싱, 쓰로틀링 두개 다 웹에서 발생하는 이벤트를 제어하는 방법이라고 한다. 디바운싱(Debouncing) - 연속으로 호출되는 함수들 중에 마지막에 호출되는 함수만 실행되도록 하는 것 쓰로틀링(Throttling) - 마지막 함수가 호출된 후 일정 시간..
부트캠프 수료 후 이력서와 더불어 포트폴리오를 작성해야하는데 노션과 웹형식 중에 고민을 하다가 다른 라이브러리들도 사용해보자 생각이 들어 웹사이트 형식으로 만들어보기로 했다. Portfolio 프로젝트 기간 : 2023 - 08 - 10 ~ 깃허브 레포 : 📃레포 링크 배포 링크 : 🔗배포 링크 개발인원 : 1인 사용 주요스택, 라이브러리 React TypeScript Tailwindcss framer-motion emailjs react-scroll react-modal 먼저, 타입스크립트를 사용하는 것은 거의 필수로 생각을 했었고, 애니메이션은 한번도 써보지 못했던 framer-motion을 사용하여 더 적은 코드를 작성하는 간단한 선언적 구문을 통해 애니메이션 코드베이스를 읽고 유지 관리를 쉽게 하..
메인프로젝트가 끝나고 리팩토링과 함께 자바스크립트DeepDive 책을 다시 정독하면서 쉬엄쉬엄 뭔가를 만들어보고 싶은 마음에 뭔가 무겁지않고 새로운걸 만들어보려하다가 만들어보게 되었습니다. Lofi-App 프로젝트 기간 : 2023 - 07 - 27 ~ 2023 - 08 - 09 깃허브 레포 : 📃레포 링크 배포 링크 : 🔗배포 링크 개발인원 : 1인 프로젝트 구상 계기 뭔가 흔하다면 흔한? 음악관련 웹앱을 만들어본적이 없었습니다. 한번쯤 만들어보고싶었던 상황에서 요즘 코드치면서 많이 들었던 lofi음악에 관하여 만들어보고싶다는 생각이 들어서 만들어보게 되었습니다. 사용 주요스택 React TypeScript Mui Redux-toolkit sass react-timer-hook react-player ..
다사다난 했던 메인프로젝트 회고를 해보자 무비팝 프로젝트 기간 : 2023-06-28 ~ 2023-07- 24 깃허브 레포 : 📃레포 링크 배포 링크 : 🔗배포 링크 개발 방법론 : Agile Scrum - 깃허브 이슈들을 이용하여 작성 개발 인원 : 무비팝 주요화면 : 프로젝트 구상 계기 무비팝은 처음 아이디어 회의시간을 가질때 팀원 중에 한분이 영화보는것을 매우 좋아하여 영화에 관한 프로젝트를 해보고싶다고 먼저 말씀을 해주셨고, 그 과정에서 영화를 리뷰하고 다른사람들이 그 리뷰를 보고 해당 영화를 혼자 시청하거나 같이 시청하기위해 팟을 모집하는 등의 서비스 뿐만 아니라 영화장르의 선택을 통해 맞춤추천 등의 서비스를 기획하게 되었습니다. 주요기술 스택 (클라이언트) React Styled-Compone..
