JH 기술 블로그

최근에 사전과제 하나를 하게 되었다. 사전과제 README 파일에 들어가야 할 것은 데모영상 or 배포링크였다. 배포가 되었고 배포 된 사이트에서 기능이 모두 동작하면 가산점을 준다고 하여서 배포를 결정하였다. 배포는 Netlify를 이용하여 정상 배포하였다. 그런데 제대로 돌아가나 확인 중 새로고침을 눌렀더니 다음과 같은 에러 메세지가 발생하였다. 404에러 HTTP에서 사용자가 요청하는 페이지나 파일을 찾을 수 없을 때 나타난다. 그런데 왜 잘 동작하다가 새로고침만 만나면 요청하는 페이지를 못찾겠다고 하는 걸까? 원인 Netlify나 다른 정적 웹 호스팅 플랫폼에서 해당 에러가 발생하는 이유는 라우팅 처리와 관련이 있다. 정적 웹 호스팅 환경에서는 서버 측 기능이 없거나 매우 제한적이기 때문에, 클라..

종강 한지 벌써 2주가 넘어가는 시점에 팀원을 꾸려서 사이드 프로젝트를 진행하게 되었다. 해당 프로젝트에서는 로그인 기능을 구현해야했다. 전에 하던 스터디에서 로그인 기능을 구현해보면서 개념을 살펴본 적이 있는데 리마인드를 해볼겸 포스팅을 하고자 한다. 로그인 방식 로그인 방식에는 크게 3가지가 있다. id와 pw를 요청 헤더에 넣는 방식 세션 id를 이용하는 방식 JWT 토큰을 이용하는 방식 id와 pw를 요청 헤더에 넣는 방식 가장 단순한 방식으로 HTTP 메세지에 사용자의 계정정보를 넣어 서버에게 보내는 메커니즘이다. 매 요청이 들어올때마다 서버는 DB를 조회하여 들어온 계정정보를 비교한다. 이 방식은 다른 처리를 필요로 하지 않기에 쉽고 빠르지만 보안에 매우 취약하다는 단점을 가지고 있다. 그 이..

백트래킹 문제들을 풀다보니 N과 M 시리즈들을 많이 풀게되었다. 풀어 본 사람들은 알겠지만 이 시리즈들은 문제가 거의 비슷비슷하다. 전의 문제들은 숫자가 오름차순으로 고정되어 있어서 따로 숫자를 입력 받을 필요가 없었다. 하지만 이번에는 임의의 숫자를 입력 받아서 수열로 출력해주어야 했다. 그렇기에 전에 코드들에서 vector만 추가해주었다. 풀이 코드는 다음과 같다. #include #include #include #define MAX 8 using namespace std; int n, m; int arr[MAX] = { 0, }; bool visited[MAX] = { 0, }; vector v; void dfs(int cnt) { if (cnt == m) { for (int i = 0; i < m..

1. var 키워드로 선언한 변수의 문제점 (1) 변수 중복 선언 허용 var 키워드로 선언한 변수를 중복 선언하면 초기화문 유무에 따라 다르게 동작한다. 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼, 초기화문이 없는 변수 선언문은 무시된다. (2) 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다. (3) 변수 호이스팅 var 키워드로 변수를 선언하면 변수 호이스팅이 발생한다. 이것은 에러를 발생시키지는 않으나 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다. 2. let 키워드 var 키워드와 다르게 변수를 ..

1. 변수의 생명주기 변수 선언은 선언문이 어디에 있든 상관없이 가장 먼저 실행된다. 다시 말해, 변수 선언은 코드가 한 줄씩 순차적으로 실행되는 런타임에 실행되는 것이 아니라 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행 된다. 그러나 엄밀히 말하자면 위 설명은 전역 변수에 한정된 것이다. 함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다. function foo() { var x = 'local'; console.log(x); return x; } foo(); console.log(x); // ReferenceError 따라서 위 예제를 보면 foo함수를 호출하면 x변수가 선언되고 undefine..

1. 함수 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수는 함수정의를 통해 생성한다. 3. 함수 리터럴 자바스크립트의 함수는 객체 타입의 값이다. 일반 객체와의 차이점으로는 호출 가능성의 유무이다. 함수는 호출 가능하지만, 일반 객체는 호출이 불가하다. 함수 리터럴은 funtion 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성된다. 4. 함수 정의 함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다. 함수를 정의하는 방법에는 4가지가 있다. 1. 함수 선언문 2. 함수 표현식 3. Function 생성자 함수 4. 화살표 함수 함수 선언문 함수 선언문은 함수 이름을 생략할 수..

원시 값과 객체의 비교 1. 원시 값 원시 타입의 값, 즉 원시 값은 변경 불가능한 값. 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다. 상수는 재할당이 금지된 변수를 말한다. 상수도 변수라 할 수 있다. 원시 값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시 값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킨다. 그 이유는 원시 값이 변경 불가능한 값이기 때문이다. 이러한 특성을 불변성이라고 한다. 2. 객체 객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제 할 수 있다. 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다는 점이 원시 값과 차별되는 점이다. 이 말은 ..

1. 객체 원시타입의 값은 변경 불가능, 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티 값이 함수이면 메서드라고 부른다. 2. 객체 리터럴에 의한 객체 생성 c++이나 자바 같은 클래스 기반 객체지향 언어는 new 연산자로 객체를 생성하지만 자바스크립트는 다양한 객체 생성 방법을 지원한다. 1. 객체 리터럴 2. Object 생성자 함수 3. 생성자 함수 4. Object.create 메서드 5. 클래스 3. 프로퍼티 프로퍼티를 나열할 때는 쉼표(,)로 구분한다. 마지막 프로퍼티 뒤에는 붙여도 되고 안붙여도 된다. 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다. 프로퍼티 키에 문자열이나 심벌 값 외의 값을..