CodeHoon

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Vue.js 를 사용하던 와중, 모달(modal) 팝업을 사용하려고 하는데, 음.. css 로 z-index를 설정하고 뭐하고~ 해도 모달팝업이 정상적으로 안나오더라구요?

그래서 공식문서를 조금조금 뒤져보곤 했습니다.
공식문서에서도 Teleport를 Modal-Popup 에서 사용했습니다. (맨 아래 링크)

그래서 알게 된 <Teleport>

😎 How to Use

네, Vue.js 답게 사용자에게 편의성을 제공해주죠. 매우매우 간단합니다.

<Teleport to="body" v-if="updateClicked">
  <UpdateItemModal @closeModal="closeModal" /> <!--모달 컴포넌트-->
</Teleport>

저는 이렇게 사용하였습니다.

 to  속성(attribute)이 태그의 대상을 나타내어 body 태그 ( 단 한개의 body가 있으니까요) 를 바라보게 되어 element의 최상단에 위치하게 된다고 합니다.

그래서 z-index 999 로 설정하고 출력하였더니 정상적으로 출력되었습니다. (이렇게 부족한 css 실력을 메웁니다.)

😶 부연설명 

- v-if 를 통해 어떤 내용을 클릭하면 modal 창이 출력되도록 설정하였습니다.
- closeModal 이벤트를  emit으로 받도록 하였습니다.

결과물 이미지입니다.

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 목표

Nuxt.js 3 - Vue.js3 에서 routing 하기 (페이지 전환)

✔ 환경

Nuxt.js3, Vue.js3

✔ 하는방법(결론) - 결론부터 말하기

// app.vue
<template>
  <div>
    <div class="header-area">
      <NuxtLink to="/">Main</NuxtLink>
      <NuxtLink to="/login">Login</NuxtLink> 
      <NuxtLink to="/register">Register</NuxtLink>
    </div>
    <NuxtPage />
  </div>
</template>

/app.vue (루트 경로) 에서 NuxtLink와 NuxtPage를 사용하기.

// /pages/index.vue
<template>
  <div>
    this is index view from pages
  </div>
</template>

/pages/index.vue 라는 파일이 있을 때 app.vue의 NuxtPage 가 /pages/index.vue 가 되는 것 입니다.

✔ Vue.js3 와 Nuxt.js 의 차이점

일반 Vue 프로젝트에서는 

1) main.js - route 사용 선언
2) App.vue - RouteLink, RouteView 로 작성

반면에 Nuxt 에서는 조금 다르더라구요.

처음에는 NuxtPage 말고  Nuxt  태그만 작성했다가 페이지 출력이 되지 않아서 왜 자꾸 안되지??? (여러 기술 블로그를 염탐했을 때) 하다가,
아래의 Nuxt.js3 강의를 올려주신 익숙하신 Vue 유튜버 링크(맨 아래 링크 첨부)에 들어가 빠르게 감아서 NuxtLink 부분만 보고 고치게되었습니다.

✔ 조금 더 나아가기 🚀

그렇다면 /pages/directory/directory/... 이런식으로 하위 폴더가 있을 때는 어떻게 해야할지 잠깐 생각해보았고,

Nuxt 프로젝트 특유의 경로 자동 감지를 생각하게 되어, 간단하게 구현하였습니다.

이렇게 슬래쉬로 하위 디렉터리 구분을 할 수 있었습니다. 

😎 마치며 

왜 이런 간단한 것 하나조차 Vue.js 프로젝트와 달라서 이렇게 애를 먹이는 것인지,,,
하나씩 그래서 설정하고 확인하고... 라우팅까지 신경쓰면서 살고 있네요.
기존에는 1분 걸릴게 Nuxt로 하니 10분도 넘게 찾고 있었네요.

어제는 프로젝트 만들고 띄우지도 못해서ㅋㅋㅋㅋ 지웠다가 새로운 프로젝트 생성하고 난리였습니다.

이상입니다.

안녕하세요 상훈입니다.

React-Remix 프로젝트에서 개별 css 파일(스타일 적용)을 삽입하는 방법에 대해 포스팅하겠습니다.

app
ㄴcomponents
   ㄴNewNote.css
   ㄴNewNote.jsx
ㄴroutes
   ㄴindex.jsx
   ㄴnotes.jsx
ㄴstyles
   ㄴhome.css
   ㄴmain.css

파일 트리가 이렇게 되어져 있을 경우,

1. 기본 형태 
2. Surfacing Styles

두 가지를 작성하도록 하겠습니다.

1. 기본 형태 ✔

routes/index.jsx 의 경로에서 스타일(css)을 삽입해보도록 하겠습니다.

2가지만 적용해주시면 됩니다.

1️⃣ import
2️⃣ function declare

// 1
import homeStyles from '~/styles/home.css';

// 2
export function links() {
  return [{ rel: 'stylesheet', href: homeStyles }];
}

특별히 설정해줄 것?  - 없습니다.

links 라는 함수명을 remix <Links> 에서 감지하여 하위 요소로 끌고가줍니다.

root.jsx 파일에서 보시면,  @remix-run/react  에서 import 한 Link 컴포넌트가 있습니다.

그리고 이 컴포넌트는 html > head 태그 내에 들어가있습니다.

마치 html 에서 기본적으로 삽입하는 link, script 태그들 처럼요. (이해가 딱 되셨을겁니다😎)

그러면 곧바로 2번째 surfacing styles. 시작해보겠습니다.

2. Surfacing Styles - 개별 파일에서 import 하기 ✔

NewNote : 자식 컴포넌트
NotesPage : 부모 컴포넌트

자식 컴포넌트에서 선언한 스타일을 부모컴포넌트에서도 사용하려면 다음과 같습니다.

✔ 자식컴포넌트-NewNote 에서 export 한 links 를 부모에서 별칭으로 import 하여 links 함수 내에 넣습니다.

✔ 그리고 links 함수에서 spread연산자로 links를 return 시켜줍니다.

주절주절 이야기가 길어졌지만 내용은 생각보다 매우 간단했습니다. 흥미롭고 특이한 점(Surfacing😎)도 있었고요.

이상으로 포스팅을 마치도록 하겠습니다.

안녕하세요 상훈입니다.

지난포스팅에서는 personal access token을 생성하는 방법에 대해서 포스팅하였습니다.

액세스 토큰을 아직 생성하지 않으셨다면, 아래 포스팅을 먼저 확인해주시고, 생성해주세요.

2022.12.01 - [Git] - [GitLab] Personal Access Token 생성하기/방법

GitLab 과 SourceTree를 연결하는 방법을 포스팅하도록 하겠습니다.

Remote 탭에 있는 계정추가를 눌러주세요.

호스팅 계쩡 편집 팝업이 출력되었습니다.

여기서 한 번 분기가 발생하는데, 개인 서버를 호스팅했냐 안했냐에 따라서 갈립니다.

개인호스팅 서버가 있다 : GitLab CE
개인호스팅 서버가 없다 : GitLab

으로 진행해주세요. 저는 CE로 진행하도록하겠습니다.

호스트 url 을 작성해주시고, 

[Personal Access Token 새로고침] 을 눌러주세요.

이런 창이 뜨게 되는데, 

1) 사용자이름
2) 암호 : 복사한 액세스토큰 값
입니다. 확인 해주세요.

1) 사용자이름

@hoon이라고 써져있네요. 제 사용자명은 골뱅이를 제외한 "hoon" 입니다.

올바르게 인증이 되었다면,

인증 성공이 출력됩니다.

연결이 성공적으로 되었습니다. 감사합니다.

참고

안녕하세요 상훈입니다.

GitLab - SourceTree를 사용하려고하는데, Personal Access Token을 요구하더라구요.

그래서 해당 포스트에서는 1단계인 엑세스 토큰 생성하는 방법을 작성하도록 하겠습니다.

1. GitLab 접속
2. 액세스 토큰 생성 페이지 접속
3. 생성

Settings - Access Tokens 에 진입합니다.

1) Token Name
2) Select a Role
3) Select Scopes

이 세가지를 모두 완료해주시고, [Create project access token] 을 눌러주시면 토큰이 생성됩니다.

상단에 액세스 토큰이 출력됩니다.

생성된 토큰을 사용해주시면 됩니다.

안녕하세요 상훈입니다.

node.js 를 이용한 백엔드 개발 중 .js 파일을 require 말고 import 시키고 싶었는데 안되었던 경험이 있으실 수 있습니다.

그때에는 package.json 혹은 eslintrc.json 파일의 parserOptions 항목을 살펴보셔야합니다.

ecmaVersion은 2016이상으로 맞춰주시길 바랍니다.

제 eslintrc.json 입니다.

"parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest"
  },

sourceType: module 을 추가해주시거나, 변경해주시거나

package.json에서 type: 'module' 을 추가해주세요.

이제 import 를 사용하실 수 있습니다.

덤으로 export const ~ 도 사용하여 모듈식 출력이 가능해졌습니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

리액트를 다루는 기술이라는 책의 21강에서 사용되는 koa-router는 현재의 리액트 버전(17)에서는 사용할 수 없습니다.

설치방법

npm i koa-tree-router

사용 방법

const Koa = require("koa");
const Router = require("koa-tree-router");

const app = new Koa();
const router = new Router();
router.get("/", function(ctx) {
  ctx.body = "hello, world";
});

app.use(router.routes());

app.listen(8080);
// 혹은
app.listen(8000, () => {
  console.log('listening...8000...');
})

기존의 사용방식은 일치하고, 다른점은 하단의 app.use 부분입니다.

allowedMethods() 와 같은 긴 코드가 사라지고 위와같이 깔금한 내용만 남았습니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

깃허브를 이용하여 특정 Repository의 Collaborator로 지정되었을 때, 직접 url에 작성하는게 아니라 클릭 몇번으로 들어가는 방법입니다.

* Collaborator 를 승인하였는지 확인하고 진행해주세요. *

1. GitHub에 로그인 하고 본인 프로필 아이콘 - Settings 로 들어가주세요.

2. Repository를 클릭해주세요

 

 

3. Collborator로 지정된 Repository들을 살펴보실 수 있습니다.

이상입니다.

* 도움이 되셨다면 광고 한 번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. *

감사합니다.