mystery

눈 깜짝할 사이 시간이 흘러 3차 데모데이를 진행했습니다. 이번 스프린트에서는 어떤 일이 있었는지 한번 돌아봅시다! 1. 이전 데모데이 피드백 반영 이번에도 역시 지난 데모데이 피드백을 반영했습니다. 1-1. 플로우에 혼동이 생기는 여러 요소 2차 데모 플로우에서는 사용자에게 만족감을 주려던 목적으로 등록 후 자신이 등록한 킬링파트의 순위에 따른 메세지를 보여주거나, 득표수를 보여주었는데요! 이에 대해 '등록과 공유라는 핵심 가치외의 부가적인 가치를 제공하기 위한 수단이 플로우에 혼동을 준다'는 피드백을 받았습니다. 또한 '등록과 투표라는 용어의 혼동이 있다'는 의견도 있었어요. 이후 만족감이라는 가치가 현 상태의 S-HOOK에서 고려되어야 하는 가치인지 깊이있게 생각해 보았습니다. 회의 끝에 핵심 가치..

지난 webpack 핵심 컨셉 포스트에 이어서 프로젝트에 사용할 webpack 설정 파일을 작성한 과정에 대해 담아 보려 합니다. 목차는 다음과 같습니다. webpack 설정 babel-loader 적용 ts-loader 적용 react 설정 HMR 적용 위 키워드 외 eslint, prettier, jest 등 기타 설정에 대한 내용은 추가로 포스팅하겠습니다. React + TS 환경을 구성하는 각 과정을 패키지별로 나누어 설명하기에는 패키지 간 의존이 다소 깊습니다. 개연성이 다소 떨어질 수 있어요. 꼬리의 꼬리를 무는 구조이다 보니 전체 설정이 끝나기 전까지 설정에 대한 피드백을 받기 어렵습니다. 차근히 따라 해 보는 용도로 봐주시면 감사하겠습니다 (모든 설정이 끝나고 로컬에서 띄워지는 화면을 보면..

어느새 2주라는 시간이 흘러 2번째 데모데이를 진행했습니다. git branch 전략 및 페르소나 변경 이에 따른 핵심 가치 기능의 변경까지 정말 많은 일이 있었어요! 기초의 중요성을 느낀 스프린트! 그 내용을 차근히 정리해 보았습니다. 1. git branch 전략 변경 지난 1차 데모데이 포스팅에서 git flow의 release 브랜치를 제외 한 브랜치 전략을 사용하기로 했었는데요! 이에 대한 피드백을 받았어요~! 말씀하신대로 배포한 상황이 없을 텐데, 조금 더 간소한 브랜치 전략을 가져가는 것은 어떨지? 1-1. github flow로 변경 이에 대해 팀원들과 회의를 진행하게 되었습니다. 초기에 정한 전략이 틀린건 아니지만, 초기 배포 버전이 없는 현 상황에서 브랜치 관리 리소스는 빠른 개발을 방..

Webpack 공식 문서를 읽다보면 경로 관련 속성에서 자주 등장하는 키워드가 있습니다. path.resolve 와 __dirname 인데요. 대체 무엇인지 한번 알아보겠습니다. 1. path 우선 path를 먼저 알아볼게요. path 모듈은 node.js 내장 API 입니다. 운영체제별로 경로 구분자가 달라 발생하는 문제를 해결하기 위해 탄생했습니다. 운영체제는 크게 Window 진영, POSIX 진영(macOS, Linux)으로 나뉘는데, Window: ' \ ' (역슬레시) POSIX: ' / ' (슬레시) 각각 위와 같은 구분자로 폴더를 구분합니다. path 모듈의 메서드로 위와 같은 구분자 문제를 쉽게 해결할 수 있습니다. 1-1. path.resolve path.resolve([...paths..

저의 우테코 자소서 내용중 이런 부분이 있습니다. 우테코에서 동료들과 함께 흔들리지 않고 단단하게 성장하고 싶습니다. 제게 동료들과 함께 배울 수 있는 소중한 기회가 주어진다면, 이 글에 미처 담지 못한 열정 괴물 이도현의 성장을 우테코에서 꼭 보여드리겠습니다! 레벨 1, 2가 흘러 어느덧 레벨3. 드디어 그토록 바라던 팀 프로젝트를 진행하게 되었습니다...!! 우테코에서는 2주 단위로 *데모데이를 진행하는데요~! 앞으로 데모데이를 기준으로 프로젝트 주요 이슈와 피드백 사항에 대해 간략하게 정리하고 회고하려 합니다. *데모 데이: 각 팀이 추구하는 목표와 방향성 공유하고, 피드백을 주고 받는 날 1. 'S-HOOK' 이 뭔데? 노래의 도입부만 듣고 취향이 아니라고 생각하여 놓친, 알고보면 좋은 노래들이 ..

첫 팀 프로젝트를 시작하면서 프로젝트 성향에 맞는 커스텀한 개발 환경 설정이 필요했습니다! 직접 개발 환경을 구성해 보면서 전반적인 개발 환경에 대해 이해하고자 합니다. 그 첫 주제는 바로 webpack입니다. 1. webpack 이란? 웹팩은 대표적인 *번들러중 하나로 웹을 구성하는 자원을 각각의 모듈로 취급하고 이를 병합하여 하나의 결과물로 만들어 주는 도구입니다. (js 파일 뿐만 아니라 css, 이미지, 폰트와 같은 기타 파일도 모듈로 취급할 수 있습니다.) *번들러(bundler): 의존성이 있는 여러 개의 js파일(모듈)을 하나의 js파일로 합쳐주는 도구 2. webpack의 핵심 컨셉 웹팩 공식문서에서는 웹팩을 이해하기 위한 핵심 컨셉을 소개하고 있습니다. 2-1. entry entry 속성..

레벨2 학습 내용 총정리🤪 그야말로 대 환장 파티...! 레벨2를 마무리했다. 레벨1의 고된 시절이 생각나지 않을 만큼 정말 빠르게 지난 간 8주였다. 학습 내용을 정리하며 흐려지는 기억들을 주워 담아보자! 그래서 뭘 배웠어?🤷‍♂️ 개인적으로 몰입했던 키워드는 다음과 같다. React CDD(with storybook) UI / UX 협업 1. React 2년 전 이맘때에 React를 처음 배웠었다. 그저 문법을 외우고 작업물을 찍어내기 바빴다. 'React란 무엇이고, 왜 많은 사람들이 사용하는가?' 제일 기본이 되는 것조차 모르고 사용했었다. 이번 레벨 2에서는 React의 '근본'에 대한 것을 많이 학습했다. 1-1. why React?🧐 누군가 '왜 react를 사용하는 거야?' 물으면 나는 이..

이번 포스팅에서는 react의 key props에 대해 탐구하는 시간을 가져보겠습니다. 1. Key란 ? React 구 공식문서에는 이렇게 나와 있습니다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. React 신 공식문서에는 이렇게 나와있구요. key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 합니다. 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요해집니다. 잘 만들어진 key는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움이 됩니다..

우테코 동료 크루 솔로스타의 미션 코드와 리뷰 내용을 보며 학습중, 한 hook 코드에서 다소 생소한 단어들을 발견했어요. 생소한 단어들에 대한 의문을 해결하고 기억하기 위한 포스팅이 되겠습니다~! 하나의 스토리처럼 기억하기 위해 hook 추상화 과정도 넣게 되었습니다. 작성하던 중, context가 자주 바뀌어 글 이해를 방해한다고 생각해 따로 분리하게 되었습니다.(hook 추상화 글 바로가기) 솔로스타에게 허락을 받았음을 미리 알립니다😀 출발~ 1. hydrate / dehydrate export const usePersistedState = (key: string, initialState: S) => { const dehydratedState = useMemo(() => localStorage.ge..

레벨1 학습 내용 총정리🤪 말도 많고 탈도 많았던 레벨1을 성공적으로 마무리 했다. 폭풍처럼 지나간 8주... 배운 것이 정말 많다. 방대한 학습 내용을 정리하며 지식을 조각모음 해보는 시간을 가져보자! 그래서 뭘 배웠어?🤷‍♂️ 개인적으로 몰입했던 키워드는 다음과 같다. 관심사의 분리(feat. MVC 패턴) 컴포넌트 테스트 1. MVC 패턴 다음은 MDN에 나와있는 MVC 패턴의 정의이다. MVC는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다. 1-1. why MVC?🧐 'MVC? 프론트엔드에 적용하기엔 구리다는데...' 숱하게 들었던 말이다. 하지만 '비즈니스 로직과 UI로직의 ..