Journal

TIL - 2022.03.03 목요일

이제까지 배운 것 1. 여러개의 요소에 useRef를 병렬로 적용하는 방법 위와 같은 페이지에서 상단의 서브메뉴를 눌렀을 때 페이지를 리로드하지 않고 내용 부분의 컨텐츠만 교체하고 싶었다. 레이아웃을 이용하자니 pageProps 내에 뿌려지는 컨텐츠 안에 레이아웃을 하나 더 만들어서 넣는 방법을 모르겠고. 한동안 고민하다가, 결국 메뉴 버튼와 내용 부분의 index를 연결해서 수동으로 display를 컨트롤하는 방법으로 해결했다. 그것을 위해 필요한 DOM 조작은 useRef를 배열로 넣어서 처리 완료. (props.buttonRef.current[0] = el)} > 내가 산 물건 (props.buttonRef.current[1] = el)} > 내가 파는 물건 (props.buttonRef.curre..

TIL - 2022.02.23 수요일

오늘 배운 것 1. 오늘의 집 클론코딩에 결제 시스템 입히기 아임포트를 활용해서 결제 기능이 작동하도록 하는 것에는 성공했다. 결제에 대한 return 값도 성공적으로 들어오는 것을 확인. 그런데 해당 return값에서 imp_uid 정보를 뽑아 포인트 등록 API에 쏘려고 하니 404 에러가 발생했다. 체크해본 요소들을 기록차 정리해둠. - 액세스 토큰 만료 문제인가? : 아님 - useMutation하는 함수 스크립트라 잘못되어있는가? : 결제 기능 정상 작동하는 정환님 코드와 비교해보았는데, 문제 없는 것으로 보임.. - 테스트하는 계정에 문제가 생겼나? : 그래서 다른 계정으로도 테스트해봄. 아님. 400 에러가 아니라 404 에러가 뜨니까 애초에 네트워크탭에 에러 메시지가 뜨지를 않는다. 그래서..

TIL - 2022.02.22 화요일

오늘 배운 것 1. 아임포트를 이용해서 결제 시스템 구축하는 법 아임포트라는 결제 솔루션 서비스를 이용해서 결제 시스템 구축하는 방법을 간략하게 배웠다. 실세로 아임포트 API 소스코드를 사용해서 user 정보에 결제한 만큼의 포인트가 충전되는 실습도 해봤다. 결제 시스템을 구축할 경우 개발 기간을 최소 1~2달 잡아야 한다고.. 2. 오늘의집 클론코딩 UI 정비 기능 우선 구현하느라 방치해뒀던 문의 및 문의 답변 부분 UI를 잡았다. 레이아웃의 Navigation도 해당 페이지의 asPath를 인식해서 자동으로 현재 위치에 하이라이트 표시가 되도록 만들었다. 관리자 메뉴에서만 볼 수 있는 버튼이나 수정/삭제 부분은 userInfo를 글로벌 스테이트로 넘긴 뒤 만지려고 남겨두었다. (구조 변경의 가능성이..

TIL - 2022.02.18 금요일

오늘 배운 것 1. 브라우저 저장소 브라우저 저장소에는 총 세 가지 종류가 있다. Cookie, LocalStorage, SessionStorage 종류 Cookie LocalStorage SessionStorage 비고 브라우저를 종료해도 데이터가 유지된다. 단, 만료 기한까지만 저장됨. 브라우저를 종료해도 데이터가 유지된다. 새로고침해도 데이터가 유지되지만, 브라우저를 종료하면 데이터가 사라진다. localStorage.getItem("key") // localStorage sessionStorage.getItem("key") // sessionStorage document.cookie // Cookie 세가지 저장소 모두 브라우저에 저장된 정보를 위와 같은 코드로 쉽게 읽어올 수 있다. 따라서 보안..

TIL - 2022.02.17 목요일

오늘 배운 것 1. 구조분해할당 (= 비구조화할당 / Destructure) 구조분해할당이란 객체나 배열을 단어 그대로 '분해'해서 사용할 수 있는 문법이다. ES6에 추가되었다. 간단한 예시를 통해 객체와 배열 두 가지 케이스의 구조분해할당을 살펴보자. 객체의 경우 const child = { name: "철수", age: 13, school: "다람쥐 초등학교" } // case1 const name = child.name const age = child.age const school = shild.school child라는 객체에서 원하는 값만 뽑아오고 싶을 때, child.name과 같은 문법으로도 해당 값을 뽑아올 수 있다. 하지만 이렇게 되면 객체에서 받아오고자 하는 데이터의 양이 많아질수록 ..

TIL - 2022.02.16 수요일

오늘 배운 것 1. Apollo-Client의 여러가지 쿼리 방식 Apollo-Client의 useQuery는 페이지가 렌더링 될 때 data라는 고정된 형태로 데이터를 fetch해온다. 실행함수에 담아서 내가 원하는 시점에 Mutation을 요청할 수 있는 useMutation보다 훨씬 유연성이 떨어진다고 볼 수 있다. 이러한 점을 보완하기 위해 Apollo Client에서도 다양한 쿼리 방식을 지원하는데, 오늘은 그 중 두 가지를 배웠다. useQuery useLazyQuery useApolloClient 컴포넌트 열리면 바로 실행 원하는 시점에 실행 원하는 시점에 실행 useQuery를 내가 원하는 만큼 지연시키는 방식이다. (원하는 시점에 useQuery를 실행하는 것과 동일) 내가 원하는 시점에..

TIL - 2022.02.15 화요일

오늘 배운 것 1. Next.js의 렌더링 원리 (pre-rendering과 hydration) 로그인 권한분기를 실습하기 위해 브라우저를 새로고침해도 accessToken이 유지되도록 만들어야 했다. refreshToken은 바로 익히기 조금 어렵다고 해서, 브라우저의 localStorage에 accessToken을 임시방편으로 저장해두기로 결정. 그런데 막상 localStorage에 accessToken을 setItem 하려 하니 다음과 같은 에러가 발생했다. if (localStorage.getItem("accessToken")){ setAccessToken(localStorage.getItem("accessToken") || "") } Next.js의 diffing과 hydration때문에 발생하..

TIL - 2022.02.14 월요일

오늘 배운 것 1. 정규표현식 정규표현식을 배웠다. 이 부분은 별도의 메모가 필요할 것 같아서 따로 포스팅했다. https://guuumi.tistory.com/102 [Javascript] 정규표현식 기초 - 정규표현식 패턴 정규표현식이란? 정규표현식이란 특정 패턴의 문자열을 찾기 위한 표현 방식으로, 잘 이용하면 Javascript를 이용한 검증 과정을 보다 간단하게 만들 수 있다. 가장 간단하게 접근할 수 있는 test 메 guuumi.tistory.com 2. 글로벌 스테이트 / 로그인 인증(Authentication) 및 인가(Authorization) 로그인 인증 과정이 어떤 방식으로 발전해왔는지와 그러한 과정을 거쳐 정리된 현대적 로그인 인증 방법에 대해 배웠다. (샤딩을 이용하는 방식 / ..

TIL - 2022.02.10 목요일

오늘 배운 것 - 오늘은 Midterm을 봤다. 8시간 안에 게시판 하나를 구현했다. (기능 구현을 할 줄 아는지 여부에 초점을 맞춘 시험이었기 때문에 css는 최소한으로만 함) 프로젝트 생성부터 시작하는 시험이다보니 레이아웃부터 다 만들어야했다. css grid를 시험해 볼 기회다 싶어서 냅다 썼다. 확실히 레이아웃 잡을 때에는 좋다. 코드 분량이 확 줄어들더라. // 각각 분리된 컴포넌트의 emotion을 모아놓은 것이라 컴포넌트 명이 겹칠 수 있음 // Next.js 기반으로 작업했다. // Container const Container = styled.div` display:grid; grid-template-columns: 280px 1fr; grid-template-rows: 120px 280..

TIL - 2022.02.09 수요일

오늘 배운 것 - 게시글 검색 기능을 구현했다! (lodash 디바운스 이용) - 클래스 컴포넌트랑 함수형 컴포넌트를 비교하는 포스팅을 작성하며 비로소 life cycle, state와 React hooks의 차이를 이해했다. 역시 시간이 조금 더 걸리더라도 내가 이해한 내용을 글로 적어보는 것이 공부에 도움이 (많이) 된다. - 로딩 페이지를 만들어서 영화 랭킹 페이지에 넣어줬다. 로딩 페이지도 아예 컴포넌트로 분리해서 보관해놓으면 편할 것 같다. - 오늘은 체력이 많이 부친다.. 👻 기능 구현을 우선해서 목표했던 최소 작업만 완료했다. 일찍 집에가서 쉬어야겠다. 체력 관리도 중요한 Task니까. 💪 앞으로 할 것 - 내일 중간 시험 잘 보기 - 리뷰 게시판 : 게시글 넘버링 넣어주기 / 이미지 입력 ..