JavaScript - 파일 업로드 구현하기 multipart/form-data

파일 업로드 구현할 때, input file 태그에서 파일을 입력받고 파일 업로드를 하고 FormData에 파일을 넣고 axios post 메서드를 이용해서 파일 전송을 할 수 있습니다. 파일 업로드 예시 파일 업로드 const uploadBtn = document.getElementById('uploadBtn'); uploadBtn.addEventListener('click', () => { const fileInput = document.getElementById('fileInput'); const file = fileInput.files; const formData = new FormData(); forData.append('file', file); cosnt response = axios.post..

• format_list_bulleted Develop/JavaScript
• · 2024. 1. 11.
• textsms

자바스크립트 undefined와 null 차이점

자바스크립트에서는 undefined 와 null 개념이 있습니다. 언뜻 보면 둘다 비어있는, 없다라는 느낌의 친구들인데, 어떤 차이점이 있는지 알아보도록 하겠습니다. 둘다 값이 없거나, 정의 되지 않는 상태를 뜻합니다. Boolean 으로 표현하면 false 입니다. undefined 변수 또는 인수를 선언 후 값을 할당하지 않으면 undefined가 됩니다. 숫자적 표현하면 NaN 입니다. undefined + 12 // NaN null 의도적으로 비어있을 표현하는 값입니다. 숫자적으로 표현하면 0에 가깝습니다. null + 12 // 12

• format_list_bulleted Develop/JavaScript
• · 2023. 12. 26.
• textsms

Docker(도커) 란? 컨테이너란? 설치 방법

도커란? 컨테이너를 생성하고 관리하기 위한 도구입니다. 컨테이너란? 코드를 실행하는데 필요한 종속성과 도구가 포함되어 있는 코드 패키지 표준화된 소프트웨어 유닛입니다. 컨테이너에 Node.js 어플리케이션이 있는 경우에 그 코드를 실행하기 위해 필요한 도구들을 가지고 있습니다. 뿐만 아니라, 동일한 Node.js 코드와 Node.js를 실행하는 도구를 동일한 버전으로 가지고 있어서 항상 동일한 동작과 결과를 제공하는 장점이 있습니다. 도커를 사용해야 하는 이유 로컬, 개발, 운영 환경 그리고 동료 들과의 환경 설정이 각각 다르면 어디서 오류가 발생하는지 찾기 어렵습니다. 예를 들어 로컬환경에서는 Node 14 버전을 사용하고 운영 환경에서는 Node 12 버전을 사용한다면, 로컬에서는 정상적으로 동작하는..

• format_list_bulleted Develop/etc
• · 2023. 12. 24.
• textsms

Next.js Intercepting Route 사용법 장점 언제 사용하면 좋을까?

Next.js 13 버전 이후 Interceptiong Route의 개념이 생겼습니다. Intercepting Route 란? 가로채기 Route 입니다. Next.js 에서 라우터를 가로채기를 하여 현재 레이아웃 내에서 다른 부분의 경로를 로드할 수 있습니다. 이렇게 하면 다른 전환 없이 내용을 표시할 수 있는 장점이 있습니다. 아래 장점과 같이 데이터 페치가 필요하거나, 인증 및 권한 보안 처리가 필요하거나, 동적 조건에 따라서 사용자 요청에 따라서 제어가 필요할 때 사용하면 좋습니다. 장점 데이터 가져오기 인증 및 권한 보안 처리 동적 조건에 따라 사용자 요청에 따라서 제어 가능 서버 리소스 효율 증가 사용법 아래와 같이 페이지 구조를 만들어서 사용 가능합니다. (.)의 같은 수준 디렉터리 (..)..

• format_list_bulleted Develop/Next.js
• · 2023. 12. 24.
• textsms

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

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

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

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

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

• format_list_bulleted Develop/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 Develop/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 Develop/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 Develop/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 Develop/JavaScript
• · 2023. 11. 28.
• textsms