전체 글

8주 1일차 - HTTP/네트워크 실습

8주 1일차 - HTTP/네트워크 실습 1. 배운 것 rest api 모던 자바스크립트 딥 다이브 16장 유데미 React 완벽 가이드 by Maximilian Schwarzmüller fetch api로 GET 요청 보내기 async/await 실사용 try-catch문 에러 핸들링 2. 내용 정리 종합 퀴즈 1번 : REST 원칙을 준수하지 않은 GET 요청 수정하기 PUT 메서드는 서버에 요청 메시지의 본문을 저장해야 할 경우에 사용한다. root-endpoint( root-URL ): 클라이언트가 API로 서버에 요청 시 서버가 요청을 수락하는 시작점. 엔드포인트에는 행위에 대한 명사가 아닌 리소스를 지칭하는 명사를 사용한다. (inquiry:문의) 요청 메세지이기 때문에 응답에 Location ..

7주차 일요일 - react router dom, useParams

7주차 일요일 - react router dom, useParams 1. 배운 것 react-router-dom 복습 + 추가학습 react router dom Route의 동적 경로 지정 - 세미콜론, useParams Hook 빈 페이지 컴포넌트를 만드는 이유 2. 내용 정리 React-router-dom 6버젼: Routes 와 각 Route의 path 지정과 element 속성으로 기존 Switch 안에서 exact path 지정을 대체하여 훨씬 간편해졌다. HashRouter (경로에 # 이 들어간 것.) 사용 가능. 사용하려면 BrowserRouter 위치에 쓴다. (나중에 필요할 때 추가 공부하기) a태그 href 대신 사용하여 새로고침 없이 재렌더링. a태그 사용 시 onClick 이벤트에..

7주차 토요일 - 리액트 복습

7주차 토요일 - 리액트 복습 1. 배운 것 리액트 state, props 복습 2. 내용 정리 리액트 - 표준 리액트 프로젝트 분석하기 src 폴더 App.js : create-react-app 으로 생성 시 기본 뼈대의 App 컴포넌트가 있는 파일. index.js : 가장 먼저 실행되는 자바스크립트 코드가 담긴 파일. cra로 리액트 앱 생성 시 App컴포넌트를 import 받아오고 이를 public 폴더의 index.html에서 root 가 되는 DIV 안에 넣도록 렌더링하기 위한 코드가 작성되어있다. index.css : 전체 컴포넌트들의 스타일에 영향을 미치는 스타일링. CSS 작성 시 중복된 선택자를 사용할 경우 module.css를 사용하지 않으면 다른 css파일들이더라도 다른 컴포넌트에도..

7주 5일차 - REST API, 타입스크립트, 이진 탐색

7주 5일차 - REST API 1. 배운 것 데일리코딩 12번 REST API 타입스크립트 2. 내용 정리 데일리코딩 12번 if문을 외부 for문 내부 for문 각각 줄 필요 없이 내부 for문에서 한번만 주어도 해결이 되는 문제였다. 중첩 반복문에서 조건을 줄일 수 있는지 조금 더 생각해 보는게 좋겠다. // 함수 몸체 생략. // 외부 for문의 if문 조건을 생략하고 내부 for문에서 .push(i, j) 했어도 되었음. let result = []; for (let i = 0; i < arr.length; i++) { if (arr[i].indexOf('B') !== -1) { result.push(i); } for (let j = 0; j < arr[i].length; j++) { if (a..

REST API

REST API 학습 목표 REST API에 대해 이해할 수 있다. REST 성숙도 모델에 대해 이해할 수 있다. REST API 문서를 읽을 수 있다. REST API에 맞춰 디자인할 수 있다. Open API와 API Key에 대해 이해할 수 있다. Chapter1-1. REST API 디자인 REST API란? 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고 HTTP 프로토콜을 통해 “요청”과 “응답”을 정의하는 방식을 말한다. 클라이언트가 서버에게 원활하게 HTTP 프로토콜을 통해 “요청”하고 “응답”을 받기 위해 사용자가 알아보기 쉽도록 REST API를 디자인해야 한다. 쉽게 설명해서 이용자가 편리하게 주문할 수 있도록 메뉴판을 알아보기 쉽게 짜야 한다. Richardson 성숙도 ..

7주 4일차 - 네트워크 기초

7주 4일차 - 네트워크 기초 1. 배운 것 데일리코딩 11번 클라이언트, 서버, api HTTP 메서드 HTTP 요청, 응답 메세지 내용 2. 내용 정리 데일리코딩 - 11번 이상, 이하로 조건을 주어 중복된 최대길이 또는 최소길이의 요소가 마지막에 오는 요소로 최댓값, 최솟값을 담은 변수에 재할당된다. 최댓값, 최솟값 요소의 index도 변수에 담아야 for문으로 새 배열에 요소들을 넣을 때 해당 index의 요소를 제외시킬 수 있다. 네트워크 기초 클라이언트: 손님 서버: 종업원 API: 메뉴판 클라이언트는 서버가 이해할 수 있는 방식으로 서버에 요청을 보내야 서버에서 클라이언트가 요청한 자원을 제공해줄 수 있다. 이 클라이언트와 서버가 통신을 할 때 지켜야 하는 통신 규약을 프로토콜 이라고 한다...

7주 1일차 - 리액트, 스코프 개인 공부

1. 배운 것 딥다이브 13장 - 스코프 코딩애플 리액트 - props, react router dom react router dom 과제 복습, state&props 과제 예습 2. 내용 정리 리액트 - props state는 부모 → 자식 으로만 보내줄 수 있다. 자식 ↔ 자식 끼리도 불가능. 과제 복습 - react router dom 리액트 라우터의 주요 컴포넌트 3가지 BrowserRouter : 라우터 역할 Routes: 경로를 매칭시켜주는 여러 Route의 상위 컴포넌트 Link: 경로 변경 import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; 사용할 컴포넌트 가 있는 파일의 최상단에서 import 해주어야 함. Bro..

6주차 주말 - 리액트 복습, 개인 공부

1. 리뷰 1.1 좋았던 점 어쨌든 공부를 했다. 1.2 아쉬웠던 점 놀거면 제대로 놀고 공부할거면 제대로 공부해야 후회가 남지 않는다. 1.3 notes - 2. 배운 것 데일리 코딩 문제 복습, 리팩토링 코딩애플 리액트 - state, component, props 3. 내용 정리 데일리 코딩 리팩토링 6번 String.prototype.substr() 메서드는 deprecate 된 메서드이다. 대신 substring() 메서드를 사용함이 바람직하다. substr: (from, length) - from 인덱스부터 length 갯수만큼 만큼 반환. substring(from, to) - from 인덱스부터 to 인덱스 직전까지 반환 substr() 메서드는 첫번째 인수로 시작인덱스부터 두번째 인덱스로..