너굴 개발 일지

React 동작원리에 대해 공부한 것을 정리한 글입니다. 피드백은 언제나 환영입니다!서론프론트엔드 역사 (React를 곁들인)2000년대까지는 LAMP 스택(Linux, Apache 웹서버, MySQL, PHP)이 강세였으며 웹 서버에서 HTML 페이지를 만들어 클라이언트에게 제공하는 방식으로 브라우저는 단순히 HTML 페이지 렌더링, JS는 폼 처리와 같은 부수적인 역할만 하는 방식으로 프론트엔드는 수동적인 역할이었다.2010년대부터는 웹소켓, 캔버스, 지오로케이션 같은 다양한 기능을 브라우저에서 제공하며 JS의 역할은 더욱 넓어졌다. 그러나 DOM API를 다루는 것은 까다로웠기에 JS 코드가 복잡해지게 되었다.간단한 예시로 DOM을 선택하는 방법에 대해 살펴보면 다음과 같다.ID 선택자를 활용하는 ..

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가지로 역할 중심, 기능 중심으로 볼 수 있다. 대부분의 프로젝트 구조는 역할 중심이지만 이번 프로젝트에서는 기능 중심으로 적용하면서 겪은 고민들을 작성한 글이다.기능이란?기능은 서로 관련된 파일 그룹이며 더 나아가 프로젝트의 영역이나 주제를 대표한다. 예를 들면 인증, 랜딩 페이지, 대시보드가 있다.프로젝트를 여러 기능으로 나누면 관심 분리 디자인 원칙에 대해 생각해 볼 수 있다.기능을 만들기 전에 지금 작업하고 있는 것이 기능으로 그룹화 할 수 있는지 고민한다면 다음과 같은 질문을 할 ..