본문 바로가기

전체 글

 (45)
1.3 윈도우(Window) 사이즈 & 문서(document) 사이즈 목차 1. 모니터 사이즈(window.screen.width) 2. 브라우저 사이즈(window.outerWidth) 3. 뷰포트 사이즈(window.innerWidth) 4. 다큐먼트 사이즈(document.documentElement.scrollWidth) 1. 모니터 사이즈 1) 모니터 사이즈 = 컴퓨터 해상도로 모니터 사이즈는 컴퓨터가 바뀌지 않는 이상 항상 동일하다(단, 시스템 설정에서 해상도를 바꿀 경우 모니터 사이즈도 바뀐다.) 2) 내 컴퓨터의 해상도는 1440 * 900 이다(왼쪽 사진), 개발자 도구로 확인한 모니터 사이즈 또한 1440 * 900이다(오른쪽 사진) 3) 모니터 사이즈 구하는 메서드: window.screen.width, window.screen.height 2. 브라우..
1.2 브라우저 내장 객체 목차 1. Window Object란? 2. Window 객체 구성요소 3. Window Object란? 1. Window Object란? 1) 브라우저에서 웹페이지를 열게되면 무엇이 있을까? 바로, Window라는 전체적인 Object 가 있다. 2) 아래 이미지의 빨간 영역이 Window, 파란 영역이 Document Object를 가리킨다. 2. Window Object에는 어떤 것들이 있을까? 1) DOM(Document Object Model) - document object 2) BOM(Browser Object Model) - navigator object - location object - fetch 함수 - Stroage 함수 3) JavaScript ⇒ Web API 들이 Window ..
1.1 WEB APIs 목차 1. API란? 2. Web APIs란? 3. Web API 찾는 방법 4. Web API 종류 5. Web API 사용하는 방법 6. API란? 1. API란? Application Programming Interface(처음 들어가는 문 같은 느낌, 메뉴 같은 느낌..) 소프트웨어 프로그램(애플리케이션) 내부에 존재하는 기능 및 규칙의 집합. 쉽게 말해 어떤 동작, 기능을 수행하는 것들의 모음 + 규칙들의 모음이다. 어떤 동작이란 구체적으로 무엇을 의미하냐면 예를 들면 우리가 네이버 포털에 로그인하고 로그아웃 할 수 있는 것은 네이버에서 로그인, 로그아웃과 같은 기능을 제공하기 때문이다. 즉 우리는 네이버에 로그인할 때 네이버의 로그인과 관련된 api를 사용하는 것이다. 또 다른 예시를 들자면,..
실체없는 나의 불안 파헤쳐보기: 회사 내 실력있는 동료 개발자가 떠날까봐 불안하고 걱정된다. 회사 내 실력 있는 동료 개발자들은 아무래도 이번 년도 안에 이직을 할 것 같다. 그들이 떠나는 걸 상상만해도 너무 아쉬운 감정이 드는데, 사실 그에 반해 더 크게 내게 몰아친 감정은 걱정과 불안이었다. 나는 퍼블리셔로 입사를 했지만 아주 작은 개발 업무도 하고 있다. 해보겠냐는 팀장님의 말에, 냉큼 하겠다고 나섰다. 내가 새롭게 뭔갈 만들어내는 것은 아니고 고객사에서 등록 또는 삭제 요청하는 것들을 해주는 등의 기존에 있던 것 유지보수 정도의 일을 하고 있다. 그런데 사실 나는 안다. 이 마저도 그들이 있었기에 가능했던 거라는 것을. 나는 내가 수정한 코드에 확신이 없었기 때문에 몇 번 시도해본 다음 동료 개발자한테 이렇게 한 거 맞냐고 되물었다. 상당히 이것저것 많이 만져봤는데 든든한 동료가 있었기 ..
step2. 상태관리로 메뉴 관리하기 * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 강의내용과 제 생각이 한 데 섞여있어서 본 내용이 정확하지 않을 수 있습니다. 제대로 공부하시려면 유데미 강의를 구매하시길 추천드립니다. 0. step 2을 통해서 내가 배운 것 1) 기술적 - 상태 & 로컬스토리지 개념 - localStorage에 메뉴 상태를 저장하여 관리하기 (메뉴 추가, 수정, 삭제, 불러오기) - 계층적인 데이터 상태를 저장하고 관리하기 - 모듈화 하여 export, import 하는 법 - 다양한 메서드들 또는 방법 ▶ localStorage에 저장된 데이터 세팅하는: localStorage.setItem(Key, Value) ▶ localStorage에 저장된 데이터 가져오는: localStorage.getItem(Key..
프론트엔드 멘토 두 분과 함께하는 무료 라이브 세션 정리 1. 책이나 강의로 공부할 때 1) 무작정 받아들이지 않기 새롭게 공부한 이 개념이 무엇을 해결할 때 쓸 수 있는 개념인지 또는 무엇을 해결하기 위한 것인지 알자. 학습의 주도권이 책이나 강의가 아니라 나에게로 넘겨 오자. 2) 내 것으로 만들기 책이나 강의를 요약하기 보다는 그 내용을 내재화해서 내 것으로 재정립하자. 이 때 하나의 책, 하나의 강의만 참고하지 말고 여러 책의 목차, 커리큘럼, 채용공고, 키워드 단위로 공부하는 것이 좋다. 3) 인풋 아웃풋 적절하게 인풋 안하고 아웃풋만 하면 클론코딩, 책을 그대로 베껴 쓰는 것일 뿐이다. 아웃풋 없이 인풋만 하면 내가 배운 개념을 까먹게 된다. 내가 이렇게 하면 이렇게 만들어지겠지 상상만하게된다. 인풋과 아웃풋을 혼합하는게 어렵다는 걸 안다. 하지만 ..
step1. 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 0. step 1을 통해서 내가 배운 것 1) 기술적 - 돔 조작 방법(요소 추가, 삭제) - 이벤트 핸들링(키보드 이벤트, 클릭 이벤트, 기본 이벤트 막기, 이벤트 위임) - 브라우저 인터페이스 활용 - 예외처리(return 적절하게 사용하기) - 다양한 메서드들 ▶ 돔 요소 선택시 querySelector(), ▶ 이벤트 기본동작 막는 preventDefault(), ▶ 특정 돔 트리 안에 원하는 노드 추가하는 insertAdjacentHTML(), ▶ 해당하는 돔 요소를 다 가져오는 querySelectorAll(), ▶ 노드리스트 길이 구하는 length, ▶ 이벤트를 발생시킨 요소를 가리키는 event.target(), ▶ 요소가 갖고 있는 클래스를 배열처럼(DOMTokenList) 반환하는 e..
04. 콜백 함수 in JavaScript 01. 콜백함수(Callback Function)란? - callback: 회신하다, 답신하다 - callback function: 회신되는 함수 - 함수 또는 메서드에(1)에 인자(argument)로 들어가는 함수(2)를 콜백함수(2)라 한다. ➡ 콜백함수(2)에 대한 제어권을 함수(1)에다가 넘긴다는 뜻이다. 콜백 함수를 위임받은 코드(2)는 자체적인 내부 로직에 의해 이 콜백 함수(1)를 적절한 시점에 실행할 것이다. 02. 제어권(콜백 함수를 넘겨받은 코드가 제어권을 가진다!) 1) 호출 시점 2) 인자 3) this 1) 호출 시점: 콜백 함수를 넘겨 받은 코드가 콜백 함수를 언제 호출할 지 결정한다. ex) setInteval 주기함수 - 위 예제에서는 콜백함수를 넘겨 받은 함수, 즉 setI..

티스토리툴바