전체 글

일관된 사용자 경험을 제공하고 개발 및 디자인 프로세스를 효율화하기 위해 디자인 시스템을 구축하는 것이 중요하다고 느꼈다.특히, 프로젝트 싱크스팟 은 디자이너의 부재로 디자인 시스템이 명확히 존재하지 않았으며, 기획자는 프로젝트의 컴포넌트의 구조와 변동사항 적용을 독립된 환경에서 검증하고 싶어했다. 프론트엔드에서 스토리북 Storybook 을 사용해 디자인 시스템 구축과 협업 효율을 극대화 할 수 있다고 판단해 도입했다. 컴포넌트의 파편화 및 재사용성 부족: 유사한 UI를 가진 컴포넌트들이 각기 다르게 개발되거나, 특정 페이지에 종속적으로만 사용되어 재사용성이 떨어지는 경우디자이너/기획자와의 소통 비효율: 완성된 화면이나 개발 서버를 통해서만 UI를 공유하고 피드백을 주고받는 과정에서 시간 소요가 크고,..

책 내용1. 개발자가 알아야 하는 글쓰기 기본문장과 단락을 구조화 하는 법핵심을 먼저 말한 뒤, 필요에 따라 부가 설명을 한다.ex. 입력 데이터는 3차원 벡터다. 색상 RGB 값을 각각 사용하기 때문이다. 개조식 방식 + 글머리 기호를 활용한다. 서술의 목적에 따라, 들여쓰기와 번호에 위계를 맞춰야 한다.비즈니스 문서도 마찬가지로 문단간의 위계 + 탭과 같은 스타일과 계층이 필요하다.읽기 쉽기 위해서는 계층이 필수! 비즈니스 문서 문장 부호큰따옴표 "" : 책의 제목, 신문 이름작은따옴표 '' : 소제목, 예술작품의 제목, 상호, 법률, 규정. + 강조, 비교 외래어, 영어함수 선언 시 반대되는 단어를 사용하자. 프로그램 안에서 일관성, 개연성의 합의가 될 정도로 통일하는 것이 중요하다. 2. 개발 시..

단순했던 첫 배포 파이프라인Kampus 프로젝트는 초기 Git Flow 를 따르자고 정했다. feature 브랜치에서 develop 으로 PR 을 올렸을 때 → Squash and merge → merge 후 remote branch 삭제기능 단위로 개발한 브랜치이기 때문에, 개발서버에도 기능 단위 커밋을 관리할 수 있다. 브랜치를 삭제하므로 merge commit 을 남길 필요가 없다. develop 브랜치에서 main 브랜치로 배포 돌릴 때 → Rebase and merge 모든 기능을 배포할때 병합한다. 특정 기능에서 문제가 발생했을 경우 롤백이 필요하다. merge commit 을 남길 필요가 없다. Git Flow : 초기에는 지키려고 노력했지만, 데모데이가 다가오며 많아지는 merge 와 배포..

이번에 PR #183, 블로그 글 🔥 린트 eslintrc.cjs -> eslint.config.js : Flat Config 업그레이드! 에서 eslint.config.js 를 제대로 도입하게 되면서, 프로젝트의 코드 품질을 일관되게 유지하고 팀원 간의 협업 효율성을 높이기 위해 husky, lint-staged, commitlint 세 가지 도구의 도입을 제안했다. github discussion 활용, 배포 회의때 동료에게 설명하였다. eslint 기반 Git Hook 품질 검사 도구 - Husky, lint-staged, commitlint · IT-Cotato 10th-Kampus-FE · Discussion #184이번에 PR #183 에서 eslint.config.js 를 제대로 도입하게 ..

Kampus 프로젝트는 유학생 커뮤니티 서비스이다. MVP 와 기능이 굉장히 다양한데, 에러 처리가 파악이 안되어서 어려움이 있었다. 백엔드에서 정의한 에러를 throw 해서 선언적으로 처리할 수는 없을까?공통 에러 처리 로직을 단순화 할 수 있을까?사용자 뿐만 아니라 개발자에서 어떤 부분(컴포넌트)에서 어떤 에러가 발생했는지 명확하게 알릴 수는 없을까? (빈화면 금지..) 위의 고민을 해결하기 위해 React 16 의 ErrorBoundary를 도입하게 되었다.#참고https://github.com/devlasbe/error-boundary?tab=readme-ov-filehttps://ko.react.dev/reference/react/Component#catching-rendering-errors-..

eslint 8버전 공식문서를 확인하면, 아래 종류의 파일을 린트 포맷 설정하는 파일로 작성할 수 있다고 한다.그러나 eslint v.8.23.0 부터 flat config 가 표준이 되었다고 한다. 즉 eslintrc.~ 형식을 지양 (❌) 하는 것1. eslint.config.js 가 무엇인지 알고, eslintrc.cjs 의 차이점이 무엇인지 정리해보자.2. Kampus 프로젝트에는 어떤 방식을 사용할까?Kampus 프로젝트는 런닝커브와 유연성으로 인해 자바스크립트 언어로 구성되어 있다. (타입스크립트로 개선하자는 이야기가 있다!)unused imports, vars 를 감지하여 warn 을 표시하는 규칙이 필요했다. 린트가 없는 상황에서 -> 미사용 변수 및 함수, import 문이 곳곳에서 표시..

아키텍처의 중요성을 깨닫다많은 학생 개발자들은 다양하고 깊은 개발 경험을 쌓기에 급급하다. 싱크스팟 프로젝트를 처음 개발할 때, 사용해 봤으니까 라는 이유로 고전적인 계층형 아키텍처를 활용해 설계했다. 기능이 고도화되고, 관리해야할 파일이 많아진 현재 시점에서 리팩토링이 필요하다는 것을 느꼈다.문제상황, 변화의 필요성기존 싱크스팟의 폴더구조는 고전적인 계층형 아키텍처를 기준으로 삼았다.계층형 아키텍처는 명확한 표준은 없지만, 단순함과 역할기반 덕분에 많이 사용되고 있다. 싱크스팟에서는 프로젝트가 커지고, 코드를 리팩토링 할수록 각 기능에 해당하는 단위가 여러곳에 흩어져있다는 불편함이 생겼다.레이어 + 기능 분산: 하나의 기능이 components, pages, queries, mutations, type..

React JS - Spiring Java 환경어떤 라이브러리를 선택해야 할까?기본적인 Websocket APIhtml5 이전, 사파리, 파이어폭스 등 지원하지 않는 경우가 있다.간단한 메시징이라면 사용해도 괜찮지만, 다양한 기능을 위해서는 다른 라이브러리 사용을 추천한다.Socket.io 라이브러리Node.js 를 지원한다.서버도 Socket.io 를 함께 사용해야 하기 때문에, Java Websocket 과는 호환되지 않는다.SockJS-client 라이브러리 + STOMP.jsSpringframework 매뉴얼에서 SockJs 를 사용하여 웹소켓을 구현하기를 제시한다.서버는 SplingFramework SockJS fallback 을 사용해 웹소켓을 구축하고클라이언트는 SockJS 라이브러리를 사용..

HTTP 통신웹 환경에서는 HTTP 요청을 통해 유저, 즉 클라이언트와 서버가 상태와 데이터를 주고받는다.HTTP는 TCP/IP 프로토콜 스택의 응용 계층에서 동작하는 프로토콜방식클라이언트가 HTTP 요청을 전송하면, 서버는 해당 데이터를 반환한다.서버는 클라이언트의 요청이 있어야만 데이터를 응답하며, 데이터 반환 후 통신이 종료된다.한계과거에는 모든 서비스를 HTTP로 개발할 수 있었으나,현재는 실시간 네트워킹, 대규모 사용자 처리 등 복잡한 개념이 필요함.ex. 실시간 채팅이나 게임 등 이러한 상황을 구현하기 위해 주기적으로 서버에 요청을 보내는 방법이 사용되었다. HTTP HTTP 실시간 통신 구현 방법HTTP는 다음 세 가지 방법으로 실시간 통신을 구현했다:Polling: 클라이언트가 주기적으로 ..