책 읽다가 코딩하다 죽을래

GD프로젝트 리액트 기초 프론트엔드의 꽃, 리액트 마지막 주차도 드디어 끝이 났다. 이번 5주 차에 있었던 일을 바로 기술해보겠다. 목차 1. 새롭게 배운 내용 2. 결과물 3. 5주동안 배운 내용 간단 요약 4. 후기 1. 새롭게 배운 내용 더보기 1 - 1 middleware 미들웨어는 단어 뜻 그대로 소프트웨어와 운영체제 가운데에서 중재하는 역할을 한다. 미들웨어 종류는 여러 가지인데 우리가 5주 차에 배웠던 미들웨어는 firebase내에 있는 firestore와 redux 데이터를 연결하는 미들웨어인 redux-thunk를 배웠다. redux-thunk는 액션과 리듀서 가운데에서 중재하는 역할을 한다. 더 자세히 말하자면 사용자가 이벤트를 일으켜 액션이 일어나고 -> 미들웨어가 실행 -> 리듀서 ..

GD프로젝트 리액트 기초 프론트엔드의 꽃, 리액트 4주 차를 무난히 끝을 냈다. 4주 차에선 firebase 위주로 실습을 하였다. 프론트가 백 요소도 다뤄보니 재미가 있었다. 목차 1. 새롭게 배운내용 2. 결과물 1. 새롭게 배운 내용 더보기 1주 차에 서버리스를 배웠었다. 서버리스는 서버나 스토리지 같은 물리적인 하드웨어를 구입하지 않아도 AWS 같은 클라우드 시스템에서 서버를 빌려오는 것이다. 이런 클라우드 서비스에는 IaaS(인프라형 서비스), PaaS(플랫폼형 서비스), SaaS(소프트웨어형 서비스) 등등 있는데 우리가 배운 Firebase는 BaaS(Backend as a Service)가 된다. Firebase는 데이터베이스 서버 제공, 소셜 서비스 연동, 파일 시스템 등을 API 형태로 ..

GD프로젝트 리액트 기초 프론트엔드의 꽃, 리액트 3주 차도 무난히 끝을 냈다. 이번 3주차에 있었던 일을 바로 기술해보겠다. 목차 1. 새롭게 배운내용 (redux, router) 2. 결과물 3. 배운 내용 적용 1. 새롭게 배운 내용 1 - 1 Router 더보기 라우팅이란 페이지를 나눠주는 것이다. 우리가 React로 작업을 할 때 create-react-app을 이용하든 웹팩을 이용하든 html 파일은 index.html 하나뿐이라는 것을 알 것이다. 이렇게 어플리케이션 안에 html 파일이 하나밖에 존재하지 않는 경우 우리는 이것을 SPA(Single Page Application)이라 부른다. 이렇게 html파일이 하나가 있으면 좋은 점은 사용성이다. 페이지를 이동하거나 웹사이트 내에 정보가..

GD프로젝트 리액트 기초 프론트엔드의 꽃, 리액트 2주 차가 시작되었다. 요번 2주차에 있었던 일을 바로 기술해보겠다. 목차 1. 새롭게 배운 내용(SCSS, Styled Component, 가상 DOM) 2. 결과물 1. 새롭게 배운 내용 1 - 1 SCSS 더보기 SCSS는 SASS의 세 번째 이름이다. 그럼 SASS는 무엇이냐면은 Sass : Syntactically Awesome Style Sheets : 문법적으로 편하게 css를 작성하는 언어 근데 이 SASS는 CSS와 호환이 잘 안되어서 생긴 것이 SCSS이다. SCSS의 장점은 CSS를 편하고 더욱 가독성 있게 작성하기 위한 것이다. SCSS를 사용했다 해서 CSS보다 더욱 아름답고 화려한 이펙트가 생기는 것이 아니다. 그럼 이제 SCSS..

직업상담사님이 구로 청년 이룸에서 진행하는 GD프로젝트를 추천해주셨다. 자세한 내용 [클릭] 커리큘럼을 보시면 프론트는 React 백은 스프링에 깊게 배운 후 공통적으로 알고리즘과 취업관련된 내용을 2달 동안 탄탄하고 알차게 배우는 거 같아 보였다. 평소에 React를 좋아하는 저로썬 이건 못참지...ㅋ 저질러 아니 지원해버렸다.. 목차 1. GD프로젝트에 대해 2. 새롭게 배운 내용(javascript scope, 웹 동작 방식, 서버리스) 3. 앞으로의 방향성 1. GD프로젝트에 대해 더보기 GD프로젝트는 스파르타 코딩 클럽이라는 플랫폼을 통해 교육생들에게 온라인 강의 수업을 지원한다. (원래는 구로 청년 이룸에서 오프라인 수업을 지원할 예정이었는데 시국이 시국인지라 온라인 수업으로 대체된 거 같았다..

오늘은 setState의 대체 함수인 useReducer에 대해 배워보겠다. const [state, dispatch] = useReducer(reducer, initialArg, init); useReducer의 원형은 이렇게 생겼으며 첫 번째 인자인 reducer는 action이며 두 번째 인자인 initalArg은 초기 state 값이다. 세 번째 인자는 state를 지연시켜서 설정하는데 쓰이는 인자인데 첫 번째 인자와 두 번째 인자만 알아도 useReducer를 사용할 수 있으니 이번 수업에는 세 번째 인자는 다루지 않을 것이다. 우리는 오늘 회원가입 폼을 활용함으로써 useReducer를 실습해볼 것이다. 일단 회원가입 폼을 만들어보자 일일이 다 만들 생각은 없고 antd design에서 폼을 ..

Git에는 과거에 있었던 커밋을 수정하는 revert 기능이 있다. 요번시간에는 간단한 실습을 통해 revert 기능을 알아보자 사용 git GUI : SourceTree IDE : 메모장 (VSCode나 인텔리제이를 써도 무관한다). 일단 git init을 통해 로컬저장소에 git을 실행한 뒤 메모장에 이렇게 글을 입력하여 저장한다. 그리고 이렇게 변경된 사항에 스테이징과 함께 알맞은 커밋 메세지와 함께 커밋을 합니다. 그럼 이렇게 히스토리에 이력이 남게 되는데 이때 물품환불요청서의 받는 사람 주소가 잘못되어 주소 수정과 함께 수정이력도 남기고 싶다면 수정하고 싶은 이력에 오른쪽 마우스 클릭 후 커밋 되돌리기라고 되게 직관적인 옵션이 있다. 그럼 커밋을 수정하고 새로운 커밋을 만들거냐고 알림메세지가 나..

모든 생명은 탄생하며 시간이 지나면 죽게 된다. 객체 프로그래밍의 객체들도 똑같다. 생성자를 통하여 필요한 메모리를 할당하고 객체의 역할이 끝났으면 소멸자를 통하여 메모리를 반환한다. 컴퓨터의 자원은 한정적이라 역할이 끝난 모든 것들은 메모리를 반환해야 메모리 누수 문제가 생기지 않으며 더 좋은 성능을 발휘할 수 있다. 컴포넌트형 프로그래밍 React에서도 마찬가지이다. 컴포넌트의 생기는 시점에 메모리를 할당받게 되고 역할이 끝나 사라지는 시점에는 메모리를 반환해야 한다. 이러한 컴포넌트의 생명주기를 다루는 것이 바로 componentDidMount, componentDidUpdate, componentWillUnmount 이다 componentDidMount은 컴포넌트가 트리에 삽입된 직후에 호출되며(..