TBD 전략이란? 간단하게 보자면 언제든 프로덕션 배포 릴리즈가 가능한 Trunk(master)라는 단일 브랜치에서 모든 개발자들이 각자 자기 작업을 진행 후 바로 커밋하는 방식이다. Git Flow 방식이 대체로 익숙하지만 프로젝트나 팀 규모가 켜지면서 개발 효율을 저하시키는 문제가 발생한다고 한다. 아직까진 경험해보지 못 했지만 대략만 봐도 그럴 것 같다. 처음 TBD 전략에 대한 설명을 듣고 이게 가능한 전략일까? 의문이 들었지만 개인적으로 국가 단위로 비유하게 됐다. 간단하게 TBD 전략으로 개발에 참여하는 개발자를 어느 한 국가에 국민으로 보고 그 곳에서 살아가려면 그 나라 법을 지켜야지만 살아갈 수 있다. 마찬가지로 트렁크 브랜치에 커밋을 하려면 미리 정해진 법을 지켜야지만 개발이 가능한 것이..
2022.12.13
오늘은 모노레포를 알아보았고 yarn Workspace를 사용해 모노레포를 구성했고 공통 모듈을 프로젝트에 불러와 사용해봤다. > yarn set version berry > yarn init -w packages/lib → 공통 라이브러리 apps/web → 서비스 apps 폴더에는 web 이라는 Next.js 프로젝트를 생성했고, packages/lib/src/index.ts의 모듈을 apps/web에서 사용하려면 아래와 같이 명령어를 사용한다. yarn workspace @macjjuni/web add @macjjuni/lib @macjjuni/web = Next.js 패키지 이름 @macjjuni/lib = 공통으로 사용할 패키지 이름 명령어를 입력해주면 apps/web/package.json 파..
2022.12.06
오랜만에 포스팅 남기네요. 새롭게 시작할 프로젝트 계약이 무산되고 어처구니없는 프로젝트에 투입되어 시간이 없었습니다 😰 이번 포스팅은 원티드에서 진행하는 프리온보딩 챌린지에 참여해 알게된 내용들입니다. 너무 일에만 치여지내다 보니 업계 동향이나 자기계발에 뒤쳐지고 있다 생각이 들었습니다. 그래서 회사 동료분들에게도 추천을 했고 다 같이 참여하는 시간을 갖게 되었습니다. 참여하기 전 사전과제로 해당 주제를 미리 공부해보는 시간을 가져야합니다. 주제는 모노레포 시스템입니다. 고맙게도 원티드에서 모노레포와 관련된 내용의 링크를 미리 첨부해주어 참고해 포스팅을 작성해보겠습니다. 시작하기 전 아래 내용은 프로젝트를 어떻게 하면 효율적으로 유지 관리하는 방법에 대한 지식입니다. 모노레포(Monorepo) 모노레포란..
2022.12.05
리액트를 사용할 때 CRA(create-react-app) 명령어로 프로젝트를 시작할 때 개발자들을 대신해 얼마나 많은 설정들을 해주고 있는지 깨닫고 있는 시점입니다. 뭐 어느 정도 많은 설정들을 해줬겠지 싶었는데.. 상상 이상이더군요. CRA 명령어로 만든 프로젝트에서 public 폴더에 보통 정적으로 사용할 파비콘이나 이미지, 기타 파일들을 저장해 사용하는데요. 빌드 후 웹팩이 알아서 dist폴더안에 정리해줍니다. 수동으로 웹팩 설정을 하신분들은 잊고 넘어갈만한 설정인데요. 제가 그렇습니다.. 자동으로 되는 줄 알았습니다. 왜냐면 개발서버에서는 잘 접근되거든요. 플러그인 설치 npm install copy-webpack-plugin --save-dev webpack.config.js const Cop..
2022.10.03
1. 데스크탑(DeskTop) @media screen and(min-width: 1024px){ ... } 2. 테블릿(Tablet) @media screen and(min-width: 767px) and (max-width: 1023px){ ... } 3. 모바일 @media screen and(min-width: 767px) { ... }
2022.09.27 5
요즘 개발 관련 포스팅도 많이 못쓰고 말이죠.. 곧 회사에서는 주 1회가량 스터디를 진행할 것 같습니다. 다 같이 강의를 보고 간략한 발표와 프로젝트를 수행하는 정도의 느낌으로 말이죠. 회의 때 이런저런 얘기를 하다 잘 몰랐던 부분이 있어 짚고 넘어가 보려 합니다. 브라우저는 HTML 문서를 읽는 도중에 태그를 만나면 DOM 생성을 멈추고 스크립트를 먼저 실행한다. 이 방식에는 2가지 이슈를 만들게 되는데.. 첫 번째로 생성되지 않은 DOM 요소에 접근하는 스크립트가 먼저 실행됐다면 에러가 발생한다. 두 번째로 큰 사이즈의 스크립트가 중간에 껴 있을 경우 해당 스크립트가 실행되기 전까지 페이지 로드가 멈출 것이다. 이런 이슈를 해결하기 위해 보통의 경우 태그가 끝나는 시점에 나도 이렇게 사용했지만 이 방..
2022.09.14
콘솔 로그는 혼자 개발한다면 괜찮지만 다수의 사람과 코드를 작성하고 빌드&배포를 진행할 경우 여기저기서 console.log가 찍히는 일이 발생하는데요. 일일이 지워주는 건 비효율적이기 때문에 빌드 단에서 모두 지워주는 플러그인을 사용해봤고 실무에서도 적용했습니다. 1. 플러그인 설치 npm i babel-plugin-transform-remove-console 2. .babelrc 또는 bable.config.js module.exports = { ... plugins: process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : [], ... } 제 경우 빌드 할 때만 사용하기 위해 babel.config.js에서 플러그인을 추가해주었..
2022.09.13
안녕하세요. 꾸생입니다 :) 오늘 저한테 한 통의 광고 메일이 도착했는데요. 인프런에서 Google I/O 2022 소식이 담긴 메일이었습니다. 사실 일에 치여 살기 때문에 컨퍼런스에 참여하기엔 너무나 힘들어 바로 삭제하기 마련인데요. 컨퍼런스 외에 재밌는 개발자 밈을 방출했다는 소식에 얼른 퍼왔습니다. 아래에 해당 포스팅 링크를 남겨놓으니 모든 밈을 보고 싶은 분들은 참고해주세요. 개발자 밈을 보는 나 이것은.. 나(?) 프로그램의 완성 과정 쏟아부은 시간에서 빵 터졌습니다 ㅋㅋㅋㅋ 실제 개발자 극과 극을 달리는 현실과 이상 오래된 깃 브랜치 이건 개발자가 아니라면 이해하기 힘든 짤인데.. 겪어 본 사람만 웃고 넘어가길 ㅎㅎ 프론트엔드 개발자의 현실 저도 프론트엔드 개발자로서 새로운 라이브러리와 프레..
2022.08.02
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev