전체 글

프론트엔드 개발에서 상태관리를 보다 더 효율적으로 하기 위한 라이브러리인 Redux에 대해 공부하였다. 상태관리를 공부하면서 등장하는 다양한 개념들도 익혀두면 좋을 것 같다. 프론트엔드 개발에서의 상태관리 상태란 ? UI에 동적으로 표현될 데이터 상태를 다룰 때에 Side Effect는 주요 고려 대상임 상태의 두가지 구분 로컬 전역 특정 컴포넌트안에서만 관리되는 상태 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 , 전역 상태일 필요는 없음 (출처가 달라도 됨) 그러나 서로 다른 컴포넌트가 동일한 상태를 다룬다면 출처는 오직 한 곳이어야 함 데이터 무결성? 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 ..

Redux 란 ? javaScript 애플리케이션에서 상태를 관리하는 라이브러리 중 하나 데이터 흐름을 예측 가능하게 만들어 애플리케이션의 상태 변화를 추적하고 디버깅하기 쉽게 해줌 Redux 구성요소 액션(Action) 리듀서(Reducer) 스토어(Store) 디스패처(Dispaatcher) 상태를 변경하기 위한 정보를 가지고 있는 메세지 , 액션은 객체 형태로 작성되며 필수적으로 'type' 프로퍼티를 가지고 있어야 함 상태를 변경하는 로직을 담당함. 리듀서는 이전 상태와 액션을 받아서 새로운 상태를 반환하는 순수함수임 상태를 저장하고 관리함. 스토어는 애플리케이션의 상태를 담고 있으며, 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것임 액션을 전달하는 역할을 수행 . 디스패처는 단 하나만 존..

오늘은 리액트로 프론트엔드를 구축할 때 , 구조적으로 코드를 작성하는 방법에 대해 작성해 볼 것이다. CDD 란? Component Driven Development 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법 같은 UI 컴포넌트를 공유 즉 재사용할 수 있는 UI 컴포넌트를 개발하기 위해 고안됨 CSS-in-JS 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러옴 CSS는 컴포넌트 기반의 방식을 위해 만들어진 적이 없음 그래서 탄생한 것이 CSS-in-JS CSS도 컴포넌트 영역으로 불러들이겠다 ! 대표적 예 ) Styled-Component Styled-Component 기능적 혹은 상태를 가진 컴포넌트로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴을 제공 CSS를 컴포넌트화 시켜주는 라..

이번과제는 머리를 많이 썼던 것 같다 .. 실시간 세션 전에 하나의 문제가 발생해 시간내에 해결하지 못했지만 다시 복습을 통해 완벽하게 이해할 수 있었다. 페어분께도 도움을 많이 받아 여러 궁금증도 해결하고 정말 의미있던 과제였다 ! 구현해야할 과제는 아래와 같다 Bare minimum requirements react-router-dom을 이용해 Client Side Routing하는 방법을 학습합니다. useState를 이용해 상태를 사용하는 방법을 학습합니다. 쇼핑몰 애플리케이션의 주요 기능을 구현하세요. [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현하세요. 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현하세요. 장바구니 내에서 각 아이템 개수를 변경할..

블로깅 챌린지 첫날이 다가왔다. 나는 3주간 수요일에 블로그 글을 작성하기로 했다. 현재 코드스테이츠를 수강하면서 배운 것들 중 리액트를 공부했을 때 가장 어려웠고 부족했던 거 같아 리액트에 관한 주제로 3주간 세가지의 리액트를 주제로 한 글을 작성해볼 예정이다 . 오늘은 리액트를 사용한다면 기초적으로 알아야할 지식에 대해 공부하고 작성해볼 것이다. 다양한 리액트 실습을 진행하면서 아직 props 와 state에 대해 많이 헷갈리는 것 같다 .. 오늘을 계기로 완벽하게 이해하고 넘어갈 것이다 ! 리액트란 ? 리액트(React)는 자바스크립트 라이브러리로서 컴포넌트(Component) 기반으로 동작합니다. 리액트 컴포넌트는 props와 state를 통해 데이터를 관리하고 화면에 렌더링합니다. 컴포넌트란 ?..

오늘은 프론트엔드 개발자로서 꼭 알아야하는 UI/UX 지식에 대해 학습해볼 것이다. UI 란? User Interface , 사용자 인터페이스 사람들이 컴퓨터와 상호 작용하는 시스템을 의미함 화면상의 그래픽 요소 외에도 키보드,마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이므로 UI라고 볼 수 있음 GUI 란? 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말함 ex) 운영체제의 화면 , 애플리케이션의 화면 프론트엔드 개발자로서 UI는 대부분 GUI 를 의미함 UX 란? User Experience , 사용자 경험 사용자가 어떤 시스템, 제품, 서비스를 직 간접적으로 이용하면서 느끼고 생각하는 총체적 경험 즉 제품, 서비스 그 자체에 대한 경험은 물론 홍보, 접근성,사후 처리..

JSON이란? JavaScript Object Notaion의 줄임말로 데이터 교환을 위해 만들어진 객체 형태의 포맷 메세지 객체를 전송할 수 있게 하려면 , 메세지를 보내는 발신자와 메세지를 받는 수신자가 같은 프로그램을 사용하거나 문자열 처럼 범용적으로 읽을 수 있는 형태여야함 객체는 타입 변환을 이용해 String으로 변환 할 경우 객체 내용을 포함하지 않음. 자바스크립트에서 객체를 문자열로 변환하기 위해 메서드 toString() 이나 형 변환 String() 을 하게 된다면 [object Object] 라는 결과를 리턴함 그럼 객체는 어떻게 문자열로 변환해야 할까 ? 이 때 사용하는 것이 객체를 JSON 형태로 변환하거나 JSON을 객체의 형태로 변환하는 방법임 JSON.stringify : 객..

재귀란 ? 원래의 자리로 되돌아가거나 되돌아옴 아래의 코드 처럼 선언한 함수내의 같은 함수를 호출함으로서 재귀를 구현할 수 있음 아래의 코드처럼 recusion 함수는 재귀함수라고 함 재귀 함수를 잘 활용하면 반복적인 작업을 하는 문제를 좀 더 간결한 코드로 풀어낼 수 있음 언제 사용하는게 좋을까 ? 1. 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는경우 2. 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운경우 function recursion() { console.log("hi") console.log("manchoon") recursion() } 재귀로 문제 해결하기 재귀로 문제를 풀기에 앞서 이론적으로 재귀로 문제를 해결하는 단계는 아래와 같음 1. 문제를 좀 더 작게 쪼갬..

정말 힘들었던 섹션2가 끝났다 .. 섹션1 때는 그래도 기존에 알고있던 지식들도 있어서 크게 공부를 따라가는데 어려움이 없었다. 섹션 2에 들어와서 리액트라던지 , 서버를 만든다던지 , 서버와 통신한다던지 어려운 개념들을 다뤘던 것 같다. 앞으로 더 어려워 질테지만 !! 그래도 얼렁뚱땅 섹션2까지 마무리를 했다 ... ! (나 자신 칭찬해!!!!!!!!!!!!!!!!!!) 물론 완벽하게 섹션2를 통달했다고 말할 순 없지만 그래도 백엔드와 소통하면서 프로젝트를 잘 진행할 수 있을 것 같다 ! 예전 졸업프로젝트로 백엔드와 나누어 프로젝트를 진행했었는데 그 때는 URL , URI , fetch 등등.. 뭔지도 제대로 모르는 상태에서 무작정 구글링을 통해 0부터 100까지 한번에 뛰어 넘으려고 했던 것 같다. ..