IT 공부

1. Date 메소드 2. 캘린더 만들기 1. Date 메소드 캘린더를 만들기에 앞서 Date 메소드를 알아보려고 한다. 메소드 설명 값의 범위 Date.now() 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초(millisecond) 단위의 정수로 반환 - getFullYear() 현재 연도를 4비트의 숫자(YYYY)로 반환 YYYY getDate() 현재 날짜에 해당하는 숫자를 반환 1 ~ 31 getDay() 현재 요일에 해당하는 숫자를 반환 (일요일은 0, 토요일은 6) 0 ~ 6 getTime() 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초(millisecond) 단위로 환산한 값을 숫자로 반환 - getMonth() 현재 월에 해당하는 숫자를 반환 0 ~..

1. WSL 설치 전 windows 설정 2. WSL1 설치 (Ubuntu) 3. WSL2 설치 (Linux 커널 업데이트) 4. Node.js 다운로드 5. nvm 설치 6. npm 설치 7. Express.js 사용방법 1. WSL 설치 전 windows 설정 WSL을 설치하기 위해 먼저 windows에서 셋팅을 해주어야 한다. '제어판 - 프로그램 - 프로그램 및 기능 - windows 기능 켜기/끄기' 로 들어가면 Linux용 Windows 하위 시스템 또는 Windows Subsystem for Linux라는 항목이 있다. 이것을 체크해주어야 한다. 추후 필요할 수도 있기 때문에 Windows 하이퍼바이저 플랫폼 항목에도 체크하였다. WSL을 설치할 수 있는 Windows 버전은 20H1 이상이..

1. Git 구문 2. Git 원리 2.1. Git 동작 원리 아키텍처 1. Git 구문 앞으로 많이 사용할 기본적인 구문 git init git status git add git commit git push (x) git pull (x) 내용을 살펴보도록 할 예정이다. 하지만 자주 쓰는 용어인만큼 확실한 구분 및 내용을 숙지해야 한다. 아래의 그림과 같이 설명을 추가하도록 하겠다. 2. Git 원리 git은 특정 폴더(.git)에 내가 작업한 히스토리를 모두 보관하는 프로그램이다. 이것을 전문용어로 버전 관리 시스템이라고 한다. git이라는 특정 폴더에 내가 작업하고 기록했던 순간순간을 사진같이 모두 보관하고 있기 때문에, 만약 최근 코드에서 에러가 발생할 경우 예전에 기록했던 순간으로 돌아갈 수 있다..

1. 목표 2. 구현 과정 1. 목표 완성된 웹 페이지에서 헤더의 'menu1' ~ 'menu4'에 마우스를 가져가면 menu1-1 ~ menu4-4가 나타난다. 다시 마우스를 다른 곳에 가져가면 menu1-1 ~ menu4-4는 보이지 않는다. 2. 구현 과정 HTML은 기초적인 문법으로 구성되었기 때문에 자세한 설명은 생략한다. 하나 언급하자면, 마우스를 가져갔을 때 나타나는 메뉴가 header에 고정되어 있는 메뉴와 독립적으로 존재하는 것이 아니라 ul, li 태그를 이용해 header에 고정되어 있는 메뉴의 하위 항목으로 구성해주었다. script에서 for 문을 쓴 이유는 gnb의 'menu1' ~ 'menu4'를 일일이 쓰는 번거로움을 덜기 위해서이다. for 문을 해석하자면, 'menu1' ..

1. JavaScript 코드와 브라우저 2. 시간과 관련된 Web APIs 2.1. setInterval() 함수 2.2. setTimeout() 함수 2.3. clearInterval() 함수 3. 화면 슬라이드 애니메이션 구현 1. JavaScript 코드와 브라우저 JavaScript는 단일 스레드 기반의 언어로 한 순간에 하나의 작업만 수행할 수 있다. 하지만 JavaScript는 비동기로 동작하기 때문에 단일 스레드임에 불구하고 동시에 여러 작업을 수행한다. 비동기로 동작하는 이유는 JavaScript가 아니라 브라우저 때문이다. JavaScript가 실행될 때 브라우저와의 동작은 [그림 1]과 같다. 2. 시간과 관련된 Web APIs 2.1. setInterval() 함수 일정한 시간 간격..

1. CRUD 2. To Do List 제작 2.1. 기본 틀 2.2. List 항목 Create 2.3. List 항목 Update 2.4. List 항목 Delete 2.5. 완성된 JavaScript 1. CRUD 대부분의 게시판은 CRUD 속성을 갖는다. CRUD는 4개 단어의 약자를 따서 만들었다. C는 Create, R은 Read, U는 Update, D는 Delete를 의미한다. 오늘 제작할 To Do List는 C, U, D 기능을 사용할 수 있도록 하는 것이 목표이다. 2. To Do List 2.1. 기본 틀 form 태그 안에 input 태그 2개를 넣어서 각각 해야 할 일을 작성할 수 있는 text 박스와 작성한 내용을 등록할 수 있는 submit 박스로 나타냈다. ul 태그 안에는..

1. DOMContentLoaded 2. Load 3. Unload 1. DOMContentLoaded 2. Load 3. Unload

1. 동기식 2. 비동기식 1. 동기식 2. 비동기식

1. 소개 2. this를 이용하는 함수 실행에 대한 4가지 방식 2.1. 일반 함수 실행 방식 (Regular Function Call) 2.2. 도트 표기법 (Dot Notation) 2.3. 명백한 바인딩 (Explicit Binding) / call, bind, apply 2.4. new 키워드를 사용한 함수 실행 1. 소개 자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는데, this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구분된다. this의 값들은 크게 4가지 정도로 나뉜다. 즉, this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다. 이러한 특성 때문에 this가 무엇을 ..

1. DOM (Document Object Model) 2. BOM (Browser Object Model) 2.1. Window 객체 2.2. Location 객체 2.3. History 객체 2.4. Screen 객체 2.5. Navigator 객체 1. DOM (Document Object Model) 문서 객체 모델(DOM)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 아래와 같이 계층 구조로 표현된다. 자바스크립트는 이러한 객체 모델을 이용해 다음과 같은 작업을 할 수 있다. 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다. ..

1. 목적 2. 예시 3. 자주 사용하는 이벤트의 종류 1. 목적 addEventListener()는 document의 특정 요소(id, class, tag 등) event(ex. click하면 함수 실행, 마우스 갖다대면 함수 실행 등)를 등록할 때 사용한다. 2. 예시 버튼 웹 페이지의 '버튼'을 클릭할 때 마다 hello world!가 출력된다. 3. 자주 사용하는 이벤트의 종류 이벤트 설명 click 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover 마우스를 HTML요소 위에 올리면 발생한다. mouseout 마우스가 HTML요소 밖으로 벗어날 때 발생한다. mousedown 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 ..

1. 콜 스택 (call stack) 2. 콜 스택 예제 1. 콜 스택 (call stack) 스택 프레임 (stack frame) 메모리의 스택(stack) 영역은 함수의 호출과 관계되는 지역 변수와 매개변수가 저장되는 영역이다. 스택 영역은 함수의 호출과 함께 할당되며, 함수의 호출이 완료되면 소멸한다. 함수가 호출되면 스택에는 함수의 매개변수, 호출이 끝난 뒤 돌아갈 반환 주소값, 함수에서 선언된 지역 변수 등이 저장된다. 이렇게 스택 영역에 차례대로 저장되는 함수의 호출 정보를 스택 프레임(stack frame)이라고 한다. 콜 스택 (call stack) 콜 스택이란 컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조이다. 콜 스택을 사용하는 주된 이유는 현재 실행..