uni's code uni's code

test code를 작성하기 위해, jest와 react testing library를 사용하였습니다. 1. test code의 기본 틀 describe('validation test', () => { it('when nothing input, submit button is disabled', async () => { //given & when render(); //then const submitButton = await screen.findByRole('button', { name: '계정 만들기', }); expect(submitButton).toBeDisabled(); }); it('when email is not valid, email error appear', async () => { //giv..

이벤트(특히 click)가 발생할 때, router 경로(특정 컴포넌트)로 이동해야할 때가 많습니다. 이럴 경우, 몇가지 자주 사용하는 방법에 대해 정리하고자 합니다. 1. router-link 사용하기 기존의 a태그를 이용하여 를 사용하는 의미와 동일합니다. 그러나, 태그를 이용할 때는 여러 속성을 추가할 수 있습니다. router link move 그냥 to로 할 경우는 기존의 경로에서 추가되어 "기존경로/path 경로" 로 나타나집니다. 만약 기존경로를 제외하고, 그 경로자체로 이동하고 싶은 경우 아래와 같이 name을 추가하여 이동하고자 하는 컴포넌트 name을 기입합니다. router link move 2. this.$router.push router-link 태그를 사용하기 힘든 경우, 자주 ..

이전 글에서 vue-cli를 이용하여 프로젝트를 생성하는 과정에 대해 알아보았습니다. 이제, 원하는 내용을 vue의 컴포넌트로 만들고 화면에 띄워보겠습니다. 1. vue의 app.vue 파일에서 기존 내용을 다 지우고 "vue입력 후 엔터" 그러면 자동으로 밑에 저렇게 뜨는데 엔터를 누르면 짜잔!! 이런 기본 컴포넌트의 구조를 알 수 있습니다. 잠깐 설명을 하자면, vue의 컴포넌트는 크게 3가지 구성으로 이루어져있습니다. 1. template : html와 비슷하게 태그를 이용하여 화면을 구성해주는 역할을 합니다. 2. script : js와 비슷하게 data의 조작이나 이벤트 발생하는 역할을 합니다. 3. style : css와 비슷하게 template 안의 요소들을 꾸며주는 역할을 합니다. 사실 비..

vue를 배우고 나서 처음으로 글을 작성합니다. 첫글을 무엇으로 작성하면 좋을지 생각을 하다..! vue를 이용하여 프로젝트를 할때, 정말 기본이 되는 vue-cli를 사용하는 방법에 대해 적으면 좋겠다고 생각해서 이에 대해 끄적끄적 해보려고 합니다. ㅎㅎ 앞으로 vue-cli를 기반으로 한 프로젝트를 통해, vue에 대해 알아야 하는 부모-자식간의 통신방법, router사용 등등에 대해 적겠습니다. 1. VUE-CLI는 무엇인가? vue cli는 Vue command line interface의 약자로, vue 개발 환경을 설정해주는 도구입니다. vue cli가 알아서 기본적인, 프로젝트 환경 세팅을 완료해줍니다! (편하고, 멋지죠?) 2. VUE-CLI 설치하기 1) node js 설치하기 vue-c..