영벨롭 개발 일지

[ 웹 스토리지 Storage ] 웹 개발을 하다보면 사용자 정보나 게시글 정보와 같이 영구적으로 지속되어야 하는 데이터들은 서버의 데이터베이스(DB) 또는 클라우드 플랫폼에 저장해야합니다. 하지만 저장해야할 데이터가 그다지 중요하지 않거나 유실되도 무방한 데이터라면 클라이언트 측인 브라우저 상에서 데이터를 저장할 수 있는데, 이때 사용되는 기술이 바로 웹 스토리지입니다. 웹 스토리지는 localStorage와 sessionStorage로 구분할 수 있습니다. sessionStorage에 저장된 데이터는 웹 페이지의 세션이 끝나면, 즉 웹 페이지의 탭이나 창을 닫으면 소멸됩니다. 반면 localStorage에 저장된 데이터는 웹 페이지의 세션이 끝나도 소멸되지 않고 남게됩니다. 다만, 동일한 컴퓨터와 동..

[ JSON 이란? ] JSON(JavaScript Object Notation)은 자바스크립트의 데이터를 표현하는 텍스트 기반의 데이터 포맷입니다. .json 파일에서 데이터를 작성할 때는 자바스크립트의 객체 표기법과 유사합니다. 이때 데이터형은 undefined를 제외한 string, number, boolean, null, 객체(object), 배열(array)이 가능합니다. 이때 string은 큰 따옴표(" ")만을 사용하여 표기합니다. [ 자바스크립트에서의 JSON ] json 파일은 하나의 문자 데이터로 단순하게 하나의 메모리에 저장되어 있는 큰 덩어리라고 생각할 수 있습니다. 자바스크립트에서 이 json 파일은 자동으로 문자 데이터가 아닌 객체 데이터처럼 사용됩니다. //main.js imp..

[ String 객체 생성 및 초기화 ] 자바스크립트의 문자열 데이터를 생성하는 방식은 문자열 리터럴 / 템플릿 리터럴 / String 전역 개체 세 가지가 있습니다. 문자열 리터럴은 작은 따옴표(' ') 또는 큰 따옴표(" ")로 문자열을 생성합니다. 템플릿 리터럴은 벡틱 기호(` `)와 ${ }을 사용하여 변수에 저장되어 있는 문자열을 포함한 문자열을 생성합니다. String 전역 개체를 직접적으로 사용하여 문자열을 생성할 수 있습니다. // 문자열 리터럴 const str1 = 'hello'; const str2 = "world"; // 템플릿 리터럴 const str3 = `${str1} ${str2}!`; // String 전역 객체 const str4 = String('hello world')..

[ 콜백 함수란? ] 콜백 함수(Callback function)은 함수의 인수로 사용되는 함수입니다. 파라미터로 함수를 전달하여 함수의 내부에서 실행되는 함수로 특정 실행 위치를 보장하는 용도로 사용됩니다. 콜백 함수를 사용하면 콜백 함수만을 바꿔줌으로써 하나의 함수를 여러가지로 응용할 수 있게 됩니다. 같은 인풋들로 다른 동작을 수행할 수 있으며, 코드 재활용도가 높아지고 관리에 용이합니다. - 특징 익명 함수 사용 가능 파라미터로 전달할 때 함수의 이름만 넘기기( 소괄호 없이 ) 전역변수, 지역 변수를 콜백 함수의 인수로 전달 가능 [ 콜백 함수 사용하기 ] - 특정 실행 위치 보장하기 콜백함수를 사용하므로써 우리는 함수의 특정 실행 위치를 보장할 수 있습니다. function hello() { c..

[ 자바스크립트의 함수 ] 다른 프로그래밍 언어와 마찬가지로 자바스크립트의 함수는 어떠한 목적을 가진 작업들을 수행하는 코드입니다. - 특징 기본적으로 함수는 function 키워드로 시작하며 정의/생성/출력할 수 있습니다. function 키워드 이외에도 ( ) => { } 형태로 정의할 수 있습니다. 자바스크립트에서 함수는 실제로는 객체입니다. 객체의 특성 덕분에 함수를 변수나 배열에 배정할 수 있습니다. function hello(){ console.log('hello') } const world = function() { console.log('world') } const arrow_hello = () => { console.log('hello arrow') } [ 변수 유효범위 Variable ..

[ If Statement ] 기본형 if (조건식1) { 실행코드 ... } else { 실행코드 ... } if (조건식1) { 실행코드 ... } else if (조건식2){ 실행코드 ... } else { 실행코드 ... } const a = 1; if (a === 0) { console.log("a is 0"); } else if (a === 1) { console.log("a is 1"); } else { console.log("rest..."); } [ Switch Statement ] 기본형 switch (a) { case 값1: 실행코드 break; case 값2: 실행코드 break; .... default: 실행코드 break; } const a = 1; switch (a) { cas..