프로젝트 개요기간: 2024.03 ~ 2024.04 (약 4주)주제: 개발자 협업 매칭 플랫폼 – 핏플(Fitple)목표: 누구나 프로젝트를 만들고, 참여 요청을 주고받을 수 있는 양방향 모집 시스템 구축역할: 팀장, 프론트엔드 개발, 백엔드 개발 UI 디자인, 일정 및 의사결정 총괄기술 스택 및 환경Frontend: Next.js, TypeScriptBackend: Supabase, Node.js설계 원칙: 클린 아키텍처 기반 도메인 분리구현 환경: CSR (Client Side Rendering), Serverless 환경기획 의도와 주제 선정 과정초기에는 ‘날씨 기반 옷/음악 추천’, ‘OTT 검색 플랫폼’, ‘최애 저장소’ 등 다양한 아이디어가 나왔다.하지만 생성형 AI를 활용해 이미지를 생성하려..

1. 서버리스 환경에서의 채팅 구현 경험이전에 채팅 기능을 구현할 때, 서버리스 환경에서 작업을 했었다.사실 이런 환경에서 개발할 일이 많지는 않지만, 그 덕분에 풀링(Polling) 이라는 개념을 알게 되었다.당시에는 웹소켓을 제대로 다룰 수 없어서 풀링 방식으로 채팅을 구현했는데,아무래도 완성도 면에서 아쉬움이 남았다.그래서 이번 기회에 웹소켓의 개념부터 실제 동작 방식까지 다시 정리해보기로 했다.2. 웹소켓이란?웹소켓은 클라이언트(브라우저)와 서버 간에 지속적인 연결 상태를 유지한 채,양방향으로 데이터를 주고받을 수 있는 프로토콜이다.기존 HTTP는 요청을 보내야 응답이 오는 구조지만,웹소켓은 한 번 연결을 맺으면 서버와 클라이언트가 자유롭게 실시간 통신할 수 있다.3. 웹소켓이 등장하게 된 이유초..

핏플(Fitple) 프로젝트 진행기 (1차 프로젝트)멋쟁이 사자처럼 프론트엔드 심화 4기에서 현재 1차 프로젝트를 진행하고 있다.이번 프로젝트의 중요한 조건은 다음과 같다.클린 아키텍처 기반 백엔드 설계DB는 Supabase 활용CSR(Client Side Rendering) 환경으로만 구성크게 보면 이 세 가지가 가장 중요한 조건이었다.프로젝트 주제 : "핏플" (Fitple)우리가 기획한 주제는 '핏플'이라는 이름을 가진 사이드 프로젝트 양방향 매칭 플랫폼이다.나 역시 포트폴리오를 쌓거나, 새로운 경험을 하고 싶을 때 인프런이나 홀라 같은 플랫폼을 찾아보곤 했다.하지만 항상 아쉬웠던 점은, 그런 플랫폼들도 결국 "회사 취업"처럼 운영된다는 점이었다.프로젝트 모집글이 올라온다내가 지원한다면접을 보고, ..

오늘은 처음 들어보는 '클린 아키텍처'라는 개념에 대해서 배웠다.설명을 듣고 지금까지 프로젝트를 해보면서 진행해보고는 있는데, 사실 아직까지도 개념이 완벽하게 잡히진 않은 것 같다.그래서 기억을 되짚어 보면서 다시 한번 정리를 하려고 한다. 1. 클린아키텍처의 핵심 원칙가장 중요한 규칙이라고 하면 이걸로 말할 수 있을 것 같다. "안쪽은 바깥을 몰라도 되고, 바깥은 안쪽에 의존해야 한다." 이것을 의존성 역전 원칙(Dependecy Rule) 이라고 한다. 쉽게 말하면, 화면이 로직을 호출할 수는 있지만 로직이 화면을 호출하면 안된다고 한다.또한 로직이 데이터를 가져오는 저장소를 호출할 수 있지만, 반대로 저장소가 로직을 호출하면 안된다고 했다. 2. 클린 아키텍처의 4계층 구조 클린 아키텍처는 4계층으..

오늘은 어쩌면 내가 이 과정을 신청하게 된 근본적인 이유 중 하나인 TypeScript 에 대해서 배워보는 시간을 가지려고 한다.솔직히 처음에는 그냥 귀찮기만 했다. 정말 하나부터 열까지 타입을 일일히 명시해줘야 했고, 오히려 가독성을 떨어뜨린다고 생각했다.하지만 많은 자유도를 부과하는만큼 많은 책임이 발생하고, 그에 따른 해답이 타입을 명시해주는 것이라고 했다.그렇지만 조금의 이점은 있다고 생각한 부분이 에러를 명확하게 짚어주는 것이었다. 만약 height 라는 항목을 heigth 라고 작성하면 JS에선 NaN이라고 나오는데 TS에서는 '너 혹시 그거 height 쓰려고 한거 아니야?' 라고 짚어준다. 이런 부분은 마음에 들었다. 하지만 그럼에도 불편함을 느끼지만, 나보다 더 많이 배운 사람들이 그게 ..

1. Vue.js2일차 수업에는 Vue.js를 이용해 MVC(Model, View, Controller) 패턴의 기본 구조를 경험하는 시간을 가졌다.기본적인 Vue 코드의 구조는 이렇게 된다. Vue.createApp({ data: { // 상태 데이터 }, methods: { // 기능 구현 }}).mount('#calc-app'); 실습으로 간단한 덧셈 계산기를 만들어 보았는데, 예제를 통해 HTML과 Vue.js를 결합하여 실습을 진행했다. 아래는 간단한 예제이다./* HTML 코드 */ 덧셈 계산기 계산기 입력폼 x: y: = 0 /* Vue의 MVC ..

첫날 프론트엔드 심화과정에 참여한 나는 사실 기대 반, 걱정 반이었다. 특히 Next.js 라는 녀석은 이름은 많이 들었지만 제대로 파고 들면서 학습해본 적이 없어서 더욱 그랬다.역시나 첫 수업부터 쉽지 않았지만, 정리를 해보면서 기록으로 남기려고 한다. 1. 왜 Next.js를 배워야 하는가?항상 어떤 프레임워크나 라이브러리를 고르기 전에 응당 해야하는 질문이었다고 생각한다.그렇지만 이전에 내가 React를 선택했을때에는 지인의 추천, 그리고 사용하다보니 편해서가 주된 이유였다.그래서 편했다는 이유 외에 굳이 왜 ? 라는 질문에는 현재도 대답하기 힘들다.그렇지만 이번 멋쟁이 사자처럼 프론트엔드 심화과정은 왜 Next.js를 배워야 하는지 부터 수업을 진행했고, 그에 대한 이유를 어느정도 이해하게 되었다..

1. 프롤로그많은 사람들이 하는 회고록, 하지만 단순히 유행처럼 따라가는 것이 아니라, 꼭 해야만 할 것 같고 또 하고 싶어서 시작해보려 한다.누가 이 글을 보게 될지는 모르겠다. 하지만 나는 이곳에서 하고 싶은 말을 마음껏 쏟아내고, 앞으로의 다짐을 새기며, 스스로의 시간을 조금 더 의미 있게 만들고 싶다. 무엇보다도, 내가 어떤 사람인지 좀 더 깊이 들여다볼 수 있는 매개체가 되었으면 좋겠다. 그리고 이 회고록이 내게 원동력이 되어 앞으로 한 걸음 더 나아가는 계기가 되길 바란다.이 블로그에 남길 이야기들이 면접관님들, 지인들, 혹은 우연히 들른 누군가에게 마냥 좋은 인상을 남기지는 않을 수도 있다. 하지만 그만큼 솔직하게 나 자신을 돌아보고, 더 강하게 채찍질하며 앞으로 나아가고 싶다. 2. 대학 ..