전체 글 398

[프로그래머스] 기능개발

문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자..

[Git] Commit Convention을 통한 개인프로젝트 관리

개인 프로젝트에서 Commit시 제목을 입력할 때 Commit Convension을 활용하고 있는데 매번 다른 블로그를 참고해서 작성하는 것보다 익숙해질 때까지 제 블로그를 참고하기 위해 작성합니다!Feat : 새로운 기능을 추가하는 경우Fix : 버그를 고친경우Docs : 문서를 수정한 경우Style : 코드 포맷 변경, 세미콜론 누락, 코드 수정이 없는경우Refactor : 코드 리펙토링Test : 테스트 코드, 리펙토링 테스트 코드를 추가했을 때Chore : 빌드 업무 수정, 패키지 매니저 수정Design : CSS 등 사용자가 UI 디자인을 변경했을 때Rename : 파일명(or 폴더명) 을 수정한 경우Remove : 코드(파일) 의 삭제가 있을 때. "Clean", "Eliminate" 를 사용..

지식 정리 📝 2024.03.13
Next.Js의 SSR 방식으로 인해서 생긴 500 Error 해결 법

먼저 500 Error가 발생한 원인은 간단합니다. const { data } = useSWR( latitude && longitude ? `/api/posts?latitude=${latitude}&longitude=${longitude}` : null ); Next.Js의 SSR 방식은 클라이언트 단에서 useSWR을 통해서 API Call을 호출하기 전에 즉 브라우저에 화면을 그려주기 전에 미리 초기 값({latitude: null, logintude: null})으로 백엔드에 호출을 해서 화면을 그리는 방식이기 때문에 param의 latitude, logintude의 값이 null로 전달되어서 발생한 문제입니다. 위도와 경도를 구하는 useCoords 함수는 초기값으로 각각 {latitude: nu..

지식 정리 📝 2024.03.10
[프로그래머스] 2019 카카오 개발자 겨울 인턴십 튜플

문제 설명 셀수있는 수량의 순서있는 열거 또는 어떤 순서를 따르는 요소들의 모음을 튜플(tuple)이라고 합니다. n개의 요소를 가진 튜플을 n-튜플(n-tuple)이라고 하며, 다음과 같이 표현할 수 있습니다. (a1, a2, a3, ..., an) 튜플은 다음과 같은 성질을 가지고 있습니다. 중복된 원소가 있을 수 있습니다. ex : (2, 3, 1, 2) 원소에 정해진 순서가 있으며, 원소의 순서가 다르면 서로 다른 튜플입니다. ex : (1, 2, 3) ≠ (1, 3, 2) 튜플의 원소 개수는 유한합니다. 원소의 개수가 n개이고, 중복되는 원소가 없는 튜플 (a1, a2, a3, ..., an)이 주어질 때(단, a1, a2, ..., an은 자연수), 이는 다음과 같이 집합 기호 '{', '}'..

SPA(Single Page Application)페이지 SEO 최적화 With React Helmet

최근에 Spot 운임 리스트를 보여주는 Ocean Freight 페이지를 개발할 때 React Helmet을 활용해서 페이지의 MetaTag(title, description, kewords)를 관리하고 이와 더불어 페이지의 URL 또한 신경 써서 페이지를 개발하였습니다. const SEO = ({ title, description, keywords }: HelmetProps) => { return ( {title} {description && } {keywords && } ); }; 자세한 코드는 보여드릴 수 없지만 위와 같이 최적화를 적용해서 배포하니 며칠 뒤 새로 만들어진 페이지에도 불구하고 SEO가 적용된 것을 확인할 수 있었습니다. 또한 Img Tag에 alt속성에 winiLogis를 입력하지 ..

지식 정리 📝 2024.03.08
Optimistic UI Update With useSWR

오늘 Nomard Coder를 통해서 학습한 내용 중 Optimistic UI Update에 대해서 알게 되었다. Optimistic UI Update란? 예를 들어 백엔드에 Post 요청을 보내고 업데이트된 데이터를 통해 다시 보이는 화면을 업데이트해주고 싶을 때 지금까지는 다시 Get 요청을 보내서 전달 받은 데이터를 화면에 업데이트해 주는 경우가 많으셨을 겁니다. 이때 Post요청을 보내고 즉각적으로 화면에 데이터가 변환된 것처럼? 보여주고 싶을 때 사용하는 것이 바로 Optimistic UI Update입니다. Optimistic UI Update를 구현하는 방법은 저는 useSWR의 mutate기능을 통해서 구현했습니다. const { data, mutate } = useSWR( router.q..

지식 정리 📝 2024.02.28
Safari에서 깨지는 CSS 해결

정말 중요한 기획의 퍼블리싱을 맡게 되었습니다. 전 페이지의 퍼블리싱을 끝내고 다음 주 월요일이 배포인데 문제가 생겼습니다. 바로 Chrome에서는 정상 작동하는 CSS가, Safari에서는 정상 작동하지 않는 아주 절망적인 상황이 벌어졌습니다. 먼저 시간이 없기 때문에 문제 해결을 위해 이전에 작성해 두었던 코드를 분석해 본 결과 .commonBookingStep1PopUpRequestTimeWrapper { font-size: 0.8rem; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1rem; color: #000; > :nth-child(1) { span { color: #d10023; } } > :nth-child(2) {..

지식 정리 📝 2024.02.22
Text ReadMore 구현 With WiniLogis Our Shipment

먼저 기획서에서 모바일 화면일 때 3줄 이상의 문장일 경우 Read more 버튼이 보이게 해 달라는 요청이었습니다.저는 이 요구사항을 충족시키기 위해 모바일일 경우 특정 길이 이상일 때 Read more 버튼이 보이게 직접 구현했었습니다.하지만 이때 문제점은 영어와 한글이 섞여있거나 A, b와 같이 문자열의 너비 차이 등등 여러 가지 문제 점이 등장했습니다. 이 문제를 해결하기 위해 구글 검색을 정말 많이 했었는데 딱히 마음에 드는 해결방법을 찾지 못하던 중이었습니다. 하지만 계속된 노력 끝에 WiniLogis에서 사용 중인 기술스택에 적합한 라이브러리를 찾게 되었습니다.https://www.npmjs.com/package/react-show-more-text react-show-more-textThe..

지식 정리 📝 2024.02.06