주요 npm 명령어

오랜만에 글을 쓰게 되었네요..오늘은 패키지 라이브러리를 설치할 때, 자주 사용하는 npm 명령어에 대해 알아봅시다! 1. npm명령어에 대해 알아보기 전에 npm은 무엇일까요? npm(Node Package Manager)은 Node.js의 패키지 관리자로, JavaScript 라이브러리 및 패키지를 설치하고 관리하는 도구 입니다.Node.js와 함께 설치되며, 오픈 소스 패키지(라이브러리, 프레임워크 등)를 쉽게 설치, 업데이트, 삭제할 수 있습니다. 2. npm 명령어그러면 주요 npm 명령어들은 무엇이 있는 지 알아봅시다. 2-1. 패키지 관리npm init : package.json 파일을 생성해요.npm init -y : 기본값으로 package.json을 생성합니다. npm init와 다른점..

• format_list_bulleted Front-End Study/Node.js
• · 2025. 2. 17.
• textsms

JSON.stringify()와 JSON.parse()

개발을 하다보면, JSON 형태의 객체를 문자열 String으로 변환하고 싶거나, 반대로 문자열을 JSON 형태로 변환하고 싶은 경우가 생긴다면, 어떻게 해야 할까요?이 때, 사용하는 메서드가 JSON.stringify()와 JSON.pase()입니다.지금부터 이 두 메서드가 어떤 의미이며, 어떻게 사용하는 지 알아봅시다! 1. JSON.stringify()JSON.stringify() 메서드는 객체를 JSON 형식의 문자열로 변환하는 메서드에요.주로 데이터를 서버로 전송하거나 파일로 저장할 때, 사용합니다. 1-1. 사용방법사용방법은 아주 간단합니다. 객체인 변수에 JSON.stringify()를 추가하면,  그 변수는 문자열 형태로 변환해요.예를 들어봅시다.const user = { name: "홍..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 11. 22.
• textsms

created와 mounted의 차이점

Vue.js를 개발하다 보면, created와 mounted를 사용하는 경우가 있을 겁니다.이 둘은 Vue 컴포넌트 생명주기의 특정 단계에서 호출되는 훅인데요. 적절한 상황에 이 훅들을 사용할 수 있도록 created와 mounted의 차이점에 대해 알아봅시다. 1. createdcreated 훅은 Vue 컴포넌트가 생성된 직후에 호출됩니다.이는 컴포넌트의 데이터 옵션(data, computed, methods 등)가 초기화 된 상태에요.또한, DOM이 아직 준비되지 않은 상태에서 실행하기 때문에 아직 DOM에 접근할 수 없습니다.그렇기에 created 훅은 화면 렌더링과 관계없는 로직에 사용해야 해요. created는 Vue 컴포넌트가 생성되면 먼저 data, props, methods, compute..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 18.
• textsms

문자열을 카멜 케이스로 변환하기

문자열을 카멜 케이스로 변환해 봅시다!저 같은 경우, URL 파라미터를 카멜 케이스로 변경해야 했어요.USER_NAME 같은 변수인데.. 이런 경우를 어퍼 스네이크 케이스라고 하더군요?일단 변환하기 전에 카멜 케이스랑 어퍼 케이스가 무엇인지 간략하게 알아봅시다. 1. 어퍼 스네이크 케이스(Upper Snake Case)어퍼 스네이크 케이스는 여러 단어를 연결할 때, 각 단어를 대문자로 쓰고, 단어 사이에 언더스코어(_)를 사용하는 표기법입니다.예를 들어, user name이라는 문장은 USER_NAME으로 되는 것이죠. 2. 카멜 케이스(Camel Case)카멜 케이스는 여러 단어를 연결할 때, 첫 단어는 소문자로 시작하고, 그 이후의 각 단어는 대문자로 시작하는 표기법입니다.얘를 들어, user nam..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 11. 15.
• textsms

Object.fromEntries()

문자열에 있는 내용들을 변수의 키로 지정하는 방법이 존재합니다.바로 Object.fromEntries( )입니다. 이는 주어진 배열에서 키-값 쌍을 기반으로 새로운 객체를 생성하는 JavaScript 메서드에요.이 메서드는 ES2019(ES10)에서 도입되었습니다. 바로 사용해봅시다!처음에 key로 사용할 문자열 변수를 생성해 줍시다.const abc = 'a, b, c'; 그 다음 이 문자열을 배열로 만들어 줘야겠죠.abc 변수를 쉼표로 분리하여, 배열로 변환해 줍시다.const keys = abc.split(', ').map(key => key.trim());이렇게 하면, {a, b, c}인 배열이 생성이 됩니다. 이제 이 배열을 사용하여, param이라는 객체를 생성해 줍시다.이 때, Object...

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 11. 14.
• textsms

computed와 methods의 차이

Vue.js에서 자주 쓰이는 computed와 methods를 들어본 적이 있을겁니다.가끔 이 둘 중에서 무엇을 사용해야 할 지 헷갈리는 경우가 있더군요.그래서 정확하게 알고 사용하기 위해 이 둘의 차이가 무엇인 지 알아봅시다. 1. computed (계산 속성)computed는 특정 값이 다른 데이터에 의존해 계산될 때, 사용됩니다.종속된 데이터가 변경될 때에만 계산이 되는 거에요.Vue는 computed 속성을 캐시하기 때문에, 관련된 데이터가 변경되지 않는 한 계산된 값을 재사용해요. 이를 통해 Vue 컴포넌트의 상태에 따라 동적으로 변하는 값을 쉽게 관리하여 성능을 최적화할 수 있어요. 예를 들어봅시다.export default { data() { return { firstName..

• format_list_bulleted Front-End Study/Vue.js
• · 2024. 11. 8.
• textsms