20210106 TIL
·
BootCamp_Codestates/TIL
오늘한일 Recast.ly + AJAX 스프린트 진행 및 완료- youtube api 로 데이터 fetch. React.ly + AJAX 복습 및 스프린트 리뷰 학습내용 및 성취 특정 검색어를 입력한 후, 버튼을 눌렀을 때 검색어에 해당하는 youtube 데이터를 fetch 해 오는 일련의 과정을 익힐 수 있었다. state를 사용할 때, 어떤 데이터 혹은 상태를 state로 두어야 하는지에 대해 고민을 했다. 각 동작이 실행될 때의 동작 프로세스(데이터의 흐름 등)에 대해 공부했다. 느낀점 프리코스의 첫 페어님과 오랜만에 만나 스프린트를 진행하니 반가웠고 즐거운 시간이었다.
8-1. React 데이터흐름 & State 끌어올리기
·
BootCamp_Codestates/IM Tech Blog
Must know concepts recast.ly 스프린트에 등장하는 컴포넌트에 대해 컴포넌트 트리를 그려볼 수 있나요? recast.ly 스프린트에서 App이 클래스 컴포넌트인 이유가 무엇인가요? recast.ly 구조 상 어떤 컴포넌트가 서로 상호작용을 하고 있나요? React 에서의 데이터 흐름 1. 프로토타입에서 컴포넌트 찾기 리액트는 컴포넌트 단위 기준으로 상향식으로 앱을 만든다. 이는 테스트가 쉽고 확장성이 좋다. 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일 2. 트위틀러 예시로 진행 1) 컴포넌트 컴포넌트 단위로 나누는 이유? 단일 책임 원칙 즉, 하나의 컴포넌트에 하나의 일만 시키기 위함. 컴포넌트는..
20201231-20210103 IL
·
BootCamp_Codestates/TIL
한일 스프린트 코드리뷰 [x] ChatterBox Client [x] ChatterBox Server [x] Refactor Express [x] Twittler React 토이 problem 리뷰 - bubbleSort 학습내용 및 성취 Client, Server, Server Refactor(express), Twittler React 구현 차이점을 익힐 수 있었다. bubbleSort 를 풀었다. 느낀점 개념은 이해가 가는데, 구현하는 것이 어색하다. bubblesort 문제.. 레퍼런스 코드의 간결함에 멋쩍음을 느꼈다.
8. React Part1
·
BootCamp_Codestates/IM Tech Blog
Must know concepts JSX 문법을 도입하게 된 이유가 무엇일까요? 어떤 장점이 있나요? JSX를 사용하지 않고 React를 사용할 수도 있나요? (advanced) JSX에 JavaScript 표현식을 쓰려면 어떤 방법으로 써야 하나요? import / export 구문은 어떤 식으로 사용할 수 있나요? DOM을 처음 배울 때 페이지 단위로 작업하는 방법과 비교해서, 컴포넌트 단위로 개발할 때의 장점은 무엇인가요? 하나의 컴포넌트에서 여러 개의 엘리먼트를 리턴할 수도 있나요? 나의 새 트윗이라는 컴포넌트 사용 방법이 있다고 가정할 때, 컴포넌트 내에서 나의 새 트윗이라는 문자열은 어떻게 접근할 수 있나요? props를 다룰 때에 지켜야 하는 엄격한 규칙이 하나 있습니다. 무엇인가요? pro..
20201226 TIL
·
BootCamp_Codestates/TIL
오늘 한일 Chatter Box - Client sprint 기능 구현 완료 및 코드 분석 Browser Security 학습 학습내용 및 성취 Chatter Box 기능 구현 init : 앱을 실행시킨다. => 다음 메소드 들이 실행됨. refreshDisplay, addEventHandler, fetch addEventHandler : 이벤트를 처리한다. 버튼이 눌렸을 때 handleSubmit 실행 fetch : 서버로부터 데이터를 불러온다. renderMessage : 메세지를 DOM 구현한다. fetchAndRender : fetch 메소드 + render 메소드 send : 데이터를 서버에 저장한다. clearMessages : 채팅창 화면을 지운다. clearInput : 입력창을 지운다. ..
20201222 TIL
·
BootCamp_Codestates/TIL
오늘 한일 Asynchronous & Promise Part3 sprint 진행 with Pair 코드스테이츠 토크 세션 참여 Asynchronous & Promise 내용 및 sprint 코드 review 학습내용 및 성취 fetch 를 활용, 최신뉴스 와 날씨정보 데이터 합치기 fetch, Promise.all 활용, 최신뉴스 와 날씨정보 데이터 합치기 async, await 키워드 활용, 최신뉴스와 날씨정보 데이터 합치기 느낀점 Full IM 한승하님의 토크 세션이 많은 동기부여가 됐다. 하루 다섯시간의 수면...