프로그래밍 공부 노트

Mac Terminal Command (터미널 명령어) .. -> 상위 디텍터리로 이동 cd -> 다른 디렉터리로 경로 변경 ls -> 특정 디렉터리의 목록을 나열 mkdir -> 폴더 생성 sudo -> 추가적인 보안 권한을 얻기 위해 수퍼유저로 인증 (관리자 권한) rm -> 삭제 pwd -> 현재 폴더 경로 curl -> 커맨드라인 환경에서 REST API (HTTP) 요청 보내기  curl 요청주소 -v 와같이 뒤에 -v옵션을 주면 요청에대한 응답결과의 상세 정보를 확인 할 수 있다. ex) curl localhost:3000 -v

React Hooks는 리액트에서 새로 도입된 기능으로 class형 컴포넌트가 아닌 함수형 컴포넌트에서도 상태를 관리할 수 있도록 업데이트 되었다. 뿐만아니라 렌더링 직후 작업을 하는 componentDidMount와 같은 기능을 함수형 컴포넌트에서도 사용할 수 있게 해주었다. 즉 기존에  클래스형 컴포넌트에서만 가능하던  생명주기를 hooks를 이용하여 함수형 컴포넌트에서도 사용할 수 있게 되었다. # useState useState을 사용하여 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 상태를 지닐 수 있게 되었다. import React , { useState } from 'react' const Counter = () => { const [ value , setValue ] = useState ( 0 ); const onPlusHandler = () => { setValue ( value + 1 ); } const onMinusHandler = () => { setValue ( value - 1 ); } return ( < div > < p > 카운터 < b > { value } </ b ></ p > < button onClick = { onPlusHandler } > plus </ button > < button onClick = { onMinusHandler } > minus </ button > </ div > ) } export default Counter useState을 사용하기 위해서는 useState를 import 해야 한다. 그리고 state 역할을 대신하는 다음의 코드를 보자. const [ v

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의 상태가 변경 될 때마다 render 함수를 호출해줘