후니후니

최신 문법인 Optional chaining과 Nullish coalescing을 알아보자! 사실 잘 사용하진 않는데, 알아두면 유용한 문법인 것 같다. Optional chaining부터 알아보자. const test = { a: { b: 'Optional chaining' } } 위와 같은 객체가 있다고 하자. 해당 객체가 지금은 값이 있지만, 기본 값이 빈 객체이고, 서버에서 응답이 내려와 객체의 값을 채우기 전에 아래와 같이 test.a.b로 접근한다면 에러가 발생할 것이다. test는 빈 객체고, 빈 객체에서 a를 호출하는 건 undefined가 나오겠지만, undefined에서 없는 b를 호출해버리니 'Cannot read property 'c' of undefined' 에러가 발생하는 것이다..

Cypress를 이용한 회원가입 폼 테스트 이전 1탄에서는 설치 후 간단한 테스트를 통해 Cypress를 살짝 맛보았다. 이번 2탄에서는 Cypress를 이용해 간단한 회원가입 폼을 테스트해보려고 한다. // Form.vue submit {{ email }} {{ password }} 디자인 프레임워크인 Vuetify를 사용중이며, Cypress에서 쉽게 가져오기 위해 data-cy 속성을 지정했다. 해당 속성을 통해 cy.get()으로 해당 요소를 가져올 수 있다. // form.spec.js describe('Form Test', () => { beforeEach(() => { cy.visit('/signup'); }); it('회원가입 폼 작성', () => { cy.get('[data-cy=ema..

✏️TypeScript 타입스크립트를 익히기 2탄 타입스크립트, 저번에는 기본 타입에 대해서 포스팅했는데, 오늘은 TypeScript에서 지원해주는 interface에 대해서 포스팅하고자 한다. 잠시 기본 타입에 대해서 짚고 넘어가면, const name: string = 'hoon' 위와 같이 선언하면 name에는 string 값만 받겠다는 뜻이고, 다른 타입이 들어갈 경우 name아래 빨간 줄이 그어지며 "해당 형식은 string 형식에 할당할 수 없습니다." 등의 에러 메시지가 보여진다. 타입을 지정해주는 것, 그게 타입스크립트다. 그러면, 저렇게 한 줄 코드가 아니라 여러 인자를 받는 함수가 있다고 가정해보자. const user:{ name: string, age: number, gender: ..

✏️Nuxt를 사용해보자 2탄. 2탄에서는 라우팅에 대해서 알아보려고한다. Vue.js에서는 만약 localhost:8080/profile 로 가기 위해서는 Router를 등록하고, Router.js에 name, path, component 등을 추가해줘야 정상적으로 localhost:8080/profile로 접근할 수 있다. Nuxt.js에서는 어떻게 해줘야 할까? 위의 번거로운 과정이 모두 사라졌다. pages 폴더에 profile.vue를 생성해주면 끝. 정말 끝..? profile.vue를 추가해주고 localhost:3000/profile로 접속하면? 짠. 정상적으로 접근도 되고 데이터도 확인할 수 있다. .nuxt 폴더에 route에 보면 자동으로 nuxt가 라우터에 추가해줬다. 이렇게 편리해..

✏️ 1.HTTP란 무엇일까? 페이지 URL을 보면, http, 혹은 https로 시작하는 것을 볼 수 있다. 무슨 차이가 있을까? 프론트엔드 개발자라면 알아야 할 지식이라 생각이 돼서, 한번 알아보게 되었다! HTTP가 어떤 용어인지부터 살펴보자면, HTTP는 하이퍼 텍스트 전송 프로토콜의(Hypertext Transfer Protocol)이다. 장황하다. 가슴에 비수가 날아와 꽂힌다.(죄송합니다) Hypertext부터 어떤 뜻인지 알아보자. Hyper는 뛰어넘다, 초월하다 등의 뜻을 가지고 있다. text는 문서라는 뜻으로 생각할 수 있을 것 같다. 초월한, 뛰어넘는 문서? 유연하게 생각해보면 문서를 뛰어넘다. 다른 문서로 간다! 다른 문서로 순식간에 접근을 한다! 라는 뜻으로 생각해볼 수 있지 않을..

✏️ 1. Cypress 사용을 고려하게 된 이유. ✏️ 2. Cypress 초보자는 설치부터 해보자. ✏️ 3. 설치 후 맛만 보자. 1. Cypress 사용을 고려하게 된 이유. 테스트 코드를 작성해본적은 거의 없다. TDD 관련 동영상을 보고 토이 프로젝트에서 Jest를 간단하게 사용해봤지만, 실무에 어떻게 적용을 해야 할지 감이 잡히지 않았고, 그래서 자연스럽게 테스트 코드에서 관심이 멀어지게 되었다. 그러던 어느 날, 실무에 테스트 코드를 적용해야 하는 날이 왔고, 이제부터라도 익숙해지기 위해서 Cypress를 시작하려한다. Cypress를 동료가 추천해주기도 했고, 테스트를 하기 적합하다고 해서 Cypress를 선택했다. 2. Cypress 초보자는 설치부터 해보자. Cypress는 문서가 굉..

저번에는 프록시 설정까지 진행했다. 이번에는 화면에 보여줄 문구와, 이미지를 프론트에서 올리는 게 아닌 s3서버 url로 뿌려주기 위해 Json 파일을 백엔드 프로젝트에서 생성했고, 프론트에서 API 호출을 했을 때 데이터를 가져와 Vuex 스토어에 값을 저장하도록 했다. import skils from 'skils.json' router.get('/', (req, res, next) => { res.send(skils); }); // Node.js 일부 코드 지정한 주소에 get을 호출하면 json 파일을 내려주도록 코드를 작성했고, 프론트에서는 Axios를 통해 API를 호출 할 수 있도록 설정해줬다. 그 전에 미리 스토어도 사용할 수 있도록 Vuex 설치와 셋팅은 모두 해둔 상태다. 언제나 처음 셋..