전체 글

벨로그가 보기 편해요!! 티스토리는 md파일 그대로 복붙해서 올립니다ㅎ https://velog.io/@hafnium1923
우아한 테크 코스 회고/레벨 3

팀바팀 4주차 회고 (2차 데모데이)

기간: 23/07/17 ~ 23/07/21 https://github.com/woowacourse-teams/2023-team-by-team GitHub - woowacourse-teams/2023-team-by-team: 대학생이 여러 팀플을 하는데 쉽게 협업을 할 수 있도록 도와 대학생이 여러 팀플을 하는데 쉽게 협업을 할 수 있도록 도와주는 서비스😎. Contribute to woowacourse-teams/2023-team-by-team development by creating an account on GitHub. github.com 왜 회고를 작성하려하면 이번주에 한 일들이 기억나지 않는 걸까... 이번주는 데모데이가 있어서 더더욱 그런 것 같은 느낌이다..ㅋㅋ 뭘했는지 기억나지 않지만 아무..

FE 기술/Technic

Husky 사용해서 commit 단위로 Lint 검사(Git Desktop 오류코드 127)

Husky란?husky는 commit 또는 push 할 때 lint에 맞는지 확인하고, 테스트를 실행하는 것에 사용할 수 있다. 팀마다 컨벤션이 다양할 텐데 인간이 코드를 작성하는지라 어쩔 수 없이 컨벤션에 맞지않게 코드를 작성할 수도 있다. 그럴때 husky를 사용하면 자동으로 검사해서 commit이든 push든 막아준다.팀바팀은 husky로 lint검사만 진행하는 것으로 결정했다. 1. lint 검사는 commit 단위로 진행하는 것이 더 많은 수정을 막는다2. test를 commit단위로 진행하는 것은 필요없는 commit이 더 많기도 하고 전체 파일에서의 통과 여부가 더 중요하기 때문에 PR 단위로 진행한다.라는 이유였다!Husky 설치하기npm i -d husky명령어 넣기//package.js..

우아한 테크 코스 회고/레벨 3

팀바팀 3주차 회고 (개발 시작)

기간: 23/07/10 ~ 23/07/14 https://github.com/woowacourse-teams/2023-team-by-team GitHub - woowacourse-teams/2023-team-by-team: 대학생이 여러 팀플을 하는데 쉽게 협업을 할 수 있도록 도와 대학생이 여러 팀플을 하는데 쉽게 협업을 할 수 있도록 도와주는 서비스😎. Contribute to woowacourse-teams/2023-team-by-team development by creating an account on GitHub. github.com 드디어 개발이 시작되었다. 이번주 뭐했더라… 흐으음 개발속도가 생각보다 느리다. 근데 이거보다 더 빨리 할 수 있을까? 왤케 천천히 진행되는 것 같지. 뭔가 애매..

우아한 테크 코스 회고/레벨 3

팀바팀 2주차 회고(1차 데모데이)

기간: 23/07/03 ~23/07/07 저번주에 진행했던 팀 빌딩 + 기획서 픽스를 바탕으로 금요일에 있을 데모데이를 준비했다이번주는 개발을 시작할 수 있을 줄 알았는데 여러 일정때문에 밀려서 결국 프로젝트 세팅만하고 하지 못했다. 너무 아쉬웠다.. 다음주부터는 빡세게 개발 들어갈 예정이다. 이번주에 진행한 일정 이벤트 스토밍 결과 FigJam으로 정리 팀바팀 디자인 정하기 서비스 디자인 시안 공유 및 선정 로고 & 팀 색상 선정 페르소나 인터뷰 정리 사용자 스토리 사용자 스토리 작성 사용자 스토리 제출용 파일 만들기 기능 명세서 요구사항 우선순위 정하기 기능명세서 제출용 파일 만들기 컨벤션 전체 깃허브 issue, PR 탬플릿 만들기 프론트 백엔드 프론트- 프로젝트 세팅 하기 백엔드 - JPA 구현 ..

FE 기술/CSS

.css VS css module VS css-in-JS ( Styled Components VS emotion)

팀 프로젝트를 진행하며 프로젝트 스타일링 방법을 선택하기전 각각의 장점과 단점을 찾아보았다. 이것말고도 더 많은 장단점이 있지만 선택에 중요한 판단이 되고 공감가능한 장단점을 위주로 찾아보았다. CSS 단점 모든 클래스의 이름이 전역적으로 존재하기 때문에 별도의 class 명명 규칙이 필요하다 하나의 요소에 여러 css 가 적용될 수 있어, 개발자가 모든 스타일을 기억해야한다. js의 상태 값을 공유하기 어렵다. css 로드 순서에 따라 우선순위가 달라지기 때문에 css 로드 순서를 기억해야한다. 하위 컴포넌트가 부모 컴포넌트의 스타일링에 영향을 받는다. ⇒ 유지보수의 측면에서도, 협업의 측면에서도 단점이 명확함 CSS-in-JS 장점 class 명이 빌드 타임에 유니크하게 변경되어 명명규칙이 필요없음 ..

FE 기술/React

Webpack 기반의 React & TypeScript 환경 세팅

webpack은 정적 모듈 번들러로 웹에서 사용되는 모든 자원을 번들링 해주는 도구이다. HTML 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링 이라고 한다. 그동안 프로젝트를 할 때 CRA로 프로젝트를 시작했는데, CRA로 프로젝트를 생성한다면 필요없는 의존성을 가지게 되는 경우가 있기도 한다. 따라서 이번 프로젝트를 시작하면서는 우리가 필요한 설정만 입맛대로 할 수 있도록 webpack을 이용해보았다. 공부한다고 >유스 { config.resolve!.plugins = [new TsconfigPathsPlugin()]; return config; }, }; export default config; 6-2. storybook preview.tsx 설정 s..