HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생/
🎄
노아팀/
과제 일정 산출 및 공유
과제 일정 산출 및 공유/
📎
프로젝트 자료
📎

프로젝트 자료

팀 루틴 정리
🧩
12/18 자료 모음
코드 세팅
🐈
github 관리 규칙
♟️
프로젝트 세팅
🪄
NIRVANA MANAGER
📑
팀 협업 방식 및 룰 세팅
앙골라 ANGOLA
앙골라 ANGOLA
🎪
팀 프로젝트

관련 사이트 모음

비사이드 : IT 프로젝트 경험을 통해 성장하세요!
비사이드 : IT 프로젝트 경험을 통해 성장하세요!
https://bside.best/projects
비사이드 : IT 프로젝트 경험을 통해 성장하세요!
디프만 - Project
오직 디자이너와 프로그래머의 동반성장을 위해서
디프만 - Project
https://www.depromeet.com/project
디프만 - Project
DND
프로젝트에 즐거움을, 모두에게 기회를
DND
https://www.dnd.ac/project
DND
Mash-Up on Behance
Mash-Up is social IT group in Korea, developing various IT services.
Mash-Up on Behance
https://www.behance.net/Mash-Up
Mash-Up on Behance
NEXTERS : IT Community for Experts
NEXTERS : IT Community for Experts
https://teamnexters.com/project
NEXTERS : IT Community for Experts
YAPP
작은 아이디어로 세상을 크게 변화시키는 IT동아리, YAPP
YAPP
https://www.yapp.co.kr/project
YAPP
 
 
체크리스트

설계

서비스 주제
타겟층
유사 서비스 조사
기능 명세
필수 기능
기술 명세도 함께 작성
공통 UI 선정
프로토타입 or 와이어프레임 제작
색상, 폰트, 크기 단위 등
역할 분담
유저 플로우? 제작

깃허브

브랜치 전략
git flow / github flow 사용 여부
브랜치 네임 컨벤션 및 규칙
커밋 규칙
gitmoji 사용여부
미사용시, 메세지 형식 (접두사, 길이제한 등)
템플릿 제작
이슈
PR
PR 규칙

파일

디렉토리 구조
URL 주소 지정
네이밍 규칙 (변수, 폴더, 이벤트 등)
주석 규칙 (TODO / FIX / ect…)
프로젝트 초기세팅 선정
.env, .gitignore 파일 통일
패키지 통일
절대경로 설정
 

팀 문화

주차별 스프린트 작성

참고 자료

4기 팀프로젝트 모음 (기획서, 기간 등 명시)

노아팀 맞춤 자료

{
    "singleQuote": true,
    "trailingComma": "all",
    "endOfLine": "auto",
    "bracketSameLine": true,
    "semi": true,
    "arrowParens": "always",
    "vueIndentScriptAndStyle": false,
    "jsxSingleQuote": true,
    "quoteProps": "as-needed",
    "embeddedLanguageFormatting" : "auto",
}
 

이전 자료

ESLint

ESLint 상세 설정 가이드
🔍
eslint 찾아본 설정들
🇪🇺
eslint 플러그인 모음
eslint 룰 직접 만들기
ESLint 조금 더 잘 활용하기
들어가며 안녕하세요. 카카오 FE플랫폼팀의 Joah입니다. 최근에 팀에서 사용하는 JavaScript 스타일 가이드를 개선하는 업무에 참여했습니다. 업무를 하며 스타일 가이드에서 사용하고 있는 ESLint에 관심이 생기게 되었고, 어떻게 동작하는지 소스코드를 분석해보다가 ESLint에 직접 컨트리뷰션 하는 경험도 하게 되었습니다. 이 과정들에서 알게 된 ESLint를 조금 더 잘 활용할 수 있는 방법에 대해 정리해 보았는데요. 기본적인 사용법은 포함하고 있지 않기 때문에 궁금하신 분은 ESLint getting-star
ESLint 조금 더 잘 활용하기
https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/
ESLint 조금 더 잘 활용하기
나만의 eslint 룰 만들어보기
https://yceffort.kr
나만의 eslint 룰 만들어보기
https://yceffort.kr/2022/06/how-to-write-my-own-eslint-rules
나만의 eslint 룰 만들어보기
 
prettier
[VS Code] 💽 Prettier 도구 설정법 - 한방 코드 포맷터
Prettier 상세 설정 가이드

프로젝트 사전 세팅 자료조사

호민

자료조사
코딩컨벤션 - 1
코딩컨벤션 - 2
Vite를 사용해야 하는 이유
vite가 cra보다 빠른 이유
vite와 CRA 비교글
npm vs yarn vs pnpm - 영어 블로그(?) 인 것 같은데 정리가 잘 되어있는것 같습니다
styledCSS vs Tailwind CSS
Justand, Recoil, Redux 장단점 정리
Axios Fetch 비교 원문 번역글

현진

자료조사
스타일링
리액트에서 많이 쓰는 CSS와 추천 방식
각 프로젝트에 맞게 권장되는 CSS적용방식이 있겠지만 리액트에는 컴포넌트 스타일링방식이 리액트에 가장 어울리는 CSS라고 생각합니다. 모든 요소마다 전체 CSS를 붙이는게 아니라 CSS도 필요한 컴포넌트에서 불려지는게 프로젝트를 최적화하는데 필요하다 생각하여 이번글에서
리액트에서 많이 쓰는 CSS와 추천 방식
https://velog.io/@godtheenell/react-css-in-js
리액트에서 많이 쓰는 CSS와 추천 방식
(번역) 우리가 CSS-in-JS와 헤어지는 이유
원문: https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b
(번역) 우리가 CSS-in-JS와 헤어지는 이유
https://junghan92.medium.com/번역-우리가-css-in-js와-헤어지는-이유-a2e726d6ace6
(번역) 우리가 CSS-in-JS와 헤어지는 이유
상태관리
React 상태관리 최강자는?
Recoil vs Redux vs MobX
React 상태관리 최강자는?
https://medium.com/@jhnoh_93841/react-상태관리-최강자는-f0753ad7d186
React 상태관리 최강자는?
네트워크
fetch와 axios 차이점과 비교
저번에 API에 대해서 알아봤습니다. 자바스크립트에서 HTTP Requests를 위한 방법이 두가지가 존재하는데 🎁 오늘은 어떤것이 존재하고 어떤 차이점이 존재하는지 알아보겠습니다. 🎁 💖 Fetch ES6부터 들어온 JavaScript 내장 라이브러리입니다. Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점으로 상당히 편리합니다. fetch("https://localhost:3000/user/post", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: "asd123", description: "hello world", }..
fetch와 axios 차이점과 비교
https://tlsdnjs12.tistory.com/26
fetch와 axios 차이점과 비교
github관리
Git으로 협업하기! - forking workflow에서 git flow로 변경한 이유
안녕하세요. 휴몬랩에서 개발과 기타 등등을 하고 있는 오지(OG)입니다 :) 지금까지 개발을 해오면서 git을 사용한 협업 방법에 대해 많은 고민을 해왔는데요, forking workflow를 사용하다가 git flow로 변경하게 된 이유와 두 방식의 차이를 정리해볼까 합니다. 우선 이 글은 git에 대한 기본적인 이해도를 가지고 있다고 생각하고 작성하였습니다. 혹시 나는 git을 처음들어봤다, 혹은 git에 대한 전반적인 지식을 갖고 싶다라고 한다면 이 포스팅을 추천해드립니다. (링크 바로가기) Git으로 협업해야 하는 이유 git은 애초에 협업에 용이하도록 만들어진 버전 관리 방식입니다. 만약 개발팀이 git을 사용하지 않고 협업을 한다면, 아래와 같은 불상사가 벌어질지도 모릅니다. A라는 사람이 로..
Git으로 협업하기! - forking workflow에서 git flow로 변경한 이유
https://devlog-h.tistory.com/6
Git으로 협업하기! - forking workflow에서 git flow로 변경한 이유
빌드
번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기
Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구로 요즘 인기를 끌고 있습니다. 인기 비결은 뭐니해도 ‘속도’입니다. 개발과 빌드 속도가 매우 빠릅니다. Vite가 빠
번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기
https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/
번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기
Prettier 추가 세팅
고려하면 좋을 만한 추가 prettier세팅
{
  "tabWidth": 2, //각 들여쓰기 수준에 대한 공백 개수를 지정
  "printWidth": 80, //프린터가 줄 바꿈을 할 길이를 설정
  "singleAttributePerLine": true, //JSX 요소의 각 속성이 새로운 줄에 있도록 함
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
   //사용할 Prettier 플러그인을 지정, 여기서는 @trivago/prettier-plugin-sort-imports를 사용하여 import 문을 정렬
  "importOrder": [
    "^react(.*)",
    "<THIRD_PARTY_MODULES>",
    "^@pages/(.*)$",
    "^@components/(.*)$",
    "^@apis/(.*)$",
    "^@hooks/(.*)$",
    "^@store/(.*)$",
    "^@storage/(.*)$",
    "^@utils/(.*)$",
    "^@routes/(.*)$",
    "^@styles/(.*)$",
    "^@type/(.*)$",
    "^@constants/(.*)$",
    "^[./]"
  ], //import 문을 정렬할 순서를 정의, 정규 표현식을 사용하여 import 경로를 일치시킨다.
  "importOrderSortSpecifiers": true
  //import 문을 정렬할 때 import specifier(중괄호 안의 이름)를 알파벳 순으로 정렬할지 여부 지정
}
 

지호

자료조사
깃 브랜치 관리 - Git의 대표적인 3가지 workflow
깃 브랜치 전략 정리 - Github Flow / Git Flow
[GIT] 📈 깃 브랜치 전략 정리 - Github Flow / Git Flow
GIT 브랜치 전략 브랜치 전략이란 여러 개발자가 하나의 저장소를 사용하는 환경에서 저장소를 효과적으로 활용하기 위한 work-flow다. 브랜치의 생성, 삭제, 병합 등 git의 유연한 구조를 활용해서, 각 개발자들의 혼란을 최대한 줄이며 다양한 방식으로 소스를 관리하는 역할을 한다. 즉, 브랜치 생성에 규칙을 만들어서 협업을 유연하게 하는 방법론을 말한다. 만일 브랜치 전략이 없으면? 브랜치 전략이 없을 때 단점은 깃을 사용한지 얼마 안됐던 개발자라면 모두 겪어본 상황들일 것이다. 어떤 브랜치가 최신 브랜치지? 어떤 브랜치를 끌어와서 개발을 시작해야 하지? 어디에 Push를 보내야 하지? 핫픽스를 해야하는데 어떤 브랜치를 기준으로 수정해야할까? 배포 버전은 어떤 걸 골라야하지? 규모가 어느정도 이상 ..
[GIT] 📈 깃 브랜치 전략 정리 - Github Flow / Git Flow
https://inpa.tistory.com/entry/GIT-⚡️-github-flow-git-flow-📈-브랜치-전략
[GIT] 📈 깃 브랜치 전략 정리 - Github Flow / Git Flow
전체적으로 필요시마다 찾음 좋을 자료 - 모던리액트
스타일링 비교 SCSS, styled-component (영문) - React에서 SCSS를 통한 스타일 구성 요소
상태관리 비교 - 리액트 상태관리 라이브러리, 어떤 것을 써야 할까?

수혁

자료조사
tailwind
내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1
- 내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library.최근에 CSS 계에서 주목받고 있는 TailwindCSS를 써보셨거나 들어보신 적이 있나요? 혹은 Utility-first CSS, Atomic CSS, Functional CSS이라는 CSS 방법론을 들어 본 적이 있나요?Bootstrap이나 Sass, BEM, 혹은 CSS-in-JS 와는 달리 조금 덜 주류이고 아직은 오해가 많지만 TailwindCSS를 통해서 조금씩 알려지고 있는 사실은 정말 괜찮은 방법인 Atom
내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1
https://tech.kakao.com/2022/05/20/on-demand-atomic-css-library/
내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1
vite
Webpack → Vite: 번들러 마이그레이션 이야기
Airbridge 대시보드의 번들러를 Webpack에서 Vite로 마이그레이션하며 경험한 이야기를 공유합니다.
Webpack → Vite: 번들러 마이그레이션 이야기
https://engineering.ab180.co/stories/webpack-to-vite
Webpack → Vite: 번들러 마이그레이션 이야기
npm
자바스크립트 패키지 매니저: npm vs. Yarn
Engineering Blog by Dale Seo
자바스크립트 패키지 매니저: npm vs. Yarn
https://www.daleseo.com/js-package-manager/
자바스크립트 패키지 매니저: npm vs. Yarn
recoil
Redux vs Recoil - 어떤 걸 골라야 할까?
현재 나는 4인 1팀(기획, 디자인, FE, BE)으로 팀을 이뤄 해, 커리어(원티드 해커톤)에 참여중이다. 서비스를 개발하는 과정 중 이전 포스팅의 스타일 도구에 이어 상태 관리 라이브러리를 선정해야 할 필요성이 생겼다. FE 개발자가 나 혼자고, 개발 기한이 그리
Redux vs Recoil - 어떤 걸 골라야 할까?
https://velog.io/@ken1204/상태관리-라이브러리-Recoil-Redux
Redux vs Recoil - 어떤 걸 골라야 할까?
Redux Vs. Recoil: Why I’ve Moved from Redux to Recoil for State Management
This blog explains why React developers need to move from Redux to Recoil.
Redux Vs. Recoil: Why I’ve Moved from Redux to Recoil for State Management
https://javascript.plainenglish.io/moving-from-redux-to-recoil-42aa9d9cfaad
Redux Vs. Recoil: Why I’ve Moved from Redux to Recoil for State Management
axios
서버리스를 사용하면 어쨋든 axios 를 사용해야하니 통일하는게 낫지않을까?

석현

자료조사
Vite+swc (npm vs pnpm vs yarn)
https://swc.rs/
https://engineering.ab180.co/stories/yarn-to-pnpm
https://yceffort.kr/2022/05/npm-vs-yarn-vs-pnpm
taiwind vs styled
https://jasonkang14.github.io/react/styled-component-vs-tailwind-css
fetch vs axios
https://tlsdnjs12.tistory.com/26
git flow
기능 단위로 브랜치 만들어서 dev에 합칠 때 코드리뷰해서 합치고 main에 합치기 전에는 기능 테스트 후 merge
eslint 추가하면 좋을거 같은 설정
import 순서 정렬, import 문 마지막에 한줄 띄우는 설정
Webpack → Vite: 번들러 마이그레이션 이야기
Airbridge 대시보드의 번들러를 Webpack에서 Vite로 마이그레이션하며 경험한 이야기를 공유합니다.
Webpack → Vite: 번들러 마이그레이션 이야기
https://engineering.ab180.co/stories/webpack-to-vite
Webpack → Vite: 번들러 마이그레이션 이야기
내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1
- 내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library.최근에 CSS 계에서 주목받고 있는 TailwindCSS를 써보셨거나 들어보신 적이 있나요? 혹은 Utility-first CSS, Atomic CSS, Functional CSS이라는 CSS 방법론을 들어 본 적이 있나요?Bootstrap이나 Sass, BEM, 혹은 CSS-in-JS 와는 달리 조금 덜 주류이고 아직은 오해가 많지만 TailwindCSS를 통해서 조금씩 알려지고 있는 사실은 정말 괜찮은 방법인 Atom
내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1
https://tech.kakao.com/2022/05/20/on-demand-atomic-css-library/
내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1
주간 보고 페이지
 
 
📝
프로젝트 회의기록 (23.12.14)