[React] React build 시 sourcemap 제거하기

왜 제거해야 하나요? create-react-app으로 React 프로젝트를 빌드하여 배포하는 경우, 기본적으로 webpack에 의해 번들링 된 파일과 해당 파일에 대응되는 sourcemap이 생성됩니다. 다음은 결과 예시이며, *.css.map과 *.js.map 파일이 sourcemap입니다. 📁build ├── index.html ├── . . . └── 📁static ├── 📁css │ ├── main.58ba45b2.chunk.css │ └── main.58ba45b2.chunk.css.map 👈 └── 📁js ├── 2.70d883b6.chunk.js ├── 2.70d883b6.chunk.js.LICENSE.txt ├── 2.70d883b6.chunk.js.map 👈 ├── main.c855ce..

• format_list_bulleted Frontend/React
• · 2023. 7. 11.
• textsms

[에러] timeago 라이브러리 오류

timeago 설치 후 아래와 같은 WARNING 발생 실행하는데 문제는 없으나 해당 WARNING이 왜 발생하는지는 모르겠음 Compiled with warnings. Failed to parse source map from '/Users/wonny/Documents/dev/KDT3-react-toyproject/react-youtube-clone/node_modules/timeago.js/src/format.ts' file: Error: ENOENT: no such file or directory, open '/Users/wonny/Documents/dev/KDT3-react-toyproject/react-youtube-clone/node_modules/timeago.js/src/format.ts' ..

• format_list_bulleted ___/에러
• · 2023. 7. 11.
• textsms

[React] React 컴포넌트 라이프사이클 및 메소드

컴포넌트 라이프사이클 라이프사이클 메서드는 총 9가지가 있다. 아래와 같은 접두사가 붙어있는 경우도 있다. Will + ~ : 어떤 작업을 작동하기 전 실행 Did + ~ : 어떤 작업을 작동한 후 실행 🔍 리액트 컴포넌트의 라이프사이클 마운트(Mount) : DOM이 생성된 후 웹 브라우저에 나타나는 것. 업데이트(Update) : 컴포넌트에서 props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트 리렌더링 때, this.forceUpdate로 강제 렌더링할 때 업데이트 됨. 언마운트(Unmount) : 마운트의 반대 과정. DOM에서 컴포넌트를 제거하는 과정 * 생명 주기 React의 생명 주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어..

• format_list_bulleted Frontend/React
• · 2023. 7. 5.
• textsms

M1에서 Rosetta로 터미널 열기

Rosetta로 터미널 열기 arch -x86_64 명령어를 매번 붙이는 것은 귀찮았다. 그렇다면 아예 터미널을 Rosetta를 사용해 인텔 버전으로 열어버린다면? Rosetta로 터미널(혹은 iTerm) 여는 방법 터미널(혹은 iTerm) 아이콘 우클릭 -> "정보 가져오기" "Rosetta를 사용하여 열기" 체크 arch 명령어 실행시 i386이 뜬다면 완료! 원래는 arm이 떠야 맞는 건데 Rosetta를 통해 i386용 터미널을 열어서 저렇게 출력이 되는 것이다. 이렇게 되면 모든 명령어 앞에 굳이 arch 명령어를 붙여주지 않아도 된다. 장점 인텔 프로세서용 프로그램을 자주 사용해야 할 때 추가적인 명령어 없이 편리하게 사용할 수 있다. 단점 Rosetta는 어쨌든 에뮬레이터이다. 작은 프로젝트..

• format_list_bulleted iOS
• · 2023. 6. 29.
• textsms

Figma UI refernce 링크 모음

https://notefolio.net/ https://uidesigndaily.com/ https://dribbble.com/tags/figma%20editor https://www.designsori.com/zero/ https://www.bestfolios.com/home https://medium.com/startup-grind/i-got-rejected-by-apple-music-so-i-redesigned-it-b7e2e4dc64bf https://todaygnimaerd.tistory.com/32

• format_list_bulleted UI UX/Figma
• · 2023. 6. 29.
• textsms

[CSS] 블럭요소와 인라인요소

* 블럭요소(block element)와 인라인요소(inline element)란? - 블럭요소 : 하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들입니다. - 인라인요소 : 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들입니다. 행 안의 일부분이라고 보시면 됩니다. 텍스트레벨요소라고도 합니다. 블럭요소(block element)와 인라인요소(inline element)의 종류 - 블럭요소 : ,,~,,,,,,,,,,등 - 인라인요소 : ,, ,,,,, 특징 및 주의점 - 블럭요소는 내부에 블럭요소와 인라인요소를 포함할 수 있습니다. 인라인요소는 내부에 블럭요소를 포함할 수 없습니다. - 블럭요소들 중에..

• format_list_bulleted Frontend/css
• · 2023. 6. 29.
• textsms