책 읽다가 코딩하다 죽을래

이번 시간에는 자바스크립트의 객체의 특징에 대해 설명해보겠다. 자바스크립트의 객체는 Object라 하며 선언은 다음과 같다. 객체의 선언 및 접근 더보기 const obj1 = {}; const obj2 = new Object(); const ablue = {name:'ablue', age: 26}; // 선언과 초기화를 동시에 하는 법 객체는 "key" : value로 이루어져 있다. c언어의 구조체와 자바의 해쉬 맵과 파이썬의 딕셔너리와 비슷하다. 그런데 여기서 key는 무조건 string형이며 value는 어떤 타입이든 상관없다. console.log(ablue['name']); //이렇게 배열형태로 데이터에 접근할 수 있다. 주의할 점은 배열의 인덱스는 String타입으로 줘야한다. name으로 ..

scope는 어떤 하나의 데이터가 어느 정도의 범위를 가져 영향을 주는지의 대한 개념이다. function fn(){ int a = 1; } fn(); system.out.println(a); 자바나 c++을 배웠다면 위의 코드가 이상하다고 생각할 것이다. 왜냐하면 함수 밖에서 함수 안에 있는 a를 접근하면 분명 오류가 일어나기 때문이다. 즉 함수 안에서 선언된 a는 밖에서 접근할 수 없는 것 a의 scope는 함수 fn 범위 안이라고 정의할 수 있다. 자바스크립트에서의 scope는 다양해서 헷갈릴 것이다. 이번 시간에 자세히 알고 가자. 자바스크립트 내에 데이터 타입은 크게 var, let, const로 나뉜다. 여기서 let과 const는 스코프가 같으니 var와 let, const 이렇게 설명하겠다..

오늘은 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..