리액트바오

객체에서 헷갈리는 부분이 있어 객체부분을 다시 보고 난 후 코플릿 문제도 풀어 보았다. 21번까지 있는데 오늘은 10번까지만 풀었다. 이전에 이미 학습한 내용이지만 다시 보니 또 새롭게 알게 된 것들이 있어서 복습을 하길 잘했단 생각이 들었다. 앞서 학습한 내용을 조금씩이라도 계속 봐야겠다는 생각을 했다. 닷노테이션과 브라켓노테이션 차이 delete obj.key 안됨 delete obj[key] 됨 obj.key 형태로 쓰기 위해서는 key는 변수가 아니라 정확한 프로퍼티 이름이어야 한다. (ex. obj.name) 반면 obj[key] 는 괄호 안이 변수이고, 정확한 프로퍼티 이름으로 출력하려면 obj['name'] 이어야 한다. Today's Key🔑 코플릿 객체 11번~21번까지 풀 것 !

TIL 2021. 12. 1. 23:54

오늘 페어와 함께 스프린트를 풀고 시간이 꽤 남았다. 그래서 자료구조를 학습할 때 어려웠던 부분을 다시 보았다. [Stack] 브라우저 뒤로가기 앞으로가기 문제 개발자가 되고 싶은 김코딩은 자료구조를 공부하고 있습니다. 인터넷 브라우저를 통해 스택에 대해 검색을 하면서 다양한 페이지에 접속하게 되었는데 "뒤로 가기", "앞으로 가기"를 반복하면서 여러 페이지를 참고하고 있었습니다. 그런데 새로운 페이지를 접속하게 되면 "앞으로 가기" 버튼이 비활성화돼서 다시 보고 싶던 페이지로 갈 수 없었습니다. 이러기를 반복하다가 김코딩은 스택 자료구조를 떠올리게 되었습니다. 브라우저에서 "뒤로 가기", "앞으로 가기" 기능이 어떻게 구현되는지 궁금해진 김코딩은 몇 가지 조건을 아래와 같이 작성하였지만, 막상 코드를 ..

TIL 2021. 11. 30. 21:48

Storybook이 무엇인가? Storybook은 UI 개발 즉, Component Driven Development를 하기 위한 도구다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다. Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있도록 도와준다. 또한 테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다..

TIL 2021. 11. 29. 23:51

Express와 Middleware를 배웠다. Express는 node.js의 프레임워크라 한다. node.js 쓰레드 기반 동기방식(Blocking I/O) 개발자가 모든 종류의 서버 사이드 도구들과 어플리케이션을 자바스크립트로 만들수 있도록 해주는 런타임 환경 백엔드에서도 자바스크립트를 쓸 수 있도록 고안한 언어 NPM: Node Package Manager express node.js위에서 동작하는 웹 프레임워크 node.js 개발 시 개발을 빠르고 손쉽게 할수록 도와주는 역할을 함 (미들웨어 사용) 자바스크립트 코드로 작성된 다양한 기능의 미들웨어는 개발자가 필요한 것만 선택하여 express와 결합해 사용할 수 있음 미들웨어 클라이언트에게 받은 요청에 응답하려는 중간(미들)에 목적에 맞게 처리를..

TIL 2021. 11. 27. 14:52

리액트 컴포넌트 내에서 AJAX요청하는 과제를 페어와 함께 진행하는 날이다. 우리가 수행해야할 과제는 fetch를 이용해 서버에 AJAX 요청을 진행하는 것이다. api/FlightDataApi.js의 getFlight 함수를 기존 구현 대신에 REST API 호출로 대체해야한다. 이것을 하기 위해서는 Effect Hook을 알아야한다. 상세내용을 노션에 정리후 오늘 수행했던 스프린트 과제를 다시 다운받아 풀어보는 방식으로 공부했다. Side Effect Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. 다음은, 전역 변수 foo를 bar라는 함수가 수정하는 예제이다. let foo = 'hello'; fu..

TIL 2021. 11. 23. 20:13

섹션2의 React시작이다! 상태 끌어올리기라는것을 새롭게 배우게 되었고 흥미로웠다. React에서의 데이터 흐름 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이 가장 큰 특징이다. 먼저 컴포넌트를 만들고, 페이지를 조립해나간다. 즉, 상향식(bottom-up)으로 앱을 만드는것이다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다. State 끌어올리기 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 state로부터 왔는..

TIL 2021. 11. 22. 22:22

오늘은 페어와 함께하는 일정은 없이 혼자 학습하는 날이다. 그리고 HTTP네트워크 기초를 학습하는 날이였다.내 계획은 정해진 시간보다 빠르게 읽고, 노션정리를 한 후 더 풍부하게 이것저것 더 검색해 볼 계획이었는데 생각보다 시간이 부족해 오히려 시간에 쫒기며 했다. 하지만 재미있었다. 이전에는 노션에 정리를 할때도 있고 안할때도 있었다면 요즘은 계속 노션에 정리를 하며 공부를 하는데 정리를 하며 공부하니 머리에 더 잘 남는것 같다. HTTP API 디자인을 잘 하는 방법 HTTP API 디자인에는 Best Practice가 존재한다. 사용자 관리 API인데 URL 디자인은 비교적 단순하나 "메소드"라는 개념이 등장한다. HTTP 요청에는 메소드라는 것이 존재한다. 앞서 스타벅스에서는 (학습할 때 스타벅스..

TIL 2021. 11. 18. 23:14

토요일을 맞이하여 DOM에 대해 복습해보았다. 그리고 고차함수 코플릿 문제도 풀어보았다. 모두 Section1에서 학습한 내용들이였는데 복습을 하면서 새롭게 알게 되는 부분들도 있고 복습을 하길 잘했다는 생각이 들었다. DOM으로 HTML 조작하기 document 객체에는 많은 속성과 메소드가 존재한다. 모든 속성과 메소드를 외워야 할까? 지금 당장 전부 알아야 할 필요는 없다. 지금 집중할 부분은 CRUD(Create, Read, Update and Delete) 이다. 앞으로 어떤 종류의 개발이나 컴퓨터 언어를 배우더라도 가장 먼저 CRUD에 집중해야 한다. CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법이다. (CRUD를 이해한 다음에는 다양한 trivia를 알아야 함.) 이..

TIL 2021. 11. 13. 22:16