분류 전체보기

이 글은 동글이 서비스 타겟 환경을 PC로 정한 이유와 브라우저 지원 범위에 대한 글입니다. 1. 서비스 타겟 환경: PC 동글은 블로그에 쓸 글을 업로드(import)하고 올라온 글들을 블로그에 포스팅 하는 서비스이다. 모바일 대응도 할 수는 있겠지만 서비스 특성 상 모바일이 핵심 타겟 환경은 아니라고 생각해서 PC 버전을 우선적으로 지원하기로 결정했다. 2. 브라우저 지원 범위: Chrome, Edge, Whale, Ark 브라우저 지원 범위는 Browser Market Share Worldwide 에서의 브라우저 점유율을 참고하여 정했다. 타겟은 개발이며 주변 개발자가 타겟층이 될 확률이 높기 때문에 한국을 기준으로 잡았다. 크게 Top3인 Chrome, Edge, Whale 을 지원하기로 결정했다..

이 글은 동글이 고민한 웹 접근성과 적용 결과에 관한 글입니다. 1. 개선 할 웹 접근성 선정과 개선 과정 모든 사람들이 동글을 차별없이 동일하게 사용할 수 있도록 웹 접근성을 고려했다. 고려해볼 웹 접근성은 다양한데, 그 중 잘 안지켜지는 웹 접근성 TOP8 중에 동글 서비스에 적용하면 좋은 접근성을 우선으로 선정하여 개선하려고 했다. 동글은 글을 관리하고 발행하는 서비스이기 때문에 그 기능을 제공하는데에 중요한 명도대비, 반복영역 건너뛰기, 키보드 사용보장을 선정했다. 텍스트 컨텐츠의 명도 대비 동글은 글을 봐야하기 때문에 글자와 배경의 명도대비가 중요하다. 또한 시각장애인들이 이용하려면 키보드로만 이용할 수 있어야한다. 웹 컨텐츠 접근성 가이드 라인인 WCAG 2.1 에 따르면, 명도대비가 4.5:..

이 글은 동글 팀원들과 함께 맞춰본 Typescript 컨벤션입니다. 동글 프로젝트는 해당 컨벤션을 이용해 개발하고 있습니다😎 컨벤션으로 들어가기 전에 TypeScript는 우리 팀에 도움이 되고 있나요? 어떤 측면에서 도움이 되고, 혹은 어떤 측면에서는 어려움이나 불편을 겪고 있나요? 미리 선언되어 있는 타입을 통해서 처음 보는 코드를 이해하는 데 도움이 된다. 타입을 통해 런타임 전에 타입 오류를 잡을 수 있다. 우리 팀에서 TypeScript를 사용할 때 중요하게 생각하는 부분은? 타입 네이밍과 올바른 타입 선언(any❌) 동일한 도메인에 대해서 동일한 타입 이용(분산되지 않은 타입 선언) Component 선언 방식(함수 선언문 vs 표현식) Component는 화살표 함수를 이용하여 선언한다. ..

이 글은 아래 글에서 소개했던 직접 만든 리액트 전역상태관리 라이브러리인 @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차 데모데이때 받은 피드백이다. "글을 단순히 다른 블로그 플랫폼들에 포스팅하는 수준의 프로젝트라면 그냥 개인 프로젝트로 진행해도 되지 않느냐" "개발자를 타겟으로 한다면 그냥 툴로 만들어도 되지 않느냐,..