분류 전체보기

같은 컴포넌트?이 사진들은 프로젝트를 진행하면서 사용하게 된 앱바입니다. 저는 이전에 프로젝트를 진행할 때 앱바를 제작할 일이 있으면 아래 예시 코드처럼 하나의 컴포넌트에 모든 역할을 부여하는 방식으로 제작했습니다. const Appbar = (isLogoShow, isHomeShow) => { return ( {isLogoShow && } {isHomeShow && } )}이런 방식으로 제작하는 가장 큰 이유는 앱바가 거의 모든 페이지에서 보여주는 컴포넌트이기 때문에 최상위 레이아웃에 앱바를 포함시켜 모든 페이지를 한 번에 처리하기 위해서였던 거 같습니다.하지만 이 방식으로 구현했을 경우 문제점이 너무 많았는데, 일단 이슈를 처리하기가..

서론최근 새로운 프로젝트를 시작하였습니다. 프로젝트를 시작하면서 이것저것 초기세팅을 진행하였는데, 그 중 eslint는 이전에 사용한 eslint를 이번 프로젝트에도 적용했는데, 똑같이 설정했는데도 적용이 안 되는 상황이 발생했습니다...;;지난번 프로젝트에서는 정상적으로 작동했던 eslint인데 적용이 안되니까 상당히 당황스러웠는데, 여기저기 찾아보니 eslint가 업데이트하면서 v9부터 flat config가 디폴트 config로 등록되면서 이전에 작성했던 module.exports로 작성했던 config는 작동하지 않았던 것입니다. 이걸 몰라서 한참 헤맸다;; 내 코드가 잘못된 줄 알고 애꿎은 코드만 계속 들여다보고 있었다... 아무튼 원인을 알게 되어 flat config로 리팩토링을 진행하였습니..

서론이번에 진행하는 프로젝트에서 공통 컴포넌트 설계를 맡아 진행하였습니다. 그중 검색 페이지에서 기간 선택을 하는 기능이 있어 캘린더 컴포넌트가 필요하여 캘린더 컴포넌트를 제작할 일이 생겼습니다. 라이브러리를 사용해서 구현할 수 있으나 상담 부분 커스텀이 필요하였고, 커스텀하였을 때 결과가 원하는 디자인대로 나올지 또한 의문이었습니다. 또 한 번 만들어두면 나중에 사용할 일이 있을 거 같아서...ㅎㅎ 직접 구현하기로 결정하였습니다. 사용한 기술스택- TypeScript- React- Styled-components- date-fns 폴더 구조├── calendar│    ├── CalendarLayout.tsx│    ├── CommonStyle.ts │    ├── DateButton.tsx│    ├..

문제 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명카카오톡에서 이모티콘을 무제한으로 사용할 수 있는 이모티콘 플러스 서비스 가입자 수를 늘리고자 한다고 합니다. 이를 위해 행사를 하는데 목표는 다음과 같다고 합니다.이모티콘 플러스 서비스 가입자를 최대한 늘리는 것.이모티콘 판매액을 최대한 늘리는 것.1번 목표가 우선이며, 2번 목표가 그다음이라고 합니다.이모티콘 할인 행사는 다음과 같은 방식으로 진행된다고 합니다.n 명의 카카오톡 사용자들에게 이모티콘 m 개를 할인하여 판매합니다.이모티콘마다 할인율은 다를 수 있으며, 할인율은 10%, 20%, 30%, 40% 중 하나로 설정됩니다.카카오톡 ..

문제 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명아래 사진과 같이 1번 컴퓨터와 2번 컴퓨터가 직접적으로 연결되어 있고, 2번 컴퓨터와 3번 컴퓨터가 직접적으로 연결되어 있을 때 1번 컴퓨터와 3번 컴퓨터도 연결되어 있다고 판단하기에 1, 2, 3번은 모두 연결되어 있다고 한다고 합니다.컴퓨터의 개수 n, 연결에 대한 정보가 담긴 2차원 배열 computers가 매개변수로 주어질 때, 내트워크의 개수를 반환하면 되는 문제입니다. 더보기※제한 사항컴퓨터의 개수 n은 1 이상 200 이하인 자연수입니다.각 컴퓨터는 0부터 n-1인 정수로 표현합니다.i번 컴퓨터와 j번 컴퓨터가 연결되어 있으면 ..

너무 많은 API 호출Kakao Map Api를 활용하여 프로젝트를 진행 중인데, 지도를 구현하던 중 버튼을 클릭하거나 지도 크기를 조정하는 등 화면이 리랜더링 됐을 때 처음 설정해 두었던 좌표로 다시 이동하는 문제가 있었습니다. 그렇기에 지도를 움직일 때마다 현재 위치를 재조정해주도록 코드를 수정하였는데, 좌표값이 이동할 때마다 현재 위치를 재조정해주니 아래 사진과 같이 너무 많은 API 호출이 발생하였습니다. 한번 움직일때마다 이렇게 많은 호출이 일어나면 짧은 시간에 너무 많은 데이터가 들어오기 때문에 웹의 성능이 저하될 가능성이 높습니다. 또한 카카오의 경우 무료 API라 괜찮지만 유료 API인 경우에는 많은 과금이 발생할 가능성도 있습니다.저 같은 경우에는 이동이 완료된 이후의 위치만 알면 되기 ..