반응형 전체 글20 React useEffect와 useLayoutEffect 차이점 react에서 많이 사용되는 기본 훅인 useEffect와 useLayoutEffect의 차이점에 대해서 알아보려고 한다. 기본적으로 useEffect의 기능은 화면이 렌더될 때 디펜던시 항목의 내용이 변경되었으면 useEffect의 내부의 내용을 실행시키는 기능을 한다. 아무것도 없는 공란일 경우는 처음 렌더될 때 한번 만 수행하게된다. 위의 기능은 useLayoutEffect도 동일하다고 봐도 무방하다. 그렇다면 무슨 차이가 있는걸까? 코딩되는 내용도 이름만 다르고 사용되는 방식은 아래와 같이 동일하다. 코드작성 import { useEffect, useLayoutEffect } from 'react'; useEffect(()=>{ doFunc(); }, [dependecy]); useLayoutEf.. 2023. 11. 26. 크롬에서 개발자도구 분리하기 크롬에서 개발자도구를 사용하다가 환경이 바뀌어서 원래 쓰던 모양과 달라졌는데 설정부분이 눈에 확 띄지 않아 어렵다. 개발자도구 창을 분리하는 방법을 알아보려고 한다. . 개발자 도구 분리하기 혹자는 위와 같이 결합되어 있는 형태가 개인적으로 답답하게 느껴져서 분리를 하고 듀얼모니터에서 보는 형태로 작업을 주로 한다. 위 화면에서 세로로 된 ...을 클릭하면 위처럼 메뉴가 내려오고 Dock side 부분에서 첫번쨰 창 두개가 포개져있는 아이콘을 누르면 창 분리가 되고 개발자 도구 창을 별도로 사용 가능하게 된다. 자주 건드릴일 없는 부분이긴 하지만 그렇기 때문에 더 생각이 안나는 곳이기도 하다. 2023. 8. 17. Figma ON/OFF 컴포넌트 만들기 Figma를 사용하면 커뮤니티에 다양한 컴포넌트들이 올라와있다. 사용해보면서 컴포넌트 하나를 가져다 놓고 디자인을 선택해서 모양을 바꾸는 기능을 한번쯤은 접해봤을 것이다. 그런 컴포넌트를 직접 만드려면 어떻게 해야하는지 알아보겠습니다. 컴포넌트 Variants 목차 1. 예시 2. 만드는 방법 3. 총평 추천글 위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 예시 컴포넌트 예시이다. 아래처럼 컴포넌트명 하나에 여러개의 컴포넌트 들이 들어있고 Property 항목을 선택하여 내부 컴포넌트를 골라서 선택하면 해당되는 컴포넌트로 바꿔 사용할 수 있다. 만드는 방법 순서는 간단하다. 컴포넌트로 엮을 것들을 제작한다 같이 선택한 후 Design탭의 Components항목에서 Combine as variants.. 2023. 8. 11. 앤커 사운드코어 VR P10 무선 이어폰 오늘 소개할 제품은 pc, 스위치, 오큘러스 등에 전용 리시버를 연결하여 사용할 수 있는 무선 이어폰이다. 사운드코어 VR P10 목차 1. 구매 2. 개봉 3. 실물 4. 사용 후기 5. 총평 위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 구매 구매는 해외배송을 구매를 진행하였다. 일반 구매보다 5, 6만 가량 차이가 나서 해외구매가 좋아보였다. 하지만 해외배송의 특성상 7월 18일에 구매하고 8월 5일에 받을 수 있었다. 18일 가량 소요됬다. 개봉 내부 구성품은 이어폰과 케이스, 그리고 전용동글과 설명서, 이어캡 3종류와 충전케이블이 있습니다. 실물 제품 사진이다. 케이스랑 이어폰은 하얀 톤으로 깔끔한 이미지를 주었다. 그리고 케이스 상단에 움푹 들어간 부분에 자석으로 전용 동글이 부착된다고 .. 2023. 8. 8. VS Code CSS 찾기 확장프로그램 오늘은 VS Code에서 CSS, 즉 class의 위치를 찾아주는 유용한 확장 프로그램에 대해 써보려고한다. CSS의 위치를 찾아주는 CSS Navigation 이라는 확장 프로그램이다. frontend 작업을 하다보면 복잡한 폴더구조와 무수히많은 class에 시달리는 경우를 만나봤을 것이다. 그래서 이 확장프로그램은 class가 어떤 css 파일에서 어떤내용을 참조하고 있는지를 일반 함수들을 쫒아갈 때 처럼 도와준다. CSS Navigation 목차 1. 설치하기 2. 사용법 3. 사용예시 4. 아쉬운 점 5. 총평 추천글 위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 설치하기 설치하는 방법은 간단하다. VS Code 확장 프로그램에서 CSS Navigation을 검색한 후 설치하면 된다. htt.. 2023. 8. 4. VS Code 단축키 정리 IDE 단축키 정리, IDE를 사용하면서 자주 사용하는 단축키를 정리하고, 유용한 단축키 싸이트를 소개하려고 한다. VS Code 자동정렬 : Ctrl + K + F 전체 자동정렬 : Alt + Shift + F 파일 찾기 : Ctrl + P 명령어 커맨드 : Ctrl + Shift + P 전체찾기 : Ctrl + Shift + F 전체바꾸기 : Ctrl + Shift + H html파일 기본양식 채우기 : ! + Tab 드래그 했던 단어들과 같은 단어가 모두 드래그(동시수정) : Ctrl + D, Ctrl + Shift + L 터미널 열기 : Ctrl + ` 라인 이동 : Ctrl + g IntelliJ 전체찾기 : Ctrl + Shift + F 전체바꾸기 : Ctrl + Shift + R 파일 찾기 .. 2023. 8. 2. 이전 1 2 3 4 다음 반응형
