어제보다 더 나은 오늘

딱 1년 전 이맘때 부트캠프 파이널 프로젝트를 마친 후 회고를 작성하면서 아쉬운 점으로 "무한스크롤도 써보고 싶었던 ui인데 시간 문제로 도입하지 못했다"고 꼽은 적이 있다. 그리고 그로부터 약 10개월 뒤 무한 스크롤을 원없이 사용하게 된다 😇 지난달 다른 팀원이 맡았던 파트를 인계 받았는데 그 중 메인 feature가 무한 스크롤이었다. 인계 받을 당시 프로젝트의 가장 큰 이슈는 다음과 같았다. 1. 스크롤을 위아래로 이동함에 따라 nextPage와 previousPage를 fetch하고, 서버에서 응답으로 받은 데이터를 UI를 그리는데 사용하는 배열 안에 순서에 맞게 삽입하는 게 때때로 올바르게 동작하지 않고 있었다. 가령 [... 6, 7, 8, ...] 페이지가 렌더링되어야 하는데, [... 7..

프로젝트 요구사항 중 수천~수만 개의 문장이 담긴 문서(document)에 문장 별로 책갈피(bookmark)한 문장을 별도 조회할 수 있는 기능이 추가되었고, 이에 대한 화면을 구현하는 중이었다. 서버에서는 다음과 같은 모양의 bookmark 데이터들이 담긴 배열을 보내준다. (참고로 데이터 필드명이나 구조는 프로젝트 코드와 정확히 일치하는 것이 아닌 포스팅을 읽는 이의 이해를 돕기 위한 예시이다.) { id: 1, source: 'Before we begin.', target: '시작하기 전에.', memo: '', document: { id: 3, name: 'Dance with Chance #1', }, } 위와 같은 데이터가 담긴 배열(이하 bookmarks라고 통칭)을 GET 요청으로 받아온 ..

온라인 셀러 계산기 사이트: https://seller-calculator.vercel.app/ 개인 프로젝트로 마진, 판매가, 행사가 환원 등을 구할 수 있는 온라인 셀러 계산기를 뚝딱 만들어 보았다. 요구사항에는 없었지만 지난주 기능 구현 챌린지에서 만들었던 다크 모드 토글 컴포넌트를 가져와서 적용해 보았다. 그 과정에서 생긴 이슈와 해결책을 정리해 보기로 한다. 1. useEffect hook tailwind css를 사용하면 다크 모드를 굉장히 손쉽게 구현할 수 있다. 새로고침 시에도 테마가 유지될 수 있도록 사용자가 선택한 테마를 로컬 스토리지에 저장하기로 했다. 그리고 공식문서에서 알려준 대로 시스템 설정도 체크할 수 있도록 window.matchMedia() api를 사용했다. if ( lo..

Frontend Mentor | Expenses chart component coding challenge In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose. www.frontendmentor.io 💡 기능 구현 목표: - Bar 차트를 보고 개별 Bar 위로 마우스를 가져가면 일별 정확한 금액을 볼 수 있습니다. - 오늘 요일의 Bar는 다른 요일의 Bar와 색상이 다릅니다. - 기기의 화면 크기에 따라 콘텐츠에 대한 최적의 레이아웃을 작성합니다. (데스크탑/모바일) - hove..

1. 데이터와 상태 다루기 처음에는 더미 데이터로 화면을 만들고, 기본적인 CRUD 기능을 어설프게나마 구현을 했다. 그다음 더미 데이터를 json-server로 바꿔서 axios로 fetch하는 걸로 코드를 수정했다. 그러다보니 처음에 더미 데이터를 가지고 기능을 만들 때는 전체 to do 데이터를 하나의 상태로 관리했었는데, 이 부분을 서버와 데이터를 주고 받는 걸로 바꿔야했다. 그 과정에서 fetch로 요청을 할 때마다 페이지 새로고침을 해주지 않으면 갱신된 데이터가 화면에 반영이 되지 않았다. crud 요청이 있을 때마다 window.location.reload() 로 새로고침을 해주자니 매번 모든 컴포넌트들이 새로 리렌더링이 되면서 화면이 번쩍거리는 게 사용자 관점에서 요란스럽게 느껴졌다. 특히..

지난 목요일부터 4일째 자료구조(스택, 큐, 트리, 그래프)를 배우면서 아침부터 밤까지 내내 알고리즘 문제만 들여보고 있으니 머리가 과포화 상태다 ㅋㅋㅋ 금요일 정규 시간에 못 푼 문제들(태반...)을 주말 동안 붙잡고 늘어지느라 주말에 해야 할 다른 일들을 하나도 못했다. 😭 아직 열어보지도 못한 advanced 문제들이 남아있다는 것이 함정... 지금 본다고 알 것 같지도 않은 게 더 함정... 이번 포스팅에서는 그래프를 이용한 알고리즘 문제 중 하나였던 길찾기 문제를 셀프 크리틱해보려 한다. 알고리즘 문제에서 많이 등장하는 길찾기 패턴 문제를 처음으로 어떻게 다뤄야 하는지 알게 된 것이 이번 자료구조/알고리즘 유닛의 최대 성과였다. 💡 그래프의 각 정점을 순회할 수 있는 DFS, BFS 두 가지 방..

워낙 유명한 문제라 간략하게 입출력만 써보자면, 입력: string 타입의 문자열 출력: 입력의 문자열 내의 모든 괄호가 짝이 맞는지 여부에 대한 boolean 타입 🔽 입출력 예시 let output = balancedBrackets('[](){}'); console.log(output); // --> true output = balancedBrackets('[({})]'); console.log(output); // --> true let output3 = balancedBrackets('[(]{)}'); console.log(output3); // --> false 🔽 첫번째 문제 풀이 - switch 문으로 개별 케이스 나눔 switch 문으로 써서 풀긴 했는데, 사실 위의 3가지 경우는 여는 괄..

앞선 포스팅에서 얘기한 것처럼 부트캠프에서 매일 하루에 한 문제씩 알고리즘 문제를 풀게 하면서 하루 일과를 시작한다. (a.k.a. Daily Coding) 이제까지 문제를 딱 보고 pseudo code를 하나도 적지 않고 바로 푼 문제도 있고, 1, 2, 3 번호를 매겨가며 pseudo code를 적은 다음 푼 문제도 있지만 어...? 하고 2초 간 얼었던 문제는 어제가 처음이었다. 나눗셈(/)과 나머지(%) 연산자를 사용하지 않고 두 수의 나머지를 구하는 함수를 작성하는 것 잠시 삼천포를 건널테니 이 포스팅을 읽는 여러분도 위의 함수를 어떻게 짤 지 한 번 생각해 보시면 좋겠다. 개인적으로 부트캠프에서 이제까지 했던 과제 중 가장 인상적인 과제를 꼽으라면 두 가지를 들 수 있겠다. (섹션이 끝날 때마..

부트캠프에서 매일 아침 알고리즘 문제를 하루에 한 문제씩 풀게 한다. 오늘의 문제는 다음과 같았다. 💡 문자열을 입력받아 아이소그램인지 여부를 리턴한다. 아이소그램(isogram)이란 각 알파벳을 한 번씩만 이용해서 만든 단어나 문구를 말한다. 처음에 문제를 보고는 별 생각 없이 다음과 같이 이중 for문으로 풀었다. function isIsogram(str) { // 빈 문자열이 들어오면 true를 출력한다는 주의사항을 반영 if (!str) return true; str = str.toLowerCase(); for (let i = 0; i < str.length; i++) { for (let j = i + 1; j < str.length; j++) { if (str[i] === str[j]) retu..

계산기 기능 구현과 코플릿(알고리즘 문제) 풀이시 레퍼런스 코드랑 (누더기 같은) 내 코드를 비교해 보며 몇 가지 공통적으로 보이는 부분이 있어서 마치 오답 노트처럼 적어보는 셀프 크리틱. 1. 쉬운 길 놔두고 괜히 빙 둘러 돌아가지 말자. input으로 string이 들어오면 해당 string을 바로 순회하면서 갈 수 있는 길을 놔두고 string.split("")으로 배열을 만들어서 그 배열로 순회를 하는 그런 거, 이제 하지 말자. 물론 꼭 배열 메소드를 써야 하는 경우라면 그럴 수도 있겠지만. 2. 조건식은 true 값이 나오는 표현식이 들어가는 자리다. 너무 기본적이고 당연한 얘기지만 한 번 더 명심할 필요가 있겠다. 특히 변수가 falsy한 값(false, undefined, null, 0, ..