전체 글
-
[Next.js 14 / 🔥 Tadak Tadak 🔥] 백엔드 개발자가 API 안 만들어 줬다고 손 놓고 있을겁니까? MSW(Mock Service Worker) 한번 써보세요!Next.js 2024. 1. 10. 15:35
백엔드 팀과 협업하는 프로젝트를 하게 되면 보통 백엔드는 도메인(비지니스 로직)과 DB 설계 작업을 먼저 진행하고 API 작업을 시작합니다. 프런트 팀은 이런 백엔드의 스케줄에 맞춰서 API 작업이 끝날 때까지 스타일 작업 등을 먼저 진행하게 됩니다.하지만 프론트에서 할 수 있는 작업이 끝났음에도 백엔드의 API 작업이 마무리되지 않아 프론트엔드 팀의 시간이 붕 뜨게 되는 일이 비일비재합니다. 이때의 시간을 효율적으로 사용하기 위해 사용할 수 있는 라이브러리인 MSW에 대해 알아봅시다! 🍎 목차 1. MSW를 사용하는 이유2. MSW 설치 및 Service Worker의 역할3. (번외) Next.js Route Handler로 MSW 대체하기 4. Next.js 에서 MSW 사용 시 유의할 점5. ..
-
[Next.js 14 / 🔥 Tadak Tadak 🔥] Context API를 사용하여 Tab Navigation을 구현할 수 있을까? (문제 해결 과정 1)Next.js 2024. 1. 3. 23:59
🍎 목차1. ONE DAY HERO 프로젝트에서의 Tab Navigation 공통 컴포넌트2. Tadak Tadak 프로젝트에서의 Context API를 사용한 Tab Navigation3. Context API를 사용한 Tab Navigation 시도 4. 문제 상황 : Context API로 공유한 값이 공유가 안된다..?5. 문제 해결 : 코드 위치를 신경 쓰자! 6. 마무리 예전에 ONE DAY HERO라는 프로젝트를 진행하면서 Tab Navigation 공통 컴포넌트를 구현한 적이 있었다. 그때 시간이 촉박해 여러 방법을 생각할 여유가 없어 자료 조사를 충분히 하지 못하고 구현하게 되어 아쉬움이 남았었다. 이번 프로젝트를 진행하면서도 Tab Navigation 이 필요하여 이번에는 좀 다양..
-
[Next.js 14 / 🔥 Tadak Tadak 🔥] Parallel Routes와 Intercepting Routes 를 이용한 모달 구현시 문제 해결 과정Next.js 2023. 12. 29. 23:37
🔥 목차1. 문제 상황2. 문제 해결 과정 1. src/app/(beforeLogin)/i/flow/page.tsx 파일 생성 1-1. 새로운 문제 : two parallel pages that resolve to the same path 2. 중간 점검 2-1. default.tsx 파일의 중요성3. 결과물 1. 문제 상황일단 구현하고 싶은 부분을 먼저 설명드리면 beforeLogin 상황의 페이지( / )에서 Link가 달린 로그인 텍스트를 눌렀을 경우 브라우저의 URL이 / 에서 ➡︎ i/flow/login으로 바뀌지만 / 페이지의 콘텐츠는 그대로 뒤에 있고, 모달(modal)을 통해 login 창이 뜨도록 하고 싶었습니다. 그래서 구현한 폴더 구조가 아래와 같습니다. 하지만..
-
React는 왜 등장하게 되었을까?React 2023. 12. 22. 14:59
🍎 목차 1. jQuery에서 React로 왜 건너갔을까? 2. SPA 장점 3. 틈새 Angular 설명 4. React의 등장 1. jQuery에서 React로 왜 건너갔을까? 페이지 전환 없이 앱 같은 느낌을 원하기 시작했습니다. (AJAX, ex. email) 한 페이지에서 다 하는 SPA(Single Page Application) 방식이 유행하기 시작했습니다. 예전에는 MPA(Multi Page Applicatioon) 였습니다. 2. SPA 장점 SPA는 한 페이지에서 내부 컨텐츠만 갈아끼는 식으로 동작하기 때문에 새로고침하거나 브라우저를 닫지 않는 이상 컨텐츠 데이터가 유지가 됩니다. MPA였을 때는 페이지를 이동할 때마다 데이터가 날아가 버려 백엔드 서버에서 데이터를 다시 받아와야 했지만..
-
브라우저 렌더링 과정을 이해하려면 DOM을 알아야 한다?React 2023. 12. 20. 22:24
🍎 목차 1. 브라우저의 렌더링 과정 2. DOM API 란? 3. 그래서 DOM 이 무엇인가? 4. Virtual DOM(가상 돔)은 무엇일까? React로 프로젝트를 하면서 메모이제이션 기법을 사용하여 렌더링 성능을 개선하게 되었다. 하지만 렌더링이라는 게 화면에 그려준다는 다소 추상적인 개념으로만 알고 있을 뿐, 정작 정확히 렌더링이 무엇인지에 대한 이해가 부족하다고 생각되어 공부하고 글로 정리하게 되었다. 1. 브라우저의 렌더링 과정 주소창에 url을 입력하게 되면 브라우저는 HTML, CSS, JavaScript 등 렌더링에 필요한 리소스들을 서버에 요청하게 됩니다. 서버에서 받은 리소스들은 브라우저의 렌더링 엔진이 파싱(해석, 구문 분석, syntax analysis)해서 렌더링 하게 됩니다...
-
Web App : 웹 개발자가 모바일 앱도 개발할 수 있을까?React 2023. 12. 14. 17:49
🍎 목차 1. 웹(Web) 이란? 2. 웹 앱(Web App) 이란? 3. 웹 앱(Web App)의 장점에는 뭐가 있을까? 4. 웹 앱(Web App) 사용 시 단점은 없을까? 5. 웹 앱(Web App)을 사용하는 서비스에는 어디가 있을까? 6. 웹 앱(Web App)에 대한 나의 생각 1. 웹(Web) 이란? 웹(Web) 이란 기기에 상관없이 브라우저 내에서 HTTP(Hypertext Transfer Protocol)를 사용하여 정보를 전송하고, URL(Uniform Resource Locator)을 통해 서비스를 이용 가능하게 하는 정보 공간을 말합니다. 2. 웹 앱(Web App) 이란? 웹 앱(Web App)은 모든 기기(컴퓨터, 휴대폰, 태블릿 등)의 웹 브라우저를 통해 앱과 유사한 화면을 보..
-
(프로그래머스 데브코스 10월 회고) 원데이 히어로 프로젝트프로그래머스 데브코스: 빅 데이터 플랫폼 프론트엔드 엔지니어링 2023. 11. 6. 23:56
첫 번째 프로젝트가 끝나고 두 번째 프로젝트가 시작 됐어요. 두 번째 프로젝트는 백엔드와의 협업을 하는 만큼 기대도 많이 됐고 잘하고 싶은 마음이 크네요. 새로운 프로젝트에 앞서 저번 프로젝트에서 아쉬웠던 부분에 대해서 혼자 공부하는 시간을 가졌어요. 깃 헙 충돌을 해결하는 작은 부분부터 Next.js라는 새로운 프레임워크에 대한 공부까지 따로 시간을 내서 공부하는 시간을 가졌어요. 처음 하는 것을 요령 껏 잘하는 재주는 없지만 내 부족한 부분을 잘 파악해서 노력하는 능력은 있기에 부족한 부분을 채웠던 한 달이었던 것 같습니다. 사실 첫 번째 프로젝트 때는 모르는 게 너무 많아서 스스로 스트레스도 많이 받고 조금 정신이 없었지만 이번에는 좀 더 여유가 생겨 의견도 많이 제시하고 1인분 하려고 하고 있습니..