본문 바로가기

전체보기

Delete `␍` prettier/prettier 에러 해결 방법 (VS Code) Delete `␍` prettier/prettier CR을 지워라. CR이 뭐야? CR : Carriage Return (\r) LF : Line Feed (\n) 개행 문자와 관련된 에러이다. 윈도우에서는 CRLF, 유닉스/맥에서는 LF를 사용한다. 문제가 생긴 파일의 CRLF에서 CR을 삭제한 -> LF 로 바꿔주면 된다. 하지만 이 방법은 파일마다 적용해줘야해서 번거롭다. .eslintrc.js 에서 설정을 추가해준다. rules: { "prettier/prettier": [ "error", { endOfLine: 'auto', } ], }, 그럼 이제 프로젝트가 잘 실행됨 ㅎ_ㅎ 더보기
[한 권으로 읽는 컴퓨터 구조와 프로그래밍] 조너선 스타인하트 - 3 3장. 메모리와 디스크의 핵심: 순차 논리 - 컴퓨터는 비트를 어떻게 기억하는가 조합 논리는 입력의 현재 상태만을 다룬다. 하지만 조합 논리만으로는 상태를 기억해둘 수 없다. 때문에 순차 논리라는 것을 통해 입력의 현재 상태와 과거 상태를 함께 고려할 수 있도록 한다. 👉🏻 시간 표현과 상태 기억 컴퓨터에게는 주기적인 전기 신호가 필요하다. 과거에서부터 현재까지 어떤 방식을 사용했는지 알아본다. 발진자 인버터의 출력을 입력에 연결한다. 이를 피드백이라고 한다. 이는 마치 마이크와 스피커를 가까이 위치시킬 때 생기는 현상과 같다! 출력이 0과 1 사이를 진동하게 된다. 이 발진자를 효율적으로 만드는 방법은 크리스털을 활용하는 것이다. 크리스털 발진자는 전자적인 단극쌍투 스위치를 사용해 크리스털에 전기를 가.. 더보기
[React] Emotion 태그, 브라우저에서 보기 쉽게 Label Format 설정해주기 emotion 으로 css와 styled를 적용하면 크롬 웹에서 다음과 같이 알수없는 이름들이 뜬다 ! 이를 보기 편하게 labelFormat 해줄 수 있는 babel 설정이 있다. GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition 👩‍🎤 CSS-in-JS library designed for high performance style composition - GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition github.com .babelrc { "pre.. 더보기
[React] Emotion 적용하기 2 - @emotion/react (css-in-js) 👉🏻 설치 // 프레임워크에 구애받지 않는 가장 베이직한 패키지 (VanillaJS 등에서 사용) npm i @emotion/css // react 사용자에게 권장되는 패키지 npm i @emotion/react yarn add @emotion/react 👉🏻 CSS Prop Emotion 사용해서 css-in-js 스타일링을 하려면 CRA의 경우 코드에 /** @jsx jsx*/를, 아닐 경우 .babelrc에 아래와 같이 설정을 추가해준다. - CRA Project /** @jsx jsx */ import { css , jsx } from '@emotion/react'; const color = 'darkgreen'; render ( ) - Set .babelrc { "presets": ["@emot.. 더보기
[React] Emotion 적용하기 1 - @emotion/styled (Styled Components) 🤷🏻‍♀️ 일반 CSS를 사용하지 않고 Emotion을 사용하는 이유는? JavaScript로 CSS 스타일을 작성하기에 편하게 설계되었기 때문이다.! (css-in-js) 🤷🏻‍♀️ 그렇다면 Emotion 뿐인가? No! [styled components] 라는 라이브러리도 있음. npm trends에서 지난 6개월간 다운로드횟수를 살펴보니 사용률은 emotion이 좀 더 높았다. @emotion/styled을 먼저 알아보자. 👉🏻 설치 // react에서 스타일 API로 직접 태그를 만들기 위해 사용하는 패키지 npm i @emotion/styled yarn add @emotion/styled 👉🏻 설정 emotion을 적용하기 위해서는 babel의 설정을 바꿔주어야하는데, 만약 react를 CRA .. 더보기
Webpack, Babel..... CRA가 있는데 꼭 내가 셋팅해야 할까?! 지난번까지 Webpack, Babel의 기본적인 코드들을 직접 세팅해보며 React 앱의 초기설정을 마쳤다. 일단 나는 기존에 진행중이던 프로젝트를 CRA(Create React App)으로 생성했었다. 처음 시작할 때는 늘 그렇듯 아무 문제가 없었다. 하지만, 실전 리액트 프로그래밍의 책 내용을 인용하면 리액트로 개발을 하다 보면, 개발자 대부분이 바벨 설정 때문에 애를 먹는다. 보통 인터넷에 떠도는 바벨 설정을 무분별하게 가져오기 쉽다. 그 코드는 한동안은 잘 돌아가는 듯 보이지만 예상치 못한 상황에서 문제가 발생하기 마련이다. 그리고 이 상황은 나에게도 일어났다. (하지만... 어쩌면 일어나지 않았을지도 모른다..!) 이유를 알 수 없는 에러가 발생했고, 내가 이것저것 온갖 설정을 막 건드렸기 때문.. 더보기
Babel과 Webpack의 내부 동작 이해하기 - 4 webpack [실전 리액트 프로그래밍] webpack을 설치해보자! 👉🏻 webpack 실행해보기 웹팩은 웹에 들어가는 여러 가지 리소스를 사용자에게 전달하기 좋게 하나의 번들 형태로 만들어준다. mkdir webpack-init cd webpack-init/ npm init -y { "name": "webpack-init", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } npm install webpack webpack-cli webpack-cli.. 더보기
Babel과 Webpack의 내부 동작 이해하기 - 3 polyfill [실전 리액트 프로그래밍] polyfill을 설치해보자! > 바벨과 폴리필 JS의 최신 기능을 모두 사용하면서, 오래된 브라우저에서도 최신 문법을 지원하려면 바벨로 코드 문법을 변환하는 동시에 폴리필도 사용해야 한다. 폴리필은 런타임에 기능을 주입하는 것을 말한다. 기능이 존재하는지 검사하여 없는 경우에만 주입한다. 바벨만으로는 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 없다. 폴리필을 별도 설정해줘야 한다. > 모든 폴리필 사용하기 import '@babel/polyfill'; module.exports = { entry: ['@babel/polyfill', './src/index.js'], //... }; 웹팩 사용하는 경우는 entry 속성에 추가한다. 이 경우 필요하지 않은 폴리필까지.. 더보기

티스토리툴바