Age of Discovery

이번 주차는 인스타그램을 클론코딩 하기로했다...! 생각보다 주제가 빨리 정해졌고 API설계도 금방 완료돼서 순항하게 될 줄 알았다 그러나 주말내내 스타일드컴포넌트로 css작업을 한땀한땀 하려니까 현타가 와서 '이거 맞는건가...' 싶었다ㅋㅋㅋ 그래도 어찌저찌 뷰는 완성....! 일요일에는 하루종일 파이어베이스작업에 매진했는데 자꾸 한끗차이로 마지막에 업로드가 안되는 버그가 있어서 계속 찾아보다가 매니저님한테 도움을 요청해놓은 상태 .... 만약 매니저님 면담 후에도 안될 시 백엔드 분들에게 양해를 구하고 base64로 다시 회귀해야 될것같다.. 파이어베이스 쓰면 진짜 편할거 같은데 이것도 비동기통신을 해야되다보니 까다로운 조건이 많았다. 게시글 댓글 CRUD작업 후에 다시 돌아오겠다...!

길지만 짧았던(?) 6주차 미니 프로젝트를 끝내고 회고를 해보려고 한다. https://www.youtube.com/watch?v=QHJPkb07igE 중고물품 거래하는 사이트였으며 처음에 구현하려했던 기능은 리액트와 리덕스를 사용한 게시글, 댓글 CRUD외에도 찜하기, 검색, 카테고리 분류 등 많았으나 시간이 부족한 관계로 이번에도 게시글과 댓글의 CRUD만으로 만족해야했다.... 슬프다..... 하지만 정말 많이 배웠다 전부 소화할 수는 없겠지만 습득했던 내용이 많았다. 처음에 백엔드 분들과 API명세서를 작성하고 데이터를 주고받기위해 연동하는 과정에서 오류가 무수히 많았지만 소통이 잘돼서 큰 문제없이 넘어가게 됐다. http와 https의 관계 그리고 JWT와 세션방식의 차이 등을 알게 됐으며 JW..

시간을 측정해보니 하루 17시간 이상은 컴퓨터앞에 앉아있는 거 같은데 온전히 코딩에 집중하는 시간은 12~13시간정도 되는 것 같다. 죽을 것 같다 ㅎㅎ 맡은 일이 있고 끝까지 해내야 하니 모든 신경이 프로젝트에 쏠리고 그만큼 집중은 잘되지만 피로감이 심하다 현재 게시글 CRUD까지는 완성이 된 상태이고 리덕스 미들웨어로 API통신을 하고 있긴 하지만 미들웨어를 통한 API 통신이 꼭 필요한가에 대해서는 의문이 남는다... 매니저님도 이유가 타당하다면 미들웨어를 사용하지않아도 된다고 하는데 아직 헷갈린다. 그래도 일단 해보자 코드는 나중에 리뷰하기로 하고 다시 프로젝트하러 이만

이렇게 오랫동안 블로그 공백기를 가져본적이 없었는데 약 일주일정도 포스팅을 안했다. 5주차 프로젝트가 너무 힘들어서 그랬나.... 5주차 땐 리액트 4명이 모여 팀과제를 했고 그럭저럭 겨우 마감했다. 그에 대한 글은 가볍게 스킵하고 6주차 출바알~ 드디어 리액트와 스프링 프론트와 백이 한 팀을 이뤄 미니프로젝트를 진행한다. 분명 들리는 소문에 의하면 쉬어가는 주차라고 했던 것 같은데 기능을 하나하나 추가하다보니까 더 달려야되는 한 주가 될듯하다. 우리 조는 중고나라와 당근마켓을 합쳐 당근나라라는 프로젝트를 진행하게 됐는데 딱 봐도 중고물품 관련 플젝이라는 감이 오지 않는가? 와이어프레임은 이런식으로 짜게됐고 구현할 기능은 위와 같다. 프론트 인원 2명에 기간이 일주일이라 저걸 다 리액트와 리덕스로 소화해..

지금까지 react-redux로 만든 투두리스트를 리덕스 툴킷으로 덮어씌워보자 툴킷을 앞으로 사용해야하니 익숙해지기 위함인데 기존의 코드를 뜯어고치고 변경해줘야한다는 막연한 두려움때문에 '그냥 새로 만들까...'하다가 이정도 리팩토링도 못하면 나중엔 회피에 대한 대가를 강하게 치를까 무서워 그냥 시도해봤다. 생각보다 간단하게 마무리됐다. import { createStore } from "redux"; import { combineReducers } from "redux"; import todo from "../modules/todos"; const rootReducer = combineReducers({ todo, }); const store = createStore(rootReducer); expor..

아무래도 코드설명을 하면 글이 길어지다보니 간단한 투두리스트 프로젝트도 블로그 포스팅이 나눠질 수 밖에 없는 듯..... 이제 남은 컴포넌트인 TodoItem과 Detail 그리고 모듈폴더의 todos.js 스토어를 살펴보자 const TodoItem = ({todo, i}) => { const dispatch = useDispatch(); const onDelete = (id) => dispatch(deleteTodo(id)) const onToggle = (id) => dispatch(toggleTodo(id)) const navigate = useNavigate(); const isDone = todo.isDone; return ( {navigate("/detail/" + todo.id)}}> 상세..

Redux 투두리스트 코드 하나하나 뜯어보자 기나긴 여정이 되겠지만 내가 왜 이런식으로 코드를 짰는지 복기할 수 있기 때문에 귀찮음을 감수할만한 충분한 가치가 있는 시간이라고 생각한다. const App = () => { return ( ) } 상세페이지 기능을 넣기전까지만해도 Route가 필요없었기 때문에 이런모양은 아니었지만 App.js를 이렇게 짜게된 건 원인이 아닌 필요에의한 결과라고 보면 될 것같다. Route로 경로를 설정해준 후 컴포넌트를 넣어준다. 그럼 URL에 위와같이 입력했을 때 해당 페이지로 이동할 수 있게된다. 단순 "/"경로는 메인페이지를 뜻하며 처음 실행될 때 보이는화면이 TodoContainer라는 컴포넌트가 보여지게 된다. /detail/:id 는 콜론뒤에 임의로 지정해줄 수..

다른 기술을 입혀서 리팩토링하는 것도 능력이라는데 그런 능력은 거저 주어지지 않는가보다.... 3주차에 useState만을 이용해서 구현한 투두리스트를 이번 주차에선 Redux로 만들어야한다. 리덕스를 생전 처음 접하는 건 아니었지만 약 두달전에 강의로만 접해보고 추가로 뭘 만들어보진 않았기 때문에 머릿속에서 리셋이 됐는지 이번주차에 제공된 학습자료가 눈에들어오질 않았다. toolkit대신 react-redux를 배워야하는 입장이라 action creator랑 value 그리고 초기상태값과 리듀서를 전부 따로따로 선언해줘야 했다. 실은 저번과제 위에 리덕스패키지만 설치해서 그대로 입혀보려고했으나 좌절을 느끼며 처음부터 하고있는 실정... 자 그럼 폴더구조랑 컴포넌트 구성을 봐보자. 구성자체는 전과 같지만..

🟢 대표적인 3가지 리렌더링 조건 Props 변경 (=> properties의 줄임말) State 변경 부모 컴포넌트 렌더링 1️⃣ Props 변경 Props 업데이트가 일어나면 리렌더링을 한다. Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다. 부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고, 모든 하위 컴포넌트에 대해 리렌더링이 발생한다. 2️⃣ State 변경 State 업데이트가 일어나면 리렌더링을 한다. 리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다. 리액트는 변화를 바로바로 감지하여 화면에 변경사항을 보여주기 때문이다. 3️⃣ 부모 컴포넌트 렌더링 부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한..

기술매니저님과 면담 후에 스스로에게 들었던 생각 '리액트를 왜 쓰는지도 모른채로 좋다니까 사용하고 있었구나' 리액트는 기본적으로 가상 DOM을 사용하여 필요한부분만 렌더링하기 때문에 DOM에 직접 접근하면 안된다. let title_input = document.querySelector('.title-input') 이런식으로 직접접근하면 안된다는 것이다 input태그 두개를 저따구로 제어해놓고 3일만에 개인과제 끝냈다고 좋아하던 오만한 나의 모습을 반성합니다. 그럼 어떤식으로 접근을 해야하느냐? ref 훅을 사용하든지 아니면 state와 props를 사용하는 것이다. ref도 꼭 필요할때만 사용해야한다. (권장되는 방식은 아닌듯..) onChange함수와 구조분해할당을 이용해서 DOM을 리액트스럽게 제어..

위 사진에서 List.js와 Todo.js 컴포넌트를 파헤쳐보자 위와 같이 완료버튼을 누를시 완료!버튼을 취소!버튼으로 변경한 후 밑 줄로 내리는 작업이다. List.js 파일안에서 const setBtn = (todo) => { let new_arr = [...arr] let new_obj = new_arr.map(user => { if ( user.key === todo.key ) { if (user.isDone === '완료!') { return ( {...user, isDone : '취소!'} ) } else { return ( {...user, isDone : '완료!'} ) } } else { return {...user} } }) setArr(new_obj); } todo파라미터를 받아온 후..

7월 22일에 리액트 기초 주간이 시작되었다..!! 다른 것들은 잠시 뒤로하고 주특기인 리액트를 다듬을 수 있게 되어 개인적으로 가장 기대하던 시간이었다. 이번 주는 개인과제와 팀과제가 있는데 개인과제는 투두리스트를 만든 후 깃헙에 커밋하는 것이고 팀과제는 리액트에 대한 지식을 쌓으며 묻고답하는 시간을 가지는 것이다. 개인과제를 빨리 끝낸 후 팀과제 및 발표준비를 하려 했으나 생각한 것보다 일찍 끝내지 못했고 이제서야 마친 후 글을 작성하는 중이다 ㅋㅎㅋㅎ 개인과제의 조건은 투두리스트 CRUD 기본기능을 갖추는 것, 그리고 폴더구조를 동일하게 하는 것과 컴포넌트구성을 예제와 일치시키는 것이었다. 다만 hook은 state만 사용하는 것이 중요했다. Create랑 Delete만 먼저 다뤄보자! 내가 짰던 ..

let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); } //console.log(a); console.log(b); hi(); console.log(b); 위 코드를 실행해보고 주석을 해제한 후 왜 에러가 나는지 봐보자. 위 코드를 실행해보니 다음과 같은 결과가 출력됐다. 전역변수에 이미 선언된 변수가 있다하더라고 함수안에서 같은 변수를 새로 선언하고 할당하면 초기화되어 함수안에서만 사용할 수 있는 새로운 변수가 생성된다. 그리하여 console.log(b); hi(); console.log(b); 첫째 콘솔로그와 둘째 콘솔로그는 전역변수에 있는 값이 출력되고 hi() 함수를 실행했을 땐 그 안에서 할당된 변수가 출력되..

JS에서 함수를 선언하는 방법은 두 가지가 있다. function step_1 () {} 위와 같이 선언하는 방법은 함수선언문이고 let step_1 = function () {} 위의 함수 선언은 함수표현식이다. 두 함수 전부 기능은 동일하다. 다만 호이스팅의 영향을 받는지 안받는지의 차이가 있다. 함수 표현식먼저 살펴보자 바로 전 글에서 var와 let의 호이스팅에 대해 알아보았는데 이번 함수표현식에서도 같은 원리가 적용된다. var step_1 = function () { console.log('위르겐') } step_1() let step_2 = function () { console.log('위르겐') } step_2() 위 두 함수는 각각 var와 let으로 함수를 작성했으나 문제 없이 작동된..

자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석한다. 그게 Hoisting이다. ​ function 함수(){ console.log(이름); var 이름 = 'Klopp'; } 이런 함수를 만들었다고 가정할 때 함수를 실행하면 콘솔에 이름이라는 정의되지않은 변수가 먼저 찍혀야하니 에러가 떠야한다. (원래대로라면) ​ 하지만 에러대신 undefined가 뜬다 ​ 그 이유는 function 함수(){ var 이름; console.log(이름); 이름 = 'Klopp'; } 자바스크립트라는 문법은 호이스팅이 일어나기 때문에 위의 함수처럼 인식을 하고 위에서부터 읽어내려간다. 그럼 var 이름;