구리

React Hook에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다.useMemo과 useCallbackuseMemo는 리렌더링 사이에 계산 결과를 캐싱(메모이제이션)할 수 있게 해주는 React Hook으로 React는 초기 렌더링 중에 calculateValue 함수를 호출한다. 그리고 마지막 렌더링 이후 deps가 변경되지 않았을 경우 저장된 값을 반환하거나 변경되었다면 calculateValue를 다시 호출해서 반환된 값을 저장하고 반환한다. 참고로 React는 캐싱된 값을 특별한 이유가 없는 한 버리지 않는다.const cachedValue = useMemo(calculateValue, dependencies)// examplefunction TodoList({ todos, tab ..

React Hook에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다.useEffect란?공식 문서에 따르면 useEffect란 렌더링 후 특정 코드를 실행해 외부 시스템과 컴포넌트를 동기화하는 hook이라고 한다. effect를 사용해 렌더링 후 특정 코드를 실행해 React 외부의 시스템과 컴포넌트를 동기화할 수 있다고 하는데 여기서 effect는 무엇을 의미할까?Effect란 무엇일까?렌더링 자체에 의해 발생하는 부수효과 (side effect)를 의미한다. 리액트의 함수형 컴포넌트는 props, state를 바탕으로 컴포넌트를 렌더링 하는데 컴포넌트의 렌더링과 무관한 연산들이 존재한다면 이것이 side effect가 되는 것이다.무관한 연산을 컴포넌트 내에서 직접 수행하는 것은 좋지 않..

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