기록하고 싶은 것들

오늘은 REST API디자인에 대하여 공부하였다. REST(Representational State Transfer) API는 웹에서 사용되는 데이터나 리소스를 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청, 응답을 정의하는 방식이다. 직접 디자인하여 제작하는 것이기 때문에 알아보기 쉽게 잘 작성하는게 중요하다. REST API 디자인을 위한 4단계 모델이 있는데, 3단계까지 존재하지만 통상적으로 2단계까지만 적용한다. 0단계는 단순히 HTTP 프로토콜을 사용으로 만족하며, 요청의 endpoint에 appointment를 사용한다. 1단계는 웹에서 사용되는 모든 데이터나 리소스를 HTTP URI로 표현하는 것이다. 따라서 endpoint를 개별 리소스에 맞게 사용해야한다. 2단계는 CRUD에..

오늘은 HTTP/네트워크 기초에 대해서 공부했다. 클라이언트-서버-DB로 이루어진 3티어 아키텍쳐에 대해서 배웠고, 그 사이에서 일어나는 클라이언트-서버의 통신에 대하여 알게되었다. 클라이언트는 서버에 리소스를 요청을 하고, 서버는 클라언트에 리소스를 응답, DB는 리소스를 별도로 저장하는 역할을 한다. 이러한 웹 애플리케이션 아키텍쳐는 API라는 서버가 제공하는 인터페이스를 통해서 HTTP 라는 통신규약을 이용하여 리소스를 활용한다. 이 과정은 URL, URI 등의 주소 접근을 통해서 이루어진다. HTTP Messages는 클라이언트와 서버 사이의 데이터 교환방식이며, 요청과 응답으로 이루어져 있다. 이 메시지들은 start line, HTTP headers, empty line, body를 포함하며 ..

오늘은 어제 진행한 과제에, select 태그를 사용했을 때 나타난, 오류를 수정하였고 추가적으로 delete와 update기능을 추가하였다. 사용자리스트를 받아, 목록으로 볼 수 있도록 를 이용하여 사용자의 이름 목록을 만들었다. 그 과정에서, 현재 사용자가 맞다면 selceted를 주어, 기본적으로 선택되게 만들고 싶었다. 하지만 아래와 같은 경고 문구가 떴다. 관련 문제에 대해서 검색을 통해 찾아보니, react에서는 selceted보다 vlaue 또는 defaultValue를 통하여 초기 값을 세팅해 줘야한다는 것을 알게 되었다. 관련 내용을 적용해서, 다시 코드를 작성하였고, 오류가 사라진 것을 볼 수 있었다. 추가적으로 진행한 delete기능은 선택된 tweet의 정보를 받아서, filter를..

오늘은 React의 Props와 State를 배웠다. props는 외부로부터 전달받은 값, 부모컴포넌트로부터 전달받은 값을 의미한다. State는 컴포넌트 내에서 변할 수 있는 값이며, State는 React State로 다루어야 한다, useState를 호출하여, state변수와 변수를 갱신할 함수를 생성한 뒤, 갱신하는 함수를 호출하여, state값을 조작해야하고 강제로 변경하면 안 된다. 그 밖에도, onClick, onChange를 사용하여 이벤트를 처리하는 방법등을 배웠다. 이벤트에 함수를 전달할 때는 함수를 호출하는 것이 아니라, 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수를 정의 후 전달해야한다 why? 함수를 바로 호출하면 컴포넌트가 렌더링 될 때 함수 자체가 아닌 함수 호출의 결..

오늘은 React Router에 대해서 배웠다. React Router는 주소에 따라서 다른 뷰를 보여주기 위해 필요하고, 대표적으로 BrowserRouter, Routes, Route, Link 등의 컴포넌트를 사용한다. BrowserRouter 컴포넌트는 HTML5의 History API를 사용해 페이지를 새로고침 없이 주소를 변경하게 도우며. 일반적으로 index.js에 을 감싼 형태로 사용한다. Routes 컴포넌트는 Route들을 포함하는 컴포넌트이고, Route는 path와 element 속성을 가지며, 각각 경로와 보여주고자 하는 컴포넌트를 나타낸다. Link 컴포넌트는 경로를 연결해주는 역할을 하는 컴포넌트이며, 와는 다르게, 페이지를 새로 불러오지 않고 애플케이션을 유지시킨다. 배운 바탕..

오늘은 React 라이브러리를 설치하고 과제를 진행하였다. React는 프론트엔드 개발을 위한 JS 라이브러리이며, 선언형, 컴포넌트 기반의 특징과, 프레임워크와 달리 기존 프로젝트에서도 유연하게 적용이 가능한 장점을 가지고 있다. React에서는 JS가 아닌 JSX를 사용하는데, JSX 형태는 브라우저가 바로 실행이 불가능하기 때문에, 'Babel'을 사용하여 JSX->JS로 컴파일하여 브라우저가 읽을 수 있게한다. 과제를 진행하면서 JSX규칙 중에 헷갈리는 내용이 있었다. 특정 사용자인지에 따라서 다른 className을 적용시켜, style을 변경시켰어야 했는데 {} 내부에 if문을 사용하여서 풀어야할지 헷갈렸다. 관련 내용를 찾아보니, 주로 삼항연산자를 통해서 조건에 따라 className을 변수..

오늘은 fetch 함수, axios함수에 대해서 공부하고 실습을 하며 사용을 해보았다. 그동안 Promise를 fetch의 기본이해를 위해서 배운것이고, 사실상 fetch를 기반으로 만들어진 axios api를 많이 사용한다고 한다. fetch는 promise와 사용법이 비슷하였고 url을 통해 json데이터를 받아오는 것이 신기하였다. axios는 json()메서드를 사용할 필요없이 js 객체로 변경시켜주고, fetch보다 단순한 형태였다. 공부를 진행하면서 가장 어려웠다고 생각했던 부분은 받은 데이터의 조작이었다. json 데이터를 받아서 원하는 데이터의 형태로 가공시키는 부분이 생각보다 어려웠다. 데이터를 받아서 다른 데이터와 결합을 해야하는데 어떤식으로 가공하여 결합할지 막막했다. 그 과정속에서 ..

오늘은 타이머 api와 Fs 모듈을 실습해보면서, callback함수, promise, promise의 chaning, promiseAll, async await 등 비동기 함수들의 활용방법을 살펴보았다. 단순히 개념만 읽었을 때는 이해가 어느정도 갔는데, 실제로 전달인자를 넣어주고, 결과값을 받는 과정에서 어떤 값을 받아주고 받아야 하는지 너무 너무 헷갈렸다. 특히 아래 예시 처럼, Promise의 인수인 콜백함수에 들어가는 resolve, reject 함수의 사용법 때문에, 생각하기 어려웠던 것 같다. 정상적인 처리에는 resolve를 처리하고, 에러 시 reject를 호출하는 구조가 익숙치 않아서, 해결하는 데 오랜시간을 들였다. 이외에도, Promise의 chaning도 너무 헷갈렸다. .then..

오늘은 underbar 과제를 통해서, 기존에 존재하는 메서드들을 직접 구현해보는 시간을 가졌다. 과제는 처음에 만든 함수를 뒤에서도 활용을 하면서 구현하는 식으로 진행이 되었고, 맨 마지막에, 가장 애를 먹었던 _.reduce 함수를 구현하는데 겪었던 어려움을 써보고자 한다. 기존 reduce 메소드 // reduce const numbers = [1, 2, 3, 4]; numbers.reduce((누산값, 현재요소값) => { return 다음누산값; }, 초기누산값); reduce는 배열의 각 요소를 순회하며, callback함수의 실행 값을 누적하여 하나의 결과값을 반환한다. 초기값을 설정하지 않으면 배열의 첫 번째 요소가 초기값으로 설정되고, 두번째 요소부터 순회를 한다. _.reduce 함수 ..

오늘은 class 관련 과제를 진행하면서 알게된 내용을 써보려고 한다. Grub class를 상속받기 위해서 Bee class에 extends를 이용하여 상속을 받았고, 기존에 있던 age, color, job 속성에 대해서 재정의를 해주기 위해서 constructor를 생성한 뒤 this를 이용하여 재정의 해주었다. 재정의한 속성의 값들이 잘 바뀔거라고 예상한 것과 달리 ReferenceError가 발생했다. ReferenceError 발생 이유 그 이유를 찾아본 결과, 상속받은 class는 this를 사용 시, 그 전에 super()를 선언 해 주어야 한다는 것이었다. 자바스크립트는 '상속 클래스의 생성자 함수(derived constructor)'와 그렇지 않은 생성자 함수를 구분한다. 상속 클래스..