전체 글

제어문은 조건에 따라 코드블록을 실행(조건문)하거나, 반복 실행(반복문)할때 사용한다. 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행단위로 취급한다. 블록문은 단독으로 사용할 수도 있으나, 일반적으로는 제어문이나 함수를 정의할 때 사용한다. 문의 끝에는 세미콜론을 붙이는 것이 일반적이지만, 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. // 블록문 { var foo = 10; } // 제어문 var x = 1; if (x < 10) { x ++; } // 함수 선언문 function sum(a,b) { return a + b; } 조건문 조건문은 주어진 조..

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다. 피 연산자는 값으로 평가될 수 있는 표현식이어야 한다. 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다. // 산술 연산자 5*4 // 20 // 문자열 연결 연산자 'my name is' + 'kim' // 할당 연산자 color = 'red' // 비교 연산자 3 > 5 // false // 논리 연산자 true && false // false // 타입 연산자 typeof 'hi' // string 산술 연산자 + 연산자 +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작하며, 그 ..

데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 가지며, 자바스크립트는 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시타입과 객체 타입으로 분류할 수 있다. 구분 데이터 타입 설명 원시 타입 숫자 타입 숫자, 정수, 실수 구분 없이 하나의 숫자 타입만 존재 문자열 타입 문자열 불리언 타입 논리적 참(true)과 거짓(false) undefined 타입 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입 ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 숫자 타입 int, long, float, double 등과 같은 숫자 타입을 제공하는 C나 JAVA와 달리, 자바스크립트는 하나의 ..

값 값 : 식이 평가되어 생성된 결과 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 var sum =10 + 20; 변수에 할당되는 것은 값이다. sum변수에는 숫자 값 30이 할당된다. 리터럴 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 리터럴은 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글)또는 약속된 기호("",., {}, // 등)로 표기한 코드이다. 리터럴을 사용해 다양한 종류의 값을 생성할 수 있다. 표현식 표현식은 값으로 평가될 수 있는 문이다. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. var score = 50 + 50; 50 + 50은 리터럴과 연산자..

프로젝트 중 imageURL을 사용하여 다운로드 버튼을 누르면 이미지가 다운로드할 수 있게끔 하는 기능을 만들어야 했다. 위 기능을 구현하면서 겪은 어려움은 크게 2가지였다. 1. 서버에서 오는 imageURL을 그대로 href 속성에 넣어주면 제대로 동작하지 않는다. 2. 1.을 해결하기 위해 imageURL url을 fetch 해줬어야 했는데, CORS에러가 발생했다. 해결방법을 블로그에 남겨 정리해보려고 한다. 1. 서버에서 오는 imageURL을 그대로 href 속성에 넣어주면 제대로 동작하지 않는다. 먼저 첫번째 문제를 해결해 보자. 방법은 간단하다. 태그 href에 경로와 download 속성에 저장될 파일 이름을 지정해 주면, 다운로드가 가능하다. 그런데, 서버에서 오는 imageURL을 그..

자바스크립트의 this에 대해 알아보자. this는 Javascript의 예약어이다. 기본적으로 this는 전역 객체를 가리킨다. Node환경에서는 global객체를, 브라우저 환경에서는 Window객체를 가리킨다. (브라우저 도구탭에서 this를 쳐보면 Window객체가 출력된다.) this; // Window{}this는 가리키는 값(this 바인딩), 함수 호출 방식에 의해 동적으로 결정된다. (바인딩 : 식별자와 값을 연결하는 과정) this를 알기 위해서는 “누가 나를 불렀는가”를 알면 된다. 여기서 "누가"는 콘텍스트 객체이며 this가 바라보고 있는 객체 정도로 인지하자. const car = { name: &#39;KIA&#39;, getName: function () { console.l..

변수는 왜 필요한가 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체이다. 메모리 셀 하나의 크기는 1바이트(8bit)이며, 컴퓨터는 메모리셀의 크기, 1바이트로 데이터를 저장하거나 읽어들인다. 각 셀은 고유의 메모리 주소를 가지며, 메모리 주소는 말 그대로 메모리 공간의 위치를 나타낸다. 10 + 20 숫자 값 10, 20이 메모리 상의 임의의 우치(메모리 주소)에 기억되고, CPU는 이 값을 읽어들여 연산을 수행한다. 연산을 끝냈다고 해보자. 그럼 메모리에는 10, 20, 30(연산결과)이 담길 것이다. 여기서 문제는, CPU가 연산하여 만들어 낸 숫자 30을 재사용할 수 없다는 것이다. 30을 재사용하고 싶다면 메모리 주소를 통해 연산결과 30이 저장된 메모리 공간에 직접 접근해야한다. 하지만 ..

콜백함수란 다른 코드의 인자로 넘겨주는 함수, 즉 어떤 이벤트가 발생한 후 수행될 함수를 의미한다. 예를들어 식당에 자리를 예약하는 상황이라고 가정해보자. 우리는 식당 대기자 명단에 이름을 쓴 뒤, 자리가 날때까지 식당 근처를 구경하러간다. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락을 줄 것이다. 바로, 그 전화를 받는 시점이 콜백 함수가 호출되는 시점과 같다. 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처에서 쇼핑을 하거나 구경을 할 수 있다. 자리가 났을 때 연락이 오기 때문에 미리 가서 기다릴 필요❌ 자리가 비어있는지 확인할 필요❌ 자리가 준비된 시점 즉 데이터가 준비된 시점에서만 원하는 동작(자리에 앉는다. 특정 값을 출력한다)를 수행할 수 있다. // 동기식 콜백 예..

브라우저 우리가 잘 사용하는 인터넷 익스플로러, 파이어폭스, 사파리, 크롬 등의 소프트웨어를 말한다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시해주는 것이다. 자원은 보통 HTML 문서지만, PDF나 이미지 혹은 다른 형태일 수 있다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데, 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성을 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따른다고 한다. 브라우저의 사용자 인터페이스는 서로 닮아있는데, 다음과 같은 요소..

회원가입시에 주소값을 필요로 할때, 특히나 주소의 경우에는 정확한 값을 받아올 필요가 있다. 이때는 사용자가 직접 주소 값을 입력하는 것 보다 우편번호 검색 서비스를 이용해 정확한 값을 받아 오는 것이 좋다. react-daum-postcode를 선택한 이유 따로 key를 발급받을 필요 없이 사용할 수 있다. 회원가입 기능을 구현하면서, 정확한 주소를 받기 위해 우편번호 API가 필요했다. https://github.com/bernard-kms/react-daum-postcode GitHub - bernard-kms/react-daum-postcode: 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스입니다. Contribute to ber..