이 기술 블로그를 만들기 위해 5년을 미뤘다.

자바스크립트의 원시형 데이터 타입으로는 총 6가지가 있다. 숫자(Number) 문자열(String) 불리언(boolean) undefined null 심볼(Symbol) 그 중에서도 심볼이라는 타입이 있는데, 추가된 지도 얼마 안됐고(ES6) 보통 잘 사용되지는 않다 보니 지금까지 이게 뭘까 싶었는데, 오늘에서야 공부를 하게 됐다. 오늘은 심볼 타입에 대해 알아보자! 먼저, 심볼의 정의부터 알아보자면, 심볼(Symbol)이란? 다른 값과 중복되지 않는 자료형(unique) 이다. 심볼은 유일성이 보장되는 자료형이기 때문에 일반적으로 심볼 타입은 객체의 프로퍼티 키로 사용된다. 그럼 심볼 값은 어떻게 생성하며, 또 어떻게 사용할 수 있는지 알아보자! 심볼 값 생성 심볼 값은 Symbol() 함수를 호출하여..

Javascript에서 클라이언트와 서버 간 데이터를 주고받기 위해 사용되는 비동기 HTTP 통신 방식으로는 대표적으로 fetch, axios, ajax 등이 있다. 이들의 공통점과 차이점을 알아보자. fetch 별도의 설치 없이 모던 브라우저에서 사용 가능 POST, PUT 요청의 경우에는 body에 데이터를 실어 보냄 fetch(`/payload`, { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pname }) }).then(res => { // ... }) 단점 - IE에서는 지원하지 않으므로 polyfill 주입 필요 (chrome 42+, firefox 39+, edge 14+, s..

시간복잡도(Time Complexity) 입력의 크기와 문제를 해결하는 데 걸리는 시간의 상관관계 cf) 허용 시간복잡도 N의 크기 허용 시간복잡도 N ≤ 11 O(N!) N ≤ 25 O(2^N) N ≤ 100 O(N⁴) N ≤ 500 O(N³) N ≤ 3000 O(N²logN) N ≤ 5000 O(N²) N ≤ 1000000 O(NlogN) N ≤ 10000000 O(N) 그 이상 O(logN), O(1) 빅오표기법 주어진 식을 값이 가장 큰 대표항만 남겨서 나타내는 방법 ex) O(N) = 5N + 3 공간복잡도(Space Complexity) 입력의 크기와 문제를 해결하는 데 필요한 공간의 상관관계 ex) 별도의 배열이 필요없는 경우 → O(N) 크기가 N인 배열을 사용하는 경우 → O(N²) 보통..

HTML 파일에서 외부 js 파일을 가져오는 방법은 다음과 같다. 그럼 여기서 궁금한 점이 발생한다. script 태그의 위치는 어디에 위치해야 할까? 보통 브라우저는 HTML 문서를 파싱할 때, 위에서부터 차례대로 파싱하게 된다. 그렇기 때문에 파싱 과정에서 script 태그를 만나면 해당 js 파일의 다운로드가 완료될 때까지 DOM 생성을 멈춘다. 따라서, 스크립트가 페이지 생성을 막아버리므로 사용자는 스크립트를 다운받을 때까지 스크립트의 아래에 위치한 페이지를 볼 수 없게 된다. 이러한 이유 때문에 보통 script 태그는 보통 body의 최하단에 위치하는 게 일반적이다. 하지만 script 태그가 맨 아래에 위치하게 된다면, HTML 문서를 다운로드한 후 스크립트를 다운받아 실행하므로 페이지 로딩..

보통 자바스크립트로 애니메이션을 구현해야 할 경우, setInterval과 requestAnimationFrame을 이용한 방식이 가장 많이 사용된다. 나는 setInterval을 주로 사용했었는데, setInterval로 만든 애니메이션의 경우에는 같은 애니메이션을 동시에 여러 번 호출하는 경우 애니메이션이 꼬이면서 버벅임이 발생할 수 있다는 단점이 있다. (애니메이션 함수가 종료되기 전에 이벤트를 실행하는 경우에는 중첩돼서 이벤트가 실행되기 때문에 clearInterval로 기존 이벤트를 지워줘야 함) 그래서 이번에 requestAnimationFrame으로 코드를 리팩토링하면서 알게 된 setInterval과 requestAnimationFrame의 차이점을 간략히 정리했다. setInterval ..

Spring에서의 쿠키 생성과 삭제는 HttpServletResponse 객체를 통해 이루어진다. 쿠키 생성 import javax.servlet.http.Cookie; @RequestMapping(value = "/admin/adminLoginProcess.do", method = RequestMethod.POST) public ModelAndView login(HttpServletRequest req, HttpServletResponse response, ModelAndView mv) throws Exception { Cookie myCookie = new Cookie("userID", (String) params.get("id")); myCookie.setMaxAge(24 * 30 * 60 * 60..

PostgreSQL에서는 pgcrypto 모듈에서 패스워드 암호화를 위한 함수인 crypto()와 gen_salt(n)를 제공한다 crypto() 함수는 해시 작업, gen_salt() 함수는 솔트값을 생성할 암호화 알고리즘을 지정하는 함수이다. 해당 함수로 만든 패스워드는 복호화가 불가하다. 따라서 나중에 패스워드 검증을 위해서는 복호화가 아닌 암호화를 한 후 비교해야 한다는 특징이 있다. crypto 함수에서 제공하는 암호화 알고리즘은 다음과 같다. 알고리즘 평문 최대 길이 salt 길이 출력 길이 비고 bf 72 128 60 Blowfish md5 X 48 34 MD5 des 8 12 13 UNIX의 암호화 방식 xdes 8 24 20 확장 DES 이제 사용법을 알아보자! 아래 쿼리를 사용하여 pg..

실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성 → 해당 실행 컨텍스트를 콜 스택에 저장 → 선입후출(stack)로 코드들을 실행하여 전체 코드의 환경과 순서 보장 예시 /* 여기는 전역 컨텍스트입니다. */ var a = 1; function outer() { /* 여기는 outer 함수의 컨텍스트입니다. */ function inner() { /* 여기는 inner 함수의 컨텍스트입니다. */ console.log(a);// undefined 출력var a = 3; } inner(); console.log(a);// 1 출력 } outer(); console.log(a);// 1 출력 : 차례대로 전..

This 실행 컨텍스트가 생성될 때(=함수가 실행될 때) 결정됨 실행 컨텍스트 생성 당시 this가 지정되지 않은 경우에는 전역 객체가 대신 저장됨 자바에서의 this와는 다른 개념 자바에서는 클래스로 생성한 인스턴스 객체를 의미 자바스크립트에서는 어디서든 this라는 개념이 사용될 수 있음 전역 공간에서의 This 전역 객체를 가리킴 브라우저에서는 window이고, node.js에서는 global 전역 변수 생성 시, 자바스크립트 엔진은 해당 변수를 전역 객체의 프로퍼티로 할당 var a = 1; console.log(a); // 1 console.log(window.a); // 1 console.log(this.a); // 1 // → 스코프 체인을 탐색하면서 전역(window)객체의 프로퍼티를 탐색..

문제 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오픈 채팅방을 개설한 사람을 위해, 다양한 사람들이 들어오고, 나가는 것을 지켜볼 수 있는 관리자창을 만들기로 했다. 채팅방에 누군가 들어오면 다음 메시지가 출력된다. "[닉네임]님이 들어왔습니다." 채팅방에서 누군가 나가면 다음 메시지가 출력된다. "[닉네임]님이 나갔습니다." 채팅방에서 닉네임을 변경하는 방법은 다음과 같이 두 가지이다. 채팅방을 나간 후, 새로운 닉네임으로 다시 들어간다. 채팅방에서 닉네임을 변경한다. 닉네임을 변경할 때는 기존에 채팅방에 출력되어 있던 메시지의 닉네임도 전부 변경된다. 예를 들어, 채팅방에 "..