보다 더 생생한 기록

프로토콜과 API 프로토콜 : 클라이언트와 서버간의 통신 규약 -> (e.g. 사용하는 언어, etc...) then 웹 애플리케이션 아키텍처에서는 클라이언트와 서버가 HTTP라는 프로토콜을 이용해 대화할 수 있다. API : 클라이언트가 서버에 명령어를 어떤 방식으로 보내야할지 모를때, 서버는 클라이언트에게 리소스를 활용할 수 있도록 API 라는 인터페이스를 제공한다. 스타벅스 API 서버가 제공하는 적절한 URL 디자인 예제를 첨부한다.(https://en.wikipedia.org/wiki/Query_string) URL과 URI 다음은 링크를 쪼개본다. URL은 Uniform Resource Locator의 줄임말로, 네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타냅니다..

mdn 공식문서는 무조건 읽어봐야한다. HTTP? 하이퍼텍스트 전송 프로토콜(HTTP) 은 HTML과 같은 하이퍼미디어 문서를 전송하기위한 애플리케이션 레이어 프로토콜입니다. 웹 브라우저와 웹 서버간의 커뮤니케이션을위해 디자인되었지만, 다른 목적으로도 사용될 수 있습니다. 통신규약이라고 보면된다. 요청과 응답은 서로 쌍의 형태이다. 하나가 가면 하나가 오는게 한 쌍이다. HTTP 메소드 우선 CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제) 를 묶어서 일컫는 말이다. (→ 이걸 HTTP 메소드에 대응 시켜보자) HTTP 메소드 CURD GET : 데이터를 읽어온다. Read POST : 게시하다. 새..

1. 각기 다른 컴포넌트에서 동일한 State를 사용해야한다? → 각기 다른 컴포넌트더라도 최소공배수처럼 서로 공통되는 상위 컴포넌트가 존재할 것이다. 그 곳에서 State를 선언하고 밑으로 보내줘야한다. (for 단방향 데이터 흐름) 2. 전역변수로 생성된 데이터를 두개이상의 컴포넌트들이 각자 이용하려한다? → 무조건 한 곳의 위치, 하나의 데이터에서 끌고와야한다. 끌고오기 편한 위치에 데이터를 사본으로 저장하고 끌고오다보면 React를 제대로 쓰지 못할 수 있다. (for 데이터 무결성) 참고 무조건 필요한건 아니지만, 현장에서는 상태 관리를 위한 툴로 React Context Redux MobX 를 사용하고 있다. 이는 React에서의 전역상태저장소 제공 및 Props drilling 이슈를 해결해..

state와 props를 구분해서 설정하여야 한다. (∵ state가 많아질 경우 웹상에서 바뀔 내용들이 많으므로 혼란스러워 질 것이기 때문이다.) state가 특정 컴포넌트에서만 유의미하다면, 특정 컴포넌트에만 두면 되니까 크게 어렵지 않지만, 만일 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 이때에는 공통 소유 컴포넌트를 찾아 그곳에 상태를 위치해야 한다. 다시말하자면 공통된 부모 컴포넌트를 찾아 그 곳에 state를 위치 시켜야 한다는 뜻이다. Lifting State Up (State 끌어올리기) 아래와 같은 컴포넌트 구성도가 있다고 하자. 이 구성도에서 1은 2의 부모이고 React는 단방향이기 때문에 1에서 밑으로 상태를 뿌려줘야한다. 그런데 만약 2번에서 상태가 변하고 이걸 2-1을..

React 란? React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. (출처 : 위키백과) 특징? 1. Data Flow : 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다. 2. Component 기반 구조 : React는 UI(View)를 여러 컴포넌트를 쪼개서 만든다 (Header, Footer같은 구조등) 3. Virtual DOM : 변경이 될때마다 매번 새롭게 그리는 것이 아닌, 변경된 지점만 최소한으로 업데이트 (효율성, 속도 향상) 4. JSX : Javascript를 확장한 문법 const element = Hello, world!; 도 JSX 문법 5. Props and State : Props (외부에서 받은 변하..

forEach / for...in / for...of 1. forEach : 배열에 사용. 주어진 함수를 배열 요소 각각에 대해 실행. map과 비슷하지만 return을 하지 않는다는 것이 특징 2. for...in : 객체에 사용. 객체의 key값과 value 값을 뽑아내는데 유용. 3. for...of : 사용하기 위해선 객체가 [Symbol.iterator] 속성을 지니고 있어야 함. (가장 유용하다고 판단) 1. forEach var arr = ['가','나','다','라']; arr.forEach(function(item,index,arr2){ console.log(item,index,arr2[index+1]); }) 2. for in var obj = { a: '가', b: '나', c: '다..