내가 프론트엔드 개발자를 준비하면서 가장 많이 사용한 라이브러리는 단연코 'React' 이다.React는 2013년 페이스북에서 개발한 자바스크립트 라이브러리인데, 당시 웹 개발 방식을 개선하기 위해 개발했다.지금은 너무도 익숙해져버렸지만, 문득 React라는 것이 왜 개발되어서 내가 사용하고 있는가에 대해서 궁금해졌다.그래서 React에 대해서 알아보는 시간을 가져보려고 한다. React는 왜 등장했을까?1. 복잡한 UI와 불일치 상태2010년대 초반에 대부분의 프론트엔드 개발은 jQuery를 기반으로 UI를 조작하고 이벤트를 처리하는 방식이었다.하지만 핵심문제가 몇가지가 존재했는데,UI는 상태에 따라 바뀌어야 하는데 그 상태를 기반으로 UI를 직접 조작해야 했다. 버튼을 클릭하면 DOM을 직접 찾아..

프로젝트 개요기간: 2024.05 ~ 2024.06 (약 4주)주제: 동네 이웃과 함께 나누는 식재료 및 공동 장보기목표: 이전과 다른 이웃과의 소통 문제 완화 및 늘어난 1인가구에 대응하는 식재료 나눔 플랫폼역할: 팀원, UI 디자인, DB 모델링, 채팅 시스템 구현, 3D 나눔함 페이지 구현배포 : https://www.sik-share.com/기술 스택Frontend: Next.js, TypeScript, react-three/fiber, shadcn-ui, tailwind css,Backend: postgreSQL, Prisma, Node.js, Next.js기획 의도와 주제 선정 과정이전까지는 뭔가를 만드려고 할때 단순히 편리한 것이나 하고 싶은것에 집중했다면, 이번에는 조금 더 사회적으로 가치..

프로젝트 개요기간: 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계층으..

오늘은 데이터 베이스를 전반적으로 배웠다.이때까지는 백엔드에서 단순히 데이터베이스에 있는 데이터들을 꺼내서 나에게 주면, 그걸 보여주기만 했기 때문에 데이터베이스에 대해서 깊은 이해와 관심은 가지고 있지 않았다. 단순한, 정말 단순한 쿼리문은 사용할 수 있지만 그 정도에서 그치면 안된다는 것을 깨달았기 때문에 오늘 수업도 시작부터 많은 호기심을 가진 채로 시작했다. 1.  시스템이란?시스템이란 뭘까?강사님께서는 수업을 하면서 종종 단어 자체에 대한 질문을 하신다. 나는 시스템이란 흐름 이라고 생각했다.하지만 강사님의 설명을 듣다 보니 단순히 '흐름' 이라고만 정의 내리기에는 모자란 것 같았다. 항상 이해하기 쉽게 예를 들어 설명을 해주시곤 하는데 이번에는 병원에 갔을 때를 예를 들어 설명해 주셨다. 병원..

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