분류 전체보기 (36) 썸네일형 리스트형 컴포넌트 구조화를 위한 아토믹 디자인 1. 컴포넌트 구조화가 필요한 이유하나의 프로젝트를 완성하는 과정은 약속의 연속이다. 개발 부분에서는 코드 컨벤션, 커밋 컨벤션 등을 정하는 것이 모두가 쉽게 인정할 수 있는 가장 기본적인 약속의 형태가 아닐까 싶다. 이러한 것이 필요한 이유는 실제 운영되는 서비스의 수명이 꽤 길기 때문이라고 생각한다. 그래서 프로젝트 구성원 간에 혹은 미래의 담당자에게 명확한 메시지를 전달할 수 있는 약속을 기반으로 프로젝트를 진행해야 한다. 그래야 누가 담당자가 되어도 프로젝트 전반에 관한 내용이나 특정 기능에 대한 명세를 쉽게 이해할 수 있고, 실제로 이는 서비스의 유지보수 능력을 향상하는 아주 핵심적인 요소라고 생각한다. 프론트엔드 개발 시에도 이러한 약속을 정해 코드의 예측 가능성과 유지보수 능력을 높일 수 있.. 제대로 이해하고 싶은 ESLint 1. ESLint의 필요성처음 ESLint를 알게 된 것은 22년도에 네이버 부스트캠프에서 팀 프로젝트를 수행할 때였다. 당시에는 운이 좋게 실력이 좋은 팀원들을 만나서 작업하니 에이버엔비 공유 설정으로 린팅을 적용했음에도 딱히 규칙을 어기는 경우가 없었고 거의 비슷한 수준에서 코드 품질을 유지했었다. 이 경험으로 인해 작년까지도 ESLint를 도대체 왜 쓰는지 이해하지도 못했고, 그래서 전 직장에서 혼자 FE 개발을 담당해 프로젝트를 시작했을 때도 타입스크립트에만 모든 신경을 쏟아서 코드를 작성했다. 그러나 현업에서 일하며 여러 사람의 손을 타는 코드의 품질을 아무런 대응책 없이 일정하게 유지하기 매우 어렵다는 것을 알게 되었다. 코드는 몇 년 후를 내다보고 작성해야 하는데 각자의 스타일로 작성되어 있.. [내일배움캠프] 리액트 4기 6번째 프로젝트 완성 - 37일차 내배캠 6번째 프로젝트로 간단한 여행 블로그 사이트를 만들었다. 이번 프로젝트는 5개의 페이지와 2개의 모달로 구성되어 있어 이번 과정에서 가장 규모가 컸다. 나는 redux 작성, firebase 연결 및 api 생성, 게시글 페이지, 배포 등의 작업과 팀원들의 코드를 merge해서 수정하는 작업을 수행했다. 이번 프로젝트에서도 기존과 같이 react, redux, react-router-dom, firebase 등을 사용했기 때문에 기술적으로 새롭게 배운 것은 거의 없었다. 다만, 이전 두 번의 팀 프로젝트에서는 내가 대부분의 기능을 개발했는데, 이번에는 팀원들이 많은 작업을 수행했다. 이 과정에서 협업의 방식에 대해서 고민해보고 배울 수 있었어 너무 좋은 경험이었다. 프로젝트 작업 순서와 데이터 흐.. [내일배움캠프] 리액트 4기 5번째 프로젝트 완성 - 29일차 오늘은 내배캠 5번째이자 2번째 리액트 과제인 팬레터 프로젝트를 완성했다. 지난 1번째 리액트 과제가 기초 단계였고 이번 과제가 리액트 숙련 단계였다. 양 단계의 차이는 memoization, redux, react-router-dom, API 비동기 처리 등이 있었다. 그런데 나는 1번째 리액트 과제에서 react-router-dom을 제외하고는 다 적용해 버려서 새롭게 적용할 기술이 거의 없었다. 그래서 redux에 thunk 미들웨어 적용하는 등의 추가 작업을 수행하고 과제를 빠르게 끝냈다. react-router-dom const onClickDetail = (e: React.MouseEvent) => { const { tagName } = e.target as Element; if (tagNam.. [리액트/타입스크립트] 타입스크립트 환경에서 redux thunk 적용하기 [리액트/타입스크립트] 타입스크립트 환경에서 redux 초기 세팅하기 오늘은 네번째 프로젝트 todolist에 redux를 적용하고 기존에 useState로 만든 지역 상태를 전역 상태로 바꿨다. 리액트 + ts 환경에서 redux와 redux-thunk를 적용해본 적이 딱 한 번밖에 없어서 이번 구현 picolozzman.tistory.com 오늘 내배캠의 5번째 프로젝트인 팬레터 사이트를 거의 완성했다. 지난번 프로젝트와 비슷해 보이지만 UI, 기능, 상태관리, 라우팅 등에서 굉장히 다르다. 그리고 지난 프로젝트에서 적용하지 못한 thunk 미들웨어를 적용해 API 요청 로직을 컴포넌트 파일에서 분리했다. 이번 세팅을 위해 사용한 라이브러리는 redux, react-redux, @reduxjs/too.. [내일배움캠프] 리액트 4기 4번째 프로젝트 완성 - 22일차 내배캠 4번째 과제이자 1번째 리액트 과제인 todo 리스트를 완성했다. 원래 과제에선 리액트만 사용해서 만들라고 했지만 이러면 배우는 것이 없어서 TypeScript, vite 등을 적용해서 구현했다. 실제로 컴포넌트 구현, CRUD 구현 등은 엄청 빠르게 했는데 TypeScript 환경에서 firebase, redux를 적용하는데 거의 모든 시간을 사용했다. TypeScript 사용 TS의 설정은 create vite에서 주어지는 기본 옵션과 함께 Listing 부분에 몇 가지를 추가해서 사용했다. 이는 주로 any 타입의 사용을 막거나 사용하지 않는 변수에 대한 에러를 나타내는 것이었다. 이외에도 매우 많은 옵션이 있는데 앞으로 프로젝트를 수행하며 하나씩 적용해 봐야겠다. TS를 사용하며 기본적으로.. [알고리즘] 금과 은 운반하기(자바스크립트) 이 문제는 여러 개의 도시에서 금과 은을 운반하여 합쳤을 때 금은 a 이상, 은은 b 이상인 경우의 최소 시간을 구하는 것이다. 이 문제 역시 주어진 배열들의 최대 길이인 10의 9승인 것에 대비하여 운반할 수 있는 최소 시간이 1로 매우 작기 때문에 완전 탐색으로 풀 수 없는 문제이다. 따라서 a만큼의 금과 b만큼의 은을 모두 운반할 수 있는 시간을 대상으로 이분탐색을 활용해야 하는 점은 쉽게 도출할 수 있다. 모두 운반할 수 있는 시간은 정답으로 등록하고 이분탐색의 최대 범위를 줄인다. 반면 모두 운반할 수 없는 경우에는 이분탐색의 최소 범위를 늘리면 된다. 이렇게 이분탐색을 사용하는 것은 쉽게 판단할 수 있었지만, 특정 도시에서 금을 가져올지 은을 가져올지 둘 다 가져올지 선택하는 것이 어려웠다. .. [알고리즘] 2024 KAKAO WINTER INTERNSHIP n + 1 카드게임(자바스크립트) 초기에 n / 3장의 카드를 지니고 시작해서 각 라운드에서 두 장씩 뽑아 지닌 카드에서 두 장의 카드로 n + 1을 만들어 낼 수 있으면 다음 라운드로 넘어갈 수 있는 게임이다. 우선, 완전 탐색은 n이 최대 996이므로 초기 카드를 제외한 664장의 패를 가질지 말지 판단하면 2의 664승의 경우가 나타나기 때문에 사용할 수 없다. 따라서 별도로 적용할 수 있는 알고리즘은 없고 직접 구현으로 해결해야 하는 문제이다. 이런 기회같은 키워드와 관련된 문제에서는 항상 해당 기회를 바로 소비하지 않고 다음 라운드에 가서 기회를 소비할지 말지 판단하는 것이 가장 좋다. 지금까지 풀어본 문제에서는 이 방식이 항상 맞아 떨어졌다. 이 문제에서는 기회를 다음과 같이 정리할 수 있다. 1. 초기 n / 3장에서 자신의.. 이전 1 2 3 4 5 다음
