Giter VIP home page Giter VIP logo

frisklog's Introduction

image

Frisklog

학습한 내용 및 문제를 해결했던 경험을 상기시키며 정리하는 용도로 만들게 된 블로그입니다.

Table of Contents

Features

  • Loadable을 사용하여 페이지에 필요한 스크립트만 동적으로 불러올 수 있도록 Code-Spliting 코드분할 작업을 하였습니다.
  • HMR 및 번들링 기능이 내장된 Razzle을 사용였습니다.
  • 컴포넌트 내에서 재사용가능한 코드를 커스텀 Hooks로 리펙토링 하였습니다.
  • 전역상태를 관리하기 위해 Context API를 사용하였습니다.
  • 데이터 패칭을 위해 Apollo-ClientGraphQL을 사용하였습니다.
  • ScssBootstrap를 활용하여 스타일시트를 작성하였습니다.
  • AWS EC2에 프로젝트를 배포했습니다.

ERD

image (1)

Install

  1. 프로젝트 내려받기
$ git clone https://github.com/donghoon4907/frisklog.git
$ cd frisklog
  1. 패키지 설치

yarn을 사용하는 경우에만 패키지 잠금이 적용됩니다.

  • Using yarn
$ yarn install
  1. 환경 변수 설정하기

.env 파일을 구성하여 환경 변수를 설정하세요. .env.example를 통해 예시를 확인할 수 있습니다.

  1. GraphQL 서버 설치 가이드

Task Manage

File Structure

루트경로 디렉토리명 설명
/src /assets 아이콘 컴포넌트 목록입니다.
/components 재사용 가능한 컴포넌트 목록입니다.
/context Context API 관련 모듈을 정의하였습니다.
/graphql GraphQL Query 및 Mutation 목록입니다.
/hooks 커스텀 Hooks를 정의하였습니다.
/json 정적 데이터 목록입니다.
/lib 공통으로 사용되는 헬퍼 모듈 목록입니다.
/pages 페이지 컴포넌트 목록입니다.
/sass 스타일 시트 목록입니다.

Related projects

License

MIT

frisklog's People

Contributors

donghoon4907 avatar

Watchers

 avatar  avatar

frisklog's Issues

[Front] Fix mypage

  1. 마이페이지가 아닌데 업로드가 가능한 현상
  2. 마이페이지에서 로그아웃 후 다른 계정으로 로그인 후 마이페이지에 들어온 경우 이전 계정의 프로필 사진이 나타나는 현상
  3. 프로필 사진을 설정하지 않은 사용자가 마이페이지에 접근시 썸네일 오류가 발생하는 현상
  4. 프로필 사진 변경 후 수정버튼을 누르지 않은 상태에서 다른 액션 시 변경하지 않은 프로필 사진이 유지되는 현상

[User] Mypage routing

모든 포스트 보기, 좋아요한 포스트 보기 시 라우팅 변경하기

[Front] Modify Post UI

  1. 드롭다운 형태로 제공되던 수정 및 삭제 버튼을 다른 방식으로 리뉴얼하기

[Frontend|Backend] Refactoring

  1. 이미지 컴포넌트 단일화
  2. Deprecated 컴포넌트 업데이트
  3. Header 내에서만 사용되는 컴포넌트 header폴더로 이동
  4. 회원가입 시 프로필사진 설정을 안한경우 기본 사진이 저장되도록 변경

[2022-08-08] Changes

변경사항

  1. 팔로잉 페이지에서 팔로잉 목록 UI를 개선하였습니다.
  2. 포스트 영역의 너비가 증가, 사이드 영역의 너비가 감소하였습니다.

버그 수정사항

  1. 포스트 등록 / 수정의 카테고리 입력 시 밝은 모드에서 삭제 아이콘이 보이지 않는 현상이 수정되었습니다.
  2. 다크모드의 에디터 미리보기에서 코드태그의 배경색이 배경색과 일치하는 현상이 수정되었습니다.
  3. 에디터 스크롤이 보여지는 현상이 수정되었습니다.
  4. 검색바가 보여졌을 때 테두리가 보이지 않는 현상이 수정되었습니다.

Hotfix 목록

  1. 추천 사용자 캐러셀 크기가 비정상적인 현상 해결
  2. 마이페이지 포스트보기 크기가 비정상적인 현상 해결
  3. 프로필 사진 변경 버튼을 primary 색으로 변경
  4. 카테고리 버튼이 active 되었을때 다른색으로 변하는 현상 해결
  5. select 텍스트색 및 굵기 조절
  6. 사이트맵 파일을 인식할 수 있도록 서버 설정
  7. 피드 페이지도 network-only 방식으로 변경

기타

START_DATE: 2022-08-08 20:30
END_DATE: 2022-08-08 21:10

[Follow] Reorganization

  1. 팔로잉 목록 형식 및 디자인 변경(캐러셀 -> 리스트)
  2. 팔로잉 페이지에서 팔로잉한 사용자를 누를 경우 그 사용자의 게시물이 보여지도록 구현
  3. 다중 언팔로우 기능 추가
  4. 팔로잉 버튼식 페이지네이션 추가
  5. 팔로잉 검색 기능 추가
  6. 검색결과 empty 처리

[2022-08-03] Bugs

  1. 포스트 등록 / 수정의 카테고리 입력 시 밝은 모드에서 삭제 아이콘이 보이지 않는 현상
    Image

  2. 다크모드의 에디터 미리보기에서 코드태그의 배경색이 배경색과 일치하는 현상
    Image

  3. 에디터 스크롤이 보여지는 현상
    Image

  4. 검색바가 보여졌을 때 테두리가 보이지 않는 현상
    Image

[Post] Comment

1. Add new features

  • 게시물하단에 댓글 아이콘 및 댓글 수 추가 => 현재 댓글 수 hide, 기능완료, 성능고려중
  • 아이콘 클릭 시 댓글 목록 활성화
  • CRUD => 현재 삭제 hide, 기능완료

2. Next plan

  • 대댓글

[Frontend] Next Migration

기존의 Native React 프로젝트를 Next 프레임워크 기반의 애플리케이션으로 변경. 아폴로 클라이언트를 리덕스로, ScssStyled-components로 변경하고 타입스크립트를 사용.

[Post] Modify, Delete

1. Add new features

  • 자신이 작성한 게시물인 경우 수정 및 삭제할 수 있도록 구현
  • Dynamic dropdown

[2022-07-20] Changes

변경사항

  1. 마이페이지 버그 수정
    마이페이지가 아닌데 업로드가 가능한 현상
    마이페이지에서 로그아웃 후 다른 계정으로 로그인 후 마이페이지에 들어온 경우 이전 계정의 프로필 사진이 나타나는 현상
    프로필 사진을 설정하지 않은 사용자가 마이페이지에 접근시 썸네일 오류가 발생하는 현상
  2. 포스트 등록일이 현재시간이 아닌 현상 수정
  3. 포스트 헤딩 텍스트 크기 조절
  4. 다중 카테고리 설정 기능 추가

개발환경 관련1. DB 변경사항

  • Platform 모델 추가
컬럼명 타입 코멘트
platformName STRING 플랫폼명
logoUrl STRING 로고 이미지 경로
domainUrl STRING 도메인 경로
storageUrl STRING 저장소 경로
  • User 모델 변경사항
컬럼명 타입 코멘트
PlatformId STRING 플랫폼명
link STRING 블로그 주소
  • Post 모델 변경사항
컬럼명 타입 코멘트
link STRING 포스트 주소
category STRING 카테고리명
  • Category 모델 추가, Post 모델과 M:N
컬럼명 타입 코멘트
content STRING 카테고리명
  1. env 변수 추가
project name value comment
frisklog-server PLATFORM_ID 1 Frisklog 플랫폼 ID
frisklog-server DEFAULT_AVATAR /avatar.png 기본 프로필 사진
frisklog RAZZLE_FRISKLOG_PLATFORM_ID 1 Frisklog 플랫폼 ID
frisklog RAZZLE_DEFAULT_AVATAR /avatar.png 기본 프로필 사진
frisklog RAZZLE_FRISKLOG_LOGO /logo.png 로고

기타

  1. 데이터 백업 및 복원 스크립트 추가
  2. velog 크롤링 작업 완료 및 비활성화

[Front] Bootstrap error log

  • 로그 내용
    When server rendering, you must wrap your application in an to ensure consistent ids are generated between the client and server.

[User] Keep Login

  1. [Frontend] 로그인 유지 체크박스 추가
  2. [Backend] 로그인 유지를 체크한 경우 토큰의 유효기한을 없애고, 체크하지 않은 경우 3시간으로 제한(OAuth의 경우 유효기한 X)

[2022-07-27] Changes

변경사항

  1. 로그인 시 암호 대신 이메일 검증 단계가 추가되었습니다.
  2. 팔로우 기능이 추가되었습니다

개발환경 관련

  1. DB 변경사항
  • Follows 테이블 추가(User 모델 m:n)
  1. env 변수 추가
project name value comment
frisklog-server EMAIL_ID secret 전송시 사용할 이메일
frisklog-server EMAIL_PASSWORD secret 이메일 암호

기타

START_DATE: 2022-07-27 04:30
END_DATE: 2022-07-27 04:50

[2022-08-03] Changes

변경사항

  1. Github 계정으로 로그인할 수 있도록 추가되었습니다.
  2. 로그인 유지 기능이 추가되었습니다.
  3. 다크모드 기능이 추가되었습니다.

개발환경 관련

  1. DB 변경사항

Platforms에 github 추가
insert into Platforms (platformName, logoUrl, domainUrl) values ('github', 'http://localhost:4000/github-icon.png', 'https://github.com')

  1. env 변수 변경사항
project name value comment
frisklog RAZZLE_GITHUB_CLIENTID secret GitHub App Key
frisklog-server GITHUB_CLIENT_ID secret GitHub App Key
frisklog-server GITHUB_CLIENT_SECRET secret GitHub App Secret
frisklog-server BACKEND_ROOT secret 서버 도메인 주소
frisklog-server PLATFORM_ID 1 Frisklog 플랫폼 ID
frisklog RAZZLE_FRISKLOG_PLATFORM_ID 1 Frisklog 플랫폼 ID
  1. 기존에 업로드된 프로필사진의 경우 도메인을 붙여주는 DB작업필요

기타

START_DATE: 2022-08-02 23:20
END_DATE: 2022-08-03 00:13

[User] Google Login

  1. 로그인 시 이메일 정보만 저장합니다.
  2. 이후 컨텐츠 이용 시 닉네임을 변경하도록 유도시킵니다.

[2022-07-27] Bugs

  1. 스타일 수정 필요 (window 환경에서 확인)
    Image

  2. 캐러셀 내 팔로우 버튼 탭포커싱 해제 필요
    Image

[Front] Fix ui style

  1. 모달 margin 추가
  2. 포스팅 리스트 점 옆 여백 조정
  3. 포스팅 헤딩 사이즈 조정

[Front] Fix Text style

윈도우 + 크롬 환경에서 텍스트가 짤리게 보이는현상을 line-height 스타일주기

  1. 포스트의 사용자명
  2. 댓글의 사용자명
  3. 댓글의 내용

[Message] new

  1. 모델 생성
  2. Query 및 Resolver 작성
  3. 사용자 상태 추가
  4. 프론트 작업

[Frontend] Dark Mode

  1. 컴포넌트에 테마별 스타일 적용
  2. Dark / Light 전환 스위치 추가
  3. 테스트

[Backend] Paginate

  1. offset-based => cursor-based
  2. post 모델 관련 쿼리 업데이트(offset -> cursor)
  3. user 모델 관련 쿼리 업데이트(offset -> cursor)
  4. comments 모델 관련 쿼리 업데이트(offset -> cursor)

Policy

정책 내용

  1. 로그인 정책
  2. 컨텐츠 길이 제한
  3. 데이터

[User] Mypage

1. Add new features

  • 페이지 진입 시 내가 작성한 게시물을 최신 순으로 보여주기 (clear)
  • 좋아요한 게시물만 보기
  • 내 정보 수정

[Front] SEO

  1. 포트 번호 우회하기 80 -> 3000
  2. 메타 태그 작성
  3. 사이트맵 작성 및 robots.txt 수정
  4. GSC에 사이트맵 제출
  5. Structured Data
  6. 사이트맵에 맞게 태그 최적화
  7. 페이지 분리

[IMPROVEMENT] Renew README.md

  1. 구조
  • 프로젝트의 목적 및 용도
  • 목차
  • 특징
  • 프로젝트 개발현황
  • 프로젝트 구조
  • 프로젝트 설치 가이드
  • 저작권, 라이선스 정보
  • 연관된 프로젝트

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.