프론트엔드
[코드스테이츠] SEB FE 39기 Section 2 회고
https://www.youtube.com/watch?v=EcyK8oRoPb4 섹션 회고 - SEB FE 39 section 2 회고 1. 배운 것 1.1 커리큘럼 리액트로 클라이언트 구현 express로 서버api 구현 1.2 개인 공부 자료구조: 연결 리스트 알고리즘: 이진 탐색, 재귀 2. 느낀점 2.1 같은 실수와 같은 깨달음의 반복 슬럼프가 심하게 왔고 현재 진행형이다. 결국 무리한 계획으로 복습도 예습도 추가 공부도 이도 저도 아니게 되니 집중력도 떨어지고 성취도 또한 떨어졌다. 부트캠프가 이기고 지는 승부의 세계는 아니지만 지금 나는 명백하게 지고 있었다. 코드가 쉽사리 읽히지도, 이전처럼 끝까지 물고늘어지고 싶지도 않아졌다. 섹션 1 회고에서 다 지목했던 문제들이었고 try가 제대로 되지 ..
9주 1일차 - state airline server
9주 1일차 - state airline server 1. 배운 것 req.body req.params req.query 딥다이브 17장 - 생성자 함수에 의한 객체 생성(깃에 정리) 2. 내용 정리 종합퀴즈 app.use가 다른 라우터보다 위에 있어야 아래 라우터의 요청들에 app.use의 미들웨어가 적용된다. 단순 요청(Simple Request)은 프리플라이트 요청(Preflight Request)을 생략하는 요청으로 Express 미들웨어와를 사용하는 상황으로 보기는 어렵습니다. 단순 요청은 만족시켜야 하는 조건들이 많습니다. GET, HEAD, POST 요청 중 하나여야 합니다. 자동으로 설정되는 헤더 외에, Accept, Accept-Language, Content-Language, Conte..
8주차 주말 - express로 api 서버 만들기
8주차 주말 - express로 api 서버 만들기 1. 배운 것 req.query req.params 2. 내용 정리 2.1 req.params로 분기하기 // 1. 객체 디스트럭쳐링 할당 사용 예시 app.get('/api/users/:type', async (req, res) => { let { type } = req.params; if (type === 'seoul') { let data = [ { name: '김철수', city: 'seoul' }, { name: '이철수', city: 'seoul' }, ]; res.send(data); } else if (type === 'jeju') { let data = [ { name: '이동근', city: 'jeju' }, { name: '박동근',..
8주 5일차 - Refactor Express
8주 5일차 - Refactor Express 1. 배운 것 express 단일 연결 리스트 개념정리, 문제풀이 2. 내용 정리 줌세션 buffer : 로딩중일때 우리는 데이터 하나 하나의 조각인 chunk를 받아오는데 이 것이 buffer객체 형태로 온다. on 메서드: end 메서드: 요청 메세지의 구성 응답 메세지의 구성 EventEmitters, Streams - 깊게 알기엔 시간상 지금 하기엔 비효율적임. 뭔지만 알자. http모듈 불러오기 리슨메서드가 server객체에서 호출되어야 함. 요청의 응답처리(response.end()) request 객체에서 메서드, url, 헤더를 받아오기(객체 구조분해할당) 분기 - cors, 경로별 분기, 에러 요청 바디 받아와서 응답 분기에 쓰기(비동기라서 ..
8주 4일차 - CORS, express
8주 4일차 - CORS, express 1. 배운 것 CORS, SOP CORS 동작 방식 CORS 설정 방법 과제 - Mini Node Server 2. 내용 정리 ch 1-1 CORS, SOP sop: 동일 출처 정책. cors: 교차 출처 리소스 공유 cors 요청으로 교차 출처 리소스 사용의 권한을 얻어야 sop원칙에 의해 방해 없이 의도대로 웹앱 구동. 과제 - Mini Node Server 요청은 구현되어 있다. 응답을 구현하면 된다. OPTIONS 메소드: 서버가 어떤 메서드를 수행할 수 있는지 확인. 응답으로 입력값을 대문자 처리, 소문자 처리 각각 다른 경로로 처리. 모든 경로에 따른 분기가 메소드와 url로 이루어지므로 이 둘을 통해 분기시킬수 있다. if (메소드가 OPTIONS) ..
8주 3일차 - StatesAirline Client
8주 3일차 - StatesAirline Client 1. 배운 것 객체 디스트럭처링 할당을 함수의 매개변수에 사용하기 단일 연결 리스트 2. 내용 정리 순수함수는 외부환경에 영향을 받거나 영향을 끼치지 않는다. 따라서 외부의 변수를 함수 안에서 사용하는 함수는 반환값이 외부 변수의 값을 변경시키지 않더라도 비순수함수이다. 객체 디스트럭처링 할당 - 함수의 매개변수에서 사용 예시 function func1(filteredBy = {}) { if (filteredBy.num) return filteredBy.num; if (filteredBy.str) return filteredBy.str; return filteredBy; } let obj1; func1(obj1); // {} let obj2 = {nu..
8주 2일차 - Effect Hook
8주 2일차 - Effect Hook 1. 배운 것 데일리코딩 14번 자식이 부모 state 변경(역방향 데이터 흐름) Side Effect Effect Hook - 조건부 실행 클래스 복습 - 인스턴스 메서드, 정적 메서드 자료구조 - 단일 연결 리스트 2. 내용 정리 데일리코딩 14번 문제의 요구사항을 처음에 잘 이해하지 못했는데 reduce 메서드 없이 반복문으로 비슷한 기능을 한 문제였다. 조건문으로 false, 아니면 전부 true를 리턴. 리액트 역방향 데이터 흐름 하나의 컴포넌트는 하나의 일만 하게 만들어라. 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치할것. 예시: 전체 트윗 목록을 상태로 가지는 부모 컴포넌트와 자식 컴포넌트들인 새..
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파일들이더라도 다른 컴포넌트에도..