후니후니

최신 문법인 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' 에러가 발생하는 것이다..

Vuetify를 사용하다 보니 Pagination도 v-pagination을 사용하다가, 원하던 기능이나 디자인이 커스텀되지 않는 부분이 있어서 새롭게 제작하게 됐다. v-pagination이나 구글링하면 나오는 소스들과는 조금 다른 점이 있어서 직접 개발을 하게 됐는데, 조금 특이한 점이 있다면 이전과 다음 버튼을 누르면 보통 한 페이지씩 이동하고, 다음 페이지 그룹으로 넘어갈 때 (1,2,3,4,5에서 6,7,8,910) 조건이 5에서 다음 버튼을 누르면 6으로 가거나 그러는데 구현해야 하는 기능은 이전, 다음 버튼을 누르면 5개씩 페이지가 넘어가고, 1페이지에서 다음을 누르든, 2든, 3,4,5 페이지에서 다음을 누르면 무조건 6으로 가고, 마찬가지로 6,7,8,9,10 페이지에서 다음을 누르면 1..

요즘은 배포 자동화로 편리하게 배포를 하는 것 같아서 Github Action에 대해 알아보았다. 우선 AWS 계정이 있어야 하고, 배포할 Git Repository가 있어야 한다. 우선 S3 버킷을 생성해야 하는데, 특별한 설정은 없고 모든 퍼블릭 엑세스 차단만 해제하여 버킷을 하나 만든다. 그리고 해당 버킷 속성에서, 버킷 정책을 들어간다. 정책을 만들기 위해 정책 생성기를 누른다. 위와 같이 설정한 후, Amozon Resource Name은 정책 생성기 버튼을 누른 페이지에 있는 버킷 ARN을 복사한 후 뒤에 /*을 붙여준다. 예시: arn:aws:s3:::hoon-github-action/* 정책을 만들었다면, 복사하여 붙여넣고 저장한다. 그리고 사용자를 추가해야한다. AWS에 IAM을 검색하여..

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

Vuex Store 모듈을 쉽게 관리하는 방법 예전에는 Store를 하나 추가한다고 하면, modules 폴더 안에 store.js 파일을 추가하고, store 폴더 안에 있는 index.js에 추가한 스토어.js를 추가해줘야했다. 어려운 작업은 아니나, 귀찮은 작업임은 맞고 언젠가 이런 부분에 대해 리팩토링이 필요하다 생각했다. 그래서 알아보니, 이미 아래와 같이 사용하는 코드가 있었다. // modules 폴더 안에 index.js import camelCase from 'lodash/camelCase'; // 현재 폴더안에 js 파일을 모두 찾는다. // 하위 폴더는 없기 때문에 false로 설정. const requireModule = require.context('.', false, /\.js$..

✏️ Vuetify란 무엇일까? Vuetify는 UI Components로 편리하게 UI 셋팅을 할 수 있게 해준다. 원래 예전에는 Element UI를 종종 사용했었는데, UI Components의 장점은 편리하지만 단점은 커스텀하기가 조금 까다로울 수 있다는 것이다. Vuetify는 사용했다하기 민망할 정도로 잠깐 사용했기에, 이번에 사용해보며 경험해보려고 한다. ✏️ 설치 우선 Vue3 버전은 2021 3분기에 릴리즈될 예정이라고 하여, 현재는 Vue3 버전 이하에서 사용할 수 있다. 나는 Vue Cli로 Vue2 버전에서 설치를 진행했다. 문서에 기재된 설치 방법 (링크) vue add vuetify 위 명령어를 통해 설치를 진행하게 되면 프리셋을 선택하라는 게 나온다. 나는 Default로 진행..

✏️ Closure란 무엇일까? 많이 헷갈리는 개념이다. 클로저.. 글로만 보면 정확히 어떤 개념인지 이해가 되지 않는다. 역시 코딩은 직접 해봐야해... 그래서 여러 글들을 보며, 직접 테스트 해보면서 겪은 점을 글로 써보려고 한다. 이해를 쉽게 하기 위해서 생성자 함수를 먼저 만들어보자. function MyName(name) { this._name = name; } 코보자 (코딩초보자) 였을 때는 위 함수가 뭐하는 함수인지도 몰랐다. 사실 몰라도 될 줄 알았다. 근데 공부하다 보니까 이런 개념이 궁금해지기 시작하면서...찾아보게 되었다. MyName.prototype.me = function () { console.log("my name is", this._name); }; 정의한 함수의 프로토타입..

✏️ Hoisting이란 무엇일까? 흘러흘러, 코딩의 코자도 모르던 시절, 국비지원 학원을 통해 취업을 했지만, 속성으로 배우고 취업해서 그런지 자바스크립트의 기본 원리에 대해서 잘 몰랐었다. 물론 시간이 지나면서 어느정도 알게 되었지만, 쓴이처럼 잘 모르시는 분들이 계실 수도 있을까봐 포스팅해본다. (이미 많은 포스팅이 있는 건 안 비밀) ✏️변수의 호이스팅에 대해 알아보자. 우선 코드를 하나 보자. var a = 1; console.log(a); 위의 콘솔은 어떤 결과를 리턴해줄까? 답은 당연히 1이다. 그렇다면 이번엔 어떨까. console.log(a); var a = 1; 변수를 선언하기 전에 변수를 호출해버렸다. 결과는 undefined... undefined 다른 코드도 보자. console...

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

✏️TypeScript 타입스크립트를 익히기 1탄 타입스크립트, 예전에는 배워야 할까? 생각이 들었다. 고민만 하다가 타입스크립트 공부는 계속 뒤로 미루고 있었는데, 요즘들어 타입스크립트를 사용하는 곳이 많아짐을 알게되고, 왜 사용하는지를 찾아보게 되었다. 타입스크립트 관련 글들을 찾아보니, 에러를 방지하기 위한, 혹은 안정성을 위한, 협업을 위한 기타 등등의 많은 이유가 있었다. 타입스크립트를 배우기 전, 조사를 통해 느끼게 된 건 에러를 최소화 할 수 있다는 점과, 잘 사용한다면 동료간의 협업에 큰 도움이 될 것이라 느꼈다. 환경에 따라 혼자서 개발하는 분들도 계시지만, 다른 개발자들과 협업을 하는 입장에서 공통 함수나, 다른 개발자들이 만들어둔 기능을 사용할 때, 어떤 기능을 하는지, 어떤 파라미터..