차마시는 개발자

Parcel SFC 와 드디어 bundler에 대해서 배우기 시작했습니다. bundle란 묶는다는 의미로 vue 작업 요소를 js로 사용 가능하게 변화시키고 묶어주는 것 입니다. 참!! 이것은 SFC 구성을 목적으로 하는 것이라는 것을 알고 시작을 해보도록 하겠습니다. 🐻‍❄️ 1. Vue 프로젝트 설치 및 기본 구성 > npm init -y > npm i vue@next > npm i sass -D npm init -y: 프로젝트를 시작하기 위한 기본 설정 => package.json 생성 npm i vue@버전: vue의 버전 설치(@next) => node_modules, package-lock.json 생성 npm i sass -D: devDepedencies에 scss를 설치 추가 개념) nod..

Window 사용자.... 멘토님들이 답변을 주셨는데 간단히 정리를 하고 경험을 쌓은 다음 이 글을 토대로 해결해 나갈려고 작성하는 글 입니다. 현재 간단한 협업에서는 크게 문제가 되지 않다고 하셨습니다. + WSL2를 더 많이 사용하자 문제점 및 해결 1. 개행 문자 차이 옵션이나 Prettier 설정을 잘 하면 괜찮다. https://www.lesstif.com/gitbook/git-crlf-20776404.html git 에서 CRLF 개행 문자 차이로 인한 문제 해결하기 www.lesstif.com 2. 대소문자 차이 Mac 인 경우 대소문자를 구분하기 때문에 대소문자를 잘 구분 해야 합니다. 마치며 Window를 사용하면서 WSL2 세팅과 Window 환경 설정을 하면서 멘탈이 많이 갈리고 있는..

단방향 해시 함수(Password) Digest of one-way hash function 수학적 연산을 통해 원본 Msg를 Digest(암호화 된 Msg)로 변환하는데 원본 Msg -(변환)-> 암호화 Msg : 구하기 쉽다. 암호화 Msg -(변환)-> 원본 Msg : 구하기 어렵다. 이와 같은 것을 의미한다. 이와 같은 것에도 2가지 문제점이 발생합니다. 1. 인식 가능성(Recognizability) 원본 Msg가 같으면 Digest도 같다 즉, 다른 사용자랑 Password가 같으면 Digest도 같아서 한번에 털리는 Rainbow Attack(미리 해시해둔 Password를 가지고 훔치려는 Password와 비교하는 것)에 당할 수 있다. 2. 속도(Speed) 해시 함수 처리 속도가 매우 ..

URL의 여행 1. URL 입력 / 해석 2. DNS(Domain Name System) 조회 Domain과 IP 주소를 변환 3. 해당 IP가 존재하는 Server로 이동 4. ARP(Address Resolution Protocol)를 이용하여 MAC 주소 변환 IP 주소(논리 주소, 바뀔수 있는 주소, ex) 도로명/지명 주소) => MAC 주소(물리 주소, 실제 위치, ex) GPS좌표) 5. TCP 통신을 통해 Socket을 열어야 한다. 요청수락시 Data를 Server로 전달 6. Server는 응답을 반환한다. 7. Browser 렌더링 Dev 과제 1. https 탄생 이유 및 왜 필요한가 ? https는 Hypertext Transfer Protocol Secure로 사용자의 웹 Bro..

네이버 FE-news를 보던 중 자바스크립트는 왜 프로토타입을 선택했을까? 을 읽으려고 하는데 javascript를 공부하면서 Prototype에 관한 것을 잘 알지 못하다는 것을 느껴 더 찾아보게 되었습니다. Prototype Prototype = Prototype Link + Prototype Object 이며 Class와 같은 역할을 합니다. function Person() {}와 같이 함수가 생성이 되면 해당 함수에 Constructor(생성자) 자격 부여 Prototype Object 생성 합니다. 그래서 Person Prototype Object가 생성되는 것을 알 수 있습니다. Person.prototype.eyes, Person.prototype.nose과 같이 Person Prototyp..

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..