전체 글

일반적으로 서버 요청을 통해 받은 데이터는 JSON 형태의 객체로 들어온다. 이를 console.log 로 출력해보려고 하면 예상과 다르게 [object Object] 라고만 출력될 때가 있다. 문자열이나 숫자를 출력할 때에는 문제가 없었는데, 뭔가 구조화된 객체를 출력하려고만 하면 이런 이상한 로그가 찍힌다. 이 로그의 정체는 무엇이며, JavaScript 객체의 내용은 어떻게 출력해서 확인해볼 수 있을까? [object Object] 란 무엇인가 JavaScript의 자료형은 크게 두 가지로 나뉜다. 오직 하나의 데이터만 담을 수 있는 원시형(primitive)과, 다양한 데이터를 담을 수 있는 객체형(object)이다. string, number, boolean 등의 원시형 데이터들은 string으..

Javascript에서 i라는 index 값을 증가시키는 operator로 종종 i++가 사용되곤 한다. i += 1 라는 동일한 표현식보다 간결해서 주로 반복문 등의 제어문에서 많이 사용한다. 이번에는 이 ++ 연산자의 정체가 무엇인지, 그리고 비슷하거나 헷갈릴 만한 증가/감소 연산자들을 반복문 예시를 통해 비교해보고자 한다. for (let i = 0; i < 5; i++) { console.log( i ); } // 0, 1, 2, 3, 4 Javascript의 반복문은 일반적으로 이렇게 생겼다. i는 초기값인 0부터 시작해서, 본문을 실행하고 나자마자 ++ 연산자에 의해 값이 1씩 증가하게 된다. alert 출력값은 0, 1, 2, 3, 4가 된다. 이번엔 좀더 간결한 while문을 살펴보자. l..

현대 브라우저가 웹 사이트 렌더링을 수행하는 방법에는 크게 두 가지가 있다. 바로 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)이다. 오늘은 이중 SPA에서 사용되는 클라이언트 사이드 렌더링에 대해 알아보고자 한다. 클라이언트 사이드 렌더링이란? 클라이언트 사이드 랜더링(CSR)은 웹사이트가 클라이언트에서 렌더링되는 것을 말한다. 여기서 말하는 클라이언트는 바로 브라우저다. 즉, 브라우저에서 렌더링을 수행하는 것이다. 이 과정은 다음과 같다. 1. 서버에서 index라는 단순한 구조의 HTML 파일을 클라이언트에 보내준다. 일반적인 구조의 SPA에서는 다음과 같은 HTML을 사용하게 되는데, 태그 안에 자바스크립트 링크가 담긴 2. HTML에 링크된 Javascript 파일(ex. ap..

웹개발을 하다보면 한번쯤 마주치는 상황 중 하나는 CORS 에러다. 최근에 회사에서 백엔드 아키텍처를 MSA로 전환하고 있는데, 이에 따라 한 도메인에서 사용하던 API 중 상당수가 각자의 도메인으로 분리되었다. 별도의 API Gateway가 없는 상황에서 새로운 도메인의 API를 처음 연동하다 보니, 콘솔창에 빨간 글씨로 이렇게 뜨는 에러를 보게 되었다. 어디에서 보낸 요청이 CORS로 막히는가? 분명 Postman 등 브라우저가 이외 환경에서는 멀쩡하게 실행되던 API인데, 유독 웹에서 내가 작업중인 프론트엔드의 화면에 연동을 하려고 보니 CORS 정책에 위반되었다는 에러 로그가 뜨며 HTTP 요청에 실패하는 것이었다. 즉, 웹사이트에서 AJAX 요청을 보낼 때에만 안 된다. 즉 웹사이트를 열어주는 ..

switch문은 C언어 등에서 사용하는 제어문 중의 하나로, 분기 명령에 속한다. 내가 자주 사용하는 javascript에서도 switch 문법을 지원한다. 같은 변수를 비교하는 경우, if - else if 로 중첩된 조건문보다 switch문을 더 선호하는 편이다. 비교 상황을 직관적으로 잘 설명해주기도 하고, 무엇보다도 indent 구조가 더 깔끔해보이기 때문이다. 그런데 switch문을 쓰면서 항상 궁금했던 것이 있다. 왜 case마다 break를 굳이 사용해서 다른 case로 넘어가는 것을 막아줘야 할까? if문과 어떻게 다르게 동작하길래 break를 해주지 않으면 다음 case로 넘어가서 나머지 코드블럭이 전부 실행되는 것일까? 사실 Javascript 뿐만 아니라 switch 제어 문법을 가지..