COCO World

🍋 React-Query : React 어플리케이션에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 작업을 도와주는 라이브러리이다. 🌱 Redux, Mobx와의 차이점 react-query는 서버상태를 다루는 라이브러리, redux와 mobx는 클라이언트 상태를 다루는 라이브러리이다. 🌱 fetch와 axios와의 차이점 fetch와 axios는 실제 API 요청을 수행하여 직접 리소스를 불러오는 역할의 라이브러리이고, react-query는 API를 통해 불러온 서버의 상태를 내부적으로 캐싱 및 동기화하는 등 잘 활용할 수 있게 도와주는 라이브러리이다. 🍋 React-Query의 장점 별도의 설정 없이 즉시 사용이 가능하다 캐싱을 효율적으로 관리해준다 같은 데이터에 대한 여러번 ..

1. Redux 의 흐름 구조 [1] 상태가 변경되어야 하는 이벤트가 발생하면 변경될 상태에 대한 정보가 담긴 Action 객체 생성 [2] 만든 Action 객체는 Dispatch 함수의 인자로 담겨져 전달됨 [3] Dispatch함수를 통해 담겨져 온 Action 객체는 Reducer 함수로 전달해줌 [4] Reducer 함수는 Action 객체의 데이터값을 확인하고, 그 값을 가공하여 전역 상태 저장소인 Store의 상태를 변경 [6] Store에서 변경된 상태값은 React의 리렌더링을 통해 컴포넌트에서 보여줌 2. 리액트 개발 시, 렌더링 최적화 방법에 이용할 수 있는 다음 세 가지의 특징과 차별점 React.memo [1] React.memo 특징 : React는 먼저 컴포넌트를 렌더링 한 뒤..

React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리로 웹 또는 앱 애플리케이션의 UI, 보여지는 부분인 프론트엔드 영역을 구축하게 해주는 역할을 한다. 리액트의 특징 [1] SPA(Single Page Application) 아키텍처 정의 - SPA란, 한 개의 페이지로 이루어진 애플리케이션이라는 뜻으로, MPA(Multi Page Application)과는 상반된 개념이다. 특징 - 딱 한개의 페이지로 구성된 웹 앱 - 서버에 1회 리소스를 요청하고, 그 이후부터는 필요할 때 데이터만 받아와서 기존 페이지를 '수정'하는 방식으로 화면이 보여진다 - SEO(Search Engine Organization)에 약하다. - MPA는 위와 반대로, 요청이 일어날때마다 웹페이지를 새로 다시..

1. JS함수와 객체 [1] 자바스크립트의 함수란? : 작업을 수행하거나 값을 계산하는 명령문의 집합인 procedure와 비슷하지만, 프로시저가 함수로 쓰이려면 입력을 반드시 받아야 하고, 입력과 명확한 관계가 있는 출력을 반환해야 합니다. 함수를 사용하기 위해선 함수를 호출할 스코프 내에서 함수를 정의해야 한다. [2] 함수를 생성하는 방법에는 함수 생성자, 함수 표현식, 함수 선언식 등이 존재한다. [3] 자바스크립트의 객체란? : 자바스크립트는 객체(object) 기반의 스크립트 언어이며, 자바스크립트를 이루고 있는 거의 "모든 것"이 객체이다. 객체는 키(key)와 값(value)로 구성된 프로퍼티(property)들의 집합이라 한다. [4] 함수와 객체의 관계 : 프로퍼티의 값으로 자바스크립트..

API 첫째주 후기 무사히 부트캠프 1주차가 종료됐다. 첫째주 시작 전, 스파르타코딩클럽에 등록된 웹개발 종합반 인강을 완주하는게 사전과제였고, 이를 토대로 첫째주차에 미니프로젝트를 경험차 진행하면서, 마지막 금요일은 입학시험을 치뤘다. 프로젝트 또한 API 설계 중심으로 이뤄졌고, 입학시험도 API의 Update 를 실현하는 과제였다. 인강 및 프로젝트에서 API의 설계 순서와 이해를 바탕으로 실습을 이뤘다면, 무난히 해냈을 정도였고, 중간중간 오타만 조심하면 될 것 같다. 또, 입학시험에서는 마지막 서버구축에서 예상 못한 포트오류때문에 애먹었는데, 컨퍼런스를 새로 뚫어서 제출하였다. 당황했다.. 주중에 대부분의 시간을 프로젝트로 진행하였는데, 깃에 대한 자습도 같이 병행하던 한주 였기 때문에, 팀원들..

드디어 웹개발종합반 5주차까지 완주를 해냈다. 사실 5시간 밖에 안되는 길지 않았던 시간인데, 조금은 굼떴나.. 머쓱 5주차에는 코딩보다는 만든 웹페이지를 AWS 클라우드에 등록하기 위해 우분투OS를 사용하여 터미널을 통해 등록하고, 도메인을 구매하여 붙이는 등 웹페이지 배포를 위한 한주였다. 웹페이지 배포는 처음해봐서 어어..? 하면서 무작정 따라가서 별탈없이 배포에 성공했는데, 이렇게 무작정 따라가기만 해서 되나 싶기도하고, 차차 여러번 시도를 하면서 감을 잡는 건지, 아니면 항상 서버가 날 애먹였으니 내가 어렵게 생각하는건지 아직은 잘 모르겠다. 웹페이지를 배포하기 위해 사용한 서비스들 [1] 가비아 : 도메인을 구매한 사이트 = 도메인은 맘대로 설정할 수 없고, 허가가 필요한 권한으로 가비아가 이..

4주차에서는 본격적으로 1-3주차까지 배웠던 것들을 토대로 서버를 통해 웹페이지를 열고, API 기능을 연습하는 한주차였다. 여러번 반복적인 학습을 통해 POST와 GET 방식을 익숙해지기 위해 많이 준비한 시간이어서, 낯선 접근이었어도 어느정도 익숙해진 것 같다. 다만 초기 기본셋팅이나 기초적인 부분을 코드스니펫이라는 복붙기능으로 제공하여, 처음부터 쌓아올리는 환경을 접할 경우, 꽤 애를 먹을 수 있는 상황이 발생할 것 같기도 하다. api 초기 셋팅의 원리도 알고 싶었는데 이 부분은 따로 언급되지 않았다. 오픈API를 가져오는 방법이나, DB를 이용해 저장 후 가져오는 API 기능을 3,4주차를 통해 학습하였는데, 쉬운 방법으로 접근하였더라도 아직 익숙하지않고, 버벅일 수 있다. 어떻게 접근하는지 이..

부트캠프 개강 D-5 3주차의 강의주제는 웹스크래핑(크롤링)과 mongoDB 였다. *웹 스크래핑? 각 웹사이트에서 데이터를 수집해오는 기술 *mongoDB? NoSQL 데이터베이스 시스템으로, JSON 문서 형태로 저장되어 사용 맨 처음에 파이참과 파이썬을 왜 배우는지 몰랐는데, 저 둘을 위해서였나보다. 또 웹스크래핑과 몽고DB는 처음 배우는 부분이라 이전 주차들보다 흥미로운 마음으로 들었던 수업이었다. 역시나 차분히 수업을 따라가보면 충분히 이해하면서 들을 수 있는 난이도의 학습이었다. 이번 과제는 힌트를 약간 봐버렸다. 리스트들을 호출하는데, 한가지 값만 반복적으로 노출하길래 와이라지,,했는데 한가지 값만 호출하는 BeautifulSoup함수를 사용해서였다. 어차피 내가 하는 실수는 어렵고, 딥한 ..