프로그래밍 공부 노트

prop-types (원하는곳에 해당 props가 정확히 입력되었는지 확인) prop-types는 내가 작성한 컴포넌트에 props를 전달하였는데 전달한 props가 내가 원하는 정보를 정확히 전달받고 있는지 확인해준다. terminal에 npm i prop-types 를 입력해여 설치한다.  설치가 완료되었는지 확인하는 방법은  package.json 파일안에 prop-types 가 입력되어있는지 확인한다. prop-types를 사용하기위해서는 컴포넌트를 불러오듯이  를 작성해준다. 그리고 정확한 props가 전달되었는지 확인하고자하는 component에 propTypes를 작성해준다. 예를들어 Food라는 컴포넌트가 있다하면 해당 컴포넌트에 props가 제대로 전달되는지 확인하고자 할때 아래 사진과 같이 작성한다. 객체의 property에는 컴포넌트에 전달할 property명을 작성하고 값에는 체크할 내용을 작성한다. string이라고 적은것은 타입을 확인하는것이고 string 이외에도 number, bool, array, object 등 많은 타입을 검사할 수 있다. isRequired는 props로 값이 들어왔는지 안들어왔는지 확인하는것이다. isRequired를 작성하지않고 타입만 체크할 수도 있다. 만약에 모든 props가 내가 원하던대로 들어올 경우 에러가 발생하지 않지만 잘못전달된 경우 위의 사진과 같이 Food 컴포넌트에 props로 image가 전달되었지만 정의되지 않은 props라고 에러가 뜬다면 컴포넌트에 작성한 property가 잘못되었던지 혹은 Food컴포넌트에 작성된 props가 잘못되었는지 확인한다. 그리고 두번째 에러는 rating으로 number타입의 데이터가 입력되어야하지만 propTypes를 작성했기때문에 숫자가아닌 문자로 값이 전달되었다고 에러를 알려준다.

void 연산자는 뒤에 나타나는 표현식을 실행하고 값으로 무조건 undefined 리턴한다. 피연산자로 무엇을 지정하든간에 연산의 결과는 undefined 값이된다. 몇가지 예시를 보면 // 피연산자가 숫자 console . log ( void 0 ); // undefined // 피연산자가 문자열 console . log ( void "문자열" ); // undefined var x = 0 ; void x ++; // 피연산자를 먼저 평가하기 때문에 x 는 증가한다. console . log ( x ); // 1 을 리턴한다. console . log ( void ( x )); // 피연산자를 괄호로 감싼 것은 잘 실행되어 undefined 가 출력 이와 같이 동작한다. 언제 어떻게 사용되는지 궁금해서 찾아봤더니 a 태그에서 href 기능을 무효화할 때 사용한다고 한다. < a href = "javascript:void(0)" > 링크 </ a > 이렇게 사용하면 해당 링크를 클릭하여도 어떠한 동작도 하지 않는다. 이외에도 다른 사용법이 많지만 잘사용하지 않는것 같다. 추가적으로 독학으로 공부를 하다가 국비 학원을 다니면서 java를 공부하게 되었는데  java에서 void는 코드는 실행하지만 리턴값이 없는 경우에 사용 되었다. 이외에도 타입스크립트를 공부하면서도 void를 배우게 되었는데 특정 함수가 실행되었는데 return 값이 없는경우 타입으로 void를 설정해주었다. 타입스크립트 예제를 보면 index.ts const name = 'lee' , age = 20 , gender = 'male' const sayHi = ( name : String , age : Number , gender : String ): void => { console . log ( `안녕하세요. 제 이름은 ${ name } 입니다. 나이는 $...

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의 상태가 변경 될 ...

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를 직접 바인딩해주지 않아도 된다. .

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 : ...

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