즐코

한 컴퓨터에서 github 계정을 2개 이상 쓸 때 어떻게 해야할까?! 예전에 설정해놨었는데, 터미널이 망가지고 새로 깔면서 설정이 날라가 버렸기에 다시 찾지 않게끔 기록해두려고 한다. 1. SSH Key 생성하기 1. 회사 계정 / 개인 계정 2개를 생성해준다! 숨김 폴더인 .ssh 상에 기존 ssh key 가 있는지 확인한다. 난 깔끔하게 가기 위해 id_rsa, id_ras.pub를 다 삭제해줬다. cd ~/.ssh ls -al 2. ssh key를 생성하기 위해 아래 명령어를 쳐준다. 깃헙에서 사용하는 email과 이제 만들어줄 ssh key의 이름을 먼저 정한다. - 회사 계정 : 회사 깃헙아이디@회사이메일주소 && id_rsa_jane - 개인 계정 : 내 깃헙아이디@이메일주소 && id_rs..

개요 코드 재사용과 같은 유지보수 측면에서 파일을 여러 개로 분리해서 개발하기 시작했다. 이렇게 분리된 파일을 module이라고 하는데, module의 개념이 등장하면서 웹팩이 나오게 되었다. 즉, 모듈이 많아질수록 브라우저가 서버에 요청하는 수가 증가 => 네트워크 비용도 증가 => 페이지 로딩 시간이 up 되는 것이다. 따라서, 개발할땐 모듈로 나눠서 개발하지만 웹서버 배포할 때는 하나의 파일로 묶어서 배포하게 된다. 하나의 모듈을 묶는 작업을 bundling 이라고 하며 여러 개의 파일을 하나로 묶어주는 도구가 module bunlder이다. 모듈 번들러는 여러 종류가 있는데 그 중 인기 많은 모듈 번들러가 바로 webpack 이다! 보통 리액트, 넥스트, 뷰 등 라이브러리, 프레임워크를 설치하면 ..

코드 치는 것만 신경썼지 웹팩에 대해서 전혀 신경을 안 쓰고 있다가 번들링 파일인 chunk-vendor.js 와 app.js가 매우매우 용량이 커서 네트워크 탭 상에서 빠른 3G나 느린 3G로 네트워크 설정을 할 경우 첫 로딩 속도가 어마어마하게 느린 걸 깨달았다. SPA가 가지고 있는 단점을 느낄 수 있게 흰 화면이 30초 넘게 유지됐다ㅋ 어떤 라이브러리가 많은 크기를 차지하는지 알아야 했고, 그것을 최소화해 번들 사이즈를 최적화할 필요가 있었다. 아래의 패키지 도움을 받았다. https://www.npmjs.com/package/webpack-bundle-analyzer npm i -D webpack-bundle-analyzer webpack 설정 상에 설치한 플러그인을 추가해준다. 이 때 그냥 기..

Get a full fake REST API with zero coding in less than 30 seconds (seriously) 아주 짧은 시간 내에 REST API를 구축해주는 API라고 한다. 예전에 팀 프로젝트나 개인 프로젝트를 할땐 nodeJS-express로 백서버를 구축했는데, 프로젝트가 아닌 vue와 같은 새로운 프론트엔드 프레임워크를 공부할때는 노드로 백서버를 구축하는 건 배보다 배꼽이 커지는 경우일 것이다. 또한, 회사에서 새로운 페이지나 기능을 만들어야할 때 백엔드 쪽에서 api를 만들어주기 전까지 아무것도 하지 않는 건 비효율적이다. 이때 필요한 게 이 json-server 라이브러리가 아닐까 싶다. 즉, api 요청이 필요한 프론트엔드 개발 단계에서만 쓰이는 서버라고 보면..

어드민 사이트의 경우 메인 진입 시 대쉬보드를 마주하는 구성이 많다. 그 대쉬보드는 여러 개의 api 요청을 통해 서버로부터 각 정보를 가져온다. 처음에 dashboard.vue 한 페이지 안에서 다 작성하려고 했으나, template 부분이 너무 길어져서 테이블별로 분리하기로 판단했다. (테이블이 만약 한 페이지에 5~6개 정도가 된다면, 한 컴포넌트 안에서 작성하는 것보다 테이블별로 컴포넌트를 분리하는 게 맞다고 본다) 그래서 아래와 같은 순서대로 작업했다. 1. 부모 컴포넌트 (dashboard > index.js) 안에 다수의 테이블 컴포넌트들 (dashboard > 어쩌고Table.vue)로 따로 뺐다. 2. 부모 컴포넌트에서 created() 상에서 Promise.all()로 한꺼번에 응답을 ..

누가 vue에서 헷갈리는 프로퍼티가 있냐고 물어본다면 나는 computed 와 watch 라고 말할거다. 그래서 공부하는 김에 정리해두고 적재적소에 쓰고자 한다. 우선 기본적으로 내에는 많은 로직이 직접적으로 들어가면 복잡해 보일 뿐만 아니라 해당 조건이 반복적으로 쓰인다면 유지보수가 어렵다. (아래의 예시) 그래서 methods / computed / watch와 같은 속성이 존재한다. Has published books: {{ author.books.length > 0 ? 'Yes' : 'No' }} computed 위의 예시를 computed를 사용해서 리팩토링했다. 데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 내부에서 하고 최종적으로 html 상에는 데이터를 표현만 하는 것이 중요하다. 우선..

각 컴포넌트에서 axios 요청을 일일이 보내는 것보다 api 로직은 따로 빼는 게 나중에 수정하기도 찾아쓰기도 편하므로 분리해주는 게 좋다. 프로젝트를 할때마다 서버쪽 API에 axios 요청 보낼때마다 base url은 같은데 이걸 계속 반복해서 갖다쓰는게 불편했는데, axios.create()를 쓰면 됐다. axios.create() axios 공통 설정 (config - baseURL 과 같은 부분)을 create 메소드를 통해 인스턴스화해준다. - baseURL : 반복되는 도메인을 넣는다. - headers : request Header의 내용을 만져줄수있다 > Authorization 속성 : 토큰값을 넣어주는 등의 방식을 취할 수 있다. // src/api/index.js import ax..

쿠폰과 같이 사용자가 쿠폰 받기 버튼을 누름으로써 서버에서 응답으로 쿠폰을 받았을 때 그 후엔 쿠폰 버튼은 못누르게 막힌다. 이렇게 간단하게 생각하면 쉽지만 이때 미친듯이 클릭을 하면 요청이 여러 번가서 응답 또한 여러 번 오게 된다. 물론 서버 쪽에서 쿠폰과 같은 베네핏을 이미 한번 받은 사람은 못 받게끔 처리를 해놨겠지만, 클라이언트 단에선 성공 메시지와 실패 메시지를 여러 개 받는 케이스가 생길 수도 있기 때문에 이를 사전에 막아주는 게 사용자 경험 측면에서도 좋고 쓸데없는 요청을 보내는 걸 방지해주므로 서버 쪽에도 좋다고 생각한다. 아래 코드는 vue 기반의 코드이다. data는 상태를 정의하는 곳, methods는 한 컴포넌트에서 쓰는 함수를 정의하는 곳이다. 1. 최초 클릭 여부를 알려주는 f..

인풋창에 금액을 입력할 때 보통 천의 단위마다 콤마를 넣어주는 게 일반적이고 보기도 편하다. 목적 1/ 금액을 넣을 경우 숫자만 들어가게 하자 2/ 숫자를 넣을 때 천의 자리마다 콤마를 자동으로 넣어주자. 해결 과정 정규식에 익숙하지 않은 나.. 찾아서 아래와 같이 작성.. 1/ replace를 통해 숫자가 아닌 것들은 '' 공백으로 처리 2/ 두번째 정규식은 솔직히 이해가 안가서 공부를 해야할듯. 뭔가 3자리마다 콤마 로 대체해주는 느낌 ^^ (vue 관련 여담) 근데 해당 기능을 수정할때쯤은 vue 공부를 하기 전이라 watch를 썼는데.. 텍스트 형식을 포맷팅해서 렌더해야할 경우엔 아래 코드처럼 watch를 쓰는 것보단 computed가 낫다. 그리고 vue2에선 filters 라는 텍스트 포맷팅 ..

VUE에서 .env 설정은 next와 거의 같다. .env 파일 상에서 VUE_APP_ 접두사가 붙은 변수는 자동 로드가 된다. # .env.development : 개발 환경에 적용되는 환경변수 파일 VUE_APP_API_URL=http://localhost:3000/ # .env.production : 배포 시 적용되는 환경변수 파일 VUE_APP_API_URL=https://vue-til.com/ # .env # : 공통 변수나 .env.development 또는 .env.production 파일이 없을 경우 적용됨 - npm run serve (vue-cli-service serve) 시 development 모드 : .env.development - npm run build (vue-cli-se..