더 짧게 작성 → 가독성 ⬆, 객체 직접 작성xcreateAction 사용(액션에 필요한) 추가 데이터 : payload형태기본형 예시예시 1. 액션 생성 함수 파라미터를 payload에 변형을 주어서 넣고 싶다면creatAction 2번째 함수에 따로 선언예시 2.

src/index.js → 스토어 제작 & 리액트 app에 리덕스 적용 작업형태 예시스토어 사용 위해→ <App/>를 <Provider>로 감쌈<Provider>'react-redux' 제공store: props로 전달리덕스 개발자 도구크롬 확장 프로그

리액트 상태 관리 라이브러리 (가장 많이 사용하는)컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리 → 더 효율적인 관리 가능컴포넌트끼리 똑같은 상태 공유 필요 시 → 여러 컴포넌트 거치지 않고 손쉽게 상태 값 전달/업데이트 가능최적화(실제 업데이트 필요한 컴포넌트

현실의 개체(Entity)를 하나의 객체(Object)로 만들어 소프트웨어를 개발할 때 객체들을 이용해 프로그램을 작성할 수 있도록 하는 기법재 사용성, 확장성 -> 개발 기간 단축, 유지 보수 쉬움복잡한 구조를 단계적, 계층적으로 표현데이터 병렬 처리데이터와 데

함수형: x (가비지컬렉팅=1번 실행→ 메모리 상 제거)→ hooks는 클로저 원리 이용해서 state 저장클래스형 : o함수형 : o (hooks 를 통해서)클래스형 : o함수형 : hooks: 로직 분리 시킴 → 로직 재사용 가능클래스형 : 어렵 (action과 분

함수와 함수가 선언된 어휘적 환경의 조합특징자신이 생성될 시점의 환경을 기억하는 함수 → 함수 실행이 끝나고도 메모리에 스스로를 남겨둘 수 있는 방법클로저를 통해서 JS에는 없는 (비)공개 속성/메소드 구현 방안 마련 가능(외부 함수에 의해 반환되는 내부 함수를 가리

공공 데이터 API를 활용해 코로나 예방접종센터 조회 페이지 구현하나의 웹페이지로 구성 (화면 리스트 페이징) → centerName : 센터명, centerType : 센터유형, facilityName : 시설명, address : 주소구글 맵 센터 정보 표시

클라이언트 정보 저장형태: key와 valueHTML5에서 쿠키의 단점 보완해서 만든 기술 클라이언트에 대한 정보를 이용자의 PC의 하드디스크에 보관하기 위해서 웹 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보

자바스크립트의 비동기 처리 패턴 문법장점콜백 함수 & 프로미스의 단점 보완 (기존의 비동기 처리 방식)개발자가 읽기 좋은 코드 작성 가능함수 앞에 async (예약어) 붙임 → 함수 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await 붙임주의: 비동

Instagram을 모티브로 한 웹 사이트를 구현하는 팀 프로젝트팀 깃헙 레파지토리프로젝트 영상팀명 instamg팀 구성 프론트 3명 백엔드 2명소통 방식StandUp Meeting (Agile 방식)Trello 이용Backlog / This Week / In P

브라우저, Node.js를 위한 Promise api를 활용하는 HTTP 비동기 통신 라이브러리 = 백과 프론트랑 통신을 쉽게 하기 위해 AjAX랑 더불어 사용 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용P

Date 생성자시간의 특정 지점을 나타내는 Date 객체 생성Date 객체 1970년 1월 1일 UTC(국제 표준 시) 00:00으로부터 지난 시간을 밀리 초로 나타내는 유닉스 타임 스탬프를 사용Date 객체 초기화자바 스크립트 Date 객체 생성 법= new 연산자

라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것 (Dynamic Routing)방법 (2가지)Query parametersURL parametershistory이 객체를 통해 push, replace 를 통해 다른 경로로 이동 or 앞 뒤 페이

잘한 점 건강해진 생활 패턴 전보다 잘 먹고 잘 자고 더 편한 마음으로 진행 중 계획으로 적당한 긴장감을 가지려고 노력 시간이 길어져서 전체적으로 루즈해지는 면이 있지만 한달, 2주, 1주 단위로 나만의 목표를 정해서 긴장감을 놓치 않고 많이 생산해내려고

디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식 = 컴포넌트 중심의 디자인 패턴 Atoms: 하나의 구성 요소. 본인 자체의 스타일만 가지고 있으며 다른 곳에 영향을 미치는 스타일은 적용되지 않아야 함.Molecules

선택 항목 (값을 있어도 되고 없어도 되는)을 fetch로 보낼 때의 코드 → phone, email 의 경우에는 값이 있어도 되고 없어도 되는 선택 항목

중복 로직 줄이기 (event 객체 사용)_ +, - 연산 sort 로직 (인자에 따라 다른 결과값을 반환) 줄이기 query string 파싱 함수 재사용

사용하는 경우데이터가 많아서, 한 화면에 전부 보여줄 수 없는 경우프/백 양 쪽에서 모두 구현해야 함프론트 전달 사항쿼리 스트링(Query String) 사용limit : 한 페이지에 보여줄 데이터 수offset : 데이터가 시작하는 위치(index)url에서 ? 기호

팀 깃헙 레파지토리https://github.com/wecode-bootcamp-korea/16-2nd-starbugs-frontend팀명 STARBUGS 팀 구성 프론트 3명 백엔드 3명소통 방식StandUP Meeting (Agile 방식)Trello

https://github.com/katej927/STARBUGS_ListPage_210205전체 데이터를 한 번에 받고 그 후 모든 걸 front에서 처리한다.구조도최상위 컴포넌츠 (ProductList.js)카테고리 checkbox : ProductLis