자세한 내용

• Parent Comment
• Chilren Comment
• Total Comment Count

자세한 내용

• 포스트 디테일에 관련된 상태

• 포스트 삭제, 수정, 좋아요는 제외

자세한 내용

ESlint, Prettier NextJS에 맞게 설정합니다.

자세한 내용

비동기 관련 상태는 전부 React-Query를 사용하여 전역에서 관리해야할 상태가 거의 존재하지 않습니다.

Modal

Modal을 Context API로 구현합니다.

UserInfo

getinitprops를 통해 최초 유저 정보를 표시합니다.
유저데이터가 필요한 요청이 있을 경우 getMe를 통해 로직을 구성합니다.

자세한 내용

프론트 로그인 플로우

프론트 로그인 플로우는 다음과 같습니다.

1. fresh token이 존재하지 않을 경우 새로 로그인을 해야합니다.

• header를 통한 login은 새페이지로 사용자에게 표시합니다.
• header이외의 인가가 필요한 요청은 login 모달로 사용자에게 표시합니다.

3. fresh token을 사용하여 Server Side에서 access token과 유저 정보를 받아 로그인된 html문서를 client에게 전달합니다.
4. 2번을 페이지 마다 개별적으로 반복합니다.

위의 플로우 대로 이전 Login 관련 컴포넌트를 사용하여 tilog-open-api스팩에 맞게 구현합니다.
전체적인 로그인 로직은 여기를 참고하시면 됩니다.

자세한 내용

• editor에 필요한 컴포넌트 작성

자세한 내용

로그인된 유저의 상태를 Header에서 표시합니다.

자세한 내용

• 상태 연결
• toast 적용
• 임시저장 기능 적용
• 비밀글, 일반글 기능 적용
• react-form-hook 적용 / form error validation

자세한 내용

• 하나의 컴포넌트를 구성하기위해 여러 폴더를 접근해야하는 문제점
• 하나의 src 디렉터리에 모든 파일이 모여있는 문제점
• 디렉터리 이름과 속해있는 폴더들이 관계가 없는 문제점

위와 같은 문제점을 해결합니다.

해당 이슈는 #43 에서 디렉터리 수정으로 분리되었습니다.

자세한 내용

1. 스크롤 방지
2. 사용자 스크롤 위치에 맞게 모달 표시

TIL-Log-lab/Tilog-server-node-v2#4

자세한 내용

• 유저 닉네임
• 자기소개
• 포지션
• 탈퇴

리팩터링 목표

1. File Structure 정의
2. 강하게 결합중인 Component 분리
3. Component를 작은 단위로 분리 후 Component 조립

자세한 내용

포스트 디테일 컴포넌트 디자인

• Title
• SubTitle
• Upload Date
• ThumbNailImage
• Content
• UserProfile & read more posts
• share, Like Button
• #33

자세한 내용

요청, 수정, 문서, 질문 추가

자세한 내용

로그인에 관련해 필요한 컴포넌트를 미리 생성하고, 레이아웃을 그려보는 단계입니다.

자세한 내용

• error, success, loading에 대한 message 및 상태 작성

자세한 내용

• 유저 이름, 한줄 소개
• 유저가 작성한 포스트의 카테고리 리스트
• 유저가 작성한 포스트 리스트
• 깃허브 관련

자세한 내용

헤더 컴포넌트 디자인

• Navigation
• Logo, PageTitle
• Logined User || Github Login Button
• Mobile Responsive
• #34

자세한 내용

토론에 작성된 폴더 구조에 맞춰서 폴더 구조 수정합니다.

TailWind 모듈 설치
TailWind 프로젝트에 적용

자세한 내용

서버측에서 accessToken이 필요한 경우를 위해 서버측에서 accessToken발급 로직을 작성합니다.
추가적으로 axios interceptor로 accessToken을 재발급하는 로직은 클라이언트에서만 사용하도록 리팩터링합니다.

자세한 내용

• Context API에서 Redux, next-redux-wrapper, next-redux-cookie-wrapper를 사용하여 유저 상태를 관리하도록 변경
• Access Token을 Axios header에 저장
• tilog-open-api 스펙 변경으로 인한 수정

자세한 내용

message라이브러리에서 langauge관련 로직 분리

자세한 내용

• SSR를 통해 받은 유저 정보 판별하여 컴포넌트 구현
• 페이지별 Routing을 위한 인터페이스 구현

자세한 내용

figma에 구성해둔 원자단위 Button Component 구현

자세한 내용

원자(Atoms)단위 Text Component 구성

자세한 내용

(https://nextjs.org/docs/api-reference/next.config.js/environment-variables)

자세한 내용

UserBlog State 구현

Reference

Next.js

각종 상태관리 라이브러리 사용해야 하는 이유 명시 부탁드립니다.

자세한 내용

원자 단위에서 TextInput와 TextEditor Component 구현

자세한 내용

• 테크아이콘 constants로 이동및 병합
• Styles 불필요한 파일 정리
• _app.tsx 놀라움 주는 코드 정리

TILogApp.getInitialProps = async (context: AppContext) => {
  const { ctx } = context;
  if (!(ctx.req && ctx.res)) return { pageProps: {} };

  const session = await getIronSession(ctx.req, ctx.res, cookieConfig);
  return { pageProps: session };
};

• export const AccessTokenContext = createContext<AccessTokenInterface|null>(null);
• setAccessToken("");
• else if 사용

} else {
        if (error.response?.status === 401) {

• interface를 사용합시다

export async function getServerSideProps(context: {
  req: {
    cookies: {
      refreshToken: GetAccessTokenUsingRefreshTokenResponse;
    };
  };
}) {

• 타입 정의, 보내고, 받는거 확실하게 할것 -> 작업할 때 다른 구현파일 참조 한다 싶으면 아 잘못했구나 생각하기

자세한 내용

• 양식에 맞게 작성

자세한 내용

usersetting, modal 버그 수정

자세한 내용

ReactQuery 인증 레핑 Custom Hook

자세한 내용

• axios.interceptor로 글로벌 에러 헨들링

자세한 내용

• ReactQuery 구현
• Component에 State 연결

자세한 내용

테크아이콘을 리팩터링합니다.

자세한 내용

현재 Frontend에서 accessToken와 UserInfo 관련 데이터를 SSR을 통해 Backend에서 fetching하고 있습니다. SSR을 통해 Backend에게 데이터를 요청할때 요청한 Client측의 IP가 아닌 Server측의 IP로 fetching되고 있으며, 구조상 rate-limiting이 걸리기 쉬운 조건에 놓여 있습니다. (Backend측에서 API rate-limiting을 지정하여 DDOS 공격에 대응하고 있는 상황입니다.) 해결방안을 논의 해봅시다.

자세한 내용

현재 프로젝트 디렉터리 위치가 초기 기획과 다른걸로 확인되어 디렉터리를 재배치하는 작업이 필요합니다.

자세한 내용

파일 대소문자 오류 해결

Originally posted by @argon1025 in #9 (comment)

자세한 내용

date-fns 모듈을 사용한 날짜 관리 라이브러리를 작성합니다.

자세한 내용

ESLint 현재 버전에 맞게 재구성
ESLint 플러그인 추가, 룰 추가
tsconfig

https://www.google.com/search?q=nextjs+ecmaversion&rlz=1C5CHFA_enKR998KR998&oq=nextjs+ecmaversion&aqs=chrome..69i57.7033j0j1&sourceid=chrome&ie=UTF-8

자세한 내용

editor를 재사용하기위해 리팩터링

자세한 내용

• Post Detail, Like ReactQuery 구현
• Like Mutation 구현
• Component에 State 연결

자세한 내용

기존에 작성한 코드들을 리팩터링 합니다.

RefreshToken

• RefreshToken 발급
• RefreshToken 재발급
• RefreshToken 파기

UserInfo

• LocalStorage에 UserInfo 관리

AccessToken

• AccessToken 발급
• AccessToken 재발급

RefreshToken 관련 로직

AccessToken 관련 로직

브라우저

자세한 내용

• Post Card custom react-query & Component
• Most Popular Post Card custom react-query & Component
• 필요없는 파일들 제거

자세한 내용

• 상태 연결
• react-form-hook 적용 / form error validation