Dorito
'프론트엔드' 카테고리의 글 목록

프론트엔드

프론트엔드

[Flutter] 플러터를 처음 해보지만 Web 알림까지 해보자 - 들어가며: 환경 세팅.... BLoC 패턴이 뭐지?

이번 블로그 포스팅 시리즈에서는 플러터와 함께 Firebase Cloud Messaging (FCM) 토큰을 사용하여 웹 알림을 구현하는 과정을 기록해보겠습니다. [TL;DR] 들어가며 프론트엔드 공부 필요성에 대해서 브라우저가 단순 페이지를 표시하는 것을 넘어서 일종의 미들웨어처럼 기능하고 있다 해도 과언이 아닐 정도로 굉장히 웹 기술이 고도화되고 있는 것 같다는 생각이 듭니다. 또 서버리스가 대세가 되면서 요즘 웹 개발쪽도 전통적인 3 티어 구조보다는 웹과 모바일 + 인프라 구조로 달라지고 있는 추세도 보이구요. 그래서 결론적으로는 뭔가 백엔드와 프론트엔드 영역 구분이 무의미해지고 있다는 생각이 들었어요. 프론트엔드도 공부해보고 싶었고 특히 만들고 싶은 프로젝트가 있으면 필수 역량인 것 같아서 공부하..

프론트엔드/🐏️ Next.js

Next.Js 디렉터리 구조 설계하기

들어가며기존에 개발 공부를 독학하면서 Next.js 를 사용하여 간단한 커뮤니티 게시판 (+리댓글 기능까지) 구현했던 적이 있는데 그때 남겨뒀던 기록 아카이브 용입니다. 기억으로는 Next.js 13 을 기준으로 하였으며, 추후에 글이 수정될 수 있습니다. Next.js 의 파일구조 별로 코드가 실행되는 기능이 다르기 때문에, https://wityan.medium.com/next-js-project-structure-1531610bed71 를 참고하여 전체적인 구조를 잡았습니다. 1. Elementssrc ┣ components ┃ ┣ elements ┃ ┃ ┗ Icon ┃ ┃ ┃ ┗ Icon.tsx이 디렉토리에는 앱의 모든 기본 구성 요소가 포함되어 있습니다. 예를 들어 버튼이나 헤드라인 컴포넌트가 ..