이 발표는 토스페이먼츠가 어떻게 ‘프론트엔드 개발 답답 3형제’를 해결했는지에 대한 내용이었다. 여기서 프론트엔드 개발 답답 3형제는디자인 프로토타입서버 API요구사항 분석이다. 프론트엔드 개발을 할 때, 해당 요소들이 완성될 때까지 기다리는 것이 보통이지만, 계속 기다리기에는 답답하다.토스페이먼츠는 어떻게 이 문제를 해결했을까?1. 디자인 프로토타입디자인 시스템을 통해서 디자인 비효율을 줄일 수 있다.디자인 시스템의 Strength재료로써 다양한 기능과 형태를 제공유연한 구조, 재사용이 쉬움하지만 단점도 있는데, 디자인 시스템의 Weakness반복되는 코드가 자주 생김작성하는 사람 마다 서로 다른 구현체를 사용 → 누구는 prop으로, 누구는 합성으로 옵션을 처리함화면을 구성하는 제품의 코드가 늘어날 ..

0. 풀페이지 스크롤 애니메이션을 구현하고 싶었다.KUIT 온보딩 페이지를 어떻게 만들까 고민을 시작했을 때, 가장 먼저 떠올랐던 것이 풀페이지 스크롤 애니메이션이었다. 스크롤 한 번 내리면 화면이 하나씩 내려가는 애니메이션을 구현하고 싶었다. PC에서 휠로 스크롤을 하거나, 모바일로 위로 스와이프를 하면 화면이 바뀌는 애니메이션을 구현하고 싶었다. fullPage.js와 같은 라이브러리를 쓰는 것을 먼저 고려해봤지만, 라이센스 비용이 있다는 말을 듣고(비영리면 무료라고 하긴 하지만) 포기했다. 그 대신 Framer-motion을 사용해서 한 번 구현해보기로 했다. 어떻게 해야할지 감은 잘 잡히진 않았지만, 내게는 Claude가 있으니까. 계속 질문하고, 수정하고. 내가 원하는 결과가 나오기까지 반복했다..

1. SSG(Static Site Generation) + Headless CMS로 제작해볼까동아리 온보딩 페이지를 제작 중이다. CSR로 제작할까, SSR로 제작할까 고민 중이었는데, SSG(Static Site Generation)을 사용하면 좋다는 의견이 있어서 Next.js로 SSG를 구현하기로 했다. 왜냐하면 동아리 온보딩 페이지는 내용이 거의 바뀌지 않으니까. 그래도 컨텐츠를 업데이트해야할 수도 있다. 그럴 때마다 코드를 수정해서 배포하면 되지 않을까 생각했는데, 코드를 수정하지 않고도 컨텐츠를 업데이트할 수 있는, 콘텐츠 관리만을 위한 서비스인 Headless CMS를 활용하면 된다! 어떤 Headless CMS를 활용할까 생각하다가, strapi가 좋다는 사람들의 의견이 많아서 strapi..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/86491 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 나의 코드function solution(sizes) { var arr1 = []; var arr2 = []; for(let card of sizes) { if(card[0] arr1 배열과 arr2 배열을 생성한다.sizes 배열을 순회한다.가로 길이가 세로 길이보다 작다면 둘을 뒤바꾼다.arr1에 가로 길이를, arr2에 세로 길이를 push한다..

문제링크 : https://school.programmers.co.kr/learn/courses/30/lessons/42748 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 나의 풀이function solution(array, commands) { var answer = []; for(let arr of commands) { var newArr = []; for(let i = arr[0]; i a-b); answer.push(newArr[arr[2] - 1]); } ..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/428851. 나의 풀이function solution(people, limit) { var sortedPeople = people.sort((a,b) => a-b); let cnt = 0; var i = 0; var j = sortedPeople.length - 1; while(i people 배열을 정렬한, sortedPeople 배열을 생성한다.포인터 두 개를 생성한다. (i는 0, j는 sortedPeople의 맨 끝에)i가 j보다 작거나 같을 동안 계속 순회를 하면서배열에서 가장 큰 값과 작은 값을 더한 값이 limit보다 작거나 같으면 i..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42862 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 나의 풀이function solution(n, lost, reserve) { // 배열 정렬 lost.sort((a, b) => a - b); reserve.sort((a, b) => a - b); let lost_cnt = lost.length; for (let i = lost.length - 1; i >= 0; i--) { ..

1. react-datepicker로 달력을 구현하기로 했다.현재 진행하고 있는 프로젝트에서 달력으로 날짜를 선택하는 것을 구현해야 했다. 달력을 직접 구현하는 것은 힘들 것 같아서 ‘react-datepicker’ 라이브러리를 사용했다. 일단 달력 UI를 피그마에 맞게 커스텀하는 것에 집중했다. 달력을 커스텀하는 것은 생각보다 어려웠지만, 여러 번 시행착오를 겪으니 비슷하게 보이게 만드는데에는 성공할 수 있었다.  2. 이제 날짜 상태를 관리하자이제는 선택한 날짜를 상태로 관리해야 한다.먼저 구조를 설명하자면, SelectBox를 클릭하면 내가 만들어놓은 Dialog 컴포넌트가 나오고, Dialog 컴포넌트의 children에 Datepicker가 있고 그 밑에는 확인(confirm) 버튼과 닫기(ca..

0. 이번 주는 공통 컴포넌트를 만들기로 했다.현재 프론트 2명, 백엔드 1명, AI 1명으로 구성된 프로젝트에 참가 중이다. 나랑 같이 웹 프론트엔드로 참가하는 친구는 교내 개발동아리와 연합 개발동아리에서 프로젝트 개발을 하며 경험치를 많이 쌓아서 개발에 능통하다. 이 친구와 이번 주에는 프로젝트의 공통 컴포넌트를 제작하기로 했다. 친구는 컴포넌트를 어떻게 만들까? 친구의 코드를 살펴보기로 했다.1. 폴더(파일) 구조부터 확인하자src 안에 components 폴더를 만드는 것은 똑같은데, common components들을 저장할 common 폴더를 따로 만들고, 도메인별로 폴더를 만들어서 컴포넌트 파일들을 분리한다.input 컴포넌트를 만든다고 가정하자. 친구는 components/common 안에..

문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/425861. 나의 풀이처음에 문제를 읽을 때는 조금 막막했었다. 도대체 뭘 하라는거지?progressses 배열과 speeds 배열이 있다.뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수는 있는데그러면 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 같이 배포된다.그래서 나는 어떻게 했냐면,100에서 progesses를 뺀 left_progresses 변수를 만들었다.left_progresses를 speeds로 나눈 값(이 때 올림을 해야한다(ceil 사용))을 새로운 배열에 push 한다.값들이 들어간 배열(days)를 순회하는데 가장 앞에 있는 index의 값을 변수 standar..