Journal/Today I Learned

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니까. 💪 앞으로 할 것 - 내일 중간 시험 잘 보기 - 리뷰 게시판 : 게시글 넘버링 넣어주기 / 이미지 입력 ..

TIL - 2022.02.08 화요일

오늘 배운 것 1. Firebase - Firestore db 삭제 기능 구현 Firebase db 삭제 기능을 구현하기 위해 내게 필요한 것은 총 두가지였다. - 1. 해당 문서의 id를 뽑아오는 기능 - 2. 해당 id를 매개로 문서를 삭제하는 기능 Firebase 공식 문서 정말정말 불친절하다.. 그래도 여러 선지자들의 인도를 잘 짜맞춰서 기능 구현에 성공했다. 첫 번째, 해당 문서의 id를 뽑아온다. useEffect(() => { const fetchWishBoard = async () => { const wishBoard = collection(getFirestore(firebaseApp), "wishBoard"); const result = await getDocs(wishBoard); //..

TIL - 2022.02.07 월요일

오늘 배운 것 1. progreSQL 으로 API 만들기 실습 (typeorm 사용) typeorm을 이용해서 progreSQL API 만드는 실습을 했다. 지금까지 계속 써왔던 graphQL API를 직접 재현해보는 작업을 했다. 백엔드는 처음이라 그런지 코드를 치면서도 이게 뭔지 감이 안와서 힘들었다. 온통 어두운 골목에서 간신히 벽 더듬으며 걷는 느낌이라고 해야하나.. 하지만 이것도 익숙함의 문제이겠거니 싶다. 프론트엔드 코드야 접해온 기간이 길다보니 금방 적응했지만, 백엔드 코드는 낯설다보니 더 버겁게 느껴지는 듯. 많이 써봐야 익숙해지겠거니 생각하며 나름 열심히 뚜닥거려봤다. 그래도 오늘 CRUD API를 각각 1번 이상씩 구현하는 것에 성공했다. 작동하는 것도 확인했다. 소소한 성취. 2. d..

TIL - 2022.02.04 금요일

오늘 배운 것 1. 백엔드-프론트엔드 Architecture 오늘은 브라우저와 프론트엔드, 백엔드, DB가 연결되어있는 구조를 배웠다. 이러한 구조를 Architecture 라고 한다. 개발이란 기본적으로 협업이기 때문에, 서비스를 구동하기 위해 각 서버들이 어떤 방식으로 연결되어있는지 기본적인 구조는 이해하고 있어야 한다. 특히나 서버 사이드 렌더링(SSR) 방식을 사용하거나 모바일 앱 등을 개발하는 경우, 프론트엔드 개발자에게도 서버에 대한 충분한 이해가 필요하다. 프론트엔드, 백엔드, DB(데이터베이스)는 각각의 서버 프로그램이 설치되어 돌아가고 있는 '서버 컴퓨터'이며, '서버 컴퓨터'는 보통 컴퓨터를 생략하고 '서버'라고 부른다. 1. 브라우저가 프론트엔드 서버에 데이터 요청 2. 프론트엔드 서..

TIL - 2022.02.03 목요일

오늘 배운 것 1. 넷플릭스 리뷰 커뮤니티 - 댓글 수정 및 댓글 무한스크롤 기능 구현 댓글 목록 컴포넌트에서 각각의 댓글 Item들을 별도의 컴포넌트로 분리한 뒤, 수정 기능을 구현했다. react-infinite-slider를 이용해서 무한스크롤 기능도 구현 완료했다. 중간에 이유를 알 수 없는 오류가 자꾸 발생해서 고생했는데, 전부 오타 혹은 함수명 지정을 잘못한데에서 오는 에러였다. fetchBoardComments를 fetchBoards로 쓴다던가, page를 pages로 쓴다던가.. 2. 넷플릭스 리뷰 커뮤니티 - 메인 랜딩페이지 제작 컨텐츠를 다루는 서비스는 컨텐츠 외적인 요소가 최대한 간결해야 한다고 생각한다. 랜딩 페이지를 어떻게 만들까 한참 고민하다가, 영화라는 이미지를 강조하기 위해 ..