프론트엔드

vite환경에서 번들 분석/경량화하여 빌드 시간, 초기 렌더링을 개선한 이야기

문제점 네이버 부스트캠프에서 진행하고 있는 AlgoITNi프로젝트에서 아래와 같은 문제가 발생했다. 빌드하는 과정에서 이러한 경고 메시지가 발생한 것이다. 특정 청크가 500KB보다 크다는 것이 문제이다. 위 사진을 보면 번들사이즈가 1285kb이고, 사용자가 실제로 받는 번들사이즈인 gzip사이즈가 425.33kb이라 초기 렌더링이 느려질 수 있다는 문제가 있다. 청크 사이즈 줄이기 청크 구조 분석하기 원인을 알기위해서 vite-bundle-visualizer를 사용해서 청크의 시각적인 분석을 해보았다. highlight.js가 번들의 절반을 차지하고있었다. highlight.js는 에디터에서 코드하이라이팅에 사용되는 라이브러리인데, 여러가지 언어를 모두 지원하기때문에 이렇게 라이브러리 사이즈가 커지는..

Github Actions, S3, CloudFront OAC로 CICD 전략 구축하기 (3) - 배포 브랜치 전략에 맞는 CICD yml작성하기

그럼 이걸 활용해서 yml을 만들어보자. Github Actions Github Actions는 github에서 제공하는 CICD 툴으로써, 코드 저장소에 어떤 이벤트가 발생했을때 특정 작업을 일어나게 하거나 주기적으로 작업을 반복 실행시키는 일을해준다. 이에 따라 브랜치마다 다른 일을 할 수 있도록 처리해줄 수 있다. 그럼 브랜치마다 어떻게 작동하게 만들지 전략을 수립해보자. 배포 브랜치 전략 수립하기 우리팀은 프론트엔드 코드와 백엔드 코드가 한 레포지토리에 있기때문에, 각 파트별 배포가 필요한 상황이었다. https://github.com/boostcampwm2023/web05-AlgoITNi GitHub - boostcampwm2023/web05-AlgoITNi: 동료와 함께 할 수 있는 플랫폼, ..

Github Actions, S3, CloudFront OAC로 CICD 전략 구축하기 (2) - 서버 자원 생성 + AWS CLI사용해보기

CICD를 구성하기전에 우선은 배포를 위한 서버 자원(S3, CloudFront, IAM)을 생성하고, AWS CLI를 사용해보자. S3만들기 클라우드 프론트를 통해 OAC설정을 할것이기에 ACL비활성화, 퍼블릭 엑세스 차단설정을 해도된다. CloudFront배포 만들기 원본 도메인으로 S3 버킷을 연결시켜주자. OAC설정하기 클라우드 프론트로만 S3에 접근할 수 있도록 S3의 정책을 변경해주자 S3에 파일을 업로드 하기 웹 콘솔에서 업로드 버튼 누르기 사실 업로드하는 방법은 간단하다. AWS 콘솔에서 업로드 버튼을 누르면 된다 허허 그런데 git에 push 할때마다, 직접 빌드하고 빌드한 파일을 업로드 하기에는... 우리는 너무 할일이 많고, 충분히 자동화시킬 수 있는 부분이다. 그래서 github a..

Github Actions, S3, CloudFront OAC로 CICD 전략 구축하기 (1) - S3에 CloudFront 끼얹기

들어가며 네이버 부스트캠프의 그룹프로젝트 과정에서 진행했던 AlgoITNi의 배포전략, 선택한 이유, 방법들을 기록해두고자 한다. 프론트엔드에서 배포는 어떻게 이뤄지는가? 프론트엔드의 배포는 결국 html,css,js 정적파일을 서빙하면 끝이다. (SSR 제외) 좀더 세부적인 동작은 이전에 작성한 아래의 게시글을 참고해주면 좋을 것 같다. https://0422.tistory.com/312 프론트엔드 웹서버 직접 만들기 (1) - Content-Type, MIME 프론트엔드 개발을 해본 사람이라면 vscode의 live-server, webpack-dev-server, vite등등 다양한 도구를 사용해서 프론트엔드 서버를 띄워본 경험이 있을 것이다. 심지어 express를 사용한 서버에서도 static ..

당근마켓 윈터테크 인턴십 그룹플랫폼 직무면접 불합격 회고

그룹 플랫폼 팀에 지원 이번 윈터테크 인턴십은 프론트엔드가 코어, 광고, 그룹플랫폼 3가지 형태로 구성되어있었다. 나는 이 중 광고와 그룹플랫폼에 지원했다. 그 중, 그룹플랫폼에 조금 더 신경을 써서 이력서를 작성했다. 왜냐하면, 창업과 서비스를 만들어내는 것에 관심이 있는 나와 잘 맞다고 생각하기 때문이었다. 팀에 참여한다면 부스트캠프에서 학습한 백로그 기반의 애자일 스프린트를 진행하면서 빠르게 소통하며 프로덕트를 만들어보는 경험을 해보고싶었다. 또한, 만든 프로덕트가 사용자에게 전달되는 과정을 확인해보며 사용자의 데이터를 확인하고, 어떻게 그 데이터를 프로덕트에 다시 활용하는지, 팀에서 데이터를 기반으로 어떻게 의사결정을 하는지도 확인해보고 싶었다. 그리고 결정된 내용을 코드를 통해 직접 구현해서 프..

부스트캠프 멤버십 7주차 회고

멤버십 7주차를 마쳤다. 굉장히 바쁘고, 동시에 좀 뿌듯했던 한주였다. 저번 주의 해이해짐이 사라지고, 다시 열정을 찾아올 수 있었다. 배우고 느낀 것들 리액트 렌더링 방식 이해하기 기존의 코드는 innerHTML과 템플릿리터럴, 이벤트 기반으로 DOM요소를 직접적으로 조작하는 방식이었다. 여기서 관심사를 조금 더 분리하고, 컴포넌트를 보다 컴포넌트 형태로 관리하기 위해서 JSX를 도입하여 리액트의 렌더링을 구현해보는 형태로 변경했다. 이 과정에서 JSX가 어떻게 변환되는지, 리액트의 virtual DOM은 어떻게 부분렌더링에 기여하는지 등에 대한 이해도를 높힐 수 있었다. 수많은 리액트관련 글들, 그리고 책까지 많은 정보들을 접하고 개념을 이해했다고 생각했지만, 전혀 이해하고 있지 못했었나보다. 굉장히..

프론트엔드 웹서버 직접 만들기 (1) - Content-Type, MIME

프론트엔드 개발을 해본 사람이라면 vscode의 live-server, webpack-dev-server, vite등등 다양한 도구를 사용해서 프론트엔드 서버를 띄워본 경험이 있을 것이다. 심지어 express를 사용한 서버에서도 static 설정만 하면 전부 설정이 완료된다. 그런게 나는 지금까지 이런 도구를 사용하면서 과연 이게 어떻게 동작하는가?에 대해서는 한번도 생각해본 적이 없었다. 이번 기회를 통해 제대로 파악해보자. createServer https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 J..

우아한 테크코스 FE 프리코스 2주차 회고

우아한 테크코스 2주차를 진행했다. 2주차는 이전주보다 설계의 비중이 높아진게 느껴졌다. 숫자야구 게임을 구현하는 문제였다. 입출력 2주차에는 입출력이 가장 난관이었다. 입출력에 사용하는 라이브러리인 MissionUtils의 Console은 nodeJs의 readline을 사용하여 구현되었는데, 이게 비동기로 작동한다. 내가 하고 싶었던 것은 입력 받은 값을 선언해서 이후 코드에서 사용할 수 있게 하는 것이었다. const input = MissionUtils.Console.readLine(질문내용,어쩌구저쩌구....); play(input); 이런식으로 이후 입력값을 계속해서 사용할 수 있게 하고 싶었다. MissionUtils.Console.readLine("question", (input)=>{ ...