개발할래 운영할래?

현재 우리 팀의 서비스는 웹 접근성을 위해 구형 PC 브라우저(ex IE11), 모바일기기 구형 브라우저(ex IOS 15ver 이하의 사파리) 에서도 서비스가 작동될 수 있도록 돼 있다. 최근 배포 된 서비스에서 "IOS 13이하의 아이폰" 에서 특정 컨텐츠 영역이 스크롤 되지 않는 이슈가 있어 원인을 조사해 봤다. 1. ES 버전이 원인이었을까? 처음엔 babel 로 낮춘 ES(ECMA script. aka JS) 버전(es5) 이 해당 IOS 버전에서 구동하지 않는 것인가 싶었다. 하지만, ES5는 IOS 6 이상의 사파리에서 전부 지원하고 있었고, 무엇보다 해당 스크롤엔 JS 가 관여하지 않았다. 2. HTML, CSS 의 버전 및 브라우저 호환성의 문제일까? 그렇다면 HTML, CSS 버전의 문..

1. TBD 란? 흔히 사용하는 git flow 방식의 branch 전략 방식과 반대되는 전략이다. git flow 에선 N명의 개발자들이 feature branch 로 개발하고 PR 을 날려 리뷰하고 개발했다면 TBD 에선 PR 하는 대신에 하나의 branch(master or main or trunck) 로 페어(or 몹)프로그래밍을 통해 실시간으로 피드백 & 반영 을 한다. (즉 master branch 에 직접 push) 2. 장점 및 해결하고자 하는 문제점? [개인보단 팀] 1. git flow 전략에서의 'PR, Merge 로 인해 발생하는 단점' 을 제거시킴으로써 '팀이 함께 쓰는 코드' 에서 '개인의 책임' 보다 '팀의 책임' 에 더 비중을 둘 수가 있다. (단점 ex) 여유가 없어 리뷰를..

모노레포 구성 실습을 세 가지 환경에서 차례로 했다. 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..