본문 바로가기

전체 글62

useLayoutEffect useRef를 좀 더 공부하다 useLayoutEffect를 보게 되었다. 처음 보는 훅이어서 찾아보게 되었고, 이 내용을 정리해보려 한다. ✔️ useEffect와 useLayoutEffect의 차이 useLayoutEffect는 useEffect와 구문이 똑같기 때문에 다른 점이 무엇인지 구분하는 것이 중요하다. 가장 큰 차이는 useEffect는 비동기적으로, useLayoutEffect는 동기적 실행된다는 것이 다르다. useEffect : 아래 그림과 같이 컴포넌트들이 render와 paint 된 후 비동기적으로 실행된다. paint 된 후 실행되어 리렌더링 되기 때문에 사용자는 화면의 깜빡임을 볼 수 있다. useLayoutEffect : useLayoutEffect는 화면에 paint가 되기.. 2021. 11. 24.
useRef & scrollIntoView 헤더를 클릭했을 때 해당 컴포넌트로 이동하는 것을 구현하고 싶었다. 그래서 useRef와 scrollIntoView 사용하여 구현하였다. 설명보다는 간단히 기록만 하고 넘어가려 한다. ✔️ useRef 특정 DOM을 선택해야 할 때, vanilla JS에서는 getElementById, querySelector 같은 DOM Selector를 사용했다면, 리액트의 함수형 컴포넌트에서는 useRef를 사용한다. 그리고 useRef로 관리하는 변수는 값이 변경되어도 컴포넌트를 리렌더링 시키지 않는다는 특징이 있다. ✔️ element.scrollIntoView() 특정 엘리먼트가 있는 위치로 스크롤을 이동시킬 수 있다. 아래와 같이 세 가지 방법으로 사용할 수 있는데 보통 option 객체를 넣어서 사용한다... 2021. 11. 20.
[17NOV, 2021] TIL TIL은 아직 블로그에 쓰는 게 편한 것 같다 힣🌝 ✔️ react-router-dom Switch 오류 포트폴리오로 사용할 웹을 만들어 놓고 싶어서 오늘 레이아웃과 라우터를 나누고 있었는데, Switch 가 안돼서 찾아보았더니 react-router-dom이 버전 6으로 업그레이드되면서 바뀐 것이었다. Switch는 Routes로 바뀌고 component는 element로 바뀌어서 수정해주니 되었다. 공식문서 import { Route, Routes } from "react-router-dom"; import Main from "components/Main"; import Project from "components/Project"; function App() { return ( ); } ✔️ wire.. 2021. 11. 18.
[14NOV, 2021] TIL 돌아오는 주부터는 TIL을 github에 작성할까 한다..! TIL 레포를 만들어놓고 안 쓰고 있었던 걸 발견했다 :) 그래도 자세히 기록해야 할 것은 블로그에 계속하고 불편하면 블로그로 돌아오는 것으로..! ✔️ 컴퓨터 개론 예전에 CS50강의를 들었는데 짧아서 아쉬웠었다. 그래서 이런 내용도 더 공부하고 싶어 외국 강의를 찾아들었었다. 하지만 자막 없는 영어로 들으니 강의 한 번들을 때마다 에너지 소비가 2배인 느낌이었다. 그러다 한국 대학 강의들을 볼 수 있는 곳을 찾게 되어서 보기 시작했다! 실제로 진행하는 대학 수업이고, 21년 강의도 많아서 좋고, 원하는 강의를 찾아 들을 수 있어서 좋다. 지금은 컴퓨터 개론을 듣고 있고, 다 들으면 예전부터 관심 있었던 인공지능에 대해서 한 번 들어볼 예정이.. 2021. 11. 15.
[02NOV, 2021] TIL 벌써 11월이라니! 연말이 와버렸다..! 남은 2021년도 빠샤빠샤(*•̀ᴗ•́*)و ̑̑ 오늘의 TIL은 간단히만 작성하고 canvas는 다음에 따로 작성해보려 한다! ✔️ Canvas Canvas를 저번주에 처음 사용해보았다. 노마드 코더에서 그림판 만들기를 Canvas를 활용해서 만들었고, 어제와 오늘 좀 더 찾아보면서 여러 도형들을 만들어 보았다. 신기하고 재미있었고, 아직은 기초적인 것만 해보아서 좀 더 다양한 것도 canvas를 활용해 만들어보고 싶다. ✔️ 위에서 말한 그림판 만들기를 하면서 range 타입을 처음 사용해보았다. 속성은 최솟값, 최댓값을 나타내는 min, max와 간격을 나타내는 step을 사용하였다. ✔️ redux-saga 오늘 리액트 다루는 기술을 다시 보면서 redux.. 2021. 11. 2.
Random background Image 페이지에 백그라운드 이미지가 랜덤으로 보이게 해 보았다. 대화를 하다 아이디어를 얻었고 좋은 것 같아서 만들어보았다. 새로고침 할 때마다 이미지가 바뀌며, 시간이 지나면 안내 메세지는 사라진다. (아래의 gif는 블로그 포스팅을 위해 용량을 줄여 화질이 낮다.) 그럼 오늘은 간단히 어떻게 만들었나 정리해보겠다 🎵 ✔️ Math 메서드를 이용해 랜덤 숫자 반환 우선 이미지 소스들을 배열로 모아 놓았기에 이 중에서 랜덤으로 이미지들을 선택해야했다. 그렇기에 먼저 랜덤 숫자를 구하기 위해 Math.random과 Math.floor를 사용했다. * Math.random() 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한 부동소숫점 의사 난수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있다. *.. 2021. 10. 9.
[29SEP, 2021] TIL TIL은 쓸 때마다 오랜만인 것 같다..🤭 가끔씩이라도 꼭 쓰려고 노력해야겠다..! ✔️ SCSS 파일 분할 그동안 CSS Module을 사용해서 해당 클래스 이름들이 고유하게 만들어 사용했는데 다른 방법도 있지 않을까 하고 찾아보다 @import해주는 방법도 알게 되었다. CSS Module은 scss파일 확장자를. module.scss로 해주고 스타일을 줄 해당 컴포넌트에서 import styles from"./이름.module.css"; import를 해주면 되었다. @import 방법은 스타일 파일 이름 앞에 _를 붙여(_button.scss와 같이) @import로 가져오면 된다. 그래서 나는 다른 파일들을 App.scss에 @import해주었고 스타일이 모두 잘 적용되었다. 이 방법은 clas.. 2021. 9. 29.
React i18n-next를 이용한 다국어 처리 국제화할 수 있는 react i18n-next (i18next is a very popular internationalization framework for browser or any other javascript environment)를 다국어 처리를 위해 사용해보았다. 공식문서가 잘 되어 있어서 큰 어려움 없이 사용할 수 있었다. 그래서 오늘은 i18n-next에서 내가 기억하고 싶었던 부분을 정리해보겠다. ✔️ 폴더 분리 가장 먼저 폴더를 분리해줘야 한다. 언어는 locales폴더명을 사용하기에 src -> locales -> en, kr로 폴더를 분리해 해당 언어에 맞는 json 파일을 만들었다. ✔️ init options 각 언어의 json 파일이 준비되고 init을 해주면 된다. init 옵.. 2021. 9. 16.
[09AUG, 2021] TIL 요즘 노션에 빠져서 블로깅을 잘 안 하게 되는데 그래도 노션과 블로그는 느낌이 다르고 블로깅을 할 때 좀 더 깊게 공부하게 돼서 틈틈이 TIL이라도 열심히 쓰려고 노력해야겠다!! ✔️ ?? (Nullish coalescing operator, null 병합 연산자) 오늘 유튜브를 보다 ?? 라는 null 병합 연산자를 알게 되었다. leftExpr ?? rightExpr 이렇게 표현하며, 왼쪽 피연산자가 null 또는 undefined (Nullish한 값) 일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 예제를 보면 더 쉽게 이해할 수 있다. function printMessage (text) { const message = text ?? 'Nothing t.. 2021. 8. 9.

티스토리툴바