이론 공부11 Redux, Redux toolkit, Redux thunk Redux, Redux toolkit, Redux thunk란?Redux는 React 애플리케이션에서 상태를 효율적으로 관리하기 위한 도구이다. Redux Toolkit은 Redux의 사용을 보다 쉽고 간편하게 만들어주는 공식적인 Redux 라이브러리이다. Redux Thunk는 Redux 미들웨어의 한 종류로 Redux Thunk를 사용하면 Redux 액션 생성자 함수에서 비동기 작업을 처리할 수 있다. 즉 Redux는 상태관리도구이며, Redux Toolkit은 Redux의 사용을 쉽게 해주는 라이브러리., Redux Thunk는 Redux에서 비동기 작업을 처리하기 위한 미들웨어이다. Redux를 사용한 예시// 액션 타입 정의const INCREMENT = 'INCREMENT';const DEC.. 2024. 5. 16. 상태관리란(ContextAPI,Redux)? 상태관리란?쉽게 말해서 상태 즉 데이터를 관리하는 방법 상태(state)란?웹페이지 내에서 눈이 보이는 데이터 + 서버와 주고 받는 데이터(눈에 보이지 않는 데이터) 모두. 리액트의 ‘상태’ ⇒ 컴포넌트의 변경 가능한 동적인 데이터 리액트 어플리케이션은 여러개의 컴포넌트들을 사용해서 만들어짐 쉬운예시) -> 각각의 컴포넌트안에는 "기억"해야하는 동적인 데이터(ex.현재Input값,이미지 등)인 상태가 있음. 이 상태를 사용하여 자신의 모양이나 동작을 바꿀 수 있다. 상태관리가 필요한 이유?⇒ 어플리케이션, 프로젝트가 커짐으로써, 컴포넌트들 간 공유하는 상태의 관리가 어려워짐.⇒ 어떠한 작용으로 인해서 상태 변화가 나타날때, 상태가 "언제, 어떻게, 왜" 변화하였는지 알 수 없어 제어하기 힘들다. 상태관.. 2024. 5. 16. DOM과 Virtual DOM이란? 우리가 위와 같은 사이트를 볼때 하나의 페이지로 보지만 사실은 수많은 컴포넌트로 이루어져있다.그리고 이러한 컴포넌트들을 element라고 한다. DOM은 컴포넌트들을 tree 형태로 나타낸 것이다.즉 DOM이란 페이지를 구성하는 컴포넌트를 tree형태를 나타낸 것으로 웹페이지의 구조를 나타낸 모델이라고 할 수 있다. 트리의 요소 하나하나를 '노드'라고 부르고 해당 노드에 접근하여 제어할 수 있는 기능을 제공해준다. 우리는 DOM을 통하여 이러한 노드에 접근하여 원하는 곳에 수정을 할 수 있는 것이다. 그렇다면 Virtual DOM이란 무엇일까? Virtual DOM이란 실제 DOM의 복제품이라고 생각하면 된다. Virtual DOM은 실제 DOM을 효율적으로 업데이트하기 위한 가상의 것이다. 변.. 2024. 5. 15. Styled Components란? (Css-in-Js, GlobalStyles) Styled Components란? React에서 CSS-in-JS방식으로 컴포넌트를 꾸미게 해주는 패키지 이다. ✔️ CSS-in-Js 방식 : 자바스크립트를 이용해서 CSS 코드를 만들어내는 방식 기존에는 컴포넌트를 꾸밀때 CSS 파일을 따로 만들어서 꾸며주었다면 styled components를 사용하면 css 파일을 따로 생성할 필요없이 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸밀 수 있다. 자바스크립트 방식으로 CSS를 작성하면 조건부 스타일링이 가능하다는 장점이 있다.props를 통해서 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달받아서 조건부 스타일링이 가능하다. 그렇다면 컴포넌트 양식을 재사용하더라도 props를 통해 원하는 설정으로 각각 다르게 적용할 수 있다. Styl.. 2024. 5. 15. 내 웹사이트의 성능을 개선해보자! Lighthouse란? 트위터 프로젝트를 시작한지 약 2년이 지나가고.... 이제는 어느정도 원하는 기능은 구글링을 통해 다 구현할 수 있는데 이에 넘어서 내 프로젝트를 좀더 발전시키고 싶었다. 기능 구현에 치중되어있던 지난 개발 공부에 넘어서서 이제는 코드를 좀 더 깔끔하게 고치고 효율적인 코드 사용과 내 웹사이트의 성능을 개선하고 싶었다. 그래서 처음으로 공부하게 된 것이 lighthouse이다. 라이트하우스(Lighthouse)란? 구글에서 개발한 웹페이지의 품질을 개선할 수 있는 오픈 소스 형태의 도구이다. 라이트하우스는 웹 페이지의 여러 측면을 평가하고 테스트하여 개선할 수 있는 지표를 제공한다. 모드 사용할 수 있는 모드는 총 3가지가 존재한다. - 탐색 : 기본값으로 초기 페이지 로딩시 발생하는 성능 문제를 분석한.. 2024. 4. 5. Git 커밋컨벤션이란? (Git Commit Message Convention)이란... 커밋메세지를 작성할때 사용하는 규칙같은 것이다. ⇒ 커밋 메세지를 어떻게 작성할지 개인 또는 팀의 스타일에 맞게 규칙을 정한 후에 , 정해진 양식대로 커밋메세지를 작성한다. ⇒ 이렇게 작성하면 통일성을 가지고 체계적인 일처리가 가능해서 더 나은 협업이 가능하다. ⇒ 또한 어떤 내용인지 알아보기도 쉬워서 가독성도 좋다. commit 할때 메세지 구조는 다음과 같다. Commit Type : 태그와 제목 형식으로 구성되고, 태그는 영어로 쓰되 첫 문자는 대문자로 한다. 작업유형를 나타내는것이다. feat, fix, docs, style, refactor 등 다양한 작업유형을 나타내는 type이 존재한다. Subject : 제목. 50자 이하로.. 2024. 4. 3. 버전관리 도구(Version Control)란? 버전관리 도구란 동일한 소스 코드, 문서 등을 여러 버전으로 관리하는 것이다. 버전 관리 도구를 통해서 여러 개발자들과 협업을 할 수 있고 파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전으로 다시 돌릴 수 있다. 버전관리 도구하면 가장 먼저 생각나는것이 "Git"이다. 하지만 버전관리 도구에 대해서 공부하면서 다양한 방식의 버전관리가 있다는 것을 알게되었다. 1) 로컬형 버전관리 시스템(Local VCS) : 버전 관리 자료가 로컬 컴퓨터의 공유 폴더에 저장되어 관리한다. -> 개발자가 개발이 완료된 파일을 공유 폴더로 복사 -> 이 파일을 담당자가 파일을 자기 PC로 복사한 후 이상유무 확인 -> 오류가 발견되면 수정을 의뢰하고, 없다면 개발자들이 동작.. 2024. 4. 3. 웹 실시간 통신 방법(웹소켓, polling,long polling, streaming) 먼저 웹 실시간 통신방법에 대해서 알기 위해서는 http에 대해서 알아야한다. 브라우저에서는 HTTP Protocol을 사용해서 데이터를 주고 받기 때문이다. HTTP란? 쉽게 말해서 클라이언트와 서버가 주고 받는 통신이라고 생각하면 된다. 이러한 http는 ⇒ 클라이언트가 보낸 요청에 대해 서버가 응답을 마치면 맺었던 연결을 끊어버리는 비연결성의 성질을 가지고 있음. ⇒ 따라서 HTTP는 request, response 형태의 단방향 통신이며 한번 통신을 할때마다 많은 양의 데이터를 header에 담아서 보내게 됨 . 이렇게 http는 단방향성이기 때문에 실시간 통신을 하는것처럼 보이기 위해서 서버에게 계속적으로 요청을 보내야하고 요청을 보낼때마다 불필요하게 많은 양의 데이터를 보내야한다는 단점이 있다.. 2024. 1. 25. multipart/form-data란? 먼저 multipart/form-data를 설명하기 전에... multipart/form-data를 이해하기 위해서는 HTTP, multipart에 대한 이해가 필요했다. HTTP 쉽게 말하자면 http란 클라이언트와 서버 사이에 데이터를 주고 받을때 이루어지는 통신이다. HTTP는 아래의 이미지와 같이 4개의 파트로 나눌 수 있다 http통신이 이루어질때 클라이언트에서 서버에게 보내려는 데이터를 Message Body에 담아서 보낼 수 있다. 여기서 Message Body에 들어가는 데이터 타입을 HTTP Header에서 명시할 수 있는데 그게 바로 Content-type이다. ⇒ multipart도 데이터 타입을 명시해주기 위해 사용되는 타입 중 하나이다. multipart/form-data mult.. 2024. 1. 22. 이전 1 2 다음
