본문 바로가기

분류 전체보기116

GIT 브랜치 전략 안녕하세요 웹 YB 김시연입니다.매우매우 늦은 아티클 제출이지만 웨비톡 아티클을 겸사겸사 올립니다ㅎ,, 이번 웨비톡 발표 흐름은0. 인트로1. 협업 중 흔한 문제2. 브랜치 전략 소개3. 충돌 방지 실전 팁4. 충돌 발생시 해결법5. GUI 툴 활용6. 마무리 이런 식으로 구성할까 싶습니다...!아티클은 이 중에서 (모든 게 저에게는 꽤 어렵지만) 제일 새롭고 잘 모르는 깃 브랜치 전략에 대해 작성하게 되었습니다. 🤔 Git Branch 전략이 뭘까?브랜치 전략이란 여러 개발자가 하나의 저장소를 사용하는 환경에서 저장소를 효과적으로 활용하기 위한 워크 플로우다.쉽게 말해, Git Branch들에 전략, 즉 규칙을 부여하는 것!브랜치 생성에 규칙을 만들어서 협업을 유연하게 하는 방법론각 branch는.. 2025. 6. 13.
Webpack Webpack의 정의webpack은 모던 JavaScript 애플리케이션을 위한 "정적 모듈 번들러" 이다. 🙀모듈 번들러란?웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.즉, 간단하게 Webpack은 여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러리엑트에서 빌드를 수행할 때 사용하는 소프트웨어이미지 왼쪽에 보이는 파일들을 하나의 번들로, 즉 꾸러미로 만들어주는 역할을 한다이렇게 번들링된 파일은 웹 서버에서 정적 파일로 제공된다.그래서 webpack은 모듈 번들러라고 불린다.왜 굳이 webpack으로 번들링할까파일의 크기가 상당히 축소 되고 하나의 압축 파일이 .. 2025. 5. 22.
API 에러 처리: 사용자 경험 향상을 위해서. 안녕하세요, 웹 YB 신지수입니다 ! 이번 과제에서 React와 TypeScript를 활용한 로그인/회원가입 기능을 구현하면서, API 통신 과정에서 발생하는 다양한 에러를 어떻게 효과적으로 처리할 수 있을지 고민했습니다. 에러는 불가피하게 발생하지만, 이를 어떻게 처리하느냐에 따라 사용자 경험이 크게 달라질 수 있다고 생각합니다. 이번 글에서는 제가 프로젝트에 적용한 API 에러 처리 전략과 그 과정에서 배운 점들을 공유하려고 합니다 ☺️ 🚨 API 에러, 왜 신경 써야 할까 ?API를 사용하다 보면 에러 상황은 피할 수 없습니다. 하지만 이때 단순히 "오류가 발생했습니다."라는 메시지를 보여주는 것과, 구체적인 원인과 해결 방법을 안내하는 것은 사용자 경험 측면에서 큰 차이를 만들어낸다고 생각합니다.. 2025. 5. 15.
커밋 메시지 컨벤션을 지키는 방법 안녕하세요 웹 OB 한수정입니다.저는 종종 커밋메시지를 잘못 올리곤 합니다... 종종? 자주? 항상? 그래서 하루 건너 하루 지피티에게 커밋 메시지 수정하는 법에 대해 물어보는 삶을 살고 있었습니다. 이거 하면 수정은 되더라구요 ㅎㅎgit commit --amend 아무튼, 그런 저에게 한 줄기 빛이 내려왔습니다. 그건 바로 husky 4주차 공유과제에서 husky에 대해 이야기 해보려고 합니다. husky는 협업에서 코드 스타일, 커밋 메시지 등을 통일해주는 자동화 도구 중 하나입니다. 이번 공유과제에서는 pnpm을 기반으로 husky와 lint-staged, commitlint를 이용해 커밋 전에 린트 자동 실행 및 커밋 메시지 형식 검사에 대해 간단히 알아보겠습니다. 🐶 Husky란?.. 2025. 5. 14.
대중적인 API instance 세팅과 고려해야할 점! 안녕하세요 SOPT 36기 고제성입니다!이번에 4주차 과제에서 API를 사용하기도 하고, 합동 세미나와 솝커톤이라는 빅 이벤트가 생기면서 갑자기 협업을 해야할 일이 많아졌는데요! 그래서 서버와 협업할 때 나와 팀원 모두 편리하게 만들어주는 API Instance 설정을 할 때 어떤 점들을 고려해서 설정해야할지 고민해보는 주제로 공유 과제를 작성하게 되었습니다! 이 글에서는 React에서 Axios를 활용한 구성에 대해 소개할 예정입니다!아마 대부분의 팀이 리액트로 개발을 진행하는 것으로 알고 있는데 Next를 사용하신다면 내장 fetch만 사용해도 효율적이고 좋은 기능의 API 호출을 할 수 있으니 만약 이 글이 도움이 된다면..! 상황에 맞게 적용하시면 될 것 같습니다~! API Instance?API.. 2025. 5. 13.
네이밍 규칙 안녕하세요~ yb 김정민입니다!저는 처음 프로젝트를 시작할 때 폴더구조 어떻게 할지 이름은 또 어떻게 지을지 많은 고민을 하고 시작하는데요이름지을 때 지피티한테 기능 알려주고 이름 추천을 받거나 그냥 단순히 영어로 번역후 하기도하는데공부할수록 체계적으로 작성해보고싶어졌습니다(사실 네이밍 규칙 어떻게 생긴지는 알고 있었는데 정확한 이름을 최근에 알았어요)그래서 오늘은 폴더 컴포넌트등 여러 네이밍 규칙들에 대해 정리하고 주로 어떨 때 사용하는지 알아보고자합니다!네이밍 규칙camelCase: 소문자로 시작하고 대문자로 시작하는 모든 후속 단어PascalCase: 모든 단어는 대문자로 시작snake_case: 밑줄로 구분된 단어kebab-case: 하이픈으로 구분된 단어camelCase: 소문자로 시작하고, 이.. 2025. 5. 13.