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

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

문자열을 카멜 케이스로 변환해 봅시다!저 같은 경우, 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

URL 파라미터 가져오기

JavaScript로 URL 파라미터를 가져온 후, 화면에 띄워 봅시다! 1. 화면 구성하기우선 먼저, html파일을 생성한 후, body태그 안에 다음과 같이 작성해 줍시다.getUrlParameter.html 2. 변수 지정그 다음 현재 URL을 불러오기 위해, 다음과 같이 입력해 줍시다.또한, obj라는 배열도 생성해 주세요!const obj = {}; // 파라미터 내용이 들어갈 변수const url = location.href; // 현재 URL 3. URL 파라미터 불러오기다음과 같이 입력하여, URL 파라미터를 불러오는 함수를 만들어 줍시다.paramObject(url)function paramObject(url) { const param = url.split('?')[1]; // ur..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 10. 28.
• textsms

함수 선언문(Function Declaration)과 함수 표현식(Function Expression)

JavaScript에서 함수 선언문과 함수 표현식이 무엇이고 어떻게 사용하는 것인지 알아봅시다! 1. 함수 선언문(Function Declaration)함수 선언문이란? function 키워드를 사용해 함수를 정의하고, 이를 코드 어디에서나 호출할 수 있도록 하는 방법입니다. 함수 선언문의 구조는 다음과 같아요.function 함수이름(매개변수1, 매개변수2, ...) { // 실행할 코드 return 반환값; // 생략 가능} 주요 특징은 다음과 같습니다. 1-1. 호이스팅(Hoisting)함수 선언문은 코드가 실행되기 전에 함수 선언이 자동으로 상단으로 끌어올려집니다. 따라서 함수 선언문으로 정의된 함수는 코드의 어느 위치에서든 호출할 수 있어요.즉, 다음과 같이 작성해도 function이 먼저 ..

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

구조 분해 할당(Destructuring assignment)

오픈 소스 코드를 분석하던 도중, 신기한 코드를 발견했습니다.const { id, name, password, age, address } = state.info 보통 변수 = 값으로 변수를 선언하는 데, 이 코드는 변수명이 여러 개가 존재하고, 값은 하나로 되어 있더군요.이러한 문법을 구조 분해 할당이라고 합니다. 이 문법이 무엇인지 알아보아요! 1. 구조 분해 할당 (Destructuring assignment)구조 분해 할당이란? 배열 or 객체의 속성을 쉽게 수출하여 변수에 할당하는 JavaScript 문법입니다.이를 통해 코드를 간결하고 직관적으로 작성할 수 있어요. 2. 배열에서의 구조 분해 할당배열에서 구조 분해 할당을 사용하면 배열의 요소들을 각각 변수로 쉽게 할당할 수 있어요. exampl..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 10. 18.
• textsms