개발 연습 블로그

점점 일지 쓰는 것이 어려워지고 있다. 항해 관련 블로그 쓴 글들을 보면 왜 후반부에 기록이 빈약했었는지 이제 알 것도 같다. 이런 식으로 알고 싶지는 않았는데.... 03-07 이전 미니프로젝트 때 같은 팀원이 시도하다 실패한 것 - 한 페이지에 복수의 react-query를 능동적으로 get해오는 문제를 직접 겪었다. 불만은 없었다. 오히려 내가 원하는 부분이었다. 마켓컬리에서 카테고리 버튼을 누를 때 마다 파라미터를 달리해서 엑시오스 GET을 해오는 것을 보고 이걸 못하면 안되겠다 싶은 느낌이 강하게 들었기 때문이었다. 처음 백 친구들이 제시하고 나도 그럴거라 생각했던 방식 - 처음에 전부 GET으로 받아오고 필터링 하는 방식을 포기했기에 이전 미니프로젝트 때의 팀원이 시도한 방식을 참고해 보았다...

미니프로젝트를 하면서 정말 많은 시간을 쓰느라 일지를 거의 쓰지 못했다.... TIL을 쓰는 것이 중요하다는 것은 알지만, 이거 쓸 시간에 코드 한 줄이라도 더 봐야겠다는 압박감에 그렇게 할 수 밖에 없었다. 그래도 기억이 좀 남아있으니 날짜별로 한 번 써보겠다. 02 - 27 로그인, 회원가입 페이지는 진즉에 끝났고, 나는 상세페이지 작업에 들어갔다. 작성페이지 작업을 최 후순위로 미뤘는데, 그이유는 상세페이지에서 수정 기능을 구현하면 그 기능과 CSS를 작성 페이지에 꽂으면 된다는 입장이었다. 결과적으로 이 판단이 옳았지만 작성 페이지의 부재로 오는 POST 기능 테스트에서 백 친구들이 수작업을 하는 불편함을 겪었다. 02 - 28 상세 페이지 댓글 출력 기능 구현, 팀원이 깃허브 커밋과 푸쉬를 꺼리..

회고하기 심화 과제 상당히 죽쒔다. 핵심 기능을 미처 갱신하지 못했다. 괜히 숙련 주차 때 과제를 리팩토링한다고 하다가 시간을 날린 것이 너무 컸다. 또한 CSS 공포증으로 집중력이 크게 흐트러진것도 한 몫했다. 이를 극복하지 못하면 실전에서 진짜 아무것도 못할 것이다. 그것만은 안돼! 미니 프로젝트 생각보다 할만했다. 어떻게 해야할지 모르는 백 친구들과의 API 연결도 예상 외로 간편했고, 우리의 멋진 백 친구들이 서버 배포를 시작한 당일날 해준 덕에 로컬 데이터에서 돌려보지 않고 바로바로 연결하면서 피드백을 주고 받을 수 있었다. 그런데 흠.......CORS 필터 설정이 백 친구들이 잡기 힘든 모양인 것 같다. 페이지 하나하나 새로 만들 때 마다, 새 API를 뚫을 때 마다 같은 문제에 봉착한다. ..

특이사항 : 팀플레이 어제부터 오늘, 2일간 팀 작업을 시작했다. 꽤나 많은 일들이 있었고, 여기에 어떻게든 적어보겠는데 만약 다 못적겠으면 내일 일지에 마저 쓸 것이다. 24일 오전 팀 빌딩, 자기소개, 피그마 및 노션 작성 특이사항 딱히 없다. 그냥 이것저것 짜면서 꽤나 바쁘게 보냈다. 피그마의 활용법을 다들 익히면서 진행하다 보니 뭔가 조금 조잡하게 진행되었다. 특히 그룹화, 다들 그룹화를 안해!!!!! 나는 어도비 다루면서 그룹화의 중요성을 배웠기에 망정이지, 나까지 안했으면 수 백개의 네모조각에 둘러쌓여 고통받을 것이다. 으으..... 오후 병원에 가느라 빠졌다. 콩팥 상태가 썩 좋지 못하다. 진짜 좋지 못하다.....투석 얘기까지 나왔는데 결과는 언제나오는 거람... 저녁 로그인 페이지 기능 ..

특이사항 : 과제로 고생함 세상에 완전 끔찍한 경험이었다. 저번 주차에 했던 과제를 리팩토링하는 방식으로 과제를 접근했다가 완전히 꼬여버린 뒤로 처음부터 다시 만들어야 했다. 안그래도 없는 시간을 2일이나 허비했다! 아이고.....스트레스로 심장이 아파온다. 그래도 일단 보고는 해야겠지 기능 URL Method request response 고민 데이터 갯수 조회 /Main GET - { "gomin": [ { "title": "제목", "contents": "내용", "username": "사용자명", "id": id } ] } 고민 데이터 작성 /Write POST { id: number, title: string,(option) body: string,(option) date: string, }; ..

특이사항 Thunk 구조 일반적인 dispatch를 쓰는데, 여기서 경로를 createAsyncThunk한 액션 객체로 넘긴다. 그러면 dispatch - 함수 실행 - 함수 내에서 dispatch 실행이 된다. 연습해 본 바로는 1 2 3 4 5 6 7 8 9 10 11 12 13 export const __addNumber = createAsyncThunk( // 첫번째 인자 : action value "addNumber", // 두번째 인자 : 콜백함수 (payload, thunkAPI) => { if(payload { thunkAPI.dispatch(addNumber(payload)); }, 3000); } } ); Colored by Color Scripter cs 의 구조도 가능하다. 좀더 간..

특이사항 액시오스 http를 사용해 서버와 통신하기 위한 패키지 yarn add axios 액시오스는 GET요청을 쉽게 도와주는 패키지일 뿐이므로, 어떤 데이터(path variable 혹은 query)를 어떻게 요청하는지에 대한 방식은 차후 만들어낼 API 명세서를 봐야한다. 구조는 GET 1 2 3 4 5 6 7 8 9 10 11 12 13 const [Test, setTest] = useState(null); // axios get을 하는 함수를 생성한다. const fetchTest01 = async () =>{ const { data } = await axios.get("http://localhost:3001/Test01") setTest01(data) } useEffect (() => { //..

정리라고 해야할까.......일단 배우면서 한 번 이상 썼던 리액트 활용 명령어를 정리해둬야겠다 느꼈다. 매 번 살펴볼 수 없으니 한데 모아두고 외울 때 까지 신세져야 할 것 같다. 필수 프로그램 설치 VScode gitbash node yarn 검색 후 설치 검색 후 설치 검색 후 설치 npm install - g yarn CRA 리액트 앱 설치 1 yarn create react-app 프로젝트명 cs 폴더 구조 Components - 컴포넌트 집합 Pages - 라우터 돔 활용 위한 페이지 집합 redux - configStore.js - 리덕스 모듈 위한 장치 redux - modules - 리덕스 모듈 집합 shared - Router.js - 리액트 라우터 돔을 위한 장치 설치 명령어 모음 프..

오후 : 강의시청 특이사항 리덕스 툴킷 리덕스 활용에 도움이 되는 툴을 모아둔 키트. 기존 코드를 단순화시키는 방법으로 작동한다.(또 외워야 할 것이 늘어난다...) 일반 리덕스에서는 Ducks 패턴을 사용할 때 액션 벨류와 생성자를 만들고 리듀서에 switch case로 할당하는 방식을 썼다. 하지만 툴킷의 createSlice를 임포트한 다음 1 2 3 4 5 6 7 8 9 10 11 const 원하는슬라이스 = createSlice({ name: , initialState , reducers:{ 원하는리듀서기능1 : (state, action) => {원하는 기능 적어넣기}, 원하는리듀서기능2 : (state, action) => {원하는 기능 적어넣기}, 원하는리듀서기능3 : (state, act..

오전 : 시험 특이사항 과제랑 같은 결과물을 내놓지만, 여기서 발생한 문제를 해결하라고 전달받았다. 처음에는 내가 했던 방식과 다른 구조라 꽤나 고생했지만 찬찬히 뜯어보니 확실히 문제가 있었다. 아래는 내가 쓴 문제와 답안들이다. 1. 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음. 파악한 문제점 1-1. todo.js파일 41번 줄의 initialState의 배열 범위 설정이 잘못되어 있었음. 1-2. Form.jsx파일에 dispatch가 설정되어있지 않았음. 1-3. Form.jsx파일 22번 줄에 onSubmitHandler가 값을 전달하지 않았음. 1-4. 해답 1-1. todo.js파일 41번 줄의 initialState의 배열구조를 정리함. 이제 배열이 꼬이는 문제를 피할 수..