프론트엔드
-
VSCode html 저장 시 자동정렬 되게 하기, 들여쓰기 사이즈 4칸 -> 2칸으로 수정하기프론트엔드 2022. 4. 19. 19:16
1. VSCode 자동 정렬 단축키 (Mac) : Option + Shift + f 2. VSCode html 저장 시 자동정렬되게 하기 : 매번 단축키를 눌러서 정렬하기는 귀찮고 저장할 때마다 자동정렬을 하고 싶어서 찾아봤다. 설정에서 format on save를 켜고, html default formatter를 Prettier -> html-language-features 로 변경한다. settings.json : "editor.formatOnSave": true, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, Prettier를 default formatter로 사용하면, format on save가 작동되지 않는다..
-
정적 웹 퍼블리싱 서비스 Surge로 리액트 어플리케이션 배포하기프론트엔드 2022. 3. 26. 23:31
https://surge.sh/ 1. 먼저 yarn build, npm run build 등 빌드 명령을 실행해서 프로젝트 빌드를 수행한다. 2. 빌드 결과 생성된 디렉토리에서 npx surge (또는 npm install --global surge && surge)를 실행한다. 3. surge 실행이 처음이라면 로그인하거나 계정을 만들라고 나온다. CLI에서 이메일과 패스워드를 입력하는 것만으로 간단하게 계정을 생성할 수 있다. 4. project path는 잘 설정되어 있을 것이기 때문에 넘어가고, domain 부분을 입력해주면 된다. (domain도 특별히 상관없다면 이 단계도 그냥 넘어가도 됨. surge에서 제공하는 랜덤 도메인으로 배포가 된다) myapplication.surge.sh 또는 h..
-
[Webpack] exports is not defined 에러 해결방법 정리 (JS)프론트엔드 2022. 3. 25. 23:56
리액트 + JS 프로젝트에서 웹팩을 번들러로, 바벨을 트랜스파일러로 사용하는데 exports is not defined 에러가 발생했다. ESModule 시스템을 지원하지 않는 브라우저를 위해 Babel이 import/export문을 require/exports문으로 변환하게 되는데, 변환 후에 exports문을 인식하지 못해서(CommonJS 문법을 해석하지 못해서) 발생한 에러인 것 같다. 내가 해결한 방법 나는 ESModule 시스템을 지원하는 브라우저만 지원하도록 설정해서 해결했다. (IE 제외하고는 대부분 지원되기 때문) webpack.config.js loader: 'babel-loader', options: { presets: [ '@babel/preset-react', [ '@babel/p..
-
[Webpack] regeneratorRuntime is not defined 에러 해결프론트엔드 2022. 3. 24. 23:21
웹팩 설정이 다 된 줄 알았는데 async, await 문법을 사용하니까 regeneratorRuntime is not defined 에러가 발생했다. recoil에서 내부적으로 aysnc/await을 사용하는 코드가 있는건지 recoil을 사용할 때도 같은 이슈가 발생했다. 1) 바벨 transform-runtime 플러그인과 바벨 런타임을 설치하고 (yarn) yarn add -D @babel/plugin-transform-runtime @babel/runtime (npm) npm i -D @babel/plugin-transform-runtime @babel/runtime 2) webpack config에 플러그인을 추가해서 해결할 수 있었다. module.exports = { ... module: ..
-
ESLint, Prettier 에러 종류와 해결방법 (with CRA)프론트엔드 2022. 3. 1. 21:56
1. 에디터에서 eslint, prettier 적용(에러 표시, 자동 설정 등)이 안 되는 문제 : ESLint, Prettier 확장 툴이 설치 되었는지 확인하기 VSCode 설정이 제대로 됐는지 확인하기 VSCode 설정이 되어있는데도 문제가 발생한다면 eslint, prettier 설정 파일의 이름을 잘못 작성했거나 설정 파일 내용에 잘못된 문법, 오타 등이 있는지 확인 (나는 .prettierrc.json이 아니라 prettierrc.json으로, 앞에 .을 빠뜨려서 적용이 안됐었다) 2. Parsing error: The keyword 'import' is reserved eslint @babel/eslint-parser 설치 (npm i -D @babel/eslint-parser or yarn..
-
[우아한테크세미나] 시각적요소테스트자동화하기프론트엔드 2022. 2. 11. 15:51
요즘 테스트 자동화에 관심이 생겼는데 마침 우아한테크세미나에서 "시각적요소테스트자동화"를 주제로 세미나를 한다고 해서 참석해서 열심히 들어봤어요! 진짜 흥미롭게 설명 잘 해주시고 배울 것도 많은 세미나였습니다. 아래는 세미나를 들으면서 개인 복습 겸 기록용으로 정리한 내용입니다. 혹시 이렇게 블로그에 올리는 게 문제가 된다면 댓글 남겨주세요..! 테스트의 정의 테스트 : 널리 사용되기 전에 어떤 것의 품질, 성능, 신뢰성을 확립하기 위한 절차 소프트웨어 테스트 : 소프트웨어가 널리 사용되기 전에, 소프트웨어의 품질, 성능, 신뢰성을 확립하기 위한 절차 소프트웨어의 품질, 성능, 신뢰성 판단 기준 (특히 프론트엔드에서) : 화면이 잘 그려지는가 ? 기능이 잘 동작하는가 ? 테스트 자동화를 시도한 계기와 과..
-
[VSCode] VSCode 유용한 단축키 정리프론트엔드 2022. 2. 10. 17:56
visual studio code에서 유용하게 쓸 수 있는 단축키들을 찾아서 정리해봤다. 설정에서 따로 활성화 하지 않아도 기본으로 사용할 수 있는 단축키들이다. Ctrl + d : 다음 선택하기. 누를 때마다 선택한 단어와 같은 단어가 하나씩 선택됨. Ctrl + Shift + L : 다중 선택. 선택한 단어와 같은 단어가 모두 선택됨 Ctrl + / : 한줄 주석 추가하기 Ctrl + l(L) : 커서가 있는 행 선택하기 Ctrl + Enter : 커서 아래에 행 삽입 Ctrl + c : 커서가 있는 행 복사 Ctrl + x : 커서가 있는 행 삭제 (velog.io/@seomoon에서 이동한 글입니다. )