본문 바로가기

개인공부79

Redux -상태관리 라이브러리이다. -컴포넌트들이 props없이 state 공유가능. store에 모든 state들을 모두 저장해두고 필요한곳에서 가져다가 빼서 쓰는 개념이다. 그래서 컴포넌트간 state공유가 편해진다. -리액트의 데이터 흐름은 단방향이기 때문에 부모 컴포넌트 레이아웃 안에 존재하는 자식 컴포넌트들은 부모 컴포넌트의 상태를 props로 전달받게 됩니다. (부모 자식 관계의 컴포넌트가 계속 깊어질수록 state관리가 어렵고 가독성이 떨어질것입니다. 즉 과도한 props drilling이 발생할것입니다) 컴포넌트들의 데이터 교류의 복잡성 등을 해결하기 위해 효율적으로 관리하는 방법이 필요하고 그래서 리덕스를 사용하게 됩니다. -주요 개념으로는 action, reducer, store, dispatc.. 2023. 11. 28.
Webpack(웹팩) Webpack이란? 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러입니다. 여러개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미합니다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구입니다. webpack에서의 모듈은 JavaScript의 모듈에만 국한하지 않습니다. HTML, CSS, 혹은 .jpg나 .png 같은 이미지 파일들도 전부 포함한 포괄적인 개념입니다. 번들링은 말 그대로 묶음의 개념입니다. 파일을 묶는 작업 그 자체를 말하며 파일은 의존적 관계에 있는 파일들(import, export) 그 자체 혹은 내부적으로 포함되어 있는 모듈을 의미합니다. 정확히 말하면 모듈 간의 .. 2023. 11. 23.
번들링???? 어떤 제품을 묶음으로 판매하는 것을 '번들링'한다고 한다. 웹 개발에서 번들링 ???? 웹 개발에서 번들링은 빌드라고 할수있다. 사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위로 정의할수있다. 개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다. 웹팩(webpack)같은 번들러가 서로 연관(의존성)있는 여러 JS파일(모듈)들을 하나의 번들(bundle) 파일로 묶어주는 역할을 한다. 번들링을 하는 이유??? -파일의 크기 문제 해결 코드를 번들링한다는 것은 단순히 묶기만 하는 것이 아니라 컴퓨터 파일을 압축하는 개념과 비슷하다. 번들 파일은 번들링을 거치지 않은 원본 프로그램 .. 2023. 11. 23.
Rest API API ( Application Programming Interface ) -구글 맵 API, 카카오 비전 API 등 기존에 있는 응용 프로그램을 통해서 데이터를 제공받거나 기능을 사용하고자 할 때 사용하는 인터페이스 및 규격 을 말한다. -client와 server 사이에도 데이터와 리소스를 요청하고, 요청에 따른 응답을 전달하기 위한 메뉴판이 필요합니다. 이 메뉴판을 보고 client는 식당에서 식사를 주문하듯 server에 요청하고, 이에 대한 응답을 메뉴판에 있는 사진이나 음식에 대한 설명처럼 다시 server에서 client로 전송하게 됩니다. HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고받기 위해서는 알아보기 쉽고 잘 작성된 메뉴판이 필요한데, 이 역할을 API가 수행해야 한다.. 2023. 11. 23.