가희의자기개발블로그

원티드에서 주최하는 프론트엔드 프리온보딩 코스에 참여했습니다. 해당 포스팅은 프리온보딩 코스의 사전과제 내용으로, Next.js를 초기 생성했을때 package.json에 명시되어있는 script "next start"를 하게 되면 어떤 일이 발생하는지 그리고 이를 실행하는 파일을 파악해 보고자 하는 글입니다. Next.js란 SPA(Single Page Aplication)에서 SSR이 가능하도록 해주는 React의 라이브러리입니다. (Vue에서는 nuxt.js가 있죠.) SSR에 대해 간략히 한줄로 표현하자면, 서버에서 미리 HTML을 만들어 클라이언트에게 전달해주는 것을 SSR이라고 합니다. yarn create next-app --typescript 을 입력하여 생성되는 next.js의 초기 파일..

클래스를 만드는 방법에는 세 가지가 있는데, 가장 간단한 방식인 오브젝트 리터럴 방식으로 클래스를 만들어 보자. 01_ 사용법 오브젝트 리터럴 방식으로 클래스 만드는 방법을 다음가 같은 순서로 나눠 진행하겠다. 단계는 크게 클래스 설계 단계와 설계한 클래스를 사용하는 단계인 객체 사용 단계로 나눠진다. 구분 진행 순서 클래스 설계 단계 1. 문법 2.생성자 정의 방법 3.프로퍼티 정의 방법 4. 메서드 정의 방법 객체 사용 단계 5. 인스턴스 생성 방법 6.객체 외부에서 프로퍼티와 메서드 접근 방법 7.객체 내부에서 프로퍼티와 메서드 접근 방법 우선 가장 첫번째 방법인 문법부터 살펴 보자 1 _ 문법 var 인스턴스 = { 프로터티: 초깃값, ... 메서드:function(){ ... }, ... } 리..

1. innerHTML을 속성을 사용한 화면 변경 XMLHttpRequest 객체를 사용하는 프로그램은 크게 다음 두 가지 코드로 구성된다. 사용자가 이벤트를 발생시키면 웹 서버에서 데이터를 전송한다. 웹 서버가 생성한 응답 결과를 바탕으로 화면을 조작한다. 앞에서 우리는 응답 텍스트를 alert() 메서드를 이용해서 출력했지만 실제로는 화면의 내용이 변경되거나 새로운 내용이 추가되도록 구현해야 한다. 웹 브라우저에서 화면을 조작할 때는 보통 아래의 두가지 방식 중 하나를 이용한다. HTML요소의 innerHTML 속성에 HTML 코드 지정하기 DOM(Document Object Model) API 이용하기

01_소개 jQuery는 Screen객체와 관련된 기능은 제공하지 않는다. 이유는 굳이 전역 객체인 Screen객체를 jQuery로 다시한번 감사서 제공할 기능이 없기 때문이다. 02_전체 화면 크기 구하기 screen.width screen.height 해당 프로퍼티에는 모니터 해상도 정보가 담겨 있다. 03_유효한 전체 화면 크기 구하기 screen.availWidth screen.availHeight Screen 객체의 속성 width와 height에서 운영체제의 작업 표시줄 영역이 제외된 크기입니다.

01_ 문서 크기 구하기 $(document).width() $(document).height() jQuery에서 문서의 전체 너비와 높이를 알 수 잇는 메서드는 이 두가지만 제공한다. 문서 크기를 설정하는 등의 다른 기능은 제공하지 않는다.

01_ 요소의 위치 및 크기 관련 속성 소개 지금까지 html요소의 위치와 크기를 구하기 위해 다음과 같은 구문을 사용했다. $대상.css("left"); $대상.css("width"); 하지만 이 값들은 모두 단위를 포함한 문자열 정보이기 때문에 현재 위치에서 50만큼을 이동을 한다거나 현재 크기를 100만큼 키우는 처리를 하기 위해서는 다음과 같이 형변환을 해야만 한다. $대상.css("left", (parseInt($대상.css("left"))+50+"px"); $대상.css("left", (parseInt($대상.css("width"))+100+"px"); 만약 html 요소의 위치 값과 크기 값을 문자가 아닌 숫자 값으로 얻을 수 있느면 좀더 편하게 작업할 수 있다. 이때 자바스크립트 DOM은 ..

01_일반 이벤트 등록 $대상.on("이벤트이름","이벤트리스너") 02_단축 이벤트 등록 $대상.단축이벤트(이벤트리스너) jQuery에서는 일반적으로 많이 사용하는 이벤트를 좀더 쉽게 사용할 수 있게 단축 이벤트 메서드를 가지고 있다. 예를 들어, click이벤트를 등록하는 경우 단축 이벤트 메서드를 사용하면 다음과 같이 click()메서드를 이용해 처리할 수 있다. 03_등록 이벤트 제거 경우 1 : 특정 이벤트에 대한 리스너를 제거하고 싶은 경우 $대상.off("click",삭제하고 싶은 이벤트 리스너 명) 경우 2 : 특정 이벤트에 걸려있는 모든 이벤트 리스너를 제거하고 싶은 경우 $대상.off("click") 경우 3: 모든 이벤트 종류에 상관 없이 모든 이벤트를 제거하고 싶은 경우 $대상.of..

01_이벤트란? 이벤트란 이름에서 알 수 있듯이 일종의 알림 기능이다. 예를들어, 태그 요소에서 마우스를 클릭하면 웹 브라우저는 마우스와 관련된 여러가지 정보가 담긴 MouseEvent라는 객체를 생성하고 마우스 이벤트를 발생시킨다. 이때, 마우스 이벤트에 들어있는 정보는 클릭한 마우스 버튼 정보, 클릭과 함께 누른 키보드 정보, 해당 페이지에서 클릭한 마우스의 위치 정보가 담긴다. 그리고 이벤트 리스너가 실행되는데 이것은 MouseEvent객체가 리스너 함수로 넘어오게 되기때문이다. 웹페이지에서도 사용자가 마우스를 클릭하거나 키보드 키를 입력하면 브라우저는 입력정보(클릭 위치, 클릭 버튼, 입력키 값 등)을 이벤트에 담아 개발자에게 알려 준다. 개발자는 이정보를 받아 여러가지 용도에 맞게 개발을 진행한..