Giter Club home page Giter Club logo

blog's Introduction

블로그(Blog)

기존에 사용했던 블로그 서비스를 대체하기 위해, 마크 다운 기반의 serverless 정적 홈페이지를 구축하고, 기존에 작업했던 프로덕트들을 보여주기 위한 서비스입니다.

구조

폴더 구조 보기
src
┣ api
┃ ┣ feeback.ts
┃ ┣ instance.ts
┃ ┣ post.ts
┃ ┗ posts.ts
┣ components
┃ ┣ common
┃ ┃ ┣ Button
┃ ┃ ┃ ┣ Button.tsx
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ DeferredComponent
┃ ┃ ┃ ┣ DefferredComponent.tsx
┃ ┃ ┃ ┗ index.tsx
┃ ┃ ┣ FadeInUp
┃ ┃ ┃ ┣ FadeInUp.module.css
┃ ┃ ┃ ┣ FadeInUp.tsx
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ Footer
┃ ┃ ┃ ┣ Footer.tsx
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ Input
┃ ┃ ┃ ┣ index.tsx
┃ ┃ ┃ ┣ Input.stories.tsx
┃ ┃ ┃ ┗ Input.tsx
┃ ┃ ┣ Modal
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┣ Modal.module.scss
┃ ┃ ┃ ┣ Modal.tsx
┃ ┃ ┃ ┣ ModalContext.tsx
┃ ┃ ┃ ┗ useModal.ts
┃ ┃ ┣ Portal
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┗ Portal.tsx
┃ ┃ ┣ Skeleton
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┣ Skeleton.tsx
┃ ┃ ┃ ┗ SkeletonTexts.tsx
┃ ┃ ┣ TextArea
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┗ TextArea.tsx
┃ ┃ ┣ Tooltip.tsx
┃ ┃ ┗ WithTooltip.tsx
┃ ┣ icons
┃ ┃ ┣ BlogIcon.tsx
┃ ┃ ┣ GithubIcon.tsx
┃ ┃ ┣ Icon.tsx
┃ ┃ ┣ index.ts
┃ ┃ ┣ MailIcon.tsx
┃ ┃ ┣ PortfolioIcon.tsx
┃ ┃ ┣ ProjectIcon.tsx
┃ ┃ ┗ WebIcon.tsx
┃ ┣ layouts
┃ ┃ ┣ ArticleLayout.tsx
┃ ┃ ┣ ContentLayout.tsx
┃ ┃ ┣ ExperienceLayout.module.css
┃ ┃ ┣ ExperienceLayout.tsx
┃ ┃ ┗ GlobalLayout.tsx
┃ ┣ Main
┃ ┃ ┣ LinkButton.tsx
┃ ┃ ┣ MoreSection.tsx
┃ ┃ ┣ Slider.module.css
┃ ┃ ┗ Slider.tsx
┃ ┣ NavigationBar
┃ ┃ ┣ index.ts
┃ ┃ ┣ NavigationBar.module.scss
┃ ┃ ┗ NavigationBar.tsx
┃ ┣ Post
┃ ┃ ┣ Comments.tsx
┃ ┃ ┣ index.ts
┃ ┃ ┣ ItemSkeleton.tsx
┃ ┃ ┣ ListItem.tsx
┃ ┃ ┣ MarkdownComponents.tsx
┃ ┃ ┣ Post.module.scss
┃ ┃ ┣ Post.tsx
┃ ┃ ┣ PostContent.tsx
┃ ┃ ┣ PostSkeleton.tsx
┃ ┃ ┣ PostTitle.tsx
┃ ┃ ┗ SyntaxHighlighter.tsx
┃ ┗ Resume
┃ ┃ ┣ Activities
┃ ┃ ┃ ┣ Activities.tsx
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ ContentTemplate
┃ ┃ ┃ ┣ ContentTemplate.tsx
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┣ OtherLinks.tsx
┃ ┃ ┃ ┣ PersonalInfo.tsx
┃ ┃ ┃ ┣ SkillButton.module.scss
┃ ┃ ┃ ┣ SkillButton.tsx
┃ ┃ ┃ ┣ Skills.module.scss
┃ ┃ ┃ ┗ Skills.tsx
┃ ┃ ┣ Educations
┃ ┃ ┃ ┣ Educations.tsx
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ Hobbies
┃ ┃ ┃ ┣ Hobbies.tsx
┃ ┃ ┃ ┣ Hobby.tsx
┃ ┃ ┃ ┗ index.ts
┃ ┃ ┣ Introduction
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┗ Introduction.tsx
┃ ┃ ┣ Projects
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┗ Projects.tsx
┃ ┃ ┣ index.ts
┃ ┃ ┣ PersonalInfo.tsx
┃ ┃ ┗ Resume.tsx
┣ data
┃ ┣ activities.ts
┃ ┣ educations.ts
┃ ┣ hobbies.ts
┃ ┣ projects.ts
┃ ┗ skills.ts
┣ hooks
┃ ┗ common
┃ ┃ ┣ useClickAway
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┗ useClickAway.ts
┃ ┃ ┣ useIntersection
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┗ useIntersection.ts
┃ ┃ ┣ useInterval
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┣ useInterval.ts
┃ ┃ ┃ ┗ useIntervalFn.ts
┃ ┃ ┗ useLoading
┃ ┃ ┃ ┣ index.ts
┃ ┃ ┃ ┗ useLoading.ts
┣ models
┃ ┣ Feeback.ts
┃ ┣ Post.ts
┃ ┗ Resume.ts
┣ pages
┃ ┣ api
┃ ┃ ┗ hello.ts
┃ ┣ feedback
┃ ┃ ┗ index.tsx
┃ ┣ posts
┃ ┃ ┣ index.tsx
┃ ┃ ┗ [id].tsx
┃ ┣ test
┃ ┃ ┗ index.tsx
┃ ┣ index.tsx
┃ ┣ _app.tsx
┃ ┗ _document.tsx
┣ services
┃ ┣ firebase
┃ ┃ ┗ index.ts
┃ ┗ post
┃ ┃ ┣ index.ts
┃ ┃ ┗ postService.ts
┗ styles
┃ ┣ fonts
┃ ┃ ┣ Pretendard-Black.subset.woff
┃ ┃ ┣ Pretendard-Black.woff2
┃ ┃ ┣ Pretendard-Bold.subset.woff
┃ ┃ ┣ Pretendard-Bold.woff2
┃ ┃ ┣ Pretendard-ExtraBold.subset.woff
┃ ┃ ┣ Pretendard-ExtraBold.woff2
┃ ┃ ┣ Pretendard-ExtraLight.subset.woff
┃ ┃ ┣ Pretendard-ExtraLight.woff2
┃ ┃ ┣ Pretendard-Light.subset.woff
┃ ┃ ┣ Pretendard-Light.woff2
┃ ┃ ┣ Pretendard-Medium.subset.woff
┃ ┃ ┣ Pretendard-Medium.woff2
┃ ┃ ┣ Pretendard-Regular.subset.woff
┃ ┃ ┣ Pretendard-Regular.woff2
┃ ┃ ┣ Pretendard-SemiBold.subset.woff
┃ ┃ ┣ Pretendard-SemiBold.woff2
┃ ┃ ┣ Pretendard-Thin.subset.woff
┃ ┃ ┣ Pretendard-Thin.woff2
┃ ┃ ┗ Pretendard.ts
┃ ┣ globals.css
┃ ┗ Home.module.css

기술 스택

TypeScript React Next JS Styled Components TailwindCSS Firebase

blog's People

Contributors

loopy-dev avatar

Stargazers

PUNGY avatar

Watchers

 avatar

blog's Issues

태그에 따른 필터링

  • 사용했던 모든 태그들을 모아 보여주기
  • 태그를 클릭하거나 드래그 시 검색을 할 수 있고, 이 필터 리스트가 초기화 되어야 함
  • #169
  • 태그별로 모아보기 컴포넌트가 모바일 환경에서도 보이도록 레이아웃 수정
  • 알고리즘 문제 포스트는 Recent Post 및 리스트에서 제외하기 -> 따로 카테고리를 설정?

css-in-js에서 tailwind로 옮겨가기

이슈

  • css-in-js는 javascript로 작성한다. 이는 javascript로 작성한 뒤 css로 한번 변환하는 과정을 거친다.
  • TBT(total blocking time)은 JavaScript 평가 시간에 영향을 받는다. 따라서 자바스크립트 코드의 양이 적을 수록 TBT는 감소한다.
  • styled component의 코드가 점점 증가함에 따라 필수적으로 로드해야 할 컨텐츠의 속도는 점점 감소하고 있다.

당장은 쉽지 않겠으나, 장기적인 목표로 기존 css-in-js 모듈을 덜어내고 utility class로 옮겨가고자 한다.

다크 모드 적용

  • 다크 모드 적용
  • 다크 모드 고도화 -> ui 디자인 시스템 고도화와 함께 이루어져야 함
  • 다크 모드와 storage, redux 동기화 -> 이때 클라이언트에서 깜빡거리는 문제가 없어야 함

디테일 보완 및 데이터 추가

  • 프로젝트 하위 아이콘 추가 (github, website, 추가 문서 등등...), flex-wrap 설정
  • 다른 프로젝트 데이터 추가
  • 버튼 동작 구현
  • 홈페이지로 진입 시 우선 리다이렉트 처리할 것

사이드바 개선

  • 현재 제목이 view port에 들어왔다면 굵은 글씨로 표시하기

커버 이미지 추가

  • 커버 이미지 추가 -> 100% width를 갖도록 처리하기,
  • 커버 색상에 따른 제목의 색상 처리 중요

메인 페이지 구현

  • 메인 페이지 구현 -> 앞쪽에 디자인 적용
  • 하부 디자인은 프로젝트 페이지와 거의 비슷하게 가져가기
    • 프로젝트 페이지 템플릿 분리하기

메인 페이지 화면 개선

메인 페이지 화면 개선하기

  • Problem Solving 페이지 화면 배치
  • NavigationBar에서 PS 배치를 어떻게 해야할 지?

첫 페이지 컨텐츠 채우기

  • 이력서 기반으로 첫 페이지 채워 나가기
  • 기술 파트 -> 이력서에 넣기 힘든 내용들 위주로 채워나가기
  • 프로젝트 파트 템플릿 재사용하기, 해당 파트 역시 재사용하기
  • 프로젝트 파트는 사진을 삽입하여 보다 rich하게 개선하기
  • footer 만들기

프로젝트 페이지 구현

  • 기재된 프로젝트 외 프로젝트들을 모아볼 수 있는 페이지 구현
  • 내용은 어떻게 표현할 지 고민하기

다크 모드 개선

기존 styled-components에서 사용하던 다크 모드 방식과 tailwind에서 사용하는 방식을 통일한다.

PS 페이지 만들기

  • PS(problem solving) 페이지 만들기
  • PS 페이지는 기존처럼 정적 블로그 형식으로 할 지, 아니면 notion api를 이용하여 ssr 방식으로 구성할 지 고민중
  • 정적 페이지 + github gist를 이용한 풀이 관리를 해 봐도 좋을 듯 하다

고민 중인 것

  • 새로운 카테고리를 만들 지, 아니면 기존 posts에서 필터링 하는 방식으로 할 지?

디자인 시스템 고도화

  • css var기준으로 변수 구축
  • 타입스크립트 개발 편의성 향상
  • context를 이용한 useTheme globalization, 사용하지 않는 파일 제거

연관 글 추천 기능

연관 알고리즘은 없으므로 일단은 랜덤으로 하단부에 보여지도록 구성한다.

블로그 고도화

  • 글 검색 기능
  • #129
  • 리스트 UI 고도화 (날짜, 태그 표시 및 고정 높이 적용)
  • #128
  • 코드 블록에 현재 언어가 무엇인지 표시하기
  • 조회수 기능 -> github 기능 사용하기

포스트 시리즈 구현

시리즈 형식으로 되어 있는 포스트를 묶어서 확인할 수 있는 시리즈 기능을 구현한다.

댓글 창 개선

  • 버튼을 통해 열고 닫을 수 있도록 하기
  • 데스크톱에서는 사이드바 형식으로 열고 닫을 수 있고, 모바일에서는 현행 방식을 유지하기
  • 총 댓글의 개수 표시하기

추가 UI 구현

  • ProgressBar 구현
  • 링크 공유 기능
  • window.alert 대신 사용할 수 있는 post ui

계속 ...

추가 UI 개선

  • post page, ps page에서 사용할 sticky navbar 구현(다음 포스트, 이전 포스트, 목록으로 등등)
    -> 위치 어디에 위치할지 선정 필요
  • #188

이미지 갤러리 만들기

  • 프로젝트 사진이 있다면 Modal 형식으로 띄우기
  • 이벤트 (키보드 맵핑 및 클릭 맵핑, 반응형 화면 처리)
  • agoda 등 slider 참조할 것

google analytics 추가

현재 사용하는 vercel analytics와 함께 보다 정확한 통계를 확인하고자 google analytics를 추가한다.

리팩토링

리팩토링

  • 중복 부분 제거
  • 가독성 개선

...

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.