NDD
1.우리는 함께 자랄 수 있을까
이 글은 우리팀(NDD)이 함께 자라기 위한 노력을 담기 위해서 작성되었습니다.
2.팀 프로젝트의 주제는 어떻게 선정할까
해당 글은 저희팀(NDD)가 결정되고 난 뒤 어떤 주제의 프로젝트를 선정했는지에 대한 내용이 담겨 있습니다.
3.어떤 기술을 선정해볼까?
서문 저희팀 (NDD)는 면접연습 서비스를 개발할 예정이구 기술선정에 있어서 다음과 같은 질문이 주어졌습니다.
4.CRA 없이 react app 만들기
지난 시간에 우리가 사용할 기술들에 대해서 짧게 나마 논의한 후 결론을 내릴 수 있었습니다.우리팀(NDD)은 Next가 아닌 SPA 서비스를 만들것이며, 특히 CRA없이 react 서비스를 구성해보려고 합니다.본 게시글은 babel 과 webpack에 집중하여 작성되었
5.createBrowserRouter를 통한 Router기능 추가
기존의 Router 컴포넌트가 아닌 createBrowserRouter를 통한 Router 도입
6.React + Media Streams API를 통한 Web Recorder 기능 구현
React로 구현하는 web recorder!
7.SVG Sprite 기법을 사용해 나만의 특별한 Icon 컴포넌트 개발
왜 SVG 파일 관리는 불편했을까?
8.Recoil에 대해서 가볍게 톺아보기
NDD 프로젝트의 FE에서는 recoil을 도입하게 되었습니다!!
9.컴포넌트 내부에서 router 예외 처리 하는 여러 방법
1. CreateBrowserRouter 기반의 loader처리 2. 페이지 컴포넌트 내부에서 예외처리 3. 하지만 이것도 좀 더 최적화가 가능
10.폭죽을 터트려보자 (최적화를 곁들여서)
곰터뷰 서비스에서 유저에게 축하(?)의 의미를 담은 이벤트를 제공하기 위해서 도입되었습니다!
11.scroll event 최적화로 웹페이지 성능 개선하기
scroll event를 직접 최적화 해보고 정확한 수치 비교를 진행했습니다.
12.마이크 사운드바 개발하기
매주 진행되는 FE 마스터 클래스에서 마스터이신 준일님께서 인터뷰 페이지에서 유저에게 마이크의 audio를 시각적으로 확인할 수 있는 기능을 제공하면 어떨지에 대한 피드백이 있었습니다. 저 또한 굉장히 재밌을 것이라 생각을 했고, 앞선 팀 피드백을 바탕으로 진행
13.SharedArrayBuffer 이슈 해결
서문 ffmpeg를 사용하기 위해선 내부의 worker thread를 사용해야만 합니다. 이 과정에서는 sharedArrayBuffer를 사용해야만 했는데요, 이 과정에서 겪었던 이슈들, 그리고 이를 어떻게 해결 했는지에 대해서 담고 있습니다. SharedArrayb
14.Client에서 Webm to Mp4 인코딩 구현
곰터뷰 서비스에서 ffmpeg.wasm 를 통해 webm to mp4 인코딩을 수행합니다.
15.우리는 함께 자라고 있다
해당 글은 네이버 부스트캠프 웹 모바일 8기에서 진행한 Team NDD의 곰터뷰 서비스 에 대한 회고를 담고 있습니다.
16.체류시간 증가를 위해 ServiceTour 구현하기
본 프로젝트는 제 사이드 프로젝트인 곰터뷰 의 개발과정을 담고 있습니다.부스트 캠프기간 동안 정말 열심히 만들었던, 곰터뷰 프로젝트는 이미 그 자체만으로 정말 많은 기능을 담고 있었지만, 서비스를 사용하시는 분들에게 이 모든걸 경험시켜드리지 못한다고 생각했습니다.실제로