ALL

# 작업일지 5 / 알림 페이지와 검색 페이지 구현, 리액트 쿼리 어떻게 써야하징

1. 알림 페이지, 검색 페이지 퍼블리싱 우리 사이트는 경매 사이트로, 낙찰이 되거나 유찰이 되거나 했을 때 사용자에게 알림을 주는 기능이 있다. 오늘은 그 페이지를 작업했고 또 경매 물품을 검색할 수 있는 페이지 퍼블리싱 작업을 진행했다. 현재까지 기획된 내용이 최소 기획이기 때문에 빠르게 퍼블리싱을 끝내고 다음주부터 api 연결과 로직 구현에 들어가야한다. 오늘 작업한 내용, 별거 없지만 간단하게 코드 복기해보기. 일단 컴포넌트를 Page와 하위 컴포넌트로 분리하고 Page 컴포넌트에서 각 하위 컴포넌트에 필요한 데이터를 props로 넘겨주는 방식을 사용하고 있다. 사실 api를 어디에서 호출해서 관리할 것인지가 좀 고민이다. 페이지 컴포넌트를 분리해서 우리 사이트에 어떤 페이지가 있는지 한 눈에 알..

# 작업일지 4 / 모달창 작업, 캐러셀(?) 구현, relative absolute, 유니온타입 활용

1. 모달창 만들기 : css relative, absolute 속성 활용 이미지를 클릭하면 큰 사이즈의 이미지가 띄워지는 모달창을 만들었다. 현재 컴포넌트 구조는 위 이미지처럼 Page컴포넌트와 여러개의 하위 컴포넌트로 구성되어있다. 처음에는 DetailPage 에 모달 컴포넌트를 두고 상태 끌어올리기나 전역상태로 모달을 관리해줘야한다고 생각했는데, 꼭 그러지 않아도 되었다. 처음에 이렇게 생각했던 이유는, 모달 컴포넌트가 전체 창을 덮어야 하는데 부모 컴포넌트의 사이즈때문에 레이아웃이 제대로 제대로 나오지 않을까봐. 결론적으로는 모달 이벤트가 발생하는 ImageList 컴포넌트에서 모달을 관리하면 된다. 가장 상위 컴포넌트인 Page 컴포넌트에 relative 속성이 있으면, 하위 absolute 는..

# 작업일지 3 / Tailwind CSS 로 글로벌 스타일 적용하기 w.@layer가 뭐징

오늘부터 목요일까지 4일간 빨리 퍼블리싱을 마치려고 한다. Tailwind 를 사용하기 때문에, 오랜만에 뚝딱뚝딱이 가능했다. 지난번에는 글로벌 스타일을 제대로 활용하지 못했어서 이번에 써보게 되었음. index.tsx 에서 참조중인 글로벌 css 파일 내에 @layer 키워드로 글로벌 스타일을 설정할 수 있다. 이 키워드를 사용하면 테일윈드의 세 가지 종류의 레이어에 직접 커스텀 클래스를 정의할 수 있다. 세 키워드란 base, components, utilities가 있다. 초기셋팅 때 글로벌 css 파일 가장 상단에 선언해주는 그 세 가지이다. 공식문서에 따르면, 일반적인 css가 cascading 으로 위에서 아래로 적용되기 때문에 아래와 같이 코드를 작성하면 두 버튼 다 black이 된다. 이런..

# 작업일지 2 / 프로젝트 셋팅, 작업 시작

프로젝트 셋팅을 진행했다. React + Ts + TailwindCSS 를 사용하기로 했다. 오늘도 esLint 에 대해 또 새로운 사실을 알게 되었다... 1. esLint 에서 경로를 찾지 못하는 문제가 발생할 수 있다. tsConfig 등 참조하는 파일의 경로가 모두 옳다면, vsCode 작업 영역에서 최상단 디렉토리를 부모가 아닌 client 디렉토리로 하여 다시 열기 바람. 2. 컴포넌트는 tsx 확장자로 만들자. 생각없이 .ts 를 사용했더니 아래와 같은 일이 벌어졌다. react-router-dom 의 문제라고 생각했는데 확장자 문제였음. 3. tailwindCSS + typescript 셋팅 중 eslint tsconfig does not include this file 에러가 발생할 때...

[알고리즘JS] 피로도 (프로그래머스 lv.2)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/87946 풀이 DFS 를 이용한 완전탐색으로 접근하면 풀 수 있는 문제. 처음에는 이중 반복문으로 탐색하려고 했는데, 순열 문제임을 알았음에도 반복문을 써서 정답을 도출할 수 없었다. 이중 반복문을 사용하면, 0-1-2, 1-0-1, 2-0-1 처럼 정해진 순서밖에 돌지 못하기 때문에 DFS 로 접근해야 한다. function solution(k, dungeons) { let answer = []; const N = dungeons.length; const visited = new Array(N).fill(0); const DFS = (fatigue, count) => { answer.push(..

[알고리즘JS] 연속 부분 수열 합의 개수 (프로그래머스 lv.2)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/131701 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 슬라이딩 윈도우와 Set 객체를 활용한 풀이 슬라이딩 윈도우는 아래와 같이 지정된 범위를 가지고 한 칸씩 움직이는 풀이 방법이다. 하나의 반복에서 다음 범위로 넘어가기 위해 맨 앞 요소를 빼고 맨 뒤 요소를 더한다. function solution(elements) { const set = new Set(); const N = elements.length; // 1 ~ n 길이까지의 ..

작업일지 #1 기획 / 프로토타입 / 스택 선정

3월 초까지 간단한 경매 사이트를 만드는 프로젝트를 진행하게 되었다. 1. 기획은 쌈빡하게 이번 프로젝트의 목적은 웹소켓과 리액트 쿼리를 사용한 데이터 통신 구현이다. 덤으로 새로운 기술 스택도 연구하고, 훈련하고 공부하는 목적이 크다. 지난 프로젝트에서 기획 때 볼륨을 너무 크게 잡았다가 다 쳐낸 기억이 있어서 이번에는 MVP 를 빠르게 완성하고 덧붙이는 방식으로 쬐끔 더 애자일하게 진행해보려고 한다. 기획은 아이디어 + 필요한 페이지를 먼저 추출하고 해당 페이지에 필요할만한 컴포넌트나 기능을 다같이 정해보는 식으로 진행했다. 뭔가 딱 쌈빡하게 하루만에 끝나서 굉장히 좋았다. 그 뒤에는 백엔드 팀원들까지 포함해서 다같이 와이어 프레임을 그려봤다. 이번에는 mobile first 방식으로 화면을 구현하려..

[알고리즘 JS] 귤 고르기(프로그래머스 Lv.2)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/138476 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(k, tangerine) { let count = 0; let sum = 0; let map = {}; // map으로 종류별로 갯수를 카운팅 tangerine.forEach(tan => (map[tan] = ++map[tan] || 1)); // 필요한 데이터는 각 종류별로 존재하는 갯수이므로, values 메서드 활용 // 각 값을 내림차순 정렬 c..

[알고리즘 JS] 타겟 넘버 (프로그래머스 Lv.2)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/17677 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 function solution(numbers, target) { let count = 0; const DFS = (level, sum) => { // 종료 조건 if (level === numbers.length) { if (sum === target) count++; return; } // 반복 조건 else { DFS(level + 1, sum + numbers[level]); D..

[알고리즘 JS] 뉴스 클러스터링(프로그래머스 Lv.2)

문제 https://school.programmers.co.kr/learn/courses/30/lessons/17677 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 // 조건에 따라 다중 집합을 만드는 함수 function getMultiSet(str) { str = str.toUpperCase(); str = str .split('') .map((s, i) => s + str[i + 1]) .filter(set => set.match(/[A-Z]{2,}/g)); return str; } // 원소의 갯수가 카운팅된 객체를 만드는 함수 functi..