Til

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..

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() 메서드는 첫번째 인수로 시작인덱스부터 두번째 인덱스로..

6주 4일차 - 리액트 기초

6주 4일차 - 리액트 기초 1. 리뷰 1.1 좋았던 점 늦게 잤음에도 6시에 일어나서 다시 잠들지 않고 공부를 시작한 것. 딥다이브 스터디를 포기하지 않은 것. 1.2 아쉬웠던 점 수면시간 부족으로 집중력 저하. 1.3 notes m1맥북에어 램16기가 ssd512기가 질렀다. 목숨걸고 공부해야 할 이유가 하나 더 늘었다. 웃프다 ㅎ하하 내일만 버티면 3일이나 쉰다. 어차피 공부하고 있겠지만, 지금 잠깐이나마 숨 고를 수 있을 때 프로젝트 전 까지 공부해야 할 것들 제대로 분량 쪼개고 미리미리 준비해두어야겠다. 부족한 공부를 때우려고 늦게 자는 것보다 일찍 일어나서 깨어있을 때 최대한 시간을 효율적으로 쓰는게 낫다. 2. 배운 것 딥다이브 12장 - 함수 리액트 jsx문법, 컴포넌트 생성 3. 내용 정..

6주 3일차 - 개인 공부

1. 리뷰 1.1 좋았던 점 동기 분들의 긍정적인 말들이 큰 힘이 된 하루였다. 부트캠프 기간이라면 휴일에도 공부를 하는게 당연하다고 느껴졌고 억지로 한다는 느낌이 아니라 스스로 필요해서 하게 되는 점이 좋았다. 1.2 아쉬웠던 점 효율적으로 시간을 쓰지 못한 것. 1.3 notes 살면서 ‘열심히' ‘한가지를' ‘꾸준히' 라는 말들은 내 인생에선 도저히 찾아 볼 수가 없었는데, 나도 내가 개발 공부를 스스로 동기부여하며 계속해서 공부를 이어나가고 있는 지금의 모습이 가끔은 신기하다. 리액트를 들어가게 되니 그동안 또 한켠으로 미뤄두었던 html, css의 숙달의 필요성이 느껴진다. 프로젝트 전에 준비해야 할 것들은 하루 하루 조금씩 준비해야 한다. 코테와 화면 구현, 타입스크립트, graphQL, 네트..

6주 1, 2일차 - 비동기, fetch api

1. 리뷰 1.1 좋았던 점 많이 헤멨는데 좋은 페어분과 만나서 과제를 잘 풀어낼 수 있었다. 정규시간 이후 스스로 리팩토링 해봤다. 1.2 아쉬웠던 점 생활코딩 강의에 내가 헷갈리던게 다 나와있었다. 처음부터 이걸 봤다면 이렇게 헤메지는 않았을텐데. 1.3 notes 독학범위를 벗어나 새로 배운 걸로 과제를 치뤘을 때의 적나라한 현재 실력이 드러났다. 의지가 아니라 시스템이다. 시간적 여유가 있을 때 미리 미리 학습방식을 개선해야겠다. 네트워크와 서버 관련 과제에서 미리 대비가 되어있지 않다면 이번 과제들과 같이 헤멜 것이 뻔하다. 2. 배운 것 fs모듈의 여러 메서드 path모듈의 경로 처리 방법 promise.all 화살표함수 표현식 async함수 만드려면 변수에 담을때 await 키워드 위치 pr..

5주 2일차 - 고차함수

1. 리뷰 1.1 좋았던 점 고차함수 문제풀이가 많이 어려웠는데 페어프로그래밍 하며 내가 설명하기 위해 공부하면서 빠르게 이해한 것 1.2 아쉬웠던 점 개인공부 못함 고차함수인지 아닌지 판단하는 문제 틀림. 아직 고차함수 개념정리가 부족함. 1.3 notes 프론트엔드 개발자는 웹디자이너가 아니다. 프론트엔드 이전에 개발자다. 구현능력 정말 중요하다. 2. 배운 것 일급 객체 forEach, map, filter, reduce, sort 등 고차함수를 사용한 배열 문제풀이 (참고: 인프런 강의 ‘자바스크립트 알고리즘 문제풀이’) 추상화 - 값 수준의 추상화, 사고 수준의 추상화 3. 내용 정리 고차 함수: 함수를 반환하는 함수 함수를 인수로 전달받는 함수 filter 메서드 사용법: 원본 배열을 수정하지..