우아한테크코스 5기 프론트엔드

이 글은 아래 글에서 소개했던 직접 만든 리액트 전역상태관리 라이브러리인 @yogjin/react-global-state-hook 의 테스트 코드 작성 정리 글입니다. React18의 useSyncExternalStore 훅으로 전역상태 관리하기 이 글은 useSyncExternalStore를 이미 알고 있다는 가정 하에 작성되었습니다. 처음 들어보셨다면 공식문서를 읽고 오시는 것을 추천합니다. 1. useGlobalState 를 만들었다. 공식문서에서는 useSyncExternalStor yogjin.tistory.com @yogjin/react-global-state Simple global state management library for react18. Latest version: 0.0.3, ..

이 글은 useSyncExternalStore를 이미 알고 있다는 가정 하에 작성되었습니다. 처음 들어보셨다면 공식문서를 읽고 오시는 것을 추천합니다. 1. useGlobalState 를 만들었다. 공식문서에서는 useSyncExternalStore를 이렇게 정의한다. useSyncExternalStore is a React Hook that lets you subscribe to an external store. useSyncExternalStore 는 외부 store를 구독할 수 있는 React 훅입니다. 옵저버 패턴을 이용하는 이 훅을 이용해 외부 store에 데이터를 저장하고, 리액트 컴포넌트가 store를 구독하게하여 store가 바뀔 때 마다 컴포넌트를 리렌더링하는 기능을 만들 수 있다. 따라..

1. 동글 첫 릴리즈 드디어 동글 v1.0.0 버전을 배포했다! 두 달간 열심히 개발하여 드디어 메이저 버전을 출시했다. 배포한 뒤 첫 화면을 본 순간 알 수 없는 벅차오름이 느껴졌다. 아이를 낳는다면 이런 기분일까..? 2. 4차 스프린트 구현 내용 우리는 3차 데모데이까지 주요기능들을 개발해냈다. 4차 데모데이(론칭 페스티벌)까지는 OAuth, 회원 페이지(인증, 인가)를 만들어 사용자가 자신의 공간에서 서비스를 이용할 수 있게 했고 전반적인 디자인 개선으로 앱을 매력적이게 만들어 사용하고 싶게 만들었으며 에러처리, 버그 수정을 통해 사용성을 개선했다. 이외에도 프론트엔드 기준으로 서버 상태 관리를 위해 tanstack-query, e2e 테스트를 위한 cypress 를 도입했다. 도입으로 느낀 장점..

1. 동글 진행상황 동글은 지난 데모데이에서 마크다운 파일을 업로드해서 그 글을 볼 수 있고, medium으로 발행할 수 있는 기능까지 완성하였다. 그 이후로 동글은 다음 기능들을 추가했다. 노션에서 글 불러오기 카테고리 기능 티스토리로 글 발행하기 사이드바 열고 닫기 발행에 필요한 정보 추가하기 (태그) 2. 도메인 추가 및 정식 배포 가비아 등에서 도메인을 찾아 실제 서버에 적용했다! .tv, .me, .io 등 많은 후보가 있었지만 가격과 다른 요소들을 생각해서 최종 승자는 .blog가 되었다. https://donggle.blog 블로그 포스트 관리 툴, 동글 donggle.blog ip주소로 접속하다가 도메인이 생기니까 더 벅차오르는 느낌이다😆 3. CI/CD 구축 동글은 github actio..

1. 1차 데모데이 회고 1차 데모데이가 끝난 후 우리는 프로젝트 방향성에 대해 논의하느라 정작 회고는 하지 못했었다. 그래서 그 다음주 월요일에 짧게나마 회고를 진행했다. 아쉬웠던 점 ppt를 시간 쫓겨서 한 것이 조금 아쉬웠다. 하루 전날 모두 완료해 놓자. ppt를 빠르게 완성하고, 시나리오를 붙여 완성하자. 앞으로 역할 분담을 해서, 어떤 것을 할지 명시하자. 우선순위를 정해서 todo를 작성하고 체크하자. 데모데이마다 팀 회식을 하자! 2. 프로젝트 방향성 재정의 밑 두 문장은 실제로 우리가 1차 데모데이때 받은 피드백이다. "글을 단순히 다른 블로그 플랫폼들에 포스팅하는 수준의 프로젝트라면 그냥 개인 프로젝트로 진행해도 되지 않느냐" "개발자를 타겟으로 한다면 그냥 툴로 만들어도 되지 않느냐,..

1. 안녕 "동글" 우아한테크코스 레벨3부터는 프론트엔드와 백엔드가 힘을 합쳐 팀 프로젝트를 진행한다. 제목에 있는 "동글"은 내가 앞으로 참여하고 개발할 프로젝트 이름이다. 프로젝트 이름은 서로 의견을 내고 내부 투표를 통해 결정했다. 6월 27일 화요일 동글 팀원인 에코, 토리, 헙크, 비버, 파인, 아커와 인사하고 서로 자기소개를 했다. 그리고 바로 팀 그라운드 룰을 정했다. 적당하고 깔끔하게 잘 정한 것 같다. 특히 회의시간에 존댓말하기와 하이파이브가 마음에 든다! 2. "동글" 이란? "동글"은 기획자인 에코가 낸 아이디어인데, 여러 에디터에서 작성한 글을 한번에 관리하고 다양한 블로그 플랫폼으로 배포할 수 있는 기능을 제공한다. 나는 기여자로서 "동글"이 되게 맘에 들었다. 왜냐하면 나도 현재..

1. CRA 없이 리액트를 시작해야하는 이유 create-react-app을 이용하면 정말 편하게 리액트 프로젝트를 시작할 수 있다. 웹팩과 바벨, 타입스크립트 설정까지 제공해준다. 하지만 내 방식대로 설정을 바꾸기가 힘든 단점이 있다. craco 같은 라이브러리를 이용하여 설정을 override 해야하는데, 번거롭고 이럴바엔 처음부터 리액트를 구축하는 것이 낫겠다 라고 판단하게 된다. 나의 경우 import 방식을 바꾸려고 했었는데, 이를 위해 웹팩, ts 설정까지 전부 override 해야하는 문제점이 있었다. 배보다 배꼽이 더 큰 경우였다. 그래서 CRA없이 리액트 프로젝트를 구축해보려고 한다. 2. 구축 순서 1. package.json 생성 2. React, Typescript 설치 3. web..

우아한테크코스 5기 미션 점심 뭐 먹지 의 웹팩 설정 파일을 보며 웹팩 기초를 공부한 과정입니다. 0. 작성 이유 점심 뭐 먹지 미션을 하면서 html 파일을 분리한 구조를 사용했습니다. 당연히 js 에서 html을 import 할 수 있을 것이라고 생각했는데요, 안되더라구요 그래서 이번 기회에 아예 몰랐던 webpack 공부를 해봤고, 그 정리본입니다. 처음 공부했기 때문에 아래 내용은 정확하지 않을 수도 있어요. 잘못된 부분은 같이 고쳐봐요. 댓글 환영합니다! 1. webpack 이란? 웹 페이지를 만들 때 생기는 수많은 파일들(js, css, html, assets 등) 을 하나로 묶어주는 도구 중 하나 (번들러 라고 합니다) webpack 이외에도 parcel 같은 번들러가 있습니다. 2. web..