전체 글 썸네일형 리스트형 [Nuxt3] 2. Eslint + prettier + Typescript 설정 typescript + eslint + prettier 를 설정 하기 위해 아래의 패키지를 설치해 준다 yarn add -D eslint vue-eslint-parser eslint-plugin-vue eslint-config-prettier @nuxtjs/eslint-config-typescript @typescript-eslint/eslint-plugin typescript 패키지 설치가 끝났으면 파일들을 만들어 줘야 한다 처음으로 .prettierrc 파일을 root 경로에 생성 한다 { "semi": false, "singleQuote": true, "tabWidth": 2 } 위와 같이 옵션을 설정 해서 쓸 수 있다. 필요한 옵션은 그때 그때 찾아서 사용하면 된다 그리고 vscode에 setti.. 더보기 [Nuxt3] 1. 프로젝트 생성 및 설정 기존에 회사 프로젝트가 Vue3로 되어 있던걸 리뉴얼 하게 되었는데 SEO 문제 때문에 Nuxt3를 사용해 볼 예정이다 Nuxt3가 2022년 11월 16일 첫번째 정식버전이 출시되었다 국내에 nuxt3 강의가 많지 않아서 직접 공식문서를 보며 하나하나씩 진행해 볼 예정이다 기본적으로 node가 설치된 환경이라고 가정하고 node 설치에 대해서는 언급하지 않는다 공식 문서에 나와 있는 권장 설치 항목들은 nodejs 최신 LTS 버전과 vscode 그리고 vscode extension 인 volar(Vue Language Features) extension을 설치하라고 나와 있다. (node 는 현 시점으로 최신버전이 18 버전인데 아래와 같은 에러가 난다면 16버전의 LTS로 사용 해도 된다) Expe.. 더보기 [이산수학] 증명 1. 증명 공리(Axiom) 별도의 증명 없이 항상 참으로 이용되는 명제 ex) 어떤 자연수 n에 대하여 n + 1 이 존재한다 정의(Definition) 용어 또는 기호의 의미를 확실하게 규정한 문장이나 식 ex) n! = n X (n - 1) X ... 3 X 2 X 1 정리(Theorem) 공리와 정의를 통해 참으로 확인된 명제 ex) 피타고라스의 정리 증명(Proof) 명제의 진릿값을 확인하는 과정 직접 증명법 - 조건 명제 p → q 를 증명하기 위해 p를 참이라 가정한 상태에서 q도 참임을 증명하는 방법 ex) 짝수와 홀수를 더하면 홀수가 됨을 증명 하시오 p: 숫자 m은 짝수이고 숫자 n은 홀수이다 q: m + n은 홀수이다 증명) 정의에 의하여 m은 2로 나누어 떨어지는 수고, n은 2로 .. 더보기 [이산수학] 집합과 논리 1. 집합 집합 - 여러 원소들(element)의 모임으로 중복된 원소를 가지지 않음. (중복 X, 순서 X) 집합의 표기법 (1) 원소나열법: 집합에 속하는 원소들을 일일이 나열하는 방법 ex) A = {1, 2, 3, 4, 5} (2) 조건제시법: 집합에 포함되는 원소들의 성질을 조건식으로 제시하는 방법 ex) A = {x | 0 < x ≤ 10, x는 자연수} 유한집합 / 무한집합 집합 A에 속하는 원소의 개수를 |A|로 표현하며, 원소가 유한개인 집합을 유한집합, 원소가 무한개인 집합을 무한집합이라고 한다. 집합의 종류 전체 집합 : 논의 대상이 되는 원소 전체를 포함하는 집합으로, 보통 알파벳 U로 표기한다. 공집합 : 원소를 하나도 가지지 않는 집합으로 ∅ 또는 {} 로 표기 집합의 포함관계 .. 더보기 [Vuex] 페이지 새로고침시 상태 초기화 방지 Vue를 이용한 프로젝트를 진행하면 상태 관리 라이브러리로 vuex를 많이 이용하게 된다. 이용방법도 쉽고 편하지만 한 가지 문제가 있는데 브라우저에서 뒤로 가기 또는 새로고침을 하게 되면 vuex에 저장되어 있던 state들이 초기화가 된다는 점이다. 예를 들어 회원이 로그인한 상태를 유지하고 있다가 페이지가 새로고침 되면 로그아웃 하지도 않았는데 로그인 상태가 해제되어 버리는 상황이 나올 수 도 있다. 이 문제는 이슈가 워낙 많아서 npm을 만들어 놓은 게 있어 그걸 가져다 쓰게 되면 이런 문제를 해결할 수 있게 된다. // npm 이용시 npm i vuex-persistedstate // yarn 이용 시 yarn add vuex-persistedstate 위에 패키지를 설치해 주면 바로 사용이 가.. 더보기 [firebase] functions 서버 기능 만들어 보기 지금 까지는 firebase 에서 지원해주는 기능들을 이용해 서버를 따로 만들지 않고 여러 동작을 수행 할 수 있었지만 규모가 커질수록 서버기능은 필수 적으로 들어가야 하기 때문에 firebase에서 지원하는 functions 를 이용하면 자체적으로 서버 기능을 만들 수 있다. 하지만 functions 는 blaze 요금제로 업그레이드를 시켜줘야 할 수 있기 때문에 요금제 업그레이드를 시켜준다. 이용자수가 엄청나게 많은 사이트를 만드는게 아니라면 요금이 부과될 일이 거의 없기 때문에 요금문제는 걱정하지 말고 카드 등록만 해주면 된다. 그럼 이제 프로젝트 폴더 명령창으로 돌아와서 functions를 설치를 해줘야 하는데 처음 프로젝트를 만들 때 functions 를 선택해서 만들었다면 이 작업을 하지 않아.. 더보기 [firebase] Hosting 으로 배포 하기 지금까지 firebase 를 이용해 만든 프로젝트를 firebase hosting을 이용해 배포를 진행해 보겠다. 프로젝트 폴더 경로에 명령어 창에서 현재 firebase 로 실행중인 프로젝트가 있다면 종료 해 준다. 그 다음 명령어 창에 firebase projects:list 라고 입력하게 되면 firebase로 진행중인 프로젝트 목록이 출력 된다. 현재 1개의 프로젝트 밖에 없기 때문에 1개가 출력된 모습이다. 만약 여러 프로젝트가 있다면 아래의 명령어로 해당 프로젝트를 선택해 주면 된다. firebase use 프로젝트 ID 그럼 프로젝트를 선택 했다면 아래 명령어로 배포를 해준다. firebase deploy --only hosting 그럼 이렇게 배포가 완료 되고 어디서든 접속 할 수 있는 u.. 더보기 [firebase] Authentication 회원가입, 로그인, 로그아웃 firebase 인증 서비스를 이용해 회원가입, 로그인, 로그아웃을 진행 해 보자. 정말 간단하게 몇 줄 안되는 코드로 진행이 가능하다. firebase 시작하기 부터 진행하고 있는 분들이라면 처음에 Authentication 설정을 이메일/비밀번호로 설정 되어 있을 것이다. 그럼 이제 그 설정을 그대로 진행해보도록 하자. 입력된 값들을 넣어 주면 되는데 실제 회원가입에서 필요한 코드는 firebase.auth().createUserWithEmailAndPassword(email, password).then(result => { }); 위와 같이 매우 간단하다. 회원 가입이 완료 되면 위 코드 안에서 동작을 수행하면 되는데 여기서 보면 우리가 입력한 이름이 저장되는 곳이 없다. 이름을 저장하기 위해서는 .. 더보기 이전 1 2 3 4 5 다음
