Headwing

이번주는 처음으로 백엔드와 협업해본 주차였다. 어찌보면 CRUD 자체는 지난 주와 크게 다르지 않았지만 그 외적인 부분에서 구현해야할 기능들이 있었다. 로그인 및 회원가입 기능과 게시글 좋아요 기능이 추가되다보니 이 부분에서 새롭게 배우는 부분이 많았다. 먼저 이번주에 완성한 결과물은 다음과 같다. 유튜브 링크 http://hh99-mini5-codingvibe.s3-website.ap-northeast-2.amazonaws.com/ 코딩할 때 좋은 플레이리스트라는 컨셉으로 코딩할 때 발생하는 상황에 따라 카테고리를 정하였다. 메인페이지에는 카테고리와 좋아요를 많이 받은 플레이리스트 Top3가 나온다. 카테고리별 페이지다. 옆에 메뉴바는 position:fixed로 만들어서 스크롤해도 올라가지 않는다. ..

일단 로컬스토리지에 토큰을 저장한 뒤에 토큰 값이 있으면 isLogin 변수를 true 혹은 false로 설정해주고 이것에 따라 로직을 다르게 설정 보통의 토큰이 만료된 경우 만료되자마자 따로 처리를 하는 것이 아니라, 어떤 기능을 클릭했을 때 로그인을 하라고 뜨게 만든다 -> 요즘에는 토큰 만료 시간을 거의 무제한으로 한다고 함, 굳이 신경쓸 필요 X false라면 상세페이지에 갔을 때, 하트를 누르면 로그인 하라는 alert를 띄우고 true라면 하트를 채워진 하트로 바꾼 뒤에 api호출을 하여 데이터를 바꾸라고 함!!! 즉 로그인한 경우 상세페이지에 들어갔을 때 get 요청 시 해당 유저가 좋아요를 눌렀는지 여부를 확인하는 불리언 값을 예를 들면 heartpush 같은 변수로 설정하여 받아온 뒤에 ..

이번주는 정말 너무 너무 바빴다. 학교 시험도 있었고 리액트 협업 주차다 보니 전 주에 비해 배우는 것들이 어려웠다. 사실 이번주에 겪은 트러블 슈팅들을 하나도 빠짐없이 다 TIL로 썼다면 얇은 책 한권이 나올 정도로 겪은 트러블 슈팅이 많았고 또 그걸 통해 배운 것이 많았던 주차였다. 그래서 이번주에 배우고 겪은 개념들과 문제들을 주요 키워드를 중심으로 러프하게 정리해보고자 한다. 최종적인 결과물은 다음과 같고 배포까지 성공적으로 마쳤다. 크리스마스에 어떤 유형으로 보낼지(가족과 함께, 연인과 함께, 혼자서, 부모님과 함께)에 따라 카테고리가 나눠지고 카테고리 별로 게시물 작성및 게시글들을 볼 수 있다. React App christmas-project-wruding-christmas.vercel.ap..

이번주는 리액트 숙련 주차로 다양한 것들을 배웠다. 리액트의 기본적인 훅인 useEffect와 리덕스, 라우터에 대해 배웠다. 그리고 지난 주에 한 과제를 배운 리덕스와 라우터를 적용해 바꿔보며 응용해보았다. 생각보다 일찍 끝나서 코딩애플 강의도 좀 듣고, 마지막 남은 학기 시험도 보고 왔다. 리액트 훅이 나오기 전에는 컴포넌트의 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다고 한다. 물론 state 관리도 가능했기 때문이다. 클래스형 컴포넌트를 다음과 같이 세밀하게 컴포넌트의 생명주기를 일일히 코드로 설정해주는 방식이다. 라이프 사이클들은 크게 세 가지로 나눌 수 있다. 생성될 때 (마운트 될 때 - mount) constructor, render, componentDidMount ..

setState의 함수형 업데이트방식 아래의 일반 사용법의 경우 setNumber(number + 1) 를 3번 호출했지만 number가 1씩 증가한다. 그 이유는 setState의 비동기적 특성 때문이다. 리액트가 효율적으로 렌더링하기 위해 여러 개의 상태 값 변경 요청을 batch(일괄 처리) 처리하기 때문이다. 구체적으로는 setState가 여러번 호출되면 인자로 전달된 각 객체를 추출하여 단일 객체로 merge 하는데 이런 과정은 '오브젝트 컴포지션' 이라고 한다 . batch 처리의 이유는 당연히 성능 이슈 때문이다. 리렌더링을 발생하는 setState가 일어날 때마다 리렌더링이 일어난다면 얼마나 많은 렌더링이 일어나겠는가? 그렇다면 setState를 사용하기가 두려워질 수도 있을 듯하다. //..

오늘은 어제 생겼던 hover에 대한 의문점에 대해서 이유를 찾게 되었다. css에서 사용하는 hover를 클래스에 적용할 때, 클래스명을 쓰고 띄어쓰기를 없이 ":hover"를 붙이면 해당하는 클래스에만 직접적으로 적용이 되는데, 클래스명 옆에 띄어쓰기를 한 칸 하고 ":hover"를 붙이면 그 클래스에 속한 자식 태그들에게 적용이 되는 것이었다!!! 이 부분이 너무 신기하기도 했고, 한편으로 hover를 적용할 때 버튼이 여러개면 클래스명을 부여하기 귀찮거나 ">"을 사용하여 자식 태그를 지칭하기 귀찮을 때 아주 간편하게 쓰기 좋은 기능이라고 생각했다. hover 띄어쓰기가 영향을 미치는 이유 | 코드잇 .submit-btn : hover{ box-shadow: 0 2px 4px 0 rgba(0, 0..

오늘은 항해99의 주특기 숙련주차 과제인 Todo 리스트 페이지를 리덕스와 라우터를 사용하여 만들기를 완료하였다. 입문 주차에는 그냥 useState로만 만들었는데 리덕스를 사용해서 전역으로 state를 관리하는 부분이 낯설면서도 생각보다 할 만했다. 사실 저번주 금요일만 해도 자바스크립트 문법 공부가 너무 힘들어서 (딥다이브를 괜히 건들였다...ㅠ) 울적했는데, 저번주 토요일부터 계속 리액트를 하면서 개발이 너무 재밌있었다. 어려운 문법 공부보다 구현하는게 나하고 훨씬 잘 맞는 것 같다. 잠을 많이 못잤는데도 개발만 하면 너무 재밌어서 졸리지도 않고 기분이 좋아졌다. 내 생각대로 잘 돌아가는 것도 재밌고, 잘 안돌아가도 여러번 시도끝에 성공해내는 것도 재밌었다.ㅎㅎㅎ아무래도 개발이 천직같다고 느낀 하루..

이번주는 항해에서 주특기 입문 주차였다. 나의 주특기인 리액트로 간단한 Todo 리스트를 작성할 수 있는 페이지를 만드는 것이 과제였다. 제목과 내용을 등록하면 진행중인 todo 리스트에 등록되고 완료버튼을 누르면 완료된 리스트에 추가가 된다. 반대로 완료된 리스트에 있는 todo게시물의 취소버튼을 누르면 다시 진행중인 todo로 바뀌게 된다. 삭제를 누르면 해당 todo 게시물이 삭제된다. Vercel을 통해 배포까지 진행하였다. React App todo-pearl-ten.vercel.app 이번 과제로 기본적인 리액트 개념인 state, props, 리렌더링에 대해 배우게 되었다. 리액트는 SPA 방식으로 MPA와 다르게 가상돔을 사용하여 변경된 부분만 따로 요청하는 방식이다. 그렇다보니 useSt..