본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


앵귤러, 리엑트, 뷰113

Next-auth과 401 jwt 방식을 사용하여 로그인 기능을 구현하면 리프레시토큰과 엑세스토큰을 사용한 "엑세스토큰 만료 후 갱신"을 하게 됩니다.물론..보안에 대해서 그냥 넘어가려면 리프레시토큰을 안 쓰는 곳 도 있겠지만요. next-auth에서 일반적으로 소셜 로그인을 사용하지 않고 사용자가 구현한 API 서버를 활용하여 로그인 기능을 구현하려면 일반적으로 CredentialsProvider 함수를 사용 합니다.아래 코드는 providers의 한 부분 입니다. { providers: [ // 아래 방식이 소셜 로그인! // GoogleProvider({ // clientId: process.env.GOOGLE_ID, // clientSecret: process.env.GOOGLE_SECRET.. 2025. 5. 9.
Nextjs에서 ddd(domain driven design) 적용 해 보기 도메인 주도 설계(DDD, Domain-Driven Design)는 복잡한 비즈니스 도메인을 효과적으로 모델링하고 개발하기 위한 접근 방식입니다.특히 비지니스로직을 철저하게 분리함으로써 코드가 각각의 역할에 집중을 할 수 있게 해주며, 서버 프로그래밍을 하시는 분 들은 대부분 해당 전략을 사용 합니다. 프론트 또한 단순한 도메인이라면 상관 없겠지만 "은행", "병원" 같은 정말 많은 데이터가 관리 되어야 하는 프로젝트에서 각종 알 수 없는 조건문과 케이스가 복잡하게 난도질 되어 있다면 ddd를 적용 함으로써 완벽하게 비지니스 영역과 화면(뷰, view)영역을 분리하는 것이 향후 유지보수에 좀더 용이하다 할 수 있겠습니다. ddd 패턴을 적용하려면 철저하게 비지니스 로직 영역에 적용을 해야 합니다.이번에 .. 2025. 2. 21.
열심히 만져본 next와 nuxt nextjs와 nuxtjs는 SSR의 대표주자로 각각 vue와 react 문법을 사용하여 서버사이드 렌더링을 지원 해 줍니다. 기존의 CSR만 사용하던 프레임워크의 구조와 다르게 각각 서버영역코드, 클라이언트영역코드 등 2가지 형태로 구분되는 것 또한 러닝커브에 높은 영향을 끼치지 않았나 싶습니다.몇몇 프로젝트를 진행하면서 제가 느껴본 SSR 특징을 정리 해 보았습니다.어디까지나 주관적인 생각 입니다!1. 디렉토리 구분 next와 nuxt 프레임워크는 디렉토리를 구분하여 컨벤션을 강제로 정의 합니다. 예를 들어 "pages 디렉토리는 뷰 파일을 보관", "components 디렉토리는 클라이언트용 컴포넌트를 보관" 등 역할을 아에 나누어 놓았습니다. 이렇게 코드의 표준화 및 유지보수성을 위해 채택한 전략.. 2025. 2. 3.
[VUEJS] Nuxtjs에서 캐싱 환경에서 호이스팅 그리고 세션 쿠키 자바스크립트에서의 기본 특성 중 호이스팅(hoisiting)이 있습니다.해당 기능은 변수나 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특성을 말합니다. 이는 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 저장하는 방식 때문에 발생합니다.마찬가지로 nuxtjs환경에서의 개발도 이러한 호이스팅 기능에 의해 영향을 받습니다. SSR 환경으로 nuxtjs를 동작시키게 되는 경우 일반적으로 세션 쿠키를 주로 사용하게 됩니다.마찬가지로 상태 관리 라이브러리인 pinia 또한 persist값을 사용하게 되는 경우 세션 쿠키를 사용 합니다. 넉스트(nuxtjs) 환경에서 개발을 하면서 조금 특별하고 잊지 말아야할 부분이 있어서 기록을 해 봅니다.1. 캐싱 환경에서의 호이스팅아래와 .. 2024. 12. 12.
[VUEJS] Nuxtjs 3 프록시와 미들웨어 nuxtjs 환경에서 프록시를 설정하여 API 서버와 서로 데이터를 주고받는 설정방법은 다양하게 존재 합니다.조금 아쉬운 것은 nuxtjs 3버전의 자세한 설명이 매번 찾을 때 마다 어려웠었던 거 같습니다.* 이래서 레퍼런스가 적고 사용자마저 적은 프레임워크는 안쓰.. 1. @nuxt-alt/proxy 모듈 사용일반적으로 nuxtjs를 사용할 때 "@nuxt-alt/proxy" 모듈을 추가해서 사용하는 방법이 있습니다.해당 설정은 매우 간단하고 직관적 입니다.아래는 설정파일 부분의 일부분 입니다.* 파일 : nuxt.config.ts{ //기타 설정 생략... modules: [ "@nuxt-alt/proxy", //프록시 모듈 ], proxy: { proxies: { "/교.. 2024. 12. 3.
[VUEJS3] 뷰 환경에서 URL은 바뀌었지만 실제 라우팅이 안될 때 뷰 개발환경에서 URL이 바뀌었지만 실제 라우팅이 되지 않을 때가 있습니다. "중첩 라우팅" 인 환경에서 "단일 라우팅" 환경으로 동작 했다가 다시 "중첩 라우팅" 인 환경으로 이동한 경우 발생하는 케이스라 생각 됩니다. 이때 문제가 발생하는 구간은 중첩 라우팅에서 파라미터를 포함된 요청이 발생하는 경우 입니다. 여기서 눈 여겨 보아야 하는 구간은 name 입니다. name을 사용하게 되면 모든 필요한 파라미터를 명시적으로 전달해야 합니다. 부모 라우트에서 필요로 하는 파라미터가 자식 라우트에서 누락되면, Vue Router가 정확한 라우트를 식별하지 못해 이동을 수행하지 않을 수 있습니다. 반면, path를 사용하면 URL이 명확하게 지정되므로 이런 문제가 발생하지 않습니다. name을 사용하게되면 좀.. 2024. 4. 5.