본문 바로가기

학원에서 배운 것85

KDT 5th 웹개발자 입문 수업 ... 마지막 팀 프로젝트 시작! 실은 엊그제부터 조금씩 주제 선정하고 레이아웃 잡긴 했지만... 피그마 라는 사이트를 활용하여 이거저거 레이아웃 작업을 하고 있다. 포토샵보다 불편한거 같긴 하지만... 그래도 쓸만해서 이거저거 해보고 있다. 일단 주제가 프로젝트 관리 사이트라서 빡셀거 같긴 하다만...ㅎㅎ 힘내서 이번주까진 레이아웃을 완성하고 리액트 작업을 들어가볼 예정이다! 2023. 4. 8.
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.
KDT 5th 웹개발자 입문 수업 43일차 - 1 Todo List 마저 구현하기 리듀서의 DONE 동작 구현 list 이외의 초기 state 값은 그대로 전달 되어야 하므로 전개 연산자를 꼭 사용해줘야 한다. 컴포넌트에서 전달 받은 id 값과 동일한 객체를 찾은 다음, 해당 객체의 done 항목을 true 로 변경해준다. 배열의 map() 메서드는 배열의 모든 값을 순회하면서 배열의 값을 return 된 값으로 변경해주기에 해당 메서드를 사용해준다. //reducer export default function todo(state = initState, action) { switch (action.type) { case CREATE: return { ...state, todoList: [ ...state.todoList, { id: action.payl.. 2023. 4. 5.

티스토리툴바