Development38 [React] useEffect에서의 의존성(dependency)과 실행 흐름 useEffect에 대해 정리하고 싶은 마음이 들어 useEffect의 실행 조건과 흐름을 한 큐에 정리해보고자 한다. useEffect 란? useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 근데 useEffect는 왜 Effect라는 이름을 가질까? Hook은 컴포넌트의 렌더링과 별개로 발생하는 작업들, 즉 "부수 효과"를 처리하기 위해 사용된다. (" S H O C K I N G ") 이 useEffect Hook은 컴포넌트가 렌더링되고 나서 비동기적 또는 부수적인 작업을 수행할 수 있도록 도와주기 때문에 "Effect"라는 용어가 사용되었다고 한다. 더보기 React의 클래스 컴포넌트에서는 componentDidMount, componentD.. 2024. 1. 29. PUB/SUB 구조와 Redis, Kafka를 이해하기 위한 과정 PUB/SUB 구조 pubsub을 어렵게 받아들일 필요가 없다는 것을 이해하고 글을 써본다. PUB/SUB의 구조는 유튜브 생태계로 이해해보자. 우리 곁에서 가장 쉽게 Publisher와 Subscriber의 관계를 볼 수 있는 곳은 바로 유튜브이다. 그럼 유튜브의 생태계에 빗대어 보자. Publisher는 유튜버, Channel은 유튜브 채널, Event는 유튜브 영상, Subscriber는 구독자라고 생각하면 이해하기 쉽다. 유튜버(=Publisher)는 자신의 유튜브 채널(=Channel)에 유튜브 영상(=Event)을 생성 및 업로드한다. 여기서 유튜브 영상을 하나의 이벤트(메세지)라고 이해할 수 있다. 특정 Channel을 구독하고 있는 구독자(=Subscriber)는 Channel에 올라온 유.. 2023. 10. 16. [Git] .gitconfig에 alias 설정하기 .gitconfig에 alias 설정하기 + 만약 나중에 다른 컴퓨터를 사용해야할 경우, Git 관련 설정을 위한 글이다. alias은 무엇인가? - alias이란, git 명령어에 대한 사용자 정의 별칭(alias)을 설정하는 것이다. - 이 별칭은 git 명령어를 더 간결하게 실행하고 원하는 형식으로 로그를 출력하는 데 사용된다. .gitconfig에 alias 설정하는 방법 1. home 디렉토리에서 cat .gitconfig로 .gitconfig 파일 확인하기 2. vi .gitconfig 를 통해 아래 코드 저장하기 [alias] lg = log --graph -15 --abbrev=7 --decorate --date=relative --format=format:'%C(bold red)%h%C(.. 2023. 9. 30. [Typescript] Promise - async, await 범위 설정하기 Promise - async, await 범위 설정하기 아래 글은 async와 await 범위 설정에 따라 결과값이 달랐던 부분을 기록하기 위한 글이다. 두 코드 모두 HTML5 Canvas에서 생성된 이미지를 블롭(blob) 형태로 만들어서 AWS S3에 업로드하는 기능을 수행한다. 수정 전 (uploadMaskingImageFile 함수) // canvas 위의 masking된 이미지를 s3에 업로드하는 함수 const uploadMaskingImageFile = async () => { const image = new Image(); if (canvasRef.current && imageData) { const canvas = canvasRef.current; const context = canva.. 2023. 9. 8. [Git] git stash 사용해서 하던 작업 저장하고 다시 꺼내기 목차 1. git stash로 임시 저장하기 2. git stash list로 저장된 내용 확인하기 3. git stash apply로 저장된 내용 불러오기 💡git stash 사용해서 하던 작업 저장하고 다시 꺼내기 💡 VS code에서 작업하고 있던 브랜치가 아닌 다른 브랜치에서 작업해야하는 경우가 있다. 현재 작업하고 있던 브랜치에서 변경된 내용을 커밋하기엔 애매하고, 다른 곳에 복사해두기엔 변경 내용이 많은 경우 곤란하다. (*커밋하기 애매한 이유: "커밋"이라는 과정은 문제없이 작동하는 코드에 대해서만 진행) 이 경우 로컬 저장소에서 임시로 저장할 수 있는 명령어가 바로 git stash이다. 1. git stash로 임시 저장하기 git stash를 사용하여 저장하면, 스택(Stack) 형식으.. 2023. 7. 25. [React] useRef에 대한 이해와 특정 DOM 조작 (부제: useRef로 특정 DOM 선택) 목차 1. 브라우저에서 Javascript의 존재 이유는 DOM 조작이다. 2. Javascript로 특정 DOM을 선택하는 방법은? 3. React에서는 특정 DOM을 어떻게 조작하는가? 4. React의 가상 DOM과 상호 작용하며 실제 DOM 조작하기 4-1. useRef 예제: useRef와 useState 함께 활용 5. useState와 useRef의 실질적인 차이점은? useRef에 대한 이해와 특정 DOM 조작 (부제: useRef로 특정 DOM 선택하기) (* 이해의 흐름을 바탕으로 작성한 글이기에 지식을 뽑기보다 천천히 정독함을 권장해드립니다. ) 필자는 useRef가 useState와 useEffect처럼 한 번에 이해되지 않았다. 드디어 이해했기에 글을 작성해본다. TODO: "특정.. 2023. 7. 18. [Browser] LocalStorage와 SessionStorage의 차이 [Browser] LocalStorage와 SessionStorage의 차이브라우저의 로컬 스토리지와 세션 스토리지에 대한 정리를 시작해보자.프론트든, 백이든 필히 질문가능한 개념이다. 바로 내가 받았던 질문이었기 때문이다. "혹시 LocalStorage와 SessionStorage의 차이를 아시나요?" 먼저, 차이를 알고자한다면 이들의 공통점이 있다는 얘기이다.LocalStorage(로컬 스토리지)와 SessionStorage(세션 스토리지)의 공통점은 웹 브라우저에 데이터를 저장하는데 사용하는 객체이다.이 둘의 차이점은 LocalStorage(persistent)와 SessionStorage(temporary) 이다. LocalStorage(로컬 스토리지)은 사용자 데이터 유지 가능하고, 탭 공유도 .. 2023. 7. 10. [React] React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 상태가 바뀌는가? Q. React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받을 때, 상태가 바뀌는가? 면접에서 이런 질문을 받는다고 생각해보자. 이 질문의 답변부터 얘기하자면, 💡 React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 일반적으로 상태는 자동으로 변경되지 않는다. (하지만, 참조 형식의 객체를 다룰 때는 참조의 동등성을 비교할 수 있다.) Why? 왜 상태가 변경되지 않는가? React에서 상태의 변경 여부는 참조가 아닌 값의 동등성(equality)을 기준으로 판단된다. 상태를 업데이트할 때, setState 또는 useState를 사용하는 경우 React는 이전 상태와 새로운 상태의 값을 비교한다. 이를 통해 React는 변경된 상태만 업데이트하고, 변경되지 않은 상태는 무.. 2023. 6. 21. [Intellij] .(점)으로 구분되는 디렉토리 구조 - Compact Middle Packages 해제 Spring 새내기로서 Spring의 파일 구조를 익히기 위해 일단 계층별 디렉토리 구조를 살펴보고자 했다.Intellij에 익숙하지 않는 필자... 디렉토리 만드는 것부터 헤매는 모습을 보았다.Intellij 폴더 만드는 법1. 마우스 오른쪽 클릭2. New > Package.(점)으로 구분되는 디렉터리 구조 해제하는 법그런데 여기서 문제점은 폴더별 구조를 나누기 위한 작업을 하려고 했는데 아래 폴더로 만들어지지 않고다음과 같이 .(점)으로 구분되게 끔 만들어지는 것이다. 해결방법은 프로젝트 윈도우 우측 상단에 보이는 톱니바퀴 세팅을 누르고, Compact Middle Packages 세팅을 해제해주면 디렉터리 구조가 풀어진다. 하지만, 이 경우 프로젝트 규모가 커지면 불편해질 수 있기 때문에 S.. 2023. 6. 12. 이전 1 2 3 4 5 다음
