구리

React Hook에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다.useState서론Hook은 함수형 컴포넌트가 상태를 사용하거나 클래스형 컴포넌트의 생명주기 메서드를 대체하는 등의 다양한 작업을 하기 위해 추가되었다.Hook은 클래스형 컴포넌트에서만 가능했던 state, ref 등의 리액트의 핵심적인 기능을 함수에서도 가능하게 만들었고, 클래스형 컴포넌트보다 간결하게 작성할 수 있다는 장점이 있다.그러면 useState Hook에 대해 알아보자.본론useState란?const [state, setState] = useState(initialState)컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 폼에 입력하면 입력 필드가 업데이트되어야 하고, 이미지 캐러셀에서 ..

실무에서 socket.io를 통해 콘텐츠 업로드시 트랜스코딩 진행률 데이터를 전달 받습니다. 관련해서 socket.io를 공부하며 정리한 글입니다.정의양방향 통신을 하기 위해 웹 소켓 기술을 활용한 Node.js 라이브러리로 JS를 이용해 브라우저 종류에 상관없이 실시간 웹 구현이 가능하다.Websocket이라는 HTML5 표준 기술을 이용할 수도 있으나 일부 구형 브라우저나 OS에 따라 지원되지 않을 수도 있다는 단점이 있다.(브라우저 호환성을 보면 거의 다 지원하는 수준인 것 같다.)https://developer.mozilla.org/ko/docs/Web/API/WebSocket  동작 방식HTTP long-polling 방식으로 서버와 연결 시도 (HTTP 프로토콜 사용)WebSocket으로 업그..

업무 중 만난 버그를 해결한 과정을 작성한 글입니다.이슈회사 프로젝트는 Vue 기반으로 SPA 형식으로 되어 있습니다. 비디오 콘텐츠를 다루는 서비스로 웹페이지에서는 iframe 태그를 이용해 미리보기 기능을 제공하고 있습니다.미리보기에서는 다양한 인코딩 프로파일로 영상을 확인할 수 있으며 인코딩 프로파일 변경시 다른 콘텐츠 url를 iframe src 속성값으로 변경하게 됩니다.이때 인코딩 프로파일 변경 후 브라우저 뒤로가기 버튼 클릭시 동작하지 않고 현재 페이지에 머물러 있는 버그가 발생했습니다.원인iframe은 그대로 사용하고 src 속성값만 바꾸면 최근에 사용한 src 속성값을 브라우저 window.history 스택에 쌓게 됩니다. 따라서 그 후에 브라우저 뒤로가기 버튼 클릭시 history 스..

회사에서 CI-CD 구축 업무을 위해 Github Actions에 대해 공부한 글로 React 기반 테스트용 프로젝트에 적용해보며 느낀 점을 작성했습니다. (Docker Image 파일 크기 : 18MB)캐시 적용Github Actions 캐시 사용repo별로 최대 10GB까지만 저장할 수 있고, 7일간 접근하지 않을 경우 삭제된다.https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/caching-dependencies-to-speed-up-workflows#usage-limits-and-eviction-policy사용 action - https://github.com/docker/bake-action다..

yarn 버전을 다운그레이드하는 방법입니다. 1. yarn이 설치된 위치 찾기 $ which yarn /opt/homebrew/bin/yarn 2. yarn 파일 제거 $sudo rm '/opt/homebrew/bin/yarn' 3. yarnrc.yml 경로 확인 $ cat ~/.yarnrc.yml yarnPath: ".yarn/releases/somethingPath.." 4. yarnrc.yml 파일 제거 $ rm -f ~/.yarnrc.yml 5. 특정 버전이 yarn 설치 $ npm install -g 'yarn@1.22.19' 6. yarn 버전 확인 $ yarn -v 1.22.19

변경에 유연한 컴포넌트를 만들기 위한 방법 중 하나인 Headless 컴포넌트에 대해 정리한 글입니다.목차서론컴포넌트란프론트엔드 관점에서 컴포넌트란본론컴포넌트를 잘 만들어야 하는 이유Headless 컴포넌트Headless 컴포넌트가 필요한 이유Headless 컴포넌트 설계 방법Headless 컴포넌트로 리팩토링하기1. Compound Component2. Function as Children Component3. Custom HookHeadless 컴포넌트 장단점 Headless UI 라이브러리가 무조건 정답인가? 결론컴포넌트란일반적으로 기능적 단위로 각각의 독립된 모듈을 의미하며 프론트엔드 관점에서는 화면을 구성하는 UI 요소다.모듈일반적으로 프로그램을 구성하는 요소로 관련 데이터와 함수를 하나로 묶은..

사이드 프로젝트를 진행하며 프로젝트 폴더 구조를 구성하는 방법에 대해 고민한 과정을 정리한 글입니다.목차서론본론기능이란?기능 중심 구조의 이점경로 구조화공통 파일 정리기능 구성결론서론프로젝트 구조를 잡는 기준은 크게 2가지로 역할 중심, 기능 중심으로 볼 수 있다. 대부분의 프로젝트 구조는 역할 중심이지만 이번 프로젝트에서는 기능 중심으로 적용하면서 겪은 고민들을 작성한 글이다.기능이란?기능은 서로 관련된 파일 그룹이며 더 나아가 프로젝트의 영역이나 주제를 대표한다. 예를 들면 인증, 랜딩 페이지, 대시보드가 있다.프로젝트를 여러 기능으로 나누면 관심 분리 디자인 원칙에 대해 생각해 볼 수 있다.기능을 만들기 전에 지금 작업하고 있는 것이 기능으로 그룹화 할 수 있는지 고민한다면 다음과 같은 질문을 할 ..

멘토님께 PR 리뷰를 요청드렸는데 PR 메세지 개선이 필요하다는 피드백이 있었다. 회사에서도 사용하고 있던 PR 양식으로 (물론 혼자 진행하는 프로젝트라 내가 임의로 만든 템플릿이다) 이를 개선하기 위한 고민의 과정을 기록하기 위해 글을 쓴다. 목차 PR이란 무엇인가? PR은 왜 하는 거지? 좋은 PR 메세지를 위한 개선 작은 PR로 만들기 결론 PR이란 무엇인가? 내가 작업한 부분을 코드베이스에 포함시키기 위해 보내는 요청으로 작업으로 생긴 변경사항(수정, 추가, 삭제)를 기존 코드에 적용하는 과정을 의미한다. PR은 왜 하는 거지? PR의 목적은 크게 세 가지로 볼 수 있으며 각 항목을 기준으로 필수로 있어야 하는 내용들을 생각해봤다. 변경사항 기록 코드의 변경사항들을 기록하기 위해 PR을 작성하는 ..