본문 바로가기

항해999

[항해99 63일차] (22.05.08) WIL_실전 프로젝트 2주차 종료. 매일 작업 기록 5/2(월) 마이페이지 분기 마이페이지 : 게시물 삭제하기 버튼 API 연동 chatList : 채팅리스트 불러오기 API 연동 chatDetail: socket 연결, 구독, 채팅 보내기 연결 성공 5/3(화) 프로젝트 노션 정리 소셜로그인 API 확인 및 response 값 처리 요청 (Login) 닉네임 설정 여부에 따라 페이지 이동 다르게 처리 완료 (signup 또는 select로) (signup) 닉네임 필수값으로 설정. 중복닉네임 아닐 시에만 닉네임 저장 버튼 활성화 처리 (Mypage / ChatList ) isLoading 세팅(useEffect 관련) (ChatList) 뷰 보완 : 채팅방 나가기 버튼 추가, (ChatDetail) 데이터 처리 방법 결정: state 에.. 2022. 5. 8.
[항해99 58일차] (22.05.03) TIL_실전 프로젝트 2주차. 요즘 매일매일 프로젝트 진행사항을 팀 내 공유 노션에 정리하고 있는데, 이것을 블로그에도 정리해두면 좋겠다는 생각이 들어 남겨둔다. 5/3(화) 목표 1. ChatDetail.js 이전 메시지 불러오는 API는 있음. 서로가 입력한 새로운 메시지를 어떻게 처리할 것인가? 이 부분에 대한 고민 필요. (리덕스 툴킷? 다른 방법?) (과제) 데이터 처리 방법 결정! 2. Mypage / MyTempPage / ChatList / ChatDetail 페이지 첫 렌더링 시 useEffect 가 렌더링 이후에 실행되면서, list 를 렌더링 이후에 가져오게 됨. → 그로 인해 렌더링되는 return 안에 있는 map 함수가 제대로 실행되지 않는 오류 발생.이것이 최선의 방법은 아닐 것으로 보이는데, 어떻게 처리해.. 2022. 5. 3.
[항해99 56일차] (22.05.01) WIL_실전 프로젝트 1주차 종료 실전프로젝트 1주차가 종료되었다. 실전프로젝트는 S.A. 에 매일의 작업 기록, 리뷰, troubleshooting 을 적고 있다. 리뷰 1. 프로젝트 세팅 이번 프로젝트 세팅은 React로 서버사이드 렌더링을 하기 위해 Next.JS를 사용하기로 했다. Next.js 를 사용하는 과정에서 일단 기본적인 개념을 이해해야 했다. 사용하면서 소소하고 다양한 어려움을 겪었는데.. 기술 검토를 해보면서, SSR 을 하고 싶다고 치더라도 React 18버전 에서 SSR 을 지원하는데, 굳이 Next.js 를 쓸 필요가 없다는 결론에 도달하였다. 그래서 다시 결론은 CRA 를 사용하여 프로젝트를 생성. 2. 라우팅 useHistory Hooks 를 사용하지 않고 navigate 를 사용했다. troubleshoot.. 2022. 5. 1.
[항해99 50일차] (22.04.25) 클론 프로젝트 종료, 실전 프로젝트 시작 클론 프로젝트 회고 ○ 스코프 대부분 구현 완료 기능 구현 완료 : 회원가입, 로그인, 로그아웃, 게시글 CRUD, 좋아요 및 관심상품 담기, 검색어 및 카테고리 검색 기능 구현 미완료 : 무한 스크롤 , 소셜 로그인 ○ Trouble Shooting 1. useEffect 실행 컨트롤이 너무 어렵다. 메인 페이지에서 axios, getpost 를 실행하여 포스트리스트를 받아오는 상황이 있었다. useEffect 는 컴포넌트가 렌더된 이후 실행되는 hook 이기 때문에, useEffect 에 getpost를 넣어두면, getpost가 실행되기 전에 state 값이 불러와지고, render 가 진행되어 state 값이 undefined 가 출력되고. 페이지에 오류가 발생하게 된다. 웹 애플리케이션에서 서버.. 2022. 4. 25.
[항해99 42일차] (22.04.17) WIL_미니 프로젝트 종료, 클론 코딩 시작 미니 프로젝트 회고 1. 백엔드 분들과 처음으로 진행한 협업 프로젝트 - API 설계.. 멘붕이었다. 뭘 요청해야 하고, 우리는 뭘 보내줘야 하는건지. 도무지 아무것도 이해되지 않는 상황에서 논의를 시작해야했고, 설계서를 제출해야 했다. 프로젝트 중반으로 와서 첫 API 통신을 성공하자, 드디어 이 과정이 어떻게 진행되는 건지 조금씩 이해되기 시작했다. - API 테스트를 빠르게 시작해보지 못한 점이 아쉽다. 짧은 기간의 프로젝트에서 성공적인 프로젝트 수행을 위해서는, 백엔드-프론트 모두 효율적인 시간 활용이 중요한 것 같다. 이를 위해서는 백-프론트 우선 설계한 API 를 만들어, 제대로 통신하는지를 빠르게 확인해보고, 통신이 원활하지 않을 시 각 포지션에서 원인을 찾아보는 작업이 진행되어야 한다. -.. 2022. 4. 17.
[항해99 35일차] (22.04.10) WIL_주특기 심화 마감, 미니 프로젝트 시작 Week Record 1. 주특기 심화(W5) 마감 항해99 32일차(22.04.07) 항해 주특기 3주차 중 가장 어려웠다. 멘붕이 정말 많이 왔고, 아직 정신을 차리지 못한 상태이다. 그럼에도 잘한 점은 어떻게든 과제를 제출했다는 것이다. 마지막 날에 결국 샘플 페이지의 소스코드를 확인하였지만, 어쨌든 요구사항으로 있던 대부분의 기능들을 구현하여 제출했다. (기한을 지켜 요구사항을 최대한 수행하는 것은 중요하다.) 사실 데이터 흐름에 대해 완전히 숙달된 상태는 아니라, 개념이 드문드문 머릿속에 들어있는 기분이다. 그래도 해냈다는 것에 의의를 둔다. 각 기능 구현을 위한 업무 흐름을 머릿속에 숙지할 수 있도록 필기, 암기, 반복 작업을 더 해야겠다. 2. 미니 프로젝트(W6) 시작 항해99 33일차(2.. 2022. 4. 10.
[항해99 28일차] (22.04.03) WIL_주특기 숙련 마감, 주특기 심화 시작 항해99는 매주 일요일을 일주일 중 유일한 휴일로 두고 있다. 그렇지만 마냥 쉬는 건 아니고... WIL 을 작성하며 1주 간 공부한 것을 회고하도록 한다. 4월 1주 WIL (Weekly I Learned) 를 정리해본다. 이번 주 이해한 것 React 개념 [알고가기] 가상돔이란? DOM은 html 단위 하나하나를 객체로 생각하는 모델. 예를 들면 'div'라는 객체는 텍스트 노드, 자식 노드 등등 하위의 어떤 값을 가지고 있음. 이런 구조를 트리 구조라고 함. 가상돔은 메모리 상에서 돌아가는 가짜 DOM 가상돔의 동작 방식 : 기존 DOM과 어떤 핸동 후 새로 그린 DOM(가상돔에 올라갔다고 표현함)을 비교해서 정말 바뀐 부분만 갈아끼워 넣어줌. DOM 을 새로 그리는 경우 - 처음 페이지 진입 시.. 2022. 4. 3.
[항해99 26일차] (22.04.01) 주특기 심화 첫째 날 Chapter 3-3. 주특기 심화 (W5) 첫째 날. 항해는 매주 금요일을 일주일의 첫 날로 정해 일정을 운영한다. 오늘은 오전 9시에 OT 가 진행되었다. OT 에서는 이번주 해야할 것으로 개인과제, 팀과제가 있음을 안내받았다. 더불어 과제수행에 도움이 되는 강의를 지급받았다. 내 주특기는 React. React와 함께한지 3주차로 접어들고 있다. 오늘 학습한 것 자바스크립트 기초 1. 변수와 상수 : 변수 생성의 3단계(선언->초기화->할당) 선언: 스코프가 참조하는 대상이 되도록 실행 컨텍스트에 변수 객체를 등록 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화) 할당: undefined로 초기화된 변수에 실제 값을 할당 변수 선언 키워.. 2022. 4. 1.
[항해99] 스파르타코딩클럽 : 웹개발 종합반 2주차 [수업 목표] Javascript 문법에 익숙해진다. jQuery로 간단한 HTML을 조작할 수 있다. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다. [배운 것 WIL] - Javascript 복습 - jQuery - 서버 API와 Ajax [세부내용] jQuery, Ajax - HTML파일을 받았다고 가정하고, Javascript로 다시 서버에 데이터를 요청하고 받는 방법을 배움. - jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받아보겠습니다. Javascript 홀짝 판단 let even = 4; console.log(even % 2); // 2로 나눈 나머지가 0입니다. let odd = 5; console.. 2022. 3. 2.

티스토리툴바