FE개발 공부 시작: 23년 4월 10일

서버와의 통신을 위해 미들웨어 사용. 가장 많이 사용되는 리덕스 미들웨어는 Redux-thunk청크와 saga사가. thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해줍니다. 즉, dispatch(객체) 가 아니라 dispatch(함수)를 할 수 있게 되는 것 dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체) 구현 순서 thunk 함수를 만들기: createAsyncThunk reduxToolkit 내장 API creatSlice의 extraReducer에 thunk 등록 dispatch(thunk 함수) 하기 테스트 사용법 (src/redux/modules/counterSlice.js) import { createAsyncThu..

http를 이용해서 서버와 통신하기 위해 사용하는 패키지 https://axios-http.com/kr/docs/req_config 요청 Config | Axios Docs 요청 Config 다음은 요청을 만드는 데 사용할 수 있는 config 옵션들 입니다. 오직 url만 필수입니다. method를 지정하지 않으면 GET방식이 기본값 입니다. { url: '/user', method: 'get', baseURL: 'https://some-domain. axios-http.com 설치 yarn add axios 테스트용 json-server랑 사용할거면 https://console-log.tistory.com/149 환경변수 적용 환경변수 적용할 땐 대신 서버를 껐다켜야 반영됨. 깃헙에 올리면 안됨 (...

웹 통신은 서버(웹 서버)와 클라이언트(웹 브라우저)간의 대화. 이 대화방법은 보통 ‘데이터’로 이루어집니다. 프로토콜 웹에서 서버 ↔ 클라이언트간 주고 받은 상호간의 약속(프로토콜)을 HTTP 프로토콜 요청(Request)과 응답(Response) URL protocol https:// domain www. (sub domain) hostinger.com (domain name) resource path(path/page) /tutorials/what-is-... query variable, path variable 메서드 GET - 조회 POST - 생성 PUT, PATCH - 수정(변경) DELETE - 삭제 상태 코드 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행합니다. 2xx(성공) :..

아주 간단한 DB와 API 서버를 생성해주는 패키지. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함. 설치 yarn add json-server 사용법 1. 구글에서 npm jsonserver 구글링 ㄱ https://www.npmjs.com/package/json-server json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.3, last published: 3 months ago. Start using json..

리덕스 데브툴스 개발툴 현재 프로젝트의 state 상태라던가, 어떤 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있음 설치 redux devTools 구글링하면 나오는 크롬 웹스토어(구글 웹스토어 플러그인) 클릭 ㄱㄱ https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com 브라우저 주소창 옆에 Redux DevTools아이콘 클릭해..

모듈 파일에서 리덕스를 더 편하게 쓰기 위함 ! redux toolkit 구글링하면 공식사이트 나옴 설치 yarn add @reduxjs/toolkit or 리덕스 설치할때 툴킷 같이 설치해버리기 yarn add react-redux @reduxjs/toolkit 사용법 createSlice() 슬라이스로 리듀서를 한번에 만든다. 이제 Action Value와 Action Creator를 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐짐 (src/redux/modules/counterSlice.js) import { createSlice } from '@reduxjs/toolkit'; // 초기 상태값(state) const initialState..

1. Facts (사실, 객관) 리액트 심화강의 9~18강 완강 프로그래머스 0단계 코테 https://school.programmers.co.kr/learn/courses/30/lessons/120912 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. Feelings (느낌, 주관) 어제까진 들을만했는데 오늘 내용은 어렵고 머릿 속에 정리가 잘 안됐다. 일단 다 듣긴 했고, 내일 전체적으로 정리 한 번 한 다음에 프로젝트 들어가 볼 예정 ! 오늘 쳐내고싶은 부분이 더 많았는데 집중이 잘 안돼서 성과가 만족스럽지 못하다.. 두어시간 더 하고 자야겠다 ..

1. Facts (사실, 객관) 리액트 심화강의 1~8강: Redux Toolkit, json-server, HTTP, axios 리액트 선발 수업: 1:N / N:M DB 설계 프로그래머스 0단계 코테 https://school.programmers.co.kr/learn/courses/30/lessons/120853 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. Feelings (느낌, 주관) 오늘부턴 또 새로운 조와 함께 ~ 이번 조 운영 방식 맘에 든다! 각자 하루 목표 세워서 아침에 공유하고, 2시부터 6시엔 화면공유 켜놓고하는데 공부할때 동..

1. Facts (사실, 객관) 저번주 내내 만든 팀 프로젝트를 제출하고, 모든 조들이 모여 발표하는 시간을 가졌다. 제출, 발표회 프로젝트 정리, 회고 작성 프로그래머스 코테 0단계 https://console-log.tistory.com/141 [여섯번째 프로젝트] 모임 구하기 서비스 & 회고록 파이어베이스와 리덕스를 이용한 뉴스피드 프로젝트 기간: 6/26 ~ 6/30(5일) 요구사항 로그인, 회원가입 CRUD 마이페이지 Vercel을 이용한 배포 Git 최대한 활용: PR, Branch, 코드 리뷰 개발 일정 - 나 6월 2 console-log.tistory.com https://school.programmers.co.kr/learn/courses/30/lessons/120885 프로그래머스 코..

1. Facts(사실) 팀 프로젝트 모임구하기 서비스 제작! 파이어베이스 특강 프로젝트 기획 회의 테스트용 로그인 환경 구현 마이페이지: 프로필 읽기, 내가 쓴 글 list 조회 프로필 수정p: 사진 미리보기 기능, 사진 및 닉네임 수정 기능 리덕스에서 이름을 잘못 넣은걸 발견못해서 오타찾는데 시간을 꽤 허비함.. 로그인, 회원가입 기능 게시물 삭제 기능 theme provider: 폰트 사이즈, 사이트 컬러 설정 공통으로 쓰이는 컴포넌트 제작: title, button, input, select 2. Feelings & Findings(느낌과 배운 점, 주관) 오류를 잘 찾아내는 요령이 필요해.. 그 외엔 할 만 했다. 다만 더 나은 코드를 위해 고민할 시간을 못가졌다. 리팩토링 부분이 좀 아쉽ㅜㅜ 3..