Next.js Parallel Routes(병렬 라우팅) 사용법

Next.js 13 이후 버전부터 app 디렉터리 방식으로 라우팅을 구현할 수 있습니다. 그중에 병렬 라우팅(Parallel Routes)에 대해서 알아보도록 하겠습니다. 병렬 라우팅이란? 하나의 레이아웃에 여러 페이지를 동시에 또는 조건부로 렌더링 할 수 있습니다. 주로 대시보드나 피드에서 여러 가지 레이아웃이 역동적인 페이지에서 사용할 수 있습니다. 모달창과 같이 하나의 레이아웃에 여러 페이지를 띄울 수도 있습니다. 또 인증 정보 등 조건에 따라서 렌더링을 할 수 있습니다. 병렬 라우팅을 사용하면 레이아웃마다 각각 오류 처리와 로딩 상태를 정의할 수 있는 장점이 있습니다. 사용법 slot name 을 이용해서 생성합니다. @folder 네이밍 컨벤션을 이용해서 slot를 생성합니다. layout.ts..

• format_list_bulleted Next.js
• · 2023. 12. 21.
• textsms

맥에서 유튜브 쇼츠 만들 수 있는 영상 편집 프로그램 추천

유튜브 쇼츠? 유튜브 쇼츠는 세로 화면의 영상이고, 1분 이내 영상이면 자동으로 쇼츠로 등록됩니다. 유튜브에서 바로 영상을 올릴 수도 있지만, 쇼츠로 만들기 위해서는 세로 화면으로 변경하고, 영상을 1분 이내로 컷을 해야 합니다. 간단한 편집을 하면 더 보기 좋고 사용자들이 보기 편하게 만들 수가 있는데요. 맥에서 쇼츠 편집하기 좋은 프로그램 3가지를 추천해드리겠습니다. iMovie apple에서 만든 맥 기본프로그램인 iMovie 얩니다. 기본앱인 만큼 가볍고, 쉽게 영상 편집을 할 수 있습니다. 화면을 컷이 가능하고, 효과 및 전환을 할 수 있습니다. 1분이내로 영상을 컷하고, 세로 화면으로 변경을 위해서 사용하는 수준에 적절합니다. iMovie 다운하기 ‎iMovie ‎간결한 디자인과 직관적인 편집..

• format_list_bulleted etc
• · 2023. 12. 19.
• textsms

Vue에서 컴포넌트 리렌더링 하는 방법 4가지

개발 중 상태 변화에 따라서 자식 컴포넌트를 새롭게 렌더링 해야 할 필요가 있는 경우가 있습니다. 그럴 경우에 컴포넌트를 리렌더링 하는 방법 4가지를 설명드리겠습니다. 4가지 방법 중 가장 아래에 있는 key를 이용해서 리렌더링 하는 방법을 추천드립니다. 1. reload() 사용하기 화면을 새롭게 다시 그리는 방법입니다. 완전히 모든 컴포넌트와 화면을 다시 그리기 때문에 성능상으로 비효율적입니다. Reload 2. if문 이용하기 아래 코드의 동작 방식을 간단히 설명하면 1. v-if문을 이용해서 컴포넌트를 숨김 2. $nextTick을 이용해서 DOM을 업데이트 합니다. 3. 다시 컴포넌트를 생성하여 렌더링을 합니다. $nextTick 3. $forceUpdate 사용하기 $forceUpdate를 이..

• format_list_bulleted Vue
• · 2023. 12. 5.
• textsms

Span 태그 수직 / 수평 정렬하는 3가지 방법

span 태그는 inline 요소로 그룹화를 하거나 주로 텍스트에 스타일을 줄때 많이 사용합니다. div 태그내에 있는 span 태그 수직/수평 정렬하는 3가지 방법에 대해서 알아보도록 하겠습니다. 1. Flex 이용 아래 속성들을 div에 적용하면 내부 요소들이 수직 / 수평 정렬 할 수 있습니다. display: flex; justify-content: center; // 수평 align-items: center; // 수직 Hello Superman .ex1 { display: flex; justify-content: center; align-items: center; } 2. height, line-height 이용 div 요소 height 적용하고, 내부 span 태그에 div 적용한 heigh..

• format_list_bulleted CSS
• · 2023. 12. 1.
• textsms

JavaScript - 객체 복사 합치기 ➡️ Object.assign, Spread 연산자 공통점과 차이점

자바스크립트에서 객체를 합치는 방법 두가지에 대해서 말씀드리려고 합니다. Object.assign 함수를 이용하는 방법과 자바스크립트 Spread 연산자인 전개 연산자를 사용하는 방법이 있습니다. 두가지 방법 사용법과 공통점과 차이점에 대해서 알아보도록 하겠습니다. 사용법 1. Object.assign 이용하기 const target = { name: 'superman' }; const source = { age: 20 }; const result = Object.assign(target, source); // {name: 'superman', age: 20} 2. Spread 연산자 이용 하기 const target = { name: 'batman' }; const source = { age: 21 }..

• format_list_bulleted JavaScript
• · 2023. 11. 28.
• textsms

JavaScript - 조건부 객체 속성 추가하기

조건에 따라서 객체의 속성을 추가하고 싶을 때가 있습니다.특정 조건일 경우에만 { name: 'superman' } 을 추가할 때 어떻게 코딩하면 좋은지 한번 알아보도록 하겠습니다. 고전적인 방법if문을 통해서 프로퍼티를 생성하고 값을 넣는 방법이 있습니다.var isCondition = true;var person = { age: 20};if (isCondition) { person.name = 'superman';} 삼항 연산자 이용하기객체에 삼항연산자를 이용해서 프로퍼티를 추가할 수 있습니다.var isCondition = true;var person = { age: 20, ...(isCondition ? { name : 'superman' } : {})}; 논리 연산자 ( && ) ..

• format_list_bulleted JavaScript
• · 2023. 11. 28.
• textsms

어떤 회사를 선택하고 가야할까? 좋은 회사 고르는 방법

안녕하세요, 이제 막 20살이 된 분들 부터 60세가 넘으신분들까지 많은 분들이 다양한곳에서 직장생활 하고 있습니다. 그러면 어떤 직장에 들어가는 곳이 좋을까요? 여러분들은 좋은 직장을 고르는 기준 같은 것이 있으신가요? 대기업? 높은 연봉? 복지? 출퇴근 거리? 제가 대학생 때 취업 상담 선생님께서는 연봉/복지/거리 모두 만족할 수 있는 회사는 없다고, 있으면 자기 한테 좀 알려달라고 이야기를 했던 기억이 있습니다. 제가 생각하는 좋은 직장 고르는 방법에 대해서 이야기 해보도록 하겠습니다. 1. 나의 꿈을 이룰 수 있는 곳인가? 직장 생활은 단순히 돈을 벌기 위해서 하기 보다는 내 꿈을 실현하고 자아 성취를 하기 위해서 해야 합니다. 단순히 돈을 위해 더 큰 연봉만을 꿈꾸고 직장생활을 하게 된다면, 하..

• format_list_bulleted 이야기
• · 2023. 11. 25.
• textsms

구글 애드센스 첫 수익 인증 출금 방법 입금일 수수료

안녕하세요 이번달에 저의 구글 애드센스 수익 $100를 모두 채워서 처음으로 출금하였습니다. 하루 종일 진짜 돈이 입금 될까, 또는 문제가 생겨서 입금이 안되지 않을까라는 걱정도 있었습니다. 하지만 22일에 신한은행 계좌로 정상적으로 첫 수익금이 입금 되었습니다. 저의 첫 포스팅이 2017년 11월 20일이였으니깐 약 6년만의 첫 수익입니다. 구글 애드센스 수익 지급일 구글 애드센스 수익 지급일은 매월 21일~26일 입니다. 자세한 날짜는 지역마다, 시간마다 달라진다고 합니다. 저는 22일 오전에 수익이 지급되었다고 메일이 도착하였고 약 10분 뒤에 신한은행 계좌로 해외 송금이 도착했다고 카톡 알림이 와서 수령하였습니다. 해외 송금 수수료 아쉽지만 달러로 입금이 되기 때문에 원화로 받기 위해서는 환전 수..

• format_list_bulleted 블로그
• · 2023. 11. 24.
• textsms

드래그 할때, 클릭 이벤트 방지 하는 방법

아래와 같이 클릭 이벤트를 만들어서 사용하고 있었습니다. 하지만, 드래그할 때도 아래와 같이 클릭 이벤트가 발생하였습니다. 저는 단지 드래그 이후 복사를 하고 싶었는데, 클릭 이벤트를 발생시키고 싶지 않았습니다. const div = document.querySelector('div'); div.addEventListener('click', () => { alert('click'); }); 클릭 이벤트 방지 시키는 방법 아래와 같이 mousedown, mousemove 이벤트를 이용해서 동작이 드래그인지 판단합니다. 그 이후 mouseup 이벤트에서 click 이벤트 로직을 실행시킵니다. const div = document.querySelector('div'); let isDrag; div.addEve..

• format_list_bulleted JavaScript
• · 2023. 11. 23.
• textsms

a태그 이용해서 파일 다운로드 하는 방법 2가지

a태그를 이용해서 다운로드할 수 있는 방법 두 가지에 대해서 알아보도록 하겠습니다. a 태그 download 속성 이용하기 a태그는 해당 url로 이동하거나, 새 탭을 열 수 있습니다. 하지만 download 속성을 사용하면 해당 url의 파일을 다운로드할 수 있습니다. download 값을 넣게 되면 해당 이름으로 파일 다운로드를 할 수 있습니다. 다운로드 단 주의해야할점이 있습니다. 동일 출처 정책에 의해서 다운로드 파일의 경로가 현재 페이지의 url과 동일해야 다운로드가 가능합니다. clickEvent를 이용해서 다운로드하기 다운로드의 파일 경로가 다르다면 a tag에 click 이벤트를 이용해서 다운로드할 수 있습니다. 아래와 같은 방법으로 파일 다운로드를 할 수 있습니다. 다운로드 const c..

• format_list_bulleted JavaScript
• · 2023. 11. 21.
• textsms