[2팀 이수현] Chapter 1-1. 프레임워크 없이 SPA 만들기 #61
Conversation
src/utils/hooks.js
Outdated
|
|
||
| currentIndex++; | ||
| return [stateStore[index], setState]; | ||
| } |
There was a problem hiding this comment.
우와 리액트 처럼 구현해주셨군요!! 멋집니다 수현님 👍
src/data/user.js
Outdated
| function set({ username, email, bio, isLogout = false }) { | ||
| const user = { | ||
| username: username || "", | ||
| email: email || "", | ||
| bio: bio || "", | ||
| }; | ||
|
|
||
| if (!isLogout) { | ||
| localStorage.setItem("user", JSON.stringify(user)); | ||
| } else { | ||
| localStorage.removeItem("user"); | ||
| } | ||
|
|
||
| return "success"; | ||
| } |
There was a problem hiding this comment.
수현님! isLogout일 경우에 해당 함수에서 값에 따른 분기를 하는 것 보다 remove 함수를 등록해서 각각의 역할을 분리해주는 것이 어떨까? 하는 생각이 들었습니다 !
관련해서 수현님의 생각도 궁금합니다
There was a problem hiding this comment.
사실 기한 맞춰서 빨리 하다보니까 저렇게 만들었는데 창엽님 말씀과 같이 분리해주는게 맞는 것 같아서 수정했습니다ㅑ ㅎㅎㅎ 👍
src/pages/MainPage.js
Outdated
| const Post = ({ profileImg, name, time, content }) => { | ||
| return ` | ||
| <div class="bg-white rounded-lg shadow p-4"> | ||
| <div class="flex items-center mb-2"> | ||
| <img src=${profileImg} alt="프로필" class="rounded-full mr-2" /> | ||
| <div> | ||
| <p class="font-bold">${name}</p> | ||
| <p class="text-sm text-gray-500">${time}</p> | ||
| </div> | ||
| </div> | ||
| <p>${content}</p> | ||
| <div class="mt-2 flex justify-between text-gray-500"> | ||
| <button>좋아요</button> | ||
| <button>댓글</button> | ||
| <button>공유</button> | ||
| </div> | ||
| </div> | ||
| `; | ||
| }; |
There was a problem hiding this comment.
Post 까지 신경써주셨군요 !! 저는 신경도 못 썼는데... 👍👍👍
src/utils/hooks.js
Outdated
There was a problem hiding this comment.
리액트처럼 hooks를 구현하는건 진짜 생각도 못했는데... 수현님 멋져요 진짜...!!
src/components/Nav.js
Outdated
| function getTextColor(anchorTagId) { | ||
| if (pageName === anchorTagId) { | ||
| return "text-blue-600 font-bold"; | ||
| } |
There was a problem hiding this comment.
pageName으로 받게 되면 Nav를 사용할 때마다 넘겨줘야 하기 때문에
window.location.pathname;으로 pathname을 가져와서 판단하는 방향도 좋을 것 같아요~
src/components/Nav.js
Outdated
| <nav class="bg-white shadow-md p-2 sticky top-14"> | ||
| <ul class="flex justify-around"> | ||
| <li><a id="home" href="/" class="${getTextColor("home")}">홈</a></li> | ||
| ${user?.username ? `<li><a id="profile" href="/profile" class="${getTextColor("profile")}">프로필</a></li>` : ""} | ||
| <li><a id="${user?.username ? "logout" : "login"}" href="${user?.username ? "/logout" : "/login"}" class="text-gray-600">${user?.username ? "로그아웃" : "로그인"}</a></li> | ||
| </ul> |
There was a problem hiding this comment.
그리고 홈, 프로필, 로그인/로그아웃과 같은 데이터는 상단에 분리하거나 하는 방식으로 관심사 분리가 된다면 좀 더 가독성이 좋은 코드가 될 것 같습니당!
참고차 아래는 제 코드입니다!
There was a problem hiding this comment.
오 도원님이 말씀해주신 것처럼 분리하는게 맞는 것 같아서 리팩토링 진행하면서 말씀하신 부분 반영했습니다 ㅎㅎ
감사합니다!😊
과제 체크포인트
기본과제
1) 라우팅 구현:
2) 사용자 관리 기능:
3) 프로필 페이지 구현:
4) 컴포넌트 기반 구조 설계:
5) 상태 관리 초기 구현:
6) 이벤트 처리 및 DOM 조작:
7) 라우팅 예외 처리:
심화과제
1) 해시 라우터 구현
2) 라우트 가드 구현
3) 이벤트 위임
과제 셀프회고
우선 첫주차 과제를 진행하면서 자기반성과 그냥 하던 백엔드나 할까 하는 회의감을 많이하고 느꼈습니다..
표면적으로는 SPA 개념과 리액트의 동작원리를 조금이나마 알고 있었는데, 막상 표면적으로만 알던 개념을 토대로
과제를 진행하려다 보니 하나하나 진행 할 때마다 삐걱이며 개발을 진행습니다.
삐걱대며 개발이 진행되다보니 코드가 보기도 안좋아지고 이로인해 작성한 코드에 대한 자신감도 내려갔었는데,
코치님들과 메이트님들이 슬랙에 남겨주신 좋은 글들을 읽으며 다시 열심히 해보자! 하는 마음으로 어찌저찌 테스트는 통과시킨 과제였습니다..
우선 과제는 제출해야되기 때문에 지금 코드로 작성해서 제출 했지만, 올려주신 좋은 글들을 읽고 생긴 마음을 갖고 첫주차 학습자료를 다시 읽어보며 리팩토링을 진행해볼 예정입니다.
기술적 성장
history API를 이용하여 SPA를 어설프게나마 구현하고, 표면적으로 알고 있던 개념들을 알았다는 것에 의의를 두고 있습니다.
매주마다 하나씩 더 얻어가겠습니다
코드 품질
학습 효과 분석
과제 피드백
리뷰 받고 싶은 내용
사실 지금 코드는 리액트의 useState와 useEffect를 구현해서 포스트 게시까지 구현하고 싶었는데, useState와 useEffect를 구현하는 곳에서 막혀서 이번주까지 해보고 멘토링 시간에 따로 질문드리겠습니다 (__)