얼음저장소

Reducer 란? 액션을 주면 그 액션이 적용되어 달라진 결과를 만들어 줌 (안달라질 수도 있음) 함수이다. Pure Function : 같은 인자를 주었을 때 항상 같은 값이 나와야 함 Immutable⇒ 리듀서를 통해 상태가 달라졌음을 리덕스가 인지하는 방식이기 때문 : 기존의 상태와 업데이트된 상태가 각각 다른 객체여야함 형태 function 리듀서(previousState, action) { return newState; }​ 액션을 받아 스테이트를 리턴하는 구조 인자로 들어오는 previosState 와 리턴의 newState 는 다른 참조를 가지도록 해야한다. 예제 코드 // action.js export const ADD_TODO = "ADD_TODO"; function addTodo(to..

리덕스의 액션이란? 액션은 객체(Object)이다. 두가지의 형태가 있다 // type 1 {type: 'TEST'} // payload 없는 액션 // type 2 {type: 'TEST', params: 'hello'} // payload 있는 액션 필수 프로퍼티는 type 하나이며, type은 보통 문자열(string)이다. 액션은 스토어에 전달이 되면 스토어의 상태를 변경하는데 사용된다. 리덕스의 액션 생성자 (Action Creater) 액션을 생성하는 함수를 액션 생성자라고 한다. 함수를 통해 액션을 생성하여 액션 객체를 리턴해주는 함수이다. createTest(’hello’); // {type: ‘TEST’, params: ‘hello’} 와 같은 구조다. 리덕스의 액션의 역할 액션 생성자를..

🥺 프로젝트 시작! 네 번째 프로젝트를 진행하였습니다. 이번 프로젝트는 처음으로 TypeScript 를 사용하고 또한 figma 에 작성된 디자인과 가이드에 따라 구현해야 하는 과제였습니다. 또한 json-server 를 이용하여 mock 데이터로 화면에 보이도록 설정해주는 부분도 필요했습니다. 내 거친 TS 지식과 불안한 눈빛과 함께 첫 타입스크립트 기반 프로젝트를 시작하였습니다. 필터나 토글을 선택하여 조건에 맞는 견적 요청 카드를 보여주는 페이지를 구현하는 것이 목적인 과제입니다. 크게 파트를 나누자면 필터 섹션, 카드 섹션, 네비게이션 섹션 (그 외 배포 설정 등..)으로 나눌 수 있었습니다. 이번 과제부터 팀원분의 사정으로인해 저희 팀이 3명(ㅠㅠ)이 되어버렸는데 다행히도 파트가 크게 세 개로 ..

설 주가 지나고 세번째 주가 되었습니다. 이번 주에 TypeScript 로 프로젝트를 진행해야 했기 때문에 지난주에 TypeScript 를 이용하여 간단한 todolist 를 만들어보았습니다. 하지만 완전히 적응 하기에는 아직 멀은것 같아 TypeScript 로 바로 프로젝트를 진행하기 어렵지 않을까 했습니다. 하지만 이번 수업에서 TypeScript의 도움이 될만한 부분을 잘 설명해주셔서 도움이 많이 되었던 것 같습니다. 이번 글에서는 TypeScript 의 기본 개념과 특징에 대해 작성하고, 프로젝트 후기는 2편에 작성하도록 하겠습니다. 👉 TypeScript 를 시작하기 전에 관련 면접 질문 생각해보기 - TypeScript 특징은? - TypeScript 도입의 장점/단점은? - 스크립트 언어와 ..

첫째주가 순식간에 지나갔습니다. 비교적 간단했던 첫번째 과제에 비해 두번째 과제가 공개되고 저는 너무 많은 양과 난이도에 크게 당황했었습니다. 목요일에 나오는 과제가 제출 기한이 왜 토요일 오후 5시까지인지 깨닫게 되는 과제 였습니다. 과제는 admin 페이지에서 상품을 등록하는 페이지를 구현하는 것이였습니다. 구현해야하는 기능 - 캘린더를 이용한 기간설정 - 체크박스를 이용한 카테고리 설정 - 태그 검색 기능 - 이미지 첨부 기능 - 상품 옵션 추가 ( + 기본옵션 추가 + 추가옵션 추가 ... ) - 상태 전역 관리 - 유효성 검사 아주 간단하게만 정리했을 때 이러한 기능들을 구현해야 했습니다. (자세히 적으면 너무 많은 구현목록들...) 이 중에서 제가 맡은 파트는 카테고리, 태그 검색, 유효성 검..