전체 글
-
[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: ..
-
CPP Module 00 개념 & 서브젝트 정리42Seoul 2022. 3. 23. 07:20
개념 Namespace 어떤 대상(함수, 객체 등)의 소속을 지정해준다. 같은 이름이더라도 소속된 namespace가 다르면 다른 대상으로 취급한다. 범위 지정 연산자 (Scope Operator) className:: - 인스턴스를 생성하지 않고 클래스 멤버 변수 및 멤버 함수에 접근할 때 class Name { public: void Print(); } void Name::Print() { ... } 다음과 같이 사용할 수 있다. namespaceName:: - namespace 영역에 있는 변수 / 함수를 호출할 때 사용할 수 있다. :: - 전역 함수, 전역 변수를 지역 변수와 구분하여 사용할 수 있게 한다. Class, member function CPP은 멀티 패러다임 언어이지만, 일반적으..
-
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에서 이동한 글입니다. )
-
[Web] DNS란?프론트엔드 2022. 2. 10. 17:53
DNS는 Domain Name System 또는 Domain Name Server를 일컫는다. 인터넷은 서버들을 구분하기 위해 IP주소를 기본 체계로 이용하는데, IP주소는 숫자로 이루어진 조합이기 때문에 사람이 기억하고 사용하는 데에 어려움이 있다. Domain Name System은 이러한 IP주소(예: 192.0.2.44)를 사람이 기억하기 쉬운 문자열 형태로 이루어진 도메인 네임(예: www.amazon.come)으로 변환하는 역할을 하며, Domain Name Server는 이런 역할을 하는 서버 컴퓨터를 말한다. 처음 네트워크가 등장했을 때는, 사용자 PC의 Hosts 파일에 다른 사용자들의 IP정보들을 기록해서 사용했다. 그러나 네트워크가 방대해지면서, 사용자 PC의 Hosts 파일에 수없이..