차마시는 개발자

처음 본 issue였습니다. 그래서 빨리해야 하는데 궁금증을 버리지 못하고 파헤치기 시작했습니다.issue 설명을 보면 chrome 101부터 사용자 에이전트 문자열에서 사용할 수 있는 정보의 양이 줄어들어서 생긴 것이라고 나와있습니다. 즉 정리를 하면 라이브러리 기반 .js는 Chrome에서 더이상 사용되지 않는 navigator기능을 사용하고 있어서 문제였습니다. 주로 navigator에 관해서 설명을 하고 있는데 navigator은 브라우저에 대한 다양한 정보를 저장하는 객체라고 생각하면 됩니다. 자세한 내용은 들어가서 보시면 좋습니다. 그래서 해당 라이브러리를 update하거나 삭제해야 하는데 다시 코드를 정리하면서 문제를 해결해 보겠습니다. 다음은 stackoverflow에 해당 문제 해결이 나..

https://runebook.dev/ko/docs/cypress/-index-#Commands Cypress 7.2 한국어 runebook.dev https://docs.cypress.io/api/commands/and and | Cypress Documentation Create an assertion. Assertions are automatically retried until they pass or time out. An alias of .should() Note: .and() assumes you are already docs.cypress.io

VSCode에서 index.html(경로: /woocourse-alone/5_cypressBasic)을 Live server을 할 때 visit()에 url을 써주는 것이 헷갈렸다 그냥http://localhost:5500만 해주면 되는지 알았는데 아니다 => visit내부 url은 VSCode live Server로 실행하는 파일(index.html) 경로를 넣어줘야 한다. descirbe("Home", () => { beforeEach(() => { cy.visit("http://localhost:5500/woocourse-alone/5_cypressBasic/"); }) }) > cy.visit() 만 확인하지 말자 위의 코드와 같이만 작성해서 visit()이 잘 연결되었는지 확인하면 다음과 같이 ..

프론트 엔드 테스트를 해보기 위한 도구입니다. node용 test framework인 mocha와 assertion 라이브러리 chai를 기반으로 만들어 졌다. 우테코 코스에서 cypress가 있어 접하게 되었습니다. 기본적인 내용은 Cypress 에서 보시기 바랍니다. 실행 > 1. 설치 2. Cypress 실행 integration test 코드가 위치하는 곳 examples 폴더에 예제 파일들이 추가되어 있다. > fixtures 네트워크 응답과 같은 테스트에 필요한 정적인 데이터를 만들어 둘 수 이는 곳 cy.fixture()를 통해 사용 > plugins 플러그인(cypress lifecycle의 특정 단계에 실행할 코드 작성, 동적으로 설정 구성 등)을 작성할 수 있다. 기본으로 cypress..

우아한 테크 코스를 하면서 VSCode에서 Live Server을 같이 실행을 했는데 다음과 같은 오류가 생성되었습니다. 그래서 다음과 같이 해결하였습니다. 응답을 받기 전에 메시지 포트가 닫혔습니다. => 구글 확장 프로그램과 충돌하는 증상입니다. 크롬확장 사이트 로 가서 하나씩 하나씩 꺼보면 됩니다.

해당 오류에 대해 찾아보니 eslint(prettier)에서 발생시키는 오류라고 합니다. 즉, prettier 2.0이상 부터 endOfLine옵션이 default가 'auto'에서 'lf'로 변경되어서 발생하는 것입니다. windows 와 linux 아래에 있는 텍스트 파일의 줄 바꿈이 일치하지 않아 생기는 오류인 것 같습니다. Linux: LF Windows: CRLF https://developpaper.com/solution-to-delete-%E2%90%8Deslint-prettier-prettier-error/ 해결 1. 빨간 부분 눌러서 변경 2. .eslintrc.json 파일 추가 "rules": { "prettier/prettier": [ "error", { "endOfLine": "a..

ESlint ESLint - Pluggable JavaScript linter Customize Preprocess code, use custom parsers, and write your own rules that work alongside ESLint's built-in rules. You can customize ESLint to work exactly the way you need it for your project. eslint.org 소스코드를 분석해서 문법 에러, 버그를 찾고 보고해주는 도구 ES6, React를 완벽하게 지원합니다. 초기구성 필요 / 조금 느리다 Prettier Prettier · Opinionated Code Formatter Opinionated Code Formatte..

undefined, null을 이 있을 때 매번 if문을 사용하는 것이 참 불편했습니다. 그래서 찾아보게 되었습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining 설명 함수 호출과 함께 사용할 때 undefined주어진 함수가 존재하지 않으면 반환 합니다. null이나 undefined인 값이 반환되면 즉시 중단하고 undefined를 return 한다. => null, undefined 파악 ex function a(api) { const { data } if (data) { return data.person.name; } return null; } function a(api) {..