본문 바로가기

전체 글173

Code States Section 2 - 4주차 😨 뭐? React가 마지막이라고? Code States의 코스에서 React가 마지막이다. 이제 React랑 친해진거 같은데 벌써 헤어지다니 😭 🤔 무엇을 배웠나 [React] 컴포넌트 디자인 컴포넌트 단위로 개발하기 CSS in JS 방법론 확실히 CSS에 정이 안간다. 하지만 컴포넌트로 CSS 작성하니까 보기는 편했다. 프로젝트 '나작블' 하면서 CSS와 친해지자. [React] 상태 관리 상태 관리 Redux 상태 관리는 재밌었다. 처음엔 State 끌어올리기를 복습한 뒤, Redux를 사용했다. 생각보다 빨리 익힐 수 있었다. Redux 생각보다 괜찮을지도? 😱 왜 추석에도 공부냐고 Section 2 - 4주차가 끝나니 벌써 추석이다. 하지만 추석때 쉬지 못한다. 왜냐하면 6주차가 Section.. 2021. 9. 20.
Code States 43일차 - React 상태관리 Redux Redux는 애플리케이션에서 정교한 상태 관리를 구현하는 데 도움이 되는 라이브러리 중 하나이다. 구성 요소의 로컬(React의 로컬 상태)를 넘어선다. 상태를 길들이기 위해 더 큰 응용 프로그램에서 취하는 솔루션 중 하나이다. React 애플리케이션은 Redux에 완벽하게 적합하지만 다른 라이브러리와 프레임워크도 Redux의 개념을 많이 채택했다. React가 없는 Redux의 기초 Redux는 Flux 아키텍처에서 몇 가지 제약 조건을 채택했지만 전부는 아니다. 실제 상태 업데이트에 대한 정보를 캡슐화하는 작업이 있다. 상태를 저장하는 저장소도 있지만 Store는 싱글톤이다. 따라서 Flux 아키텍처에 사용된 것과 같은 여러 Store가 없다. 또한 단일 Dispatcher가 없다. 대신 .. 2021. 9. 17.
Code States 42일차 - React 상태관리 프론트엔드 개발에서의 상태관리 이번 챕터에서 프론트엔드 개발에서의 상태관리에 대해 (React를 알고 있다는 가정) 얘기한다. React는 상태 관리를 위한 라이브러리는 아니지만 상태관리의 주요 원칙을 배우고 따라가면, 컴포넌트 간 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다고 한다. 상태가 무엇인지 다시 점검해보면 변하는 데이터이며, 프론트엔드에선 "UI에 동적으로 표현될 데이터"이다. 예로 쇼핑몰의 장바구니를 들 수 있다. 이 화면을 컴포넌트로 분리해서 서로 어떤 상태를 공유하고, 주고받는지 알아보자. 알아보기 전에, Side Effect부터 상태를 다룰 때에 Side Effect는 주요 고려대상이다. Side Effect는 "함수 입력 외에도 함수의 결과에.. 2021. 9. 16.
Code States Section 2 - 3주차 😵 이번주는 거의 페어구만... 일주일의 절반 이상이 페어 프로그랭이었다. React에서 조금 막혔지만 Node.js 할때는 조금 수월했다. 생각보다 널널한 분위기 였지만 스터디 준비하니 빡빡하고 정신없는 한주였다. 🤔 무엇을 배웠나 [React] 데이터흐름의 이해와 비동기 요청 처리 React 데이터 흐름 Effect Hook React는 재밌는데 너무 뛰엄뛰엄 등장한다. 따로 공부하려고 하지만 자료구조의 늪에서 벗어나질 못하고 있다. 자료구조의 복습이 끝나면 React로 프로젝트 하나 시작할 수 있겠지? 그리고 state 끌어올리기가 안되길래 뭔가 싶었다. 알보고니 함수의 인자가 객체였다는 사실... 그리고 페어의 도움을 많이 받아서 감사했다. SEB FULL 33th 이민형님 감사합니다! [Web .. 2021. 9. 14.
Code States 39일차 - React 컴포넌트 디자인 컴포넌트 단위로 개발하기 Component-Driven Development (CDD) 컴포넌트를 더 나은 방법으로 만들기 : 작은 구성 요소부터 최근 몇 년 동안 웹용 프론트엔드 UI(User Interface) 개발의 가장 큰 추세는 component이다. React 라이브러리가 첫 번재는 아니지만 대부분 잘 지정된 구성요소에서 UI를 구축하기 위한 패턴을 설정했다. 물론 잘 지정된 역할을 수행하는 더 작은 조각으로 만들어지 소프트웨어를 향한 추세는 새로운 것이 아니다. Component-Driven Development (CDD)란 무엇일까? 구성 요소를 중심으로 빌드 프로세스를 고정하는 개발 방법론이다. 구성 요소 수준에서 시작하여 페이지 또는 화면 수준에서 끝나는 '아래에서 위로' UI를 구축하.. 2021. 9. 13.
Code States 35일차 - React 데이터 흐름의 이해와 비동기 요청 처리 이번 코드스테이츠 챕터는 제목부터 길군 React 데이터 흐름 컴포넌트로 생각하기 React의 개발 방식의 가장 큰 특징은 컴포넌트 단위로 시작한다는 것이다. 컴포넌트를 만들고, 다시 페이지를 조립해 나간다. 즉, 상향식(bottom-up)으로 앱을 만든다. 테스트가 쉽고 확장성이 좋기 때문이다. 데이터는 위에서 아래로 흐른다 컴포넌트는 바깥에서 props를 이용해 데이터를 인자(argument) 혹은 속성(attributes)처럼 전달받을 수 있다. 즉, 데이터를 전달하는 주체는 부모 컴포넌트 이다. 데이터 흐름이 하향식(top-down)이라는 것을 의미한다. 단방향 데이터 흐름(one-way data flow)이라는 키워드는 React를 대표하는 설명중 하나이다. 데이터 상태 모든 데이터를 상태로 둘.. 2021. 9. 6.

티스토리툴바