본문 바로가기

분류 전체보기321

KDT 5th 웹개발자 입문 수업 ... 마지막 팀 프로젝트 시작! 실은 엊그제부터 조금씩 주제 선정하고 레이아웃 잡긴 했지만... 피그마 라는 사이트를 활용하여 이거저거 레이아웃 작업을 하고 있다. 포토샵보다 불편한거 같긴 하지만... 그래도 쓸만해서 이거저거 해보고 있다. 일단 주제가 프로젝트 관리 사이트라서 빡셀거 같긴 하다만...ㅎㅎ 힘내서 이번주까진 레이아웃을 완성하고 리액트 작업을 들어가볼 예정이다! 2023. 4. 8.
리덕스 사용을 위한.. useReducer 개념 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시키는 기능 reducer 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수를 지칭 function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextState; } 리듀서에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다. action 은 업데이트를 위한 정보 type 은 객체 형식이지만 정해진 규칙은 없음 - 관습상 대문자와 _로 구성 useReducer const [state, dispatch] = useReducer(reducer, initialState); state 는 컴포넌트에서 사용할 수 있는 상태 dispatch 는 .. 2023. 4. 7.
KDT 5th 웹개발자 입문 수업 44일차 MBTI 구현 마저하기 Check 액션 생성 함수 삽입 mbti 조사 결과 값을 만들어주기 위해 선택한 값을 바탕으로 Action 시켜준다. export function check(result) { return { type: CHECK, payload: { result }, }; } export default function mbti(state = initState, action) { switch (action.type) { case CHECK: return { ...state, mbtiResult: state.mbtiResult + action.payload.result, }; case NEXT: return { ...state, page: state.page + 1, }; case RESET: ret.. 2023. 4. 6.
KDT 5th 웹개발자 입문 수업 43일차 - 2 프로젝트 시작 시 기초 구조 구현하기 1. npx create-react-app 프로젝트명 2. npm i -D prettier eslint 3. npx eslint --init 4. .vscode 폴더 > settings.json 5. 폴더 최상단 > .prettierrc, .eslintrc.js 6. npm i -S @reduxjs/toolkit react-redux 7. npm i -S styled-components 8. npm i -S react-router-dom MBTI 심리테스트 구현 리액트 SPA 제작 Styled Components 활용 - Global Style / Component Redux 활용, 조건부 렌더링 기초 세팅 1. 필요 모듈 설치 npm i -S @reduxjs/too.. 2023. 4. 5.

티스토리툴바