프로그래밍 공부 노트

Redux는 상태관리 라이브러리이다. Redux를 사용하면 리액트에서 단방향 데이터 데이터 통신에서 발생되는 단점을 극복할 수 있다. Redux는 요즘 가장 인기있는 React 뿐만 아니라 다양한 framework에서도 사용할 수 있다. 즉, React에서만 사용가능한 라이브러리가 아니다. react redux store redux에서는 한 애플리케이션 당 하나의 스토어를 만들게 된다. 스토어 내부에는 현재 앱의 상태와 무엇이 일어날지 작성하는 action, 그리고 action의 type에 따라 상태를 수정하는 reducer가 존재한다. action 상태에 변화가 필요할때 액션을 사용한다. 상태 저장소인 store에 데이터를 보내는 방법이다. 새로운 상태 값을 dispatch를 통해 전달한다.  action 객체에는 type 필드를 필수적으로 가지고 있어야하며 그외의 값은 자유롭게 작성할 수 있다. action에 작성하는 type은 문자열 상수로 정의하며 중복되면 안된다. action creater 액션 생성함수라고하며 액션을 만드는 함수이다. 파라미터를 받아와서 액션 객체 형태를 만들어준다. reducer state 값을 초기화, 수정할때 사용한다. 즉, reducer는 변화를 일으키는 함수이다. reducer는 두가지의 파라미터로 state와 action을 받아 온다.  action을 통해 어떠한 행동을 정의하면 그 결과 상태를 초기화, 수정하는 함수이다. 일반적으로 매개변수로 기존의 state값과 새로운 action값을 받아 새로운 상태를 만들어서 반환한다. dispatch dispatch는 store의 내장함수 중 하나이며 action을 발생시키는 함수이다. 값을 초기화, 수정할때 사용하는 reducer 함수에 action 값으로 들어갈 새로운 상태 값을 전달하는 메서드이다.  dispatch(action) 과 같이 dispatch 함수에 액션을 파라미터로 전달한다. subscribe store의 상태가 변경 될 때마다 render 함수를 호출해줘

constructor(props){super(props)} 작성이유 React에서  1. 컴포넌트를 생성하거나  2. state 값을 초기화하거나 3.메서드를 바인딩할 때  사용한다. 메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 된다.  여기에서 super는 부모클래스 생성자를 가르킨다. 리액트에서는 React.Component를 가리킨다. super(props) 선언전까지 constructor내에서는 this를 사용할 수 없다.  1번 사진 기존에는 state값을 초기화 하기위해서 1번 사진과 같이 작성했는데 클래스필드 문법을 지원하면서  2번 사진 2번 사진과 같이 작성할 수 있게되면서 메서드를 바인딩 하는경우가 아니라면 더 이상 constructor(props){super(props)}를 사용하지 않아도 된다. es6에서 화살표함수의 특성 때문에 더 이상 this를 직접 바인딩해주지 않아도 된다. .

할당연산자 이름    단축 연산자   의미 할당 x = y x = y 덧셈 할당 x += y x = x + y 뺄셈 할당 x -= y x = x - y 곱셈 할당 x *= y x = x * y 나눗셈 할당 x /= y x = x / y 나머지 연산 할당 x %= y x = x % y 지수 연산 할당 x **= y x = x ** y 왼쪽 시프트 할당 x <<= y x = x << y 오른쪽 시프트 할당 x >>= y x = x >> y 부호없는 오른쪽 시프트 할당 x >>>= y x = x >>> y 비트 AND 할당 x &= y x = x & y 비트 XOR 할당 x ^= y x = x ^ y 비트 OR 할당 x |= y x = x | y

Boolean(true / false) 조건문에 들어갔을때 true가 되는 값들 1 -1 true "반갑습니다." ( 문자로 인식되게하는 숫자,문자들은 모두 true값을 반환 ) "false" ( 문자로 인식되게하는 숫자,문자들은 모두 true값을 반환 ) "0" ( 문자로 인식되게하는 숫자,문자들은 모두 true값을 반환 ) "1" ( 문자로 인식되게하는 숫자,문자들은 모두 true값을 반환 ) infinity -infinity [] {} [[]] [0] [1] 조건문에 들어갔을때 false가 되는 값들 0 false "" ( 빈문자열(공백) ) null undefined NaN 참고자료: https://dorey.github.io/JavaScript-Equality-Table/

1. 최대한 모두 변수화 시킨다. 예를들어 어떠한 특정한 숫자가 있다고 하자. 내가 적은것은 코드이면 나 자산은 해당 숫자가 무엇인지 알 수 있지만 다른 사람과 협업할 때 해당 숫자가 무엇인지 타인은 모른다. 그러므로 숫자를 변수에 담아 해당 숫자가 무엇을 뜻하는지 명시해 주어야 한다. 그리고 내가 작성한 코드일지라도 시간이 지나면 모를 수 있다. 2. 함수명은 반드시 동사로 작성한다. 회원의 데이터를 받아오는 함수가 있다고 하자 userData (X) ===> loadUserData (O) 3. 함수 하나에는 하나의 기능만 작성한다. 두개의 기능이 들어가면 두개의 함수로 나누자! 4. 함수 인자는 3개 이하로 하도록하며 많은 인자가 필요할 경우 객체로 전달한다. 5. Boolean 값을 함수의 인자로 보내는것은 최대한 방지한다. 6. 축약어는 사용하지 말자. e (X) ===> email u (X) ===> user 7. 마지막으로 Clean Code를 작성하는것에 신경을 너무 쓰다보면 개발하는 속도가 느려질 수 있다. 그러므로 일단 기능을 만들고 더 나은 코드로 리팩토링하는것이 좋다.

태그 속성에 작성되는 name은 id와 마찬가지로 element를 식별(접근)하는 용도로 사용한다. 하지만 id와 name에는 차이가 존재한다. id : 하나의 요소에만 가능(페이지 유일) / CSS식별자로 사용 가능 class : 여러 요소 적용 가능 / CSS식별자로 사용가능 name : 여러 요소 적용 가능 / CSS에서 사용 불가 또한 id는 getElementsById("id") 방식으로 접근하고  name은 document.form["name"]과 같은 방식으로 접근 가능하다.

자식 컴포넌트 state 값 부모컴포넌트로 전달하기 방법을 간단히 보면 부모 컴포넌트에 함수를 정의하고 해당 함수를 자식 컴포넌트의 props로 전달한다. props로 전달된 함수를 호출해서 자식컴포넌트의 값을 부모 컴포넌트로 전달하도록 한다. App.js (부모 컴포넌트) import React , { Component , Fragment } from "react" ; import Child from "./components/Child" ; class App extends Component { handleData = ( data ) => { console . log ( data ); }; render () { return ( < > < Child sendProps = {this . handleData } /> </ > ); } } export default App ; Child.js (자식 컴포넌트) import React , { Component } from "react" ; export default class Child extends Component { state = { name : "" , age : "" , }; handleChange = ( e ) => { this . setState ({ [ e . target . name ]: e . target . value , }); }; handleSubmit = ( e ) => { e . preventDefault (); { this . props . sendProps ( this . state ); } }; render () { retu

REST API 는 서버에 요청을 보낼 때 주소를 통해 요청의 내용을 표현하는 방식이다. REST 구성  - 자원(RESOURCE) - URI  - 행위(Verb) - HTTP Method  - 표현(Representations) HTTP 요청 메서드 GET : 서버의 자원을 가져오려고 할 때 사용한다.  POST : 서버에 자원을 새로 등록하고자 할 때 사용한다. 또는 뭘 써야할지 애매할 때도 사용한다. PUT : 서버의 자원을 요청에 들어있는 자원으로 치환하고자 할 때 사용한다. 완전히 데이터를 바꿀 때 사용 PATCH : 서버 자원의 일부만 수정하고자 할 때 사용한다. DELETE : 서버의 자원을 삭제하고자 할 때 사용한다. 요약해보면 아래와 같다. GET => Read, index, retrieve POST => Create PUT => Replace PATCH => Modify DELETE => Delete REST API 사용시 유의할점 - URI는 정보의 자원을 표현해야 한다. - 자원에 대한 행위는 HTTP Method (GET, POST, PUT, PATCH, DELETE)로 표현한다. REST API 예시 ex) POST  Node.js 로 작성한 백엔드 부분의 회원가입 부분의 일부이다. app . post ( ' /api/users/register ' , ( req, res ) => { // 회원 가입 할떄 필요한 정보들을 client에서 가져오면 // 그것들을 데이터 베이스에 넣어준다. const user = new User (req . body) user . save ( ( err, userInfo ) => { if (err) return res . json ({ success : false , err }) return res . status ( 200 ) . json ({ success : true }) })

null과 undefined 차이점 null은 비어있는 값, 존재하지 않는 값, 알 수 없는 값을 나타낸다. undefined는 값이 할당되지 못한 상태를 나타낸다. null과 undefined 둘 다 값이 없음을 나타내는 단어이지만 차이가 존재한다. null은 값을 의도적으로 초기화 시킨것이고 undefined는 기본적으로 값이 할당되지 않는 것이다. 즉, null은 타입이 객체이며, 비어있는 변수이고 undefined는 타입이 결정되지 않은 변수이다. 코드를 작성할 때는 null 값을 사용하도록 하는것이 좋다. 그 이유는 null은 사람이 의도적으로 비어있는 값을 설정할때 사용하는것이고 undefined는 컴퓨터가 원래부터 비어있는 값을 나타날때 사용하는 값이다. 그러므로 undefined를 사용하면 컴퓨터가 비어있는 값을 나타내는것인지 코드를 작성한 개발자가 임의적으로 없는 값을 표현하기위해서 undefined를 작성했는지 파악하기 어려워진다. 그러므로 개발시 의도적으로 비어있는 값을 설정할 경우에는 null 값을 사용하도록 한다.

Ref Class Component 에서 Ref 는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. Ref 활용 - 포커스, 텍스트 선택영역, 미디어의 재생관리 - 애니메이션을 직접적으로 실행시킬 때 - 서드 파티 DOM 라이브러리를 React와 같이 사용할 때 아래의 예제 코드를 보자 import React , { Component } from 'react' export default class Click extends Component { state = { like : 0 , } handleIncrease = () => { this . setState ( prevState => ({ like : prevState . like + 1 })) } handleDecreasse = () => { this . setState (( prevState ) => ({ like : prevState . like - 1 })) } accessDom = ( tag ) => { console . log ( tag ); } render () { console . log ( '렌더링 되었다' ); const { like } = this . state ; return ( < div > { like } < div > < button ref = {this . accessDom } onC

Virtual Dom 이란 Dom이란 객체를 통해 구조화된 문서를 표현하는 방법이다. 이러한 Dom은 트리형태로 되어있어서 특정 node를 찾을 수도 있고 수정, 삭제가 가능하다.  Dom은 동적인 UI에 최적화되어있지 않기 때문에 jquery를 사용하여 동적인 효과를 줄 수 있다.  하지만 대규모 웹어플리케이션 중 하나인 페이스북에서는 스크롤을 내리다보면 정말 수 많은 데이터가 로딩되고 각 데이터를 화면에 표시되게 해야할 요소들이 많아지게 된다.  이와 같은 많은 요소들을 직접적으로 변화를 주다보면 성능에 문제가 발생한다.  스크롤로인해 브라우저상의 Dom에 변화가 일어나면 CSS를 다시 연산하고 레이아웃을 구성하고 웹페이지를 다시 렌더링해야하는등의 절차에서 성능상의 문제를 발생시킨다. 이러한 문제를 최소화하기위해 최소한의 Dom조작으로 작업을 처리하는 방식이 생겨났다. 그것이 바로 Virtual Dom이다.  Virtual Dom은 변경 전과 변경 후의 상태를 비교한 뒤 변경이 생긴 부분의 최소한의 내용만 반영하여 성능을 향상시킨다. React는 소스코드에 처음부터 HTML을 넣지않고 기본적인 HTML을 로드한 후 우리가 작성한 코드를 HTML에 밀어넣어 화면을 출력하여 기존보다 빠르게 동작한다. Real DOM 과 Virtual DOM 비교 Virtual DOM을 추가적으로 설명하면 1. JSX를 렌더링한다. 그러면 Virtual DOM이 Update가 된다. 2. Virtual DOM이 이전의 Virtual DOM에서 찍어둔 Snapshot과 비교하여 변경된 부분을 찾는다.(이 과정을 diffing 이라고 부른다.) 3. 변경된 부분만 Real DOM에서 변경시켜준다.

props 기본값 설정하기 상위 컴포넌트로부터 하위 컴포넌트에 props로 값이 전달되지 않은경우 기본적으로 보여질 값을 설정할 수 있다. 위와같이 static defaultProps에 기본값을 설정하면 상위컴포넌트에서 하위컴포넌트로 값이 전달되지 못할때 기본props 값으로 설정된 '기본이름'이 값으로 입력되어 아래와같이 출력된다. 한가지 방법이 더 있는데 결과값은 똑같고 표현방법만 살작다르고 똑같이 동작하는 코드이다. 👇🏼👇🏼👇🏼   두가지 방법중에 최신방법은 맨위에 처음 작성한 static defaultProps 방법이므로 되도록 최신방법을 사용하자. 위 두가지 방법은 class형 컴포넌트에서 사용되는 방법이고 함수형 컴포넌트에서는 default parameter를 통해 기본 값을 설정할 수 있다. 만약에 props로 전달되는 값이 없다면 이와같이 default parameter로 값을 지정해줄 수 있다. 이렇게 작성한경우 props로 값이 전달되지 않은경우 아래와 같은 결과가 나오게된다.   위 결과는 props로 name, age둘다 값이 전달되지 않아 기본값으로 반환한 결과이며 props중 age값만 9999로 전달할 경우  안녕하세요 제 나이는  9999 살이며 이름은  안녕하세요  입니다. 라는 결과 값을 반환한다.