목록전체 글 (105)
책 읽다가 코딩하다 죽을래
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은 컴포넌트가 트리에 삽입된 직후에 호출되며(..
react의 props는 부모가 자식에게 유전자를 물려주는 기능이라고 보면 된다. 여기서 부모와 자식관계는 어떤 하나의 컴포넌트가 다른 컴포넌트를 호출했다면 호출한 컴포넌트는 부모 호출받은 컴포넌트는 자식 으로 비유되며, 이 때 props는 호출한 컴포넌트와 호출받은 컴포넌트의 데이터 송수신을 하는 수단이라고 생각하면 된다. 간단한 실습으로 props을 알아보자 import React, { useState } from 'react' function Father() { const [DNA, setDNA] = useState(""); const onChangeInput = (e) => { setDNA(e.target.value); } return ( 나는 무슨 아빠인가요 : 안녕 나는 {DNA} 아빠 ) }..
과거에 들어갔던 페이지로 다시 돌아갈려면 뒤로가기 버튼을 누르면 되듯이 git에도 과거에 커밋(commit)했던 이력(history)으로 다시 돌아갈려면 git의 reset 기능을 이용하면 된다. 이 글은 복권에 당첨되고 싶은 ablue의 이야기를 통해 reset을 자세하게 알려줄 예정이다. reset은 git을 다룰 때 꼭 알아야 하는 기능이지만 조심히 다루지 않으면 원치 않게 이력들을 잃어버릴 수 있으니 시간을 들여 공부할 필요가 있다. 사용 git GUI : SourceTree IDE : 메모장 (VSCode나 인텔리제이를 써도 무관한다). 먼저 로컬저장소에 git을 하나 만든다. 그리고 이 폴더 안에 메모장 파일을 하나 만들어 다음과 같이 저장한다. 그 다음 SourceTree 를 실행해 git ..
오늘은 React로 instagram의 좋아요 버튼을 만들어 볼 생각이다. React의 기초내용과 setState의 개념을 다루니 무지 쉬울 것이다. 이 글에선 웹팩을 다루지 않으니 리액트의 기본셋팅은 미리 한 후에 보기를 권장한다. create-react-app을 사용해도 괜찮다. 하트의 디자인은 Ant-Design의 icon을 빌려올 것이다. 이 두가지를 사용할 것이며 사용법을 몰라도 괜찮다. 다 설명해줄 것이다. 사용법을 알거나 문서를 읽을줄 알면 아래의 사이트에 직접 들어가서 알아보는 것도 좋다. Ant-Design-icon Document바로가기[클릭] 일단 폴더구조는 다음과 같다. 다시 한 번 말하지만 이 강의에선 웹팩이나 초기 리액트셋팅을 다루지 않는다. 즉 client.jsx(또는 clie..