스파르타코딩클럽6 [항해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 42일차] (22.04.17) WIL_미니 프로젝트 종료, 클론 코딩 시작 미니 프로젝트 회고 1. 백엔드 분들과 처음으로 진행한 협업 프로젝트 - API 설계.. 멘붕이었다. 뭘 요청해야 하고, 우리는 뭘 보내줘야 하는건지. 도무지 아무것도 이해되지 않는 상황에서 논의를 시작해야했고, 설계서를 제출해야 했다. 프로젝트 중반으로 와서 첫 API 통신을 성공하자, 드디어 이 과정이 어떻게 진행되는 건지 조금씩 이해되기 시작했다. - API 테스트를 빠르게 시작해보지 못한 점이 아쉽다. 짧은 기간의 프로젝트에서 성공적인 프로젝트 수행을 위해서는, 백엔드-프론트 모두 효율적인 시간 활용이 중요한 것 같다. 이를 위해서는 백-프론트 우선 설계한 API 를 만들어, 제대로 통신하는지를 빠르게 확인해보고, 통신이 원활하지 않을 시 각 포지션에서 원인을 찾아보는 작업이 진행되어야 한다. -.. 2022. 4. 17. [항해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] 스파르타코딩클럽 : 웹개발 종합반 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. 이전 1 다음
