React의 함수형 컴포넌트와 Hooks의 useState, useEffect 에 대해서 정리해보자!!

wecode 1차 팀프로젝트로, 영국 60년 정통 패션 브랜드 닥터마틴 사이트를 2주간 클론 프로젝트하고 난 회고록!!!

닥터마틴 사이트 중에서 제일 도전하고 싶었던!! scroll 위치에 따라 스타일이 바뀌는 이벤트 결국 구현한 이야기👍

열심히 구현중인 닥터마틴 사이트!! 오늘은 그중에서 Product List 페이지의 3-2-3-1 레이아웃을 구현하기 위해 짰던 로직에 대해 정리해보기로 한다~!

팀프로젝트와 병행하면서 진행된 위코드 페어 코드카타 3주차!! 이제 슬슬 문제를 읽으면 어떻게 접근해야 할지 감이 좀 온다!! (그치만 어려운건 매한가지...)

실제로 프로젝트를 진행하면서 알게된 꿀팁 총 정리!!!! (config.js 파일, Object.entries로 객체 쉽게 쪼개기(?), toLocaleString()로 숫자 1000 단위마다 쉼표 달기, && 와 || 를 조건문처럼 사용하기 등등~!)

wecode의 꽃, 팀프로젝트가 시작되었다!!!! 닥터마틴 페이지를 맡게 되었는데, 본격적으로 프로젝트에 들어가기 전에 가벼운 소감(?)을 정리해보았다!!!

아직도 VScode 마우스랑 command+C command+v 만 쓰는 사람 있나???? VScode 단축키 다양하게 쓰고 간지폭발 개발자 되자✨

위코드의 꽃, 위코드의 하이라이트, 위코드의 자랑(?)!!!!! 대망의 팀 프로젝트가 코앞으로 다가왔다!! 그 전에 프로젝트 시작 전 초기 세팅에 관한 내용을 총 정리해본다! (CRA 설치 및 설정과 폴더 정리에 관해 다 뽀개버리자!)

위코드 페어 코드카타 2주차!!넘나리 어렵다.....😅5문제중에 2문제는 못풀었다....우하핫...... 일단 푼거라도 정리.........

오늘은 백앤드의 DB와 프론트앤드의 껍데기를 합쳐보는 세션이 있었다!!! 완전 짱잼 졸잼!!!! post 와 get 을 사용해서 백앤드와 데이터를 주고받는 과정에 대해 알아보자!!!

react로 위스타그램 만드는거에 너무 심취해버려서....(반성😭) 여러가지 기능을 구현했다. 까먹고싶지 않은 코드를 정리해본다!! (검색창 클릭시 레이아웃 변경, z-index, Heart 버튼 누르면 애니메이션!, 댓글 수 카운트 기능!)

React의 component는 생성 → 업데이트 → 제거 단계를 차례로 겪는 생명 주기(Life Cycle)를 가진다. Life Cycle의 메서드와 componentDidMount 메서드로 json API를 가져오는 방법에 대해 알아보자!

어제 react 세션에서 과제로 나왔던 monsters를 깨부순 후기💪 map 과 filter에 대해 더 잘 알게 되었고, component 의 key 값에 대해서도 쬐끔 정리해보기로!!!

인증 / 인가는 API에서 가장 자주 구현되는 기능중 하나!! 백엔드뿐 아니라 프론트엔드도 꼭 알고있어야 하는 개념으로, 잘 정리해서 소화해보자!!!

오늘은(사실 어제는...🤣) 프로젝트 대비를 위한 초기 프로젝트 세팅에 대한 세션이 있었다. 그 중에 react-router 를 이용해 링크를 걸었던 내용에 대해서 정리해보기로!!!

WeCode 3주차부터는 기존에 html, css, javascript로 만들었던 사이트를 react로 바꾸는 과정이었다! 필수(?)과제였던 login 버튼과 main 댓글 창 코드 정리!!!

wecode 3주차 중간 test로 나왔던 문제를 고대로 다시 따라 해보면서 git/github에 대해 더 정리해보기로!! branch 어렵당😭

위코드 3주차부터는 옆자리 짝이랑 페어 코드카타가 진행되었다!생각보다 재밌고 어려웠다..... 1주차를 마무리하면서, 이번주에 나왔던 코드카타 5문제를 정리해보기로!!!

React 어렵다! 어렵지만 재밌다!재밌는데 왕왕짱짱어렵다! 그래도 재미있는 React의 매력 뽀인트 중 하나인 Component에 대해 정리해봄!