Search for a command to run...
목표 offset/limit parameter를 사용한 상품 더보기 기능 구현 과정 1. 상품 더보기 기능 상품 목록 하단의 더보기 버튼을 누를 때마다 상품을 8개씩 더 로딩해오는 기능을 구현하기위해 예전에 배웠던 query parameter와 offset/limit 개념을 활용했다. offset과 limit을 설정해두면 데이터 요청 후 받아온 결과값에 순서를 부여해서 offset부터 limit까지의 데이터만 보여줄 수 있도록 페이징 처리...
목표 상품의 검색과 옵션별 정렬이 가능한 상품 목록 페이지 구현 과정 1. 상품 목록(메인) 페이지 UI 1) Kream이 상품 거래 사이트이다보니 각 상품마다 동일하게 반복되는 양식들이 많았는데, 이 부분들을 전부 컴포넌트로 만들고 재사용함으로써 코드의 길이를 많이 줄일 수 있었다. 특히 2차 프로젝트에서는 styled components를 사용하면서 각 페이지마다 js파일의 코드 양이 두배로 많아지는 바람에 한번 작성하고나면 알아보기가...
프로젝트명 'CREAM' 한정판 상품 거래 플랫폼 'KREAM'의 기획, 디자인 클론 2주간 Front-end/Back-end 개발 진행 제작 기간 / 인원 2022년 6월 6일 - 2022년 6월 17일 Front-end 4명 & Back-end 1명 적용 기술 / 협업 도구 JSX, Styled-Components, React Notion, Github, Trello, Slack 프로젝트 달성 목표 1차 프로젝트에서 각자 해보지 ...
목표 상품 추가 / 삭제 / 수량 변경이 가능한 장바구니 페이지 구현 과정 1. 상품 데이터 받아오기 1) 사용자가 장바구니에 넣은 상품들의 목록을 렌더링하기위해 fetch 함수로 서버에서 데이터를 받아온 후 'itemList' 변수에 저장해두었다 . 2) 사용자를 식별한 다음 그에 맞는 데이터를 불러와야하기때문에 request header에 로그인시 발급했던 토큰 인가 과정을 추가했다. 코드🔻 const Bag = () => { co...
목표 JWT 인증방식을 활용한 로그인/회원가입 페이지 구현 과정 1. 로그인/회원가입 페이지 UI 1) lululemon의 사이트는 로그인 페이지에서 회원가입 버튼 클릭시 양식이 슬라이드로 올라와 한 페이지에서 로그인과 회원가입을 모두 진행할 수 있는 방식으로 되어 있었다. 이를 구현하기 위해 로그인 양식과 회원가입 양식을 각각 컴포넌트로 만든 뒤 'modal' 변수의 상태값이 true인지 false인지에 따라 적절한 컴포넌트가 렌더링될 수 ...
프로젝트명 'luluisher' 스포츠웨어 브랜드 'lululemon'의 기획, 디자인 클론 2주간 Front-end/Back-end 개발 진행 제작 기간 / 인원 2022년 5월 23일 - 2022년 6월 3일 Front-end 4명 & Back-end 2명 적용 기술 / 협업 도구 HTML, CSS, React Notion, Github, Trello, Slack 코드 컨벤션 들여쓰기는 tab, 혹은 공백 문자 2개를 사용한다. ...
문제 다음과 같이 input이 주어졌을 때,같은 알파벳으로 이루어진 단어끼리 묶어주세요. output에서 순서는 상관없습니다. Input: ["eat", "tea", "tan", "ate", "nat", "bat"], Output: [ ["ate","eat","tea"], ["nat","tan"], ["bat"] ] 풀이 const groupAnagrams = strs => { const keysObj = {}; for (...
문제 prices는 배열이며, 각 요소는 매일의 주식 가격입니다. 만약 한 번만 거래할 수 있다면 = 사고 팔 수 있다면, 제일 큰 이익은 얼마일까요? Input: [7,1,5,3,6,4] Output: 5 설명: 2일(가격=1)에 샀다가 5일(가격=6)에 사는 것이 6-1이라 제일 큰 수익 7-1=6 은 안 되는거 아시죠? 먼저 사야 팔 수 있습니다. Input: [7,6,4,3,1] Output: 0 설명: 여기서는 매일 가격이 낮아지기 때...
문제 양수 N을 이진법으로 바꿨을 때, 연속으로 이어지는 0의 갯수가 가장 큰 값을 return해 주세요. 이어지는 0은 1과 1사이에 있는 것을 의미합니다. 1과 1사이에 있는 0을 binary gap 이라고 하겠습니다. input: 9 output: 2 설명: 9의 이진수는 1001 입니다. 1과 1사이에 있는 0은 2 이므로, 2를 return input: 529 output: 4 설명: 529의 이진수는 1000010001 입니다. bi...