성장을 위한 기록

리액트 반응형에 사용하기 좋은 라이브러리 react-responsive CSS를 통해 반응형을 구현하는 방법인 @media [타입] [사이즈 지정] { css }이런 방식으로 작성 할 수 있을 것이다. 물론 이 방법으로도 모든 반응형을 구현 할 수 있지만, 이번에는 responsive라는 라이브러리를 사용해봤다. react-responsive 이 친구의 장점이 무엇이냐? react-responsive에서 제공하는 useMediaQuery 훅이다. 해당되는 화면 크기에 들어오면 true 값을 반환한다. 해당되지 않는다면 당연히 false를 반환한다. 사용 방법은 간단하고 다양한다. 아래 참고할 다른 분들의 블로그 링크를 확인하여 편한 방법을 사용해보자. const isDesktopOrLaptop = use..

문자열이 정해진 영역 넘칠 때... 표시하기 ... p { display: -webkit-box; width: 100%; height: 20px; white-space: normal; text-align: center; -webkit-line-clamp: 1; // ...표시할 줄 -webkit-box-orient: vertical; overflow: hidden; // 영역 밖은 숨기기 text-overflow: ellipsis; font-size: 14px; font-weight: 600; } 여기서 -webkit-line-clamp: 1만 변경하면 원하는 줄에서 ...표시를 할 수 있다. 너비와 높이를 정해주는 것은 텍스트가 늘어남에 영역이 넓어져 모든 글자가 표현되는 걸 방지하기 위해 지정해줬다...

React 새로고침 시 경고창 띄우기 본론으로 넘어가기 전 완벽한 내용이 아님으로 다른 자료를 더 찾아보고 활용해 보시는 걸 추천드립니다. (혹시나 보시는 분이 있을까바.... ) 노션 등의 페이지를 나갈 때 변경된 사항이 저장되지 않는다는 확인 문구가 뜨는 것을 본적이 있을 것이다. 그것과 비슷하게 나도 글을 쓰는 도중에 새로고침을 하면 변경 될 수 있다는 안내 문구를 띄우고 싶었고, 그 방법으로 react-beforeunload를 찾았다. 사용 방법 사실 이 새로고침을 막을 수 있는 방법은 다양할 것 같다. onbeforeunload라는 이벤트도 존재하고 키보드 이벤트로도 막을 수 있을 것 같은데, 앞서 언급한 라이브러리를 이용하면 쉽게 구현할 수 있다. 라이브러리 설치 npm install reac..

React route에 Link에서 데이터 전송하기 오늘은 React에서 Link에 데이터를 전송하는 방법을 알아봤다. 데이터 전달이 가능하다는 것은 알았지만 마땅히 사용해볼 일이 없어서 찾아보지는 않았고, 오늘 사용하게 되서 이 기회에 한 번 정리 해보려고 한다. 우선 react에서는 a태그를 사용하지 않고서 왜 Link로 연결을 할까? 내가 알기로는 a태그로 연결 할 경우 새로 고침이 일어나기 때문에 Link로 a태그를 대신한다고 알고 있다.(브라우저에서 검사해보면 Link는 a태그이다.) 다시 본론으로 돌아가 Link를 사용해서 데이터를 전달하기 위 코드를 예시로 들어보면, state안에 데이터를 담아 전달하게 된다. 위 예제에는 pathname만 있지만, 공식 문서를 보면 search, hash도..

textarea 줄 바꿈 표현하기 오늘 과제 view를 간단하게 작성하면서 생각해보지 못한 뜻밖에 문제를 발견했다. 바로 태그에 줄을 바꿔 입력해도 한 줄로 표시되는 문제었다. 알아본 바로는 textarea 값을 저장할 때 줄바꿈은 자동으로 \n으로 구분이 된다고 한다. 하지만 react에서는 (js전반적으로 그러는지는 확인하지 못했다) 이 \n을 처리하지 않고 한 줄로 출력이 된다. 그래서 해결한 방법이 splite, map을 이용한 수동 줄바꿈이다. const text = "textarea로 받은 텍스트 값 저장" return ( .... { text.splite("\n").map(v=>{ return({v} } } 코드는 간단했다. 중간에 껴있는 "\n"을 기준으로 splite하여 배열을 만들고 순..

Redux-toolkit은 왜 나왔나? Redux-toolkit은 새로운 개념이 아닌 redux로직을 작성하는 하나의 방법이다. 그럼 기존의 redux와는 어떤 차이가 있을 까? 사람들이 말하길, 그리고 사용하면서 느낀 바로는 redux는 3가지 문제점이 있다. redux store 환경이 복잡하다ㅏ. redux를 유용하게 사용하려면 많은 패키지를 사용해야한다. 하나의 일을 수행하기 작성하는 코드가 너무 많다. 이런 문제점을 해결하기 위해 toolkit이 나왔고, toolkit을 이용하여 코드를 단순하고 간단하게 작성할 수 있다. toolkit API configureStore() import { configureStore } from "@reduxjs/toolkit"; import thunk from ..

React.memo 컴포넌트가 렌더링 한 뒤, 이전 렌더링 된 결과와 비교하여 DOM 업데이트를 결정한다. 사용방법 const Mycomponent = React.memo((props)=>{return(렌더링 코드)}) props가 동일할 때 같은 결과를 렌더링 한다면 React.memo를 통해 불필요한 렌더링을 방지 할 수 있다. 즉 같은 props를 받는다면 레더링 과정을 건너뛰고 가장 최근에 렌더링한 결과를 보여준다. 다만, props의 변경 여부만 확인하기 때문에 내부에서 useState등을 사용할 경우 상태가 변경되면 렌더링된다. 또한 props를 shallow compare로 비교하기 때문에 object에 불변성을 고려해야 한다. useMemo 사용방법 const memoize = useMem..

MPA방식으로 HTML을 작성할 때 우리는 페이지별로 title과 meta태그 og를 작성했다. 하지만, react는 SPA방식으로 HTML이 하나만 존재한다. 그럼 우린 하나의 meta태그만 사용가능 한가? 당연히 아니다 ! 다른 JS코드로 값을 변경하던지 우리는 react-helmet이라는 패키지를 이용 할 수 있다. 사용 방법 설치 yarn add react-helmet || npm install --save react-helmet 사용하기 import {Helmet} from "react-helmet" page one 방식으로 컴포넌트에 meta 태그를 작성할 수 있다. (사실 작성보다는 변경이라 생각하는게 맞는 것 같다.

JS의 동시성과 EventLoop 자바스크립트는 단일 스레드기반 언어이다. 이 말은 한번에 하나씩 작업을 한다는 의미이고 쉽게 표현하지면 명령을 수행하는 일꾼(?)이 하나만 있다는 뜻이다. 하지만 우리가 웹서핑을 하다보면 서버에 요청을 할 때에 렌더링 동작을 멈추지 않는다. 이는 비동기 콜백이 있기 때문이다. 다르게 바라보면 이벤트 루프의 개념이 있다. JS는 혼자 독립 실행되는 것이 아니라 브라우저를 통해 실행된다. 그리고 브라우저에서 JS를 실행할 때에는 이벤트 루프라는 걸 기반으로 실행한다. 요약해보면 JS는 기본적으로 한번에 하나의 일만 처리하지만, 비동기 콜백으로 동시에 작업하는 것처럼 보인다. 이를 동시성이라 하지만 사실 병렬로 완전 동시에 실행하는 것은 아니다. 자바스크립트 엔진 아마 가장 ..