반복문을 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있습니다. 반복문에는 while, do-while, for문 이렇게 3가지가 있는데요. 이번 포스팅에서는 그중에서 while문에 대해서 알아보려 합니다. while 문은 조건이 참인 동안 특정 코드 블록을 반복적으로 실행하는데 주로 특정 조건이 충족될 때까지 반복해야 할 경우에 사용됩니다. while문 사용법 while (조건) { // 조건이 참일 때 실행될 코드 블록 } 위의 예제는 while문의 기본형입니다. 여기서 조건은 불리언(boolean) 값으로 표현될 수 있는 식을 말하며 해당 조건이 true인 동안, 중괄호 { } 안의 코드 블록이 반복해서 실행됩니다. while의 실행 순서 조건식을 검사합니다. 만족하면 중괄호 { } 안의 코..
여러 개의 조건을 처리할 때 if-else문을 사용할 수도 있지만 switch문을 사용할 수도 있습니다. 스위치 문(Switch statement)은 특정 변수나 표현식의 값을 기반으로 다양한 경우(case) 중 하나를 선택하여 실행하는 조건문의 하나로써 하나의 코드만 실행한다는 뜻으로 선택문이라고도 말하기도 합니다. switch문의 장점 2가지 가독성: switch문은 여러 개의 case로 분기되어 있어서 else-if보다 가독성이 좋습니다. 특히, 비교하려는 값이 많고 조건에 만족하였을 때 실행하는 코드가 적을 때 switch문을 사용하면 코드를 깔끔하게 유지할 수 있습니다. 동등 비교 강제 : switch문에서는 기본적으로 값과 case문의 값이 '===`로 비교됩니다. 이는 자료형과 값이 모두 같..
조건문이란? 조건문은 조건식의 값이 참(true)인지, 거짓(false)에 따라 자바스크립트 코드를 제어하는 문법으로 조건문 if문의 경우에는 if문, else if문, else문 3가지 키워드를 사용하여 조건문은 특정 조건이 참이면 특정 코드 블록을 실행하고, 거짓이면 다른 코드 블록을 실행합니다. 특정 조건이 충족되었을 때만 특정 코드 블록을 실행하기 때문에 프로그램의 흐름을 효과적으로 제어할 수 있고, 프로그래밍적 유연성이 향상시킬 수 있습니다. if문 사용법 if (조건) { // 조건이 참일 경우 실행되는 코드 블록 } else { // 조건이 거짓일 경우 실행되는 코드 블록 } if문은 조건식을 만족(true)일때만 코드를 실행하고 조건을 만족하지 않다면 else문이 실행됩니다. 여기서 els..
자바스크립트에서 제곱근을 계산하는 다양한 방법이 존재합니다. 대표적으로 두 가지 방법이 존재하는데요. 이번 포스팅에서 한번 소개해보고자 합니다. 자바스크립트에서 거듭 구하는 방법 ** 연산자 사용 let x = 25; let y = 0.5; console.log(x ** y); // 출력: 5 ES6 이후부터는 지수 연산자 **를 사용하여 간단하게 제곱근을 계산할 수 있습니다. 제곱근은 지수 연산자를 사용하여 0.5승으로 계산하시면 됩니다. Math.sqrt() 메서드 사용 let x = 25; console.log(Math.sqrt(x)); // 출력: 5 고전적인 방법으로 Math의 sqrt 메서드를 사용하는 방법이 있겠습니다. 아직까지 ES6(ECMAScript 2015)를 지원하지 않는 브라우저도..
자바스크립트에서 거듭제곱을 계산하는 다양한 방법이 있습니다. 대표적으로 두 가지 방법이 있는데요. 이번 포스팅에서 소개해보고자 합니다. 자바스크립트에서 거듭 제곱 구하는 방법 ** 연산자 사용 let x = 2; let y = 3; console.log(x ** y); // 출력: 8 ES6 이후부터는 지수 연산자 **를 사용하여 간단하게 거듭제곱을 계산할 수 있습니다. 위의 예제처럼 하면 2의 3승으로 8이 출력됩니다. Math.pow() 메서드 사용 let x = 2; let y = 3; console.log(Math.pow(x, y)); // 출력: 8 고전적인 방법으로 Math의 pow 메서드를 사용하는 방법도 있습니다. 아직까지 ES6(ECMAScript 2015)를 지원하지 않는 브라우저도 여..
let x = 0.1 + 0.2; console.log(x); 위의 자바스크립트 코드를 실행시키면 어떤 결과가 나올까요? 상식적으로는 0.3이 나와야 정상이겠습니다만 실제로는 위와 같이 0.30000000000000004라는 결과값이 나옵니다. 바로 자바스크립트의 Number Type이 64비트의 부동 소수점으로 데이터를 저장하기 때문에 부동소수점 문제가 발생한 것입니다. 이번 포스팅에서는 자바스크립트에서 부동 소수점 문제가 발생하는 원인이 무엇이고, 이 문제를 어떻게 해결할 수 있을지에 대해 알아보도록 하겠습니다. ※ 참고로 자바스크립트만 이 부동소수점에 대한 이슈는 자바스크립트에서만 발생하는 특이한 이슈가 아닌 부동소수점을 차용하고 있는 모든 프로그래밍 언어에서 이러한 문제가 발생합니다. 부동 소수점..
객체(Object)란? 자바스크립트는 객체 기반 프로그래밍 언어입니다. 객체를 구성하는 요소로는 속성(Property)과 기능(Method)이 있습니다. 속성과 기능이 있다는 점에서 TV는 객체로 표현될 수 있습니다. 너비와 높이, 색상, 무게와 같은 속성이 있고, TV 켜기, 끄기, 볼륨 높이기, 줄이기와 같은 기능이 있으니 말이죠. 이렇게 자바스크립트에서 이러한 객체를 잘 표현해서 코드화하면 얻을 수 있는 장점들이 많습니다. 이번 포스팅에서는 자바스크립트의 객체에 대해서 알아보도록 하겠습니다. 객체를 사용하면서 얻는 장점 데이터를 구조화시킬 수 있다 : 객체를 사용하면 데이터들을 보다 논리적으로 그룹화하여 구조화할 수 있습니다. 이러한 과정을 통해 코드의 가독성을 높이고 유지보수함에 유리합니다. 데이..
특이하게도 자바스크립트는 타 프로그래밍 언어와는 달리 변수를 선언할 때 데이터타입을 명시적으로 지정하지 않습니다. 자바스크립트(JavaScript)는 동적 타입 언어로써 변수를 선언할 때 변수에 할당된 값에 따라 동적으로 데이터 타입이 자동으로 결정되기 때문입니다. 이렇게 동적으로 데이터 타입을 지정하기 때문에 엄연히 자바스크립트에도 데이터 타입이 존재합니다. 이번 포스팅에서는 자바스크립트의 데이터 타입(DataType)에 대해 알아보도록 하겠습니다. ※ 변수를 선언자 var, let, const에 대해서 궁금하시다면 아래 글을 참고해 주세요. [JavaScript] 변수 선언자 var, let, const의 차이점과 사용법 데이터타입 종류 자바스크립트의 데이터 타입은 크게 기본 데이터 타입(Primit..
프로그래밍 언어에서 데이터를 담을 때는 변수를 선언해야 합니다. 변수는 데이터를 담는 그릇이라고 생각하시면 되고 자바스크립트에도 당연히 변수라는 개념이 존재합니다. 자바스크립트에서 변수를 선언할 때는 var, let, const라는 세 가지 키워드를 활용하여 변수를 선언하는데요. 이 세 가지 키워드들은 그 특성에 차이점이 존재합니다. 이번 포스팅에서는 var, let, const의 차이점과 사용법에 대해 알아보겠습니다. 키워드 var의 특징 var는 ES6의 등장 이전에 변수를 선언하는 데 사용되었던 초기 JavaScript에서의 변수 선언자입니다. var는 재선언이 가능하다.var x = 10;var x = 20; // 재선언 가능console.log(x); // 20일반적인 프로그래밍 언어에서..
크롬과 같은 브라우저는 개발자가 소프트웨어를 개발할 때 디버깅을 할 수 있게 하는 "개발자 도구"라는 것을 제공하고 이것이 없으면 개발이 불가능하다 싶을 정도로 모든 개발자들이 사용하는데요. 이 개발자 도구에서 자바스크립트 코드의 결과값을 콘솔에 출력하려면 console을 사용하시면 됩니다. 이번 포스팅에서는 자바스크립트의 console 사용 방법에 대해 알아보도록 하겠습니다. 개발자 도구의 콘솔 사용법 1. 자바스크립트에 console을 직접 넣을 수 있습니다. 이렇게 한다면 웹 사이트를 오픈할 때 콘솔창에 "메시지 출력"이라는 메시지가 출력되겠습니다. 2. 콘솔창은 브라우저에서 [F12]를 눌러 개발자 도구를 열고 "Console" 탭을 선택하면 삽입해두었던 메시지 출력 콘솔 코드가 동작한 것을 확인..
웹 개발을 할 때 HTML문서에서 를 정의하는 경우도 많지만 따로 JavaScript 파일을 .js파일로 별도로 생성해서 연결하는 경우도 있습니다. 이렇게 자바스크립트를 별도로 분리하면 코드의 가독성 향상, 코드의 재사용성과 유지보수성의 향상, 협업의 편리성 증가 등등 다양한 이점을 가지고 있습니다. 이번 포스팅에서는 .js 파일을 .html 파일에 연결하는 방법에 대해 알아보도록 하겠습니다. JavaScript 파일을 별도로 분리하면 좋은 이유 4가지 코드의 가독성 및 유지 보수성 향상 : HTML은 구조를 정의하고, JavaScript는 웹의 동작을 담당합니다. 이렇게 기능이 다른 HTML코드와 JavaScript 코드가 하나의 파일에 혼재되어 있는 것 보다는 JavaScript 코드를 분리하면 코드..
태그는 HTML에서 텍스트를 표현하는데 사용되는 기본적인 태그로 여기서 p는 문단을 뜻하는 paragraph의 약자입니다. 하지만 이 태그는 기본적으로는 개행을 처리하지 못해 텍스트들이 기본적으로 일렬로 쭉 나열되는 형태로 표현이 되는데요. 이러면 문단의 가독성이 떨어지겠죠. 이번 포스팅에서 해결방법에 대해 알아보겠습니다. 문제) 태그에서 개행이 표현이 안됨 See the Pen P Tage1 by wjdxo513 (@wjdxo513) on CodePen. 위의 예제를 보시면 태그 안에서 애국가의 1절의 가사가 줄바꿈이 4번 이루어졌음에도 불구하고 줄바꿈이 표현되지 않고 일렬로 쭉 나열된 것을 보실 수 있습니다. 태그는 기본적으로 white-space 속성값이 normal으로 되어 있어 개행이 무시되기에..
HTTP 세션이란? HTTP 세션은 웹 서비스에서 사용자의 상태 정보를 유지하기 위한 방법입니다. 기본적으로 HTTP 프로토콜은 상태값을 유지할 수 있는 방법이 없습니다. HTTP 통신은 클라이언트와 서버 간의 통신이 각각의 요청과 응답 간에 독립적으로 이루어지기에 사용자를 특정할 수 있는 방법이 존재하지 않기 때문입니다. 하지만 웹 서비스에서는 사용자의 상태를 계속 유지해야 하는 경우들이 있습니다. 예를 들자면 로그인이나, 장바구니를 예시로 들 수 있겠습니다. 다른 페이지로 이동하더라도 로그인이 유지되고, 장바구니에 담긴 상품들이 유지되는 것처럼 말이죠. HTTP 세션의 동작 원리 로그인을 한다고 가정하고 세션을 통해 어떻게 사용자의 상태값을 유지할 수 있는지 알아보겠습니다. DB를 사용할 수도 있는데..