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

A 테이블 - B 테이블 쿼리

A 테이블 - B 테이블A테이블과 B테이블에 같은 컬럼이 있을 때, A테이블의 값 중 B테이블의 값에서 없는 데이터만 나타내는 쿼리를 작성해봅시다. 일단, 각 테이블에 다음과 같은 데이터가 존재한다고 가정합시다.A테이블과일사과바나나배포도수박 B테이블과일사과배수박  그러면 A테이블 - B테이블을 어떻게 하면 될까요?크게 두가지 방법이 있습니다. 방법 1. NOT IN 사용NOT IN을 사용하여, B테이블에 없는 값을 가진 A테이블을 나타내 줍니다.쿼리는 다음과 같아요.(이 떄, name은 비교할 컬럼입니다.)SELECT *FROM AWHERE name NOT IN (SELECT name FROM B); 결과그러면 정상적으로 바나나와 포도만 나타나는 것을 확인할 수 있습니다. 방법 2. LEFT JOIN 사..

• format_list_bulleted Back-End Study/DBMS
• · 2024. 11. 20.
• 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