Frank의 공부 일지

이번 글에서는 반복문에서 let을 사용해 유효 범위충돌을 방지하는 방법을 살펴보려 한다. 블록 유효 범위 변수 선언을 이용하면 변수는 블록 내에서만 접근할 수 있다고 했는데 for문 내부에 선언한 변수도 for문의 중괄호 밖에서는 접근할 수 없다. 반대로 함수 외부에 선언한 변수는 블록 내부에서 접근할 수 있다. 함수의 최상위에서 블록 유효 범위 변수를 선언한 경우에는 함수 내부의 if문이나 for문에서 접근할 수 있다. 반면에 어휘적 유효 범위를 따르는 변수를 선언한 경우에는 함수 내부 어디서든 접근할 수 있다. 이 경우 if 블록 내부에서 생성한 변수를 함수 내부의 다른 곳에서 접근할 수 있다. function addClick(items){ for(var i=0; i 유효 범위의 문제로 var로 할당..

이전 글에서는 변수를 다룰 때 재할당을 피하는 것이 낫다고 배웠는데 변수를 반드시 재할당하는 경우라면 어떻게 해야할까? -> 이 경우에 let을 사용할 수 있다. let은 재할당할 수 있다는 점에서 var와 유사하지만 var는 어휘적 유효 범위를 따르는 반면, let은 블록 유효 범위를 따른다. (일단 블록 유효 범위 변수는 if 블록이나 for 반복문 같은 블록의 내부에만 존재한다고 알아두자) const도 블록 유효 범위를 따른다 블록 밖에서는 블록 유효 범위 변수에 접근할 수 없다. let과 const는 같은 이름의 변수를 다시 선언할 수 없다. var를 사용하는 경우에는 같은 유효 범위에서 같은 이름의 변수를 다시 선언할 수도 있다. 다음 글에서는 유효 범위를 더 깊이 살펴보고, let을 사용해 자..

자바스크립트에서 변수 할당하는 방법은 var, let, const 등이 있는데 대부분의 경우 const를 선택하는 것이 좋다. const로 가장 적은 것을 할 수 있기 떄문인데 코드를 읽기 쉽게 만드는 제약 사항을 가지고 있다. const는 블록의 문맥 내에서 재할당할 수 없는 변수 선언이다. 즉, 한 번 선언하면 변경할 수 없다.(그렇지만 불변값이 되는 것은 아니다!) const를 사용하면 코드를 훑어볼 때 해당 변수를 신경 쓰지 않아도 된다고 알려줄 수 있다. 그리고 const를 사용할 때 중요한 고려 사항은 const에 할당된 값이 불변값이 되지 않는다는 것이다. 즉 변수를 재할당할 순 없지만 값을 바꿀 수는 있다! 위의 내용이 이해가 잘 안간다면 일단은 const를 기본으로 사용하자! 이 게시물 ..

graphql은 데이터를 요청하는 방법에 일부를 정보를 얻기 위해 보내는 질의문(Query)을 만들기 위해 사용되는 언어다. graphql aip는 주로 하나의 endpoint를 사용하고 요청할 때 사용한 query 문에 따라 응답 구조가 달라진다. graphql 장점 1. HTTP 요청의 횟수를 줄일 수 있다. -> graphql은 원하는 정보를 하나의 query에 모두 담아 요청하는 것이 가능 2. HTTP 응답의 Size를 줄일 수 있다. -> 원하는 대로 정보를 요청할 수 있어서

CSS는 HTML 요소의 스타일을 정의하는데 그러려면 HTML이 존재하고 또한 스타일을 적용하고자 하는 HTML 요소에 특정할 필요가 있다. 이럴 때 셀렉터가 사용된다. 복수 개의 셀렉터를 연속하여 지정할 수 있고 쉼표로 구분한다. h1, p { color: red; } 1. 전체 셀렉터 * - HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함) * { color: red; } 2. 태그 셀렉터 - 지정된 태그명을 가지는 요소를 선택 p { color: red; } -> 모든 p 태그 요소를 선택 3. ID 셀렉터 #id 속성 값 - id 속성 값을 지정하여 일치하는 요소를 선택. 중복될 수 없는 유일한 값 #p1 { color: red; }..

CSS는 HTML이나 XML과 같은 구조화 된 문서를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, HTML의 각 요소의 style을 정의하여 화면 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다. HTML5 이전 버전의 HTML에는 style을 컨트롤할 수 있는 태그(font, center)가 존재하여 CSS가 없이도 어느 정도의 스타일 표현이 가능하였으나 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가됨으로서 복잡하고 혼란스러운 언어가 되어 버렸다. 그래서 HTML5 에서는 HTML은 정보와 구조화, CSS는 styling 정의라는 본연의 임무에 충실한 명확한 구분이 이루어졌다. HTML과 CSS는 각자의 문법을 갖는 별개의 언어이며..

header - 헤더를 의미 nav - 내비게이션을 의미 aside - 사이드에 위치하는 공간을 의미 section - 본문의 여러 내용을 포함하는 공간을 의미 article - 본문의 주내용이 들어가는 공간을 의미 footer - 푸터를 의미 이와 같은 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너 역할을 하게 된다.

1. form - 사용자가 입력한 데이터를 수집하기 위해 사용되면 입력 양식 태그를 포함할 수 있다. 속성 action(value: URL) - 입력 데이터가 전송될 URL 지정 method(value: get/post) - 입력 데이터 전달 방식 지정 get/post는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라고 한다. GET - 전송 URL에 입력 데이터를 쿼리 스트링으로 보내는 방식 예) http://tistory.com/posts?userId=1&id=1 전송 URL 바로 뒤에 '?'를 통해 데이터의 시작을 알려주고 key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 '&'로 구분한다 - URL에 전송 ..

1. 이미지 속성 src - 이미지 파일 경로 alt - 이미지 파일이 없을 경우 표시되는 문장 width - 이미지의 너비 height - 이미지의 높이 2. 오디오 속성 src - 음악 파일 경로 preload - 재생 전에 음악 파일을 모두 불러올 것인지 지정 autoplay - 음악 파일을 자동의 재생할 것인지 지정 loop - 음악을 반복할 것인지 지정 controls - 음악 재생 도구를 표시할 것인지 지정 3. 비디오 속성 src - 동영상 파일 경로 poster - 동영상 준비 중에 표시될 이미지 파일 경로 preload - 재생 전에 동영상 파일을 모두 불러올 것인지 지정 autoplay - 동영상 파일을 자동 재생할 것인지 지정 loop - 동영상을 반복할 것인지 지정 controls ..

1. 목록 1) 순서없는 목록 2) 순서있는 목록 3) type 속성 사용하여 순서 나타내는 문자 지정 가능 "1" - 숫자 (기본값) "A" - 대문자 알파벳 "a" - 소문자 알파벳 "I" - 대문자 로마숫자 "i" - 소문자 로마숫자 4) start 속성 사용하여 리스트의 시작값 지정 가능 5) reversed 속성 사용하여 리스트의 순서값 역으로 표현 가능 6) 중첩 목록 2. 테이블 table - 표를 감싸는 태그 tr - 표 내부의 행 th - 행 내부의 제목 셀 td - 행 내부의 일반 셀 1) 테이블 태그의 속성 border - 표 테두리 두께 지정 rowspan - 해당 셀이 점유하는 행의 수 지정 colspan - 해당 셀이 점유하는 열의 수 지정