담학기 해결할 부분

[MinnieMinwoo]

• og image 변경 안되는 문제 해결
• 캐시 invalid 타이밍이 배포보다 빠름(cloudfront 캐시를 무효화하는거를 lambda에서 수행하는게아니라 s3 yml로 이동할 필요있어보임)

// formateDate -> "2021-08-01 (수)" 식으로 나옴
// 따라서 "2021-08-01".split(" ")[0] -> "2021-08-01"로 가공해야하며 이는 menuDate 형식과 같음
이부분 수정하기

[MinnieMinwoo]

식샤

식샤들어온 이유 ->
큰 프로젝트를 하고 싶다
포폴 만들고 싶다(나랑 같음)
웹개발 경험을 하고 싶었다.

1. 실제 사용자가 있는 서비스 개발 경험을 할 수 있다.
2. 포트폴리오 를 의미있게 꾸밀 수 있다.
3. 기술적으로 성장?

기술적 부채
-> app router로의 전환
-> 서버리스 환경(ssg) -> 실제 (ssr)
-> css convention
-> 성능 문제
-> 리팩토링

결론

1. 기반은 안정화되어있어서 편하게 할수도있음
2. 하지만 원한다면 도전해볼 수 있는 분야가 많음

[B0neh3ad]

• 서버에러(5XX) 핸들링 하기
  지금은 그냥 redirect하는 식으로 해뒀는데, 이대로 둘지 아니면 에러가 생겼음을 보여주는 페이지/모달을 띄울지 고민해봐야 할 듯 합니다

• 식단 페이지 컨텐츠 영역 반응형 디자인 문제
  다른 페이지들(1단)과 식단 페이지(2단)의 레이아웃이 달라 반응형 디자인을 어떻게 할지 고민해봐야 할 듯 합니다.

[MinnieMinwoo]

말씀하신대로 오류로 인해 접근불가능하다는 모달을 띄워주는 편이 좋을거 같네요!

[B0neh3ad]

• 커뮤니티 ui 개선
  • 댓글 작성 영역 상단에 따로 선이 없어서, 스크롤이 중간 즈음 위치하면 댓글 목록이 잘린듯한 느낌이 듦
    
  • 글 작성 페이지의 하단 버튼 영역 또한 마찬가지임
    
  • 글 작성 페이지의 게시판 목록이 모달로 구현되어 있어, 최상단에서 스크롤을 살짝 아래로 당길 때 이 모달만 가만히 있음. 다소 어색..
    

[B0neh3ad]

• README 수정
  이번에 새로 들어오시는 분도 계시기에, 기존의 2023->2024 인수인계 관련 내용에서 새로운 내용으로 수정이 필요하다고 생각합니다.

[MinnieMinwoo]

깃허브 코파일럿 새로생겼길래 궁금해서 시켜봤는데, 생각보다 성능좋네요. 번역하고 내용만 좀 수정했는데 한번 검토 부탁드려요!

Siksha Web

'서울대학교 식단 알리미 : 식샤' 의 웹사이트 Github Repository 입니다.

Getting Started

Prerequisites

• Node.js
• Yarn
• .env.development.local
• .env.production.local
  • env 파일은 dm으로 말씀해주세요!

Installation

1. 리포지토리 복제:

   git clone https://github.com/wafflestudio/Siksha-Renewal-Web.git

2. 프로젝트 디렉토리로 이동:

   cd Siksha-Renewal-Web

3. yarn 의존성 설치:

   npm i -g yarn #yarn 설치되지 않은 경우
   yarn install

Running Locally

프로젝트 디렉토리에서 아래 명령어 수행:

yarn run dev

로컬호스트 링크 http://localhost:3000 를 열어서 확인 가능합니다..

Building for Production

프로젝트를 빌드하기 위해서는 아래 명령어 사용:

yarn build

이후 아래의 명령어를 입력해줍니다.:

yarn start

Deployment

현재는 AWS를 사용해 배포를 하고 있습니다. 배포서버는 dev/master 브랜치를 반영하는 Development 서버, prod 브랜치를 반영하는 Production 서버로 나뉩니다.:

• Production: https://siksha.wafflestudio.com/
  • CloutFront
  • S3
  • 라우팅용 Lambda edge Function
• Development: https://siksha-dev.wafflestudio.com/
  • CloutFront
  • S3
  • 라우팅용 Lambda edge Function
• 각 주소에 대해 간단히 설명하면 CloudFront -> 캐시서버, S3 -> Next.js의 정적 파일이 올라가는 곳, Lambda edge function -> 사용자가 접속시 실행되는 함수 정도로 알고 계시면 될거 같습니다!
• 이후 AWS에서 설정 관리를 위해서 IAM권한 받아서 aws 계정 생성하는 것을 추천드립니다.

현재는 Github Action을 사용해 앱을 자동으로 배포하고 있습니다. 이에관한 workflow 명령어는 .github/workflows 디렉토리에서 확인 가능합니다.

Environment Variables

배포시 필요한 환경 변수는 GitHub Secrets로 관리되고 있습니다.

• 로컬에서 동작시킬경우, 소셜로그인을 위해 앞선 언급대로 로컬에 env 파일 설정이 필요합니다.

Current Status

• 미개발 상태에서 시작해서 기능적인 부분은 전부 완성했으나, 기술적 부채들을 해결할 필요가 있습니다.
  • App router로의 마이그레이션
  • css 리팩토링
  • s3 + lambda -> docker + ec2를 사용한 배포방식 변경
  • SEO + 성능 개선 + Firebase analytics 설정
• 추가로 새로운 피쳐 개발(아마 식샤 사장님앱)도 진행해야 합니다.