개발할래 운영할래?

문제 링크 : https://school.programmers.co.kr/learn/courses/30/lessons/150370 프로그래머스의 개인정보 수집 유효기간 문제이다. 문제 [오늘 날짜] [개인정보 수집 약관 종류] [등록된 사용자별 개인정보 수집약관 리스트] 를 input 으로 받고 [유효기간 만기 된 수집약관 리스트] 를 return 하는 문제이다. 문제 원본을 보려면 아래를 펼쳐 보자. 더보기 풀이 1. createTermsMap(terms) 메서드로 이용약관 종류를 정리한 key-value Map을 만든다. function createTermsMap(terms) { return terms.reduce((acc, curr)=> { const [termName, term] = curr.sp..

UseEffect 란? UseEffect 는 함수형 컴포넌트에서 sied effect(callback) 를 실행할 수 있게 도와주는 Hook 이다. (React v16.8 에 추가) 즉, 유저가 버튼을 클릭하거나 어떤 상호작용을 통해 컴포넌트 state(변수)가 변경시켰을 때, callback을 수행하도록 할 수 있는 Hook. UseEffect 가 실행될 때 useEffect 는 다음 상황에 실행된다. 1. 처음 component 가 렌더링 될 때 2. component의 state(변수) 가 변경될 때 Dependancy Array (의존성 배열) useEffect 는 '어떤 상태(변수)가 변했음'을 감지하고 callback 을 실행시켜 준다. '어떤 상태' 를 이 useEffect 가 가지는 '의존..

현재 우리 팀의 서비스는 웹 접근성을 위해 구형 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. 개념 배포 된 서비스의 기능(feature) 사용 여부를 toggle 시켜주는 기능(or서비스) 이다. 단순히 feature 를 toggle 하는 것에 더해, AB test 를 더 간편하게 하도록 만드는 활용도 가능하다 2. 예시 11번가 여행 서비스를 예로 들자면, '국내숙박 검색' 영역 중 '상세조건' 필터링 기능에 '가격대' 필터 기능이 있다. 이 필터에서 버그가 발생한 경우, 서비스를 재배포 하지 않고 해당 기능(feature) 를 사용하지 않도록 토글하면 재배포에 걸리는 시간 및 revert, 다시 merge( & pr) 하는 데 드는 수고를 덜 수 있을 것이다. 토글상태 : ON 토글상태 : OFF 3. TBD(Trunck Based Development) 와 함께 사용 master 브랜..

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..