이훈희

1 취업노트 https://www.notion.so/d69d10b9b61f4ecab4d775b647e7e1b9 2.깃허브 개발노트 - 5분기록보드 개발 이슈 등 https://github.com/users/quasar2yh/projects/3 khis • quasar2yhkhisgithub.com3.리드미https://github.com/quasar2yh/KHIS GitHub - quasar2yh/KHIS: Korea Hospital Information SystemKorea Hospital Information System. Contribute to quasar2yh/KHIS development by creating an account on GitHub.github.com4. 5분이슈보드 노션.ver..

//Rest API란 //REpresentational State Transfer의 약자로 어떤 자원에 대해//CRUD를 진행할 수 있게 HTTP Method(GET,POST,PUT,DELETE)를 사용해//요청을 보내는 것. 이 때 , 요청을 위한 자원은 특정한 형태로 표현된다//간단하게 말하면 URI를 통해 정보의 자원을(only자원만을)표현하고,자원의//행위는 HTTP Method로 명시한다 //자원(Resource) : URI , 행위(Verb):HTTP Method , 표현(Representations)//GET/users/3/profile =>user중 3번 아이디를 갖는 사람의 프로필 보여줘 //ex)좋은 예 나쁜 예//DELETE(삭제)요청// badGET /members/delete/1/..

//동기(synchornous)적 프로그래밍이란 //=>현재 실행중인 코드가 끝나야 다음코드를 실행하는 방식//일반적인 프로그래밍에서는 코드는 모두 동기적으로 실행 //비 + 동기적 프로그래밍 //실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식//setTimeout,addEventListner 등//별도의 요청,실행 대기,보류 등과 관련된 코드는 모두 비동기적//대표적으로 서버 통신과 관련된 로직들 포함//콜백지옥//비동기적 프로그래밍을 하다 보면, 예기치 못한 상황을 마주하곤하는데//그것은 바로 콜백 지옥//콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 헬 수준인 경우//=>함수 1이 실행되야 함수2가 실행되고 함수2가 실행 되야 함수3이 실행되고 ....

//React -Router -Dom //사용하기 위해선 라이브러리를 설치해야 함//터미널에 yarn add react-router-dom//1. 페이지(우리는 원래 단일페이지) 컴포넌트 작성 ->다중 페이지//2. Router.js 파일 생성 .router를 구성하는 설정 코드 작성//  ex) redux 할 때도 설정 파일을 만들어서 주입//3.App.jsx import하고(2번) 적용 : 주입//4. 페이지 이동테스트//React -Router -Dom 의 hook//1.useNavigate hook //다른 페이지로 보내고자 할 때 사용할 수 있음 //=>주소창에 직접 입력하는게 아니라버튼이나 링크 눌렀을때 페이지 이동//2.useLocation// location =useLocation(); 으..

//payload =>액션 객체에는 type도 있지만 payload(데이터화물차)도있음 //payload는 데이터를 전달하는 객체로 //ation이 처리 될 때 payload 만큼 처리 해라 라고 예시를 둘 수 있음 //**`Erik Rasmussen` 이 제안한 Ducks 패턴은 아래의 내용을 지켜 모듈을 작성하는 것 입니다.**// 1. Reducer 함수를 `export default` 한다.// 2. Action creator 함수들을 `export` 한다.// 3. Action type은 `app/reducer/ACTION_TYPE` 형태로 작성한다. // (외부 라이브러리로서 사용될 경우 또는 외부 라이브러리가 필요로 할 경우에는 UPPER_SNAKE_CASE 로만 작성해도 괜찮다.)// 그래..

//Action-Value-Creator//리듀서의 case (action.type)은 여러 컴포넌트에서 사용할 수 있으므로 //하나하나의 이름을 약속해서 쓰더라도 ex)리듀서/타입이름 ->counter/Plus//Action.type 이름을 바꾸면 컴포넌트에서의 action 타입 리듀서내의 action타입//하나의 type을 바꾸는데 여러곳에서 바꿔야 하는 불편함이 있음 //그래서 Action Value 로 하나의 컴포넌트에서 상수로 만들어서 사용하면 편리함 //기본구조 export const 상수이름 = "타입이름"//action create => dispatch로 함수를 만들어서 직접 타입과 코드들을 입력하는 것이아니라 //함수로 만들어서 관리 =>하나하나 하드코딩보단 함수로 만들어서 관리하는것이 ..

//리덕스가 필요한 이유 //1.useState의 불편함//어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 우리는 //props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보냈음 //근데 Props로 State를 공유하는 방법에는 불편한 점이 있음//하지만 디럭스는 중앙데이터관리소 역할을 함//비슷한 기능으로 앞서 context를 배웠지만 //context는 props가 하나라도 변경되면 하위 컴포넌트 모두가 리렌더링 됐지만//리덕스는 State를 공유하고자 할 때 부-모 관계가 아니여도 되고 중간에 의미 없이//컴포넌트를 거치지 않아도 됨 //Global state 와 LocalState  //Local state란//컴포넌트에서 useState를 이용해서 생성한 state..

//가상돔 //리액트나 ,뷰는 가상돔(VirtualDom)을 사용해서 원하는 화면을//브라우저에 그려줍니다. 자체적으로 상당히 효율적인 알고리즘을 사용해서//그리기 때문에 그속도가 엄청 빠름//리액트로 프론트엔드를 개발하는 사람이라면 기본 소양정도로 가볍게라도 //가상돔에 대해 알고 넘어가는것이 중요 //DOM이란//수 많은 컴포넌트로 구성된 웹페이지를 문서(document)라고하고 //수 많은 컴포넌트를 (element)라고함 //DOM은 이 element를 tree 형태(=DOM TREE)로 표현한것//이 Tree의 요소 하나하나를 노드라고 부르고 각각의 노드는 해당 노드에//접근과 제어(DOM)조작 할 수 있는 API가 존재//ex) dom 사용 예시 // id가 demo인 녀석을 찾아, 'Hell..

리액트 생명주기란리액트 컴포넌트는 각각 Mount ->Update ->Unmount 의 과정을 거침사람에 비유하자면 태어나고 변화하고 죽는 것리액트 생명주기란, 컴포넌트 중심 라이브러리의 집합체라고 보면 됨모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드 들이 있음 리액트에서 말하는 생명주기란 클래스형 컴포넌트에서의 메서드등의 생명주기1.Mount 컴포넌트가 생성될때다음과 같은 메서드가 있음1-1 constructor컴포넌트가 맨 처음 만들어 질 때 호출,생성자함수라고 부름 1-2 getDerivedStateFromProps부모 컴포넌트로 부터 props를 전달 받을 때 , state에 값을 일치시키는 열할 을 하는 메서드 마운트 될 때 , 업데이트(리렌더링)될 때도 호출1-3 re..

useContext//useContext //react context의 필요성//일반적으로 부모컴포넌트 -> 자식컴포넌트로 데이터를 전달 해 줄 때 //props를 사용했음. 그러나 부모->자식->그자식 이렇게 너무 깊어지게 되면// prop drilling 현상이 일어남 //prop drilling의 문제점 //1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악 힘듬 //2. 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수 밖에 없음//그래서 전역적으로 쓸 수 있는 context가 필요 함  //context API 필수 개념//createContext : context 생성//Consumer : context 변화 감지//Provider : context ..