포스팅 목적 HTTP 의 특징을 통해 쿠키와 세션을 사용하는 이유를 알아봅니다. 쿠키와 웹 스토리지의 차이를 알아봅니다. HTTP 의 특징 비연결지향 ( Connectionless ) : request 에 대한 response 를 해주면 서버와 클라이언트가 연결이 끊어집니다. 커넥션을 낭비하지 않기 때문에 리소스의 낭비를 줄일 수 있습니다. 상태없음 ( Stateless ) : 연결을 끊는 순간 상태 정보를 유지하지 않습니다. 쿠키와 세션 쿠키와 세션을 쓰는 이유 HTTP의 2가지 특징인 connectionless 와 stateless 로 인해 서버는 클라이언트의 상태를 알 수 없습니다. 클라이언트의 상태를 알아야 될 경우 ( ex. 인증 ) 쿠키와 세션을 사용합니다. 쿠키의 특징 웹 사이트 접속시 ke..

포스팅 목적 JavaScript의 변수 선언 방식인 var, let, const 를 차이점을 중심으로 알아봅니다. var 와 let, const 이란? var, let, const 는 JavaScript 에서 변수를 선언하는 키워드 입니다. var 은 ES1 부터, let 과 const 는 ES6 부터 도입됐습니다. var 과 let, const 의 차이점 1. 변수 재선언과 재할당 여부 변수 재선언과 재할당은 코드의 유지보수성에 영향을 미칩니다. var : 변수 재선언 O / 변수 재할당 O let : 변수 재선언 X / 변수 재할당 O const : 변수 재선언 X / 변수 재할당 X 2. 스코프 var : 함수 레벨 스코프로 함수 내에서 선언된 변수는 함수 내에서만 유효합니다. let, const ..

포스팅 목적 시맨틱 태그의 장점과 태그를 언제 사용해야할지 알아봅니다. 시맨틱 태그란? 시멘틱 태그란 “의미가 있는 태그” 라는 뜻입니다. CSS 스타일링을 변화시켜서 특정 요소처럼 보이게 할 수도 있지만 시멘틱 태그를 사용하여 의미가 있는 요소로 인지할 수 있도록 명시해줍니다. 시멘틱 태그의 장점 검색엔진 최적화 ( SEO ) : 검색 엔진에서 제목, 부제목 등의 키워드를 잘 인지할 수 있습니다. 웹 접근성 ( Accessibility ) : 페이지를 스크린리더나 키보드로만 접근하는 경우에도 편리하게 사용이 가능합니다. 유지 보수성 ( Maintainability ) : 태그가 무슨 역할을 하는지 알려주어 가독성이 높습니다. 시멘틱 태그를 사용하는 방법 위에 기술한 것과 같이 시멘틱 태그를 사용할 때 ..

포스팅 목적 HTML 과 관련된 면접 질문들을 알아보고 이해한 만큼의 답안을 작성합니다. 계속해서 업데이트 됩니다. 질문 목록 HTML 버전을 확인하는 방법 / DOCTYPE 의 역할 더보기 한줄 요약 일 경우 HTML5 이며 HTML 을 랜더링하는 방식을 지정하기 위해 사용합니다. 내용 doctype 은 html 문서의 형식을 구분하여 어떻게 랜더링을 할지 명시하기 위해 사용합니다. 표준이 제정되기 이전에 개발된 오래된 웹 페이지들도 랜더링이 필요합니다. HTML4, XHTML 등을 지원하는 호환 모드 (quirks mode) 와 HTML5 를 지원하는 표준 모드 (standard mode) 가 있습니다. 으로 사용할 경우 표준모드의 HTML5 로 랜더링 됩니다. 참고 자료 호환 모드와 표준 모드 [H..

포스팅 목적 JavaScript 배열 초기값을 설정하는 방법과 초기화시에 new Array() 보다 [] 을 사용해야 하는 이유를 알아봅니다. 배열 초기화 방법 1. for 문 const arr = []; for(let i = 0; i 0); console.log(arr); // [0, 0, 0, 0, 0] const arr = Array.from({length: 5}, (v, index) => index); // 이때 v는 undefined console.log(arr); // [0, 1..

포스팅 목적 문자열과 관련된 내장 메소드를 유형별로 분류하여, 사용할 최적의 메소드를 매번 찾기 귀찮아서 찾기 쉽도록 정리했습니다. MDN 홈페이지에 나와있는 메소드를 기준으로 하였습니다. 메소드의 유형이나 중요도는 제가 판단했기 때문에 주관적인 의견이 포함되어 있습니다. 유형별 메소드 자르기 : slice, split, substring 요소 찾기 : charAt, search, indexOf / lastIndexOf 포함 여부 판단 : startsWith / endsWith, includes 추가 : concat, repeat, padStart / padEnd 공백 제거 : trim / trimStart / trimEnd 교체 : replace / replaceAll 변환 : toUpperCase /..

포스팅 목적 SQL 이 무엇인지 알아보고 데이터 조작을 위한 기본적인 SQL 문, 그리고 관련된 제약사항을 학습합니다. SELECT SELECT column names FROM table or view name WHERE search condition GROUP BY column names HAVING search condition ORDER BY column-name INSERT INSERT INTO table-name (column1, column2, ... ) VALUES (value-for-column1, value-for-column2, ... ) UPDATE UPDATE table-name SET column-1 = value-1, column-2 = value-2, ... WHERE sear..

포스팅 목적 배열과 관련된 내장 메소드를 유형별로 분류하여, 사용할 최적의 메소드를 매번 찾기 귀찮아서 찾기 쉽도록 정리했습니다. MDN 홈페이지에 나와있는 메소드를 기준으로 하였습니다. 메소드의 유형이나 중요도는 제가 판단했기 때문에 주관적인 의견이 포함되어 있습니다. 유형별 메소드 초기화 : fill, splice ( 참고 : 배열 생성시 [ ] ( 리터럴 대괄호 ), new Array() 를 사용 ) 요소 추가 / 제거 : pop / push, shift / unshift 정렬 : sort, reverse 순회 : forEach, map, reduce, reduceRight 조건 판단 : every, some, includes, filter 요소 찾기 : find / findIndex, indexO..

1. DFS, BFS 그래프 탐색을 위해서는 DFS ( Depth-First Search, 깊이 우선 탐색 ), BFS ( Breadth-First Search, 너비 우선 탐색 ) 를 사용한다. 2. 그래프와 트리 비교 그래프는 노드와 노드를 잇는 (없을 수도 있지만) 간선을 가진 자료구조이며, 그 중 방향성이 있는 비순환 그래프가 트리이다. 3. DFS, BFS 시간복잡도 인접 리스트로 표현된 그래프 : O(N+E) 인접 행렬로 표현된 그래프 : O(N^2) 참고 : [알고리즘] 깊이 우선 탐색(DFS) 과 너비 우선 탐색(BFS)