728x90 {React}48 02.12.25[개발일기] 주니어 개발자 협업일기-Next.js, Typescript 1. 커스텀훅을 만들때 특정 프롭스값이 존재할때만 해당 프롭스값을 리턴하고, 만약 없으면 useSWR 활용해서 API 응답값 넘겨주고 싶을때 아래와 같이 작성하자. 바로 useSWR 첫번째 인자에 삼항 연산자를 대입하는 것이다. 이렇게 하면 해당 변수가 만약 프롭스인 경우, 유연하게 커스텀훅을 호출해서 특정 값을 조건에 따라 자식 컴포넌트에 넘겨주는데 편리하다. 만약 특정프롭스 값이 API 응답값의 응답여부에 따라 의존하는 경우에도 유용하게 활용될 수 있는 비즈니스 로직 기법이다. 2025. 2. 12. 03.11.24 Cypress 환경 설정 cypress 설치 // cypress 설치 yarn add cypress --dev // cypress 앱 오픈 yarn e2e-web:dev cypress open cypress.config.js module.exports = { e2e: { setupNodeEvents(on, config) { // implement node event listeners here }, }, }; 2024. 3. 11. 12.01.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-7 챕터리뷰 [ 새롭게 알게 된 것 ] 1.리듀서는 import 해서 사용할땐 리듀서 배열을 리턴하므로 중괄호{ }로 감싸 객체로 받아야 한다 import { addTodo, toggleTodo } from '../modules/todos'; But, you have to consider the order for reducer to return. Each reducer can be used by the order to declare. 2. 리듀서 초기 상태는 필요에 따라 비워두거나 디폴트 값 설정 하되 id값을 필요적절하게 설정해야 한다 그런데 디폴트 값을 설정했는데 최초 todo 항목을 추가한것과 초기 값이 동시에 하나의 toggle 이벤트로 발생하는 현상을 확인 했다. 원인은 맨처음 todo 항목 추가되고 난후 .. 2022. 12. 2. 11.26.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-6 챕터리뷰 [ 새롭게 알게된 것 ] 1. Redux dev Tool은 장점이 참 많다 리덕스 개발자 도구를 사용하면 현재 스토어의 상태를 조회 할 수 있고, 현재 액션 디스패치 여부에 따른 상태 변화도 확인 가능하다. 뿐만 아니라 액션을 직접 디스패치해서 디버깅도 가능하다. https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com 2. 리덕스 개발자 도구 설치는 크롬 웹 스토어 확장프로그램에서 확인 가능하다 확장프로그램 설치 한 후, redux-devt.. 2022. 11. 26. 11.25.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-5 챕터리뷰 [ 새롭게 알게된 것 ] 1. 프리젠테이셔널 컴포넌트란 리덕스에 직접 접근 없이 필요한 값을 접근할 수 있는 컴포넌트다 프리젠테이셔널 컴포넌트에선 주로 UI를 선언하는 것에 집중한다. 필요한 값들이나 함수는 props 로 받아와서 사용하는 형태로 구현하는 것이 특징이다. 2. 컨테이너 컴포넌트란 리덕스 상태 조회 및 액션 디스패치 할 수 있는 컴포넌트다 HTML 태그를 사용하지 않고 다른 컴포넌트를 import해서 사용한다. 3. 책대로 분리 한다고 했는데 문제가 발생했지만 이유를 알 수 없다 이유를 추후 찾아봐야 겠다. 값은 넘겨주고 받는게 명확한데.. 왜 컨테이너에서만 에러가 뜨는건지 이유를 모르겠다.. 원인을 분석해보니 아래와 같은 문제점을 발견했고, 해결했다. modules라는 디렉토리도 안만들어.. 2022. 11. 24. 11.23.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-4 챕터리뷰 [ 새롭게 알게된 것 ] 1. 리덕스를 적용하기 위해선 모듈이 필요하다 모듈은 액션타입, 액션 생성함수, 리듀서 항목들이 모두 들어 있는 자바스크립트 파일을 의미한다 리덕스 모듈은 다른 신체 장기들과 상호작용하는 인간의 뇌와 같다. 뇌가 다른 장기들을 거쳐서 특정 신체 장기에 뇌파신호를 보내는게 아니다. 뇌는 다이렉트로 각 장기에 액션명령을 전달하는데, 이는 리덕스가 작동하는 원리이자 장점과 동일한 원리다. 리액트 프로젝트에 리덕스를 적용할땐 해당 모듈을 만들고 아래와 같이 라이브러리를 yarn을 통해 설치해주어야 한다. $ yarn add react-redux 2. Ducks 패턴을 지향해야 한다 만약 액션과 리듀서가 서로 다른 파일에 정의되어 있다면 합치는 것을 지향해야 하는데, 이유는 간단하다. r.. 2022. 11. 23. 11.23.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-3 챕터리뷰 [ 새롭게 알게된 것 ] 1. ReacDOM.render는 더이상 React 버전18을 지원하지 않음을 알게 되었다 해당부분은 추후 자세하게 좀 더 살펴볼 것이다. 2. createStore라는 스토어를 만들어주는 redux 함수를 알게 되었다 사용법은 아래와 같다. import { createStore } from 'redux'; 3. 액션 타입은 주로 대문자로 작성하고, 액션 생성함수는 camelCase로 작성한다 액션 생성함수 안에 액션 객체는 type값이 필수이다. 4. Redux 리듀서 함수를 사용할 땐 반드시 불변성을 지켜줘야 한다 스프레드 함수를 사용 하여 state값을 얕은 복사한다. function reducer(state = initialState, action) { // state 의.. 2022. 11. 23. 11.21.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-2 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 리덕스를 사용할 땐 단 한개의 스토어만 만들어서 사용해야 한다 리덕스는 스토어에 original state를 갖고, 각 컴포넌트가 해당 state를 참조한다. 만약 state를 참조를 분리시켜야 할 경우, 여러개의 스토어를 사용하는 것은 가능 하지만 비권장 된다. 이유가 궁금하여 공식 문서를 찾아보니, 나와 비슷한 궁금증을 가진 사람이 많았는지 따로 FAQ로 질문 답변이 되어 있었다. 본래 Flux 패턴에선 리액트 앱을 구현 할 때 하나의 스토어만 가지도록 의도되어 있다. 이를 통해 Redux 개발자도구를 활용하면 특히 대규모 서비스일수록 디버깅이 쉬워지는 장점이 있다. 만약 스토어가 여러개이면, 여러개의 스토어가 동시에 업데이트 되는 것이 아닌 내부 동작구조에 따라 순차.. 2022. 11. 21. 11.16.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-1 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 리덕스엔 useReducer와 동일한 개념이 적용되어 있다 대표적으로 액션객체라는 것이 있다. 액션객체란 상태에 어떤 변화가 필요할 때 하나의 객체로 표현한 것이며 형식은 아래와 같다. 액션 객체는 type필드를 필수적으로 가지고 있어야 하고, 그 외에는 커스터마이징 하면 된다. { type: "ADD_PROFILE", data: { id: 0, name: "bluevulpe" } } 액션함수는 파라미터를 받아와서 위 액션객체 형태를 리턴하는 함수를 의미한다. 액션함수의 용도는 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이기 때문에 함수 앞에 export 키워드를 붙인다. 2. Redux 리듀서는 useReducer를 사용할 때와 동일한 형태를 갖추고 있다 리듀서는 두가.. 2022. 11. 16. 11.15.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-0 챕터리뷰 [ 새롭게 알게된 것 ] 1.현존하는 리액트 상태관리 라이브러리중 가장인기 있는 것은 Redux이다 프로젝트 또는 서비스 규모에 따라 Redux를 사용하는 것이 좋을 수 도 혹은 필요치 않을 수 도 있다. 특히 Context API와 useReducer Hook을 사용하는 개발 방식은 Redux의 Reducer와 액션 개념과 매우 유사하다. 2.단순 글로벌 상태관리만을 위해선 Redux는 그리 필요치 않다 오히려 Context API만 사용해도 충분했다. 실재로 작은 규모의 프로젝트를 진행했을 때에도 처음엔 Context API만 사용해도 충분했었다. 하지만 점차 기능이 추가되고 상태관리 로직이 복잡해지자 매번 Context를 새로 만들어야 하는 번거로움이 있었고, 이는 Redux를 고려해볼만한 상황까지.. 2022. 11. 15. 이전 1 2 3 4 5 다음 728x90
