티스토리

삽질Oㅔ는 끝2 없ㄷr...
검색하기

블로그 홈

삽질Oㅔ는 끝2 없ㄷr...

zestlee.tistory.com/m

삽질은 숙명

구독자
2
방명록 방문하기
공지 이전 블로그는 여기서 볼 수 있습니다⋯ 모두보기

주요 글 목록

  • 사내 서비스 개편 후기 후기를 남겨 보자개요개편을 시작하게 된 이유UI 가 변경되면서, 프로젝트를 통합하고 최신 기술로 업그레이드할 기회로 삼았다. 개편의 주요 목표Next.js 도입여러 프로젝트를 하나로 합치기개편되는 페이지의 UI 통일컴포넌트 스펙 일관성 유지기술 선택Next.js기존 프로젝트들이 모두 React 기반이었기에 자연스럽게 Next.js를 도입했다.Zustand상태 관리가 필요해 전역적인 store로 Zustand를 사용했다.개발 과정에서 있었던 문제점공통 컴포넌트 설계CI 스크립트 작성Next.js에서 React로의 전환정적 페이지로 전환해야 한다는 의견이 개발이 상당히 진행된 후에 나왔다.서버 확장성에 대한 테스트가 완료되지 않은 상태였기 때문에.. 반대 의견이 나왔다.전역 에러 페이지 발생템플릿에서 타입 .. 공감수 1 댓글수 0 2024. 8. 12.
  • 클래스에 대해서... 알아보자 개요개인 프로젝트를 진행할 때 Nest 를 사용하려 했더니, class 에 대해서 모르면 안 될 것 같았음따라서 class 에 대해 좀 더 깊게 알아보려 하였다클래스란OOP 의 중요한 구성 요소로, 객체를 생성하기 위한 템플릿이다클래스는 속성과 메서드를 포함하여 객체의 상태와 동작을 정의한다클래스의 주요 특징 (신입 면접 필수 질문이었던...)캡슐화: 클래스는 데이터와 메서드를 하나의 단위로 묶어서 외부에서 접근을 제한할 수 있다상속: 클래스는 다른 클래스의 특성을 상속받아 재사용할 수 있다다형성: 같은 인터페이스를 통해 서로 다른 클래스의 객체를 조작할 수 있다추상화: 클래스는 객체의 복잡성을 숨기고 단순한 인터페이스를 제공한다클래스의 기본 구조class Car { // 속성 (필드) private.. 공감수 0 댓글수 0 2024. 7. 15.
  • gitlab runner 로 ci 만들어보기 개요이번에 이직한 회사에서 gitlab 을 사용하는데, cicd 가 되어있지 않아 배포 과정이 수동적이었다이에 따라서 gitlab runner 구성과 gitlab ci 스크립트 작성을 통해 자동화 배포 환경을 구축하게 되었다Gitlab runner 구성먼저 gitlab runner 구성하는 작업을 진행했다gitlab runner 는 ci/cd 파이프라인을 실행하는 역할을 한다관련 가이드를 참고해서 runner 를 성공적으로 설치 / 등록할 수 있었다초기 구성은 여기가 잘 나와있음Gitlab ci 스크립트 작성그 다음으로는 .gitlab-ci.yml 파일을 작성해서 ci/cd 파이프라인을 구성했다.나는 파이프라인을 다음과 같은 단계로 나눴다Compile:dev 단계develop 브랜치의 mr 이벤트 발생 .. 공감수 0 댓글수 0 2024. 6. 22.
  • Node.js 가 뭐임? 들어가며 SSR 를 위해 Nuxt 를 하면서 결국엔 Node 서버까지 알아야 되는 상황에 처했다 이전에 공부하긴 했었지만 "대충" 훑기만 했었기 때문에 이게 뭔지 다시 톺아 보려고 한다 Node.js 가 생기게 된 배경 기존에 javascript 는 웹에서만 쓰이는 언어였다 나 첨 시작할 땐 언어라고 인정해 주지도 않았음 이때는 js 가 그저 html 을 예쁘게 만들어 주는 도구 정도였다 chrome 에서 v8 엔진을 만들었는데, 이게 무지 빠른 엔진이었던 것이었다 그리고 그 당시 웹 서버들은 매 요청마다 별도의 스레드를 생성하고 있었는데, 그게 리소스를 넘 많이 소모하고 확장성에 한계가 있었음 따라서 비동기 이벤트 주도 방식을 도입한 Node.js 를 개발하게 된 것임 I/O 작업이 블락되지 않아서 높.. 공감수 0 댓글수 0 2024. 4. 21.
  • 클로저 패턴이란 무엇인가 들어가며 의도치 않게 너무 어그로 끄는 제목이 되었는데, 별 생각 없이 정한 제목입니다... 이 글은 그저 끄적이는 글이기 때문에 엄청난 의식의 흐름일 수 있습니다 갑자기 뿅 하고 끝날 수도 있으니, 이 점 양해 부탁드립니다 ㅎ;; 배경 최근 react 를 공부하면서, 클로저 패턴을 자주 쓰게 되었음 (예를 들어, click과 같은 이벤트 핸들러 함수에 특정 값을 넘기면서 이벤트도 함께 넘기고 싶을 때 이 패턴을 활용하곤 하더라) 예시 export default function App() { const togglePopover = (index) => (e) => { e.preventDefault(); e.stopPropagation(); setOpen(openedIndex === index ? null .. 공감수 0 댓글수 1 2024. 4. 20.
  • Backstop 을 도입해 보자 Backstop 설치 Backstop 실행 스크립트 추가 "backstop:init": "backstop init --config=backstop.config.js", "backstop:test": "backstop test --config=backstop.config.js", "backstop:reference": "backstop reference --config=backstop.config.js", "backstop:approve": "backstop approve --config=backstop.config.js", "backstop:openReport": "backstop openReport --config=backstop.config.js" init backstop 초기 설정을 해 줌 (bac.. 공감수 0 댓글수 1 2024. 4. 20.
  • Vue2, Vue3 에서 지원되는 라이브러리를 만들어 보자 개요 디자인 시스템을 만들 때, 컴포넌트 모듈화를 하고 싶다는 생각이 들었다 마치 Vuetify 와 같은 사내 라이브러리를 만들고 싶었다 하지만 사내 기술은 Nuxt2 로 이루어지고 있었다 Vue2 만 지원하기엔, Vue2 에 대한 지원이 끊기고, 앞으로 나아가야 할 방향은 Vue3 이기 때문에 vue2, vue3 둘 다 지원이 필요했다 삽질 다른 라이브러리들은 Vue 버전을 어떻게 지원하는걸까? quasar:: 3버전부터는 vue3 만 지원 Vuetify:: 3버전부터는 vue3 만 지원 ㅜㅜ 진짜 없는걸까 새로운 라이브러리를 발견 https://github.com/vueuse/vue-demi 열심히 구글링하다 보니 vue-demi 라는 것을 발견함 description 에 적혀있듯이, Vue2 와 V.. 공감수 0 댓글수 0 2024. 4. 20.
  • IDE 켜지면 저절로 node 버전 셋팅되도록 하기 개요 IDE 를 킬 때마다 매번 node 버전을 셋팅하는 것이 킹받았다 사전 작업 프로젝트의 node version 을 .nvmrc 로 추가해 놓는다 // .nvmrc 12.16.3 이것은 각 개발자가 로컬에 갖고 있는 것이 아닌, 프로젝트 디렉토리에 넣고, git 에 올리는 편이 나을 것 같다 (모든 개발자의 노드 버전을 맞추기 위해) zsh 설정 터미널에 vi ~/.zshrc 입력하여 zshrc 파일을 엶 최하단에 아래 내용을 넣고 > esc > :wq 하여 저장 autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path".. 공감수 0 댓글수 1 2024. 4. 7.
  • 시각적 회귀 테스트 - Backstop 간단 배경 설명 아토믹 디자인 패턴 도입하면서 몇 가지 한계점이 보이기 시작하였다 하나를 조금만 바꿔도 전체가 망가지는 상황이 생김 예를 들어, base swiper 에서 height 하나 조정했더니 메인이 이상하게 꼬여버림 이유는 메인에 스와이퍼가 있어서 그런 것 그래서 코드 변경하는 걸 좀 망설이게 되었고 페이지가 망가지는 걸 막기 위해 여러 방어 로직을 넣기 시작했는데, 이런 코드들이 개발자들 간에 오히려 혼란을 주고 있었음 그래서 생각했다 누군가 매번 지켜보고 있다면 이런 문제가 없지 않을까? 여기서 '누군가 지켜보고 있다'는 건 >> 테스트 코드라는 생각을 했다 데이터 중심의 유닛 테스트는 인증 같은 명확한 로직에는 잘 맞지만, 시각적인 변화를 테스트하기에는 한계가 있겠다는 생각이 들었다 “시각.. 공감수 0 댓글수 1 2024. 4. 7.
  • 23년을 돌아보며 의식의 흐름으로 작성한 글입니다.. 그냥 무시해 주세요 ,, 적어야지... 적어야지 하다가 3월 중순인 드디어 적게 된다 23년에는 많은 일이 있었다 회사의 일 조직의 변화와 그에 따른 업무 강도 변화 내 역할과 캐릭터의 변화 개인적인 일 비사이드 참여 개발자 커뮤니티와 알고리즘 스터디 참석 특히 회사의 업무 강도는 2023년 중반부터 급격히 세져, 많은 도전을 겪었다 하지만 이런 변화는 나에게 중요한 개인적 발전의 기회가 되었다 깊게 공부하게 된 기술 Node.js 에 대한 공부 상태에 대한 공부 디자인 시스템에 대한 공부 도커에 대한 공부 다른 팀과의 효율적인 커뮤니케이션 방법 탐색 개인 프로젝트에서의 발전 aws 와 비슷한 NCP 에서 처음 서버를 다루게 됨 도커를 처음부터 구축하게 됨 Next.j.. 공감수 0 댓글수 0 2024. 3. 15.
  • 프론트엔드에서의 테스트 코드에 대한 생각 의식의 흐름으로 글을 써 본다... 조직 내에 QA 가 있지만, 때로는 QA 에 의존할 수 없는 상황이 생긴다 예를 들어, 1. 이미 다 통과한 QA 인데 리팩토링을 하고 싶거나 2. 잘 돌아가고 있는 서비스를 리팩토링 하고 싶거나 3. 아니면 이미 리팩토링을 해 버렸거나 (;;;) 소스 코드가 '더러운' 것을 알면서도, 경력이 쌓일수록 그 더러움을 그냥 참고 넘어가는 경우가 많아진다 그 이유는... 나 자신도 포함해서, 그렇게 코드를 작성할 수밖에 없었던 여러 이유들이 있기 때문이다 어떤 코드를 볼 때, 나중에 보면 '이걸 왜 이렇게 짰지? 멍청인가...' 라고 생각할 때가 있다 미래의 나는 그저 리팩토링을 진행하고, 그 결과로 나비 효과 같은 장애가 발생하기도 한다 이런 경험이 쌓이다 보면, 결국엔 .. 공감수 0 댓글수 0 2024. 3. 15.
  • SSR 에서 상태 오염을 방지하자 개요 최근 개발 시 상태 오염이 발생한 것이 잦았다 따라서 겪었던 이슈와 함께 어떻게 해결했었는지 정리해 보고자 한다 발단 상태 오염으로 인하여 토큰이 잘못 들어간 이슈가 발생 백엔드에서는 해당 토큰으로 인증을 시키기 때문에, 사용자가 교체되어 데이터가 인입된 증상이 발생하게 됨 원인 프론트의 서버에서 상태를 싱글톤 상태로 만들어서, 하나의 전역 상태를 공유하게 됨 싱글톤 상태가 되었던 이유 js 에서는 모듈이 싱글톤 형태로 이루어짐 (import, require 등) export 해 준 객체를 그저 참조를 해서 사용하고 있었음 vuex 에서 module 을 등록할 때 참조한 모듈의 주소만 넣어 등록하기 때문에, 매 요청마다 모듈의 state 를 만드는 것이 아닌 참조만 하고 있었음 해결 방안 modul.. 공감수 0 댓글수 0 2024. 3. 10.
  • IDE 켜지면 저절로 node 버전 셋팅되도록 하기 개요 IDE 를 킬 때마다 매번 node 버전을 셋팅하는 것이 킹받았다 사전 작업 프로젝트의 node version 을 .nvmrc 로 추가해 놓는다 // .nvmrc 12.16.3 이것은 각 개발자가 로컬에 갖고 있는 것이 아닌, 프로젝트 디렉토리에 넣고, git 에 올리는 편이 나을 것 같다 (모든 개발자의 노드 버전을 맞추기 위해) zsh 설정 터미널에 vi ~/.zshrc 입력하여 zshrc 파일을 엶 최하단에 아래 내용을 넣고 > esc > :wq 하여 저장 autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path".. 공감수 0 댓글수 0 2024. 3. 10.
  • VSCode 익스텐션 만들기 개요 사내에 Storybook 을 도입시키고 싶었으나, 장벽이 있었다 러닝커브는 서로 도와가며 하면 되기 때문에 괜찮으나, 귀찮은데 어떻게 해요? 라는 질문에는 대답할 수가 없었다 동료들의 귀찮음을 덜기 위해서 VSCode 익스텐션을 만들기로 하였다 yo code 설치 yo code 를 실행하려면 node, git 이 설치되어 있어야 한다고 함 npm install -g yo generator-code 위처럼 yo code 를 실행할 수 있도록 필요한 패키지들을 설치한다 yo code 실행 yo code typescript 를 사용할 것이기 때문에, typescript 를 선택해 주었다 패키지를 설치해 주자 npm install 필요한 디펜던시들을 설치해 주도록 한다 typescript 컴파일 되도록 스.. 공감수 0 댓글수 0 2023. 9. 13.
  • 삽질기록2 - NCP 서버에 도커 설치 도커 설치 도커를 이용할 것이기 때문에 docker, docker-compose 설치를 해 주자 업데이트부터 해 주자 sudo apt update 그리고 docker 를 설치한다 sudo apt install docker-ce 그 다음 docker compose 를 설치한다 sudo curl -L https://github.com/docker/compose/releases/download/v2.1.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose 그리고 권한 설정을 해 준다 sudo chmod +x /usr/local/bin/docker-compose 잘 되었는지 docker compose 의 버전을 체크해 준다 docker-.. 공감수 0 댓글수 0 2023. 5. 29.
  • CI/CD 삽질기록1 - NCP 서버를 생성 개요 CI/CD 를 구축하려 한다. 기존에는 Jenkins 를 사용하려 했지만, 젠킨스를 사용하려면 젠킨스를 올릴 서버가 필요하다. NCP 를 최대한 활용하려 하는데, 서버 비용이 좀 있기 때문에... github Actions 를 이용하려 한다. 사전작업 Next.js 를 올릴 NCP 서버를 생성하자 Classic 의 Compact 스펙 정도면 월 34,000 원 정도가 나온다고 하기에, 이 스펙으로 결정하였다. ACG 를 설정한다 (방화벽이라 생각하면 된다) ssh 를 접속하려면 22 포트를 열어줘야 한다. (기본적으로 열려있었던 거 같은데, 이것저것 테스트하면서 삭제해 버려서 애 좀 먹었다.) 접속할 포트도 열어 준다. 8000 번으로 접속할 것이기 때문에... 8000번을 열어주었다 그리고 Nex.. 공감수 0 댓글수 0 2023. 5. 29.
  • 삽질기록 - NCP 에 프론트 서버 올리기 (with Docker, Github Actions) 개요 비사이드에서 NCP 크레딧을 지원해 준다고 한다 따라서 NCP 를 이용하여 프론트 서버를 올리려고 한다 목표 특정 브랜치에 푸시하면 자동 배포가 되는 그런 CI/CD 구성을 만들고 싶었다 도커를 이용하여 서버 위에 도커를 띄우고 그 안에서 Next.js 를 실행시켜서 도커는 3000번을 바라보게끔.. 그런 구성을 만들고 싶었다 필요하면 가장 아래 소스 코드부터 보시길... 깃헙 링크 걸어놓겠습니다 서버 생성 및 셋팅 저렴이 서버인 Compact 로 만들기 위해서 VPC 가 아닌 Classic 버전을 사용했다 (NCP 너무 비쌈 인간적으로) Compact Ubuntu 를 사용했다 Pubilc IP 를 할당 받고 ACG 를 0.0.0.0/0 , 포트는 80 을 열어줬다 NCR 생성 Container R.. 공감수 0 댓글수 0 2023. 5. 29.
  • NCP + Next + Jenkins 구성하기 비사이드에 참가하게 되면서, 서버를 aws 가 아닌 NCP 를 쓰게 되었다 프론트 서버 구성은 Jenkins + Docker 로 구성할 예정이다 내가 원하는 CI/CD 는... 프론트에서 푸시한다 깃헙의 웹훅이 동작한다 Jenkins 빌드가 시작한다 도커를 빌드한다 도커가 빌드되어 서버로 올라간다 일단 Docker 는 로컬에서도 테스트해 볼 수 있기 때문에, 작업 완료가 되었다 https://velog.io/@jadenkim5179/Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-docker-%EB%B0%B0%ED%8F%AC-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%81%AC%EA%B8%B0-%EC%A4%84%EC%9D%B4%EA%B8%B0 Next.js .. 공감수 0 댓글수 0 2023. 5. 22.
  • 어드민 리뉴얼 회고 보호되어 있는 글입니다. 공감수 0 댓글수 0 2023. 4. 6.
  • [Nuxt3] useFetch 를 커스텀화 하기 (interceptor, type 적용) 보통 프론트 프로젝트에서 데이터 페칭을 할 때 axios 를 많이 사용하는데, Nuxt3 에서는 useFetch 를 사용하는 것을 권장하고 있다. https://nuxt.com/docs/getting-started/data-fetching#usefetch Data Fetching · Get Started with Nuxt Nuxt provides useFetch, useLazyFetch, useAsyncData and useLazyAsyncData to handle data fetching within your application. useFetch, useLazyFetch, useAsyncData and useLazyAsyncData only work during setup or Lifecycle Ho.. 공감수 3 댓글수 2 2023. 1. 17.
  • [Nuxt] TDD 를 적용시킬 수 있을까?? TDD 란 앞서 말한 것처럼 실패하는 테스트 코드부터 만드는 것이다. 그런 의미에서 아래 플로우를 웬만하면 지키고자 한다. 테스트 할 코드의 껍데기 생성 (페이지라든지, 컴포넌트라든지, 스토어라든지… 껍데기만 만들기) 테스트 파일 생성 테스트 파일에 껍데기에서 만들 기능을 주석으로 정리 주석을 지워가면서 실패하는 테스트를 작성 테스트가 성공하도록 껍데기를 채워나감 리팩토링 할 때도 위 플로우를 반복하여 코딩하는 것으로 가자 예를 들어 테마 설정, 홈으로 이동하는 Nuxt Link 만 있는 header 컴포넌트를 만들고자 할 때 1. 빈 껍데기 component 부터 만든다. 2. 같은 위치에 __tests__/header.test.ts 테스트 파일을 추가한다. 3. 만들 기능을 주석으로 정리한다. des.. 공감수 1 댓글수 0 2023. 1. 12.
  • [Nuxt] TDD 적용기 - Nuxt3 + Jest 구성하기 ㅎㅎ 블로그에 개발 얘기를 적는 건 오랜만이라,,, 떨리네요 여러분의 따뜻한 한 마디가 또 한 명의 개발자를 살립니다 개요 Nuxt3 에 Jest 를 적용한 사례는 꽤나 적다. (그냥 Nuxt3 자체가 적을지도) 다른 사람들이 먼저 해 주기를 기다리다가, 더 이상은 현기증이 날 것 같아서 찍먹을 해 보기로 하였다. 들어가기 전 스펙은 대략 이렇습니다. Nuxt3 Typescript Pinia Jest Vue test utils 아래에서 해당 내용 프로젝트 구성을 볼 수 있습니다. https://github.com/zestlee1106/nuxt3-starter GitHub - zestlee1106/nuxt3-starter: Nuxt3 + Typescript + Jest 맛보기 프로젝트 Nuxt3 + Typ.. 공감수 2 댓글수 1 2023. 1. 10.
  • [Nuxt] Vue 에서 유닛 테스트를 해 보자 유닛테스트 (단위테스트)가 몬가요 이름 그대로 작은 단위로 나눠 테스트 하는 것이다 테스트에 네트워크나 DB 접근이 들어가면 안 된다 보통 axios 관련 테스트를 할 땐 데이터 mocking 을 한다 e2e 와 다른 장점이 몬가요 빈번히 일어나는 수정의 버그를 막는데 효과적이다 들어가는 비용이 저렴하다 (네트워크 통신을 안 하기 때문) 그럼 유닛테스트가 e2e보다 무조건 좋을까? 더보기 그건 당연히 아님 어떤 목적으로 테스트 하느냐에 따라 방법이 달라지는 것이다 e2e 는 사용자의 입장에서 테스트를 하는 것으로, 실제 브라우저를 띄워 네트워크 통신까지 한다 따라서 실제 상황에서 발생할 수 있는 에러를 잡을 수 있다 크로스 브라우징, 렌더링, 네트워크, 내비게이션 관련 테스트가 필요할 경우에는 e2e 테.. 공감수 2 댓글수 0 2023. 1. 10.
  • [Nuxt] TDD 적용기 - TDD 는 무엇이고 BDD 는 무엇인가 TDD 테스트 주도 개발이다 테스트 주도 개발이라 함은… 이름 그대로 테스트가 주도하는 개발이다 (…?) 함수 단위의 테스트를 권장한다 테스트 코드를 먼저 짜고, 테스트가 정상적으로 돌아갈 때까지 테스트를 하면서 코드를 작성한다 장점이 무엇일까 모듈의 역할이 단순하고, 명확해진다 만들어야 하는 기능을 좀 더 명확하게 만들 수 있다 실제 상황에서 발생할 에러를 발견할 수 있다 BDD 행동 주도 개발이다 TDD 에서 파생된 프로세스이다 (동작 작성으로 시작한다) 시나리오 기반의 테스트 케이스를 작성한다 (비개발자가 이해할 수 있을 정도로 테스트 케이스를 작성한다) Given When Then 을 기본 패턴으로 권장한다 비즈니스 요구사항에 집중하여 개발한다 최종 사용자를 위한 동작에 중점을 둔다 장점이 무엇일.. 공감수 2 댓글수 2 2023. 1. 10.
  • [백엔드 도전] Data Grip 에 로컬 mysql 연결 뭔가 본 건 많아서 젯브레인의 datagrip 이라는 IDE? 를 사용하고자 한다. datagrip 을 실행한 후 MySQL DB를 만들어 보자 New Project 해서 프로젝트를 하나 만들어 준 뒤, + 버튼을 눌러 MySQL을 선택한다. 혹시나 빨간 박스 같은게 뜬다면, 다운로드 버튼을 눌러 설치해 주자. 필요한 드라이버 파일들이 없다는 뜻이다. User, Password 를 입력한 뒤, OK를 눌러준다. 방금 생성한 데이터베이스 > New > Query Console cmd+enter 성공적으로 디비가 만들어진다... 백엔드는 넘 오랜만이라 두근거리는구만!! Spring boot + Mysql 을 할 예정이기 때문에 datagrip 셋팅은 여기까지 하도록 한다.. 공감수 0 댓글수 0 2022. 9. 19.
  • [백엔드 도전] 맥북에서 MySQL 로컬 셋팅하기 백엔드를 다시 도전해 보고자 한다. 아니 하던 프론트나 열심히 하세요 ㅎ;; 라고 할 수도 있겠지만 지식에 대한 갈망은 어느 개발자나 있지 않을까 싶다. (아닐지도) 백엔드는 1년 전에 마지막으로 했기 때문에, 이상한 내용이 나올 수도 있다. 그럴 땐 쯧쯧 하고 넘어가지 말고, 마음껏 훈수해 주셨으면 한다. (욕은 삼가주세요 ^^;;;) 1. MySQL 설치 $ brew install mysql 준비물부터 준비하시라... brew 에서 mysql 을 설치하면 된다. (초간단) brew 가 무엇이냐 하는 분들은 아래 링크에서 설치부터 하시라 https://whitepaek.tistory.com/3 Homebrew(홈브류) 설치 및 사용법, MacOS에서 프로그램을 쉽게 다운로드 및 삭제할 수 있는 패키지 .. 공감수 1 댓글수 1 2022. 9. 19.
  • 허허 그냥 옮기지 말고 새로운 시작을 하도록 한다. 제곧내.. 너무나 어이가 없게도 ㅎㅎ;; 미디엄에 올려놓은 이미지들이 죄다 삭제되었다. 따라서 미디엄을 못 쓰게 될 것 같다..;; ㅎㅎ 다시는 외국 블로그 안 쓸 것임 .. 너무 화나네 ^^;;; 공감수 0 댓글수 0 2022. 9. 19.
  • Nuxt(vue)에서 OAuth2 이용하기 (네이버, 카카오 로그인) 2020-06-01 에 작성된 글입니다. 현재 OAuth2를 지원하는 많은 소셜사이트가 있는데요, 저는 그 중 카카오톡과 네이버를 이용하도록 하겠습니다. 사실 OAuth 연동은 공식 개발 문서만 봐도 충분하나, Nuxt만 그런 건지 Vue 자체가 그런 건지… 버그가 발견되어 공유를 하려 합니다. 일단, Naver부터 시작하겠습니다. 1. Naver로 로그인하기 (네아로) 시작하기 전, 애플리케이션 등록을 먼저 해 주세요. 애플리케이션 - NAVER Developers 사용 API에는 네아로를 선택해 주시고, 주소에는 로컬호스트 주소를 넣도록 하겠습니다. OAuth 기능을 프론트엔드에서 지원할 것이기 때문에 Javascript로 연동을 시키려 합니다. 아래 공식 문서에서 튜토리얼을 확인할 수 있습니다. W.. 공감수 0 댓글수 0 2022. 9. 19.
  • 역시 하루만에 옮기는건 무리무리,,,, ㅎㅎ 내 능력을 넘 높게 봤군 근데 옮기는 게 맞는 판단일까,,, 하 너무나 귀찮은 것 그래도 미디엄보단,,, 한국인이 많으니까... 커뮤니티가 더 크지 않을까... 그나저나 옮기면서 봤는데 기존 게시글들 뷰 수가 생각보다 높다... 나 혼자만의 삽질일 줄 알았더니... 웬열,,,, 뿌듯하군... 공감수 4 댓글수 0 2022. 2. 6.
  • [Nuxt] pwa cache 적용, version number 추가 오프라인 서비스를 하기 위한 많은 방법이 있는데, 저는 이 중 service worker를 이용한 캐싱으로 진행하려고 합니다. 사실 이는 pwa에서 이미 지원해 주고 있기 때문에 그렇게 복잡한 일이 아닙니다. 저는 프로젝트를 만들 때 pwa를 설치했기 때문에, nuxt.config.js에 가서 몇가지 설정만 변경해 주도록 하겠습니다. pwa 설치 및 모듈 적용은 이전 포스팅을 확인해 주세요. 1. NUXT PWA Cache 적용 설정이 완료됐다면 nuxt.config.js에 workbox 설정을 추가해 주겠습니다. workbox: { runtimeCaching: [ { handler: 'CacheFirst', urlPattern: '/*', strategyOptions: { cacheName: `v1`,.. 공감수 0 댓글수 0 2022. 2. 6.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.