개발할래 운영할래?

모노레포 구성 실습을 세 가지 환경에서 차례로 했다. yarn1 으로 모노레포 구성(이 포스팅엔 안적겠다.) yarn-berry 로 모노레포 구성 turbo Repo 로 모노레포 구성 yarn-berry 로 모노레포 구성 1. 레포지토리의 패키지 구성 apps / packages 디렉터리의 하위에 위치 시켰다. apps(실제 서비스하는 서버 디렉토리) / web1(nextJS 서비스1), / web2(nextJS 서비스2) packages(라이브러리 디렉토리) / lib(함수 모음 라이브러리) / ui(nextJS 컴포넌트 UI 라이브러리) 2. 개발 환경 설정(각 팀의 Lint 룰을 일치시킬 수 있다) esLint, prettier(파일 저장 시 자동 Lint) 3. 그 외 설정 peerdependan..

이번에 원티드에서 모노레포 관련 프리온보딩 프론트엔드 챌린지 11월 에 참가하게 됐다. (스킬업 할 겸!) 주제는 '모노레포' 이다. 11번가 '여행개발팀'에서의 경험과 원티드 제공 사전과제 에 대해 기술하겠다. https://www.wanted.co.kr/events/pre_challenge_fe_4 프리온보딩 프론트엔드 챌린지 11월 | 원티드 AI 채용, 연봉 정보, 이력서, 커리어 콘텐츠까지 커리어 성장에 필요한 모든 것, 원티드에서 만나보세요. www.wanted.co.kr 1. 사전적(?) 의미 모노레포(Mono Repo)란, Monolithic Repository 를 뜻하며, 한글로는 '하나의 레포지토리' 라는 말이다. 한글 뜻만 보자면, 기존에 여러분이 깃허브에 'HelloReact' 라는..

1. ReactJS 는 JS와 html 코드를 하나의 js 파일에서 사용하기 위해 JSX(javascript + XML) 를 사용한다. VueJS 는 .vue 라는 고유 확장자를 사용한다. (sfc 의 강점을 확실히 살리는 듯 하다.) 2. 코드를 보자. JSX 의 경우, export default function 안에서 html, js 영역이 섞여 있는 듯 보인다.(css는 아쉽게도 없네요 ㅠ) VueJS 의 경우, 으로 html 영역을, 로 js 영역을, 로 css 영역을 딱딱 나눠주고 있다. ReactJS (c.f. nextJS + typescript 라 ReactJS + js 와 조금 다름) VueJS 3. WHY? React 16.7 에서 SFC 를 deprecated 시킨 것 같던데, 꼭 그래..

reactJS, vueJS 는 life cycle 에 따라 컴포넌트에서 실행시킬 JS로직을 나눠 실행 할 수 있다. (computed, mounted, updated ...) 이를 vueJS 에선 '라이프사이클 훅' , reactJS 에선 '라이프사이클 메서드' 라 부른다. life cycle mehod는 컴포넌트, 프로젝트 사이즈가 커짐에 따라 오히려 컴포넌트 재사용성 / 가독성을 해치며, 이에 ReactJS 는 Effect Hook 을 사용하도록 권장한다. VueJS 진영에선 버전 3 기준으로, setup 이라는 hook으로(aka composition api) ReactJS 의 Hooks 를 재현한 듯 하다. (React 에서 말하는 hook, VueJS 에서 말하는 hook 이 비슷하면서도 다르게..

NextJS config 로(내장webpack) 개발/배포 환경 구별하기 : https://han-py.tistory.com/503?category=1077531 (그렇다면... 검증 환경은? : https://ssangq.netlify.app/posts/nextjs-what-i-learn#:~:text=%EC%97%90%20%EC%9E%98%20%EB%82%98%EC%99%80%EC%9E%88%EB%8B%A4.-,Dotenv%20%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0,-Next.js%EC%97%90%EC%84%9C 이거 참고하면 되려나?) next.js 의 라우팅은 일반적인 페이지의 라우팅과 무엇이 다른가? : https://jake-seo-dev.tistory.com/137..

Interface vs Class : interface 는 typescript 가 컴파일 타임(코딩할 때)에 타입 체크를 해주기 위한 '구조체' 같은 것(객체 타입을 정의하는 게 아님! 타입 체크를 위해 임시로 만드는 dummy 타입 이라 생각하자). 즉 컴파일 돼서 js 화 되면 사라진다. 반면에 class 는 객체 타입을 새로 정의하는 것이며, 객체 프로퍼티/메소드 를 갖고 있고, 컴파일 해서 js 화 해도 (런타임) 남아 있다. 불필요한 메모리/파일크기 낭비를 막기 위해선 interface 를 쓰면 되겠고, 클래스 로써의 기능이 꼭 필요한 경우라면 class 를 쓰면 되겠다. 참고 : https://stackoverflow.com/questions/51716808/when-use-a-interfac..

팀 내 FE 소스코드는 대체로 잘 짜여진 코드, 모던한 VueJS, JS 의 장점을 잘 살린 코드였고 많은 구조 개선을 거친 것으로 보였다. 그럼에도 불구하고 처음 업무를 하는 나로썬 수정할 부분이 어디인 지 파악하기가 어려웠다. (물론 지금도...) 사무실에서 쉬면서 유튜브를 뒤적이고 있는데, TOSS SLASH 21 영상중 하나가 눈길을 끌었다. https://www.youtube.com/watch?v=edWbHp_k_9Y 제목 부터 '실무에서 바로 쓰는 FE 클린코드'..... 핵심 내용은 '추상화, 단일책임원칙' '코드가 짧다고 읽기 쉬운 코드가 아니다.' '코드가 길어져도 짧을 때 보다 읽기 쉬운 코드가 될 수 있다.' 로 보인다. 영상을 접하고 난 후엔 '이렇게 하면 다소 코드가 길어지고 파일..

최근 시작하는 몇 개의 사이드 프로젝트에서 '게시판' 기능이 필요했기에 아예 해당 컴포넌트를 라이브러리로 npm 에 배포해 사용하고자 npm 라이브러리를 만들었다. 라이브러리 결과물 : https://www.npmjs.com/package/vue-board-component vue-board-component ## This reusable component is bulletin board ('table' based on 'div( display: table )'). Latest version: 0.2.8, last published: 10 hours ago. Start using vue-board-component in your project by running `npm i vue-board-compon..

create library with vue3 & ts & vite example : https://github.com/agrisom/vue-npm-library-example vite : https://vitejs-kr.github.io/guide/why.html#the-problems

vuejs 공식문서 - https://kr.vuejs.org/v2/guide/syntax.html#%EB%94%94%EB%A0%89%ED%8B%B0%EB%B8%8C html 테그에 사용하며 표현식의 값이 변경될 때 반응적으로 DOM 을 변경하는 기능. v-if v-show v-for v-bind v-on 과 같이 v- 접두사를 붙여 사용하며 v-if 는 해당 테그를 렌더링 할지 아닐지 결정 v-show 는 해당 테그의 display 속성을 결정 v-for 는 해당 테그를 렌더링할 때 반복문을 이용해 복수의 테그를 생성 v-bind 는 html 요소값을 변경 (단방향 바인딩???) / 약어는 : (ex 'v-bind:href' == ':href' ) v-on 은 DOM 이벤트를 하는 디렉티브 / 약어는 @..