본문 바로가기
반응형

JavaScript15

Chat-GPT 질의응답 모음 Preface 코드를 작성하며 중간중간 GPT에게 물어봤던 자바스크립트 관련 질문을 한 곳에 모아두고자 글을 업로드한다. - var, let, const의 차이점 1) `var`: `var` 키워드는 ES5 이전에 사용되던 변수 선언 방식입니다. `var`로 선언된 변수는 함수 스코프를 갖습니다. 함수 내에서 선언된 `var` 변수는 해당 함수 내에서만 접근할 수 있으며, 함수 외부에서는 접근할 수 없습니다. 또한, `var` 변수는 재선언 및 재할당이 가능합니다. 이러한 특징으로 인해 `var` 변수는 호이스팅(hoisting) 현상이 발생할 수 있습니다. 2) `let`: `let` 키워드는 ES6에서 도입된 블록 스코프를 갖는 변수 선언 방식입니다. `let`으로 선언된 변수는 해당 블록(중괄호 `.. 2023. 7. 8.
쿠키(Cookie) Preface 이번 장에선 쿠키를 생성하고 사용하는 방법을 공부했다. 나는 지금껏 서버에서 자체적으로 쿠키를 생성하여 저장한 후 클라이언트에 따라 정보를 제공하는 것으로 알고 있었다. 서버는 클라이언트의 요청에 따라 쿠키를 생성하며, 클라이언트가 재접속하여 HTTP 요청 헤더를 통해 쿠키 정보를 제공하지 않으면 서버에서 쿠키를 읽을 수 없다는 것이 이번 장의 키 포인트인 것 같다. 1. 쿠키란? - 쿠키(Cookie): 클라이언트의 상태 정보를 유지하기 위한 기술 → 상태 정보를 클라이언트에 키와 값 형태로 저장했다가 다음 요청 시 저장된 쿠키를 함께 전송한다. - 쿠키 표준 1) 3000개까지 만들 수 있다. 2) 쿠키 하나의 최대 크기는 4096바이트이다. 3) 하나의 호스트나 도메인에서 최대 50개.. 2023. 6. 4.
jQuery Ajax Preface jQuery를 통한 Ajax 사용과 관련된 자세한 내용을 담고 있는 동영상은 없는 것 같아 생활코딩에 있는 글과 Chat-GPT의 내용만을 바탕으로 간단하게 글을 업로드한다. - jQuery의 Ajax API 링크: https://api.jquery.com/jQuery.ajax/ jQuery.ajax() | jQuery API Documentation Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several h.. 2023. 6. 4.
Ajax Preface 어제는 JSP 공부 도중 jQuery에 관한 내용이 나와 jQuery를 간단히 살펴봤었는데, 이번엔 코드에서 jQuery에서 제공하는 Ajax와 관련된 부분이 나왔다. 해당 내용만을 공부할까 하다가 기왕 공부하는거 Ajax의 개념에 대해 확실히 짚고 넘어가는 것이 좋을 것 같다는 생각이 들어 생활코딩의 Ajax 강의를 봤다. 이번 글을 업로드한 후엔 jQuery의 Ajax 강의를 보고 간단히 정리할 생각이다. JSP 공부를 시작하기 전엔 HTML, CSS, JS, Java 관련 지식만 있으면 아무 문제 없이 책을 이해할 수 있을 것이라 생각했지만, 막상 공부를 시작하니 요구되는 사전 지식이 꽤 많다. - Ajax(Asynchronous JavaScript and XML): 웹 애플리케이션에.. 2023. 6. 3.
jQuery 찍먹 Preface JSP 공부를 하던 중 jQuery에 대한 지식을 요구하는 부분이 있어 생활코딩에서 제공하는 jQuery 강의를 찾아봤다. 기본적인 사용 방법 부분만을 시청했고, 추후 jQuery를 제대로 사용해야 할 필요성이 느껴지면 그때 공부할 계획이다. - jQuery의 기본 문법 1) $ 대신 jQuery를 입력할 수 있다. 2) 제어대상엔 클래스, ID 선택자 등이 위치한다. 3) 메소드 뒤에 도트 연산자로 여러개의 메소드를 연결할 수 있다. $(제어대상).method1().method2(); - jQuery 사용 방법 1) jquery 사이트의 소스코드를 사용 → https://releases.jquery.com/ jQuery CDN The integrity and crossorigin attr.. 2023. 6. 2.
WEB2 - JavaScript Preface JSP 공부를 시작하기 전 자바스크립트의 기본적인 내용을 익히기 위해 생활코딩에 있는 WEB2 강의를 봤다. "HTML + CSS + JS"책을 공부하며 자바스크립트를 잠깐 사용해보긴 했지만, 오래되기도 했고 내용이 너무 부실하다는 느낌이 들어 생활코딩 강의를 선택했다. 기존 계획은 강의를 들으며 작성했던 코드를 업로드하는 것이었지만, VSCode와 연결해둔 Git을 잘못 건드려서 작성한 코드 파일을 모두 날려버렸다. 사용했던 개념들은 변수, 반복문, 배열, 함수, 객체 등이다. JS 공부는 일단 이정도로만 해두고 JSP 공부를 시작할 생각이다. 추후 JS에 대한 더욱 깊은 공부가 필요하다고 생각되면 인프런이나 유튜브, TCP school, W3 Schools 등을 통해 공부하자. 생활코딩.. 2023. 5. 25.
구글 클론 코딩 Preface 이번엔 구글 홈페이지를 만들어봤다. 워낙 화면 구성이 간단해서 쉽게 만들 수 있을 것 같다고 생각했었는데, 막상 교재 없이 모든 웹 요소를 하나하나 제작하다보니 시간이 꽤 오래 걸렸다. 전체적인 레이아웃을 구성하고 색상을 입히는 등 HTML과 관련된 간단한 CSS 작업은 막힘없이 진행할 수 있었는데, 자바스크립트를 사용해 숨겨놓았던 하위 메뉴를 표시하는 작업은 따로 책을 찾아보며 고민할 시간이 필요했다. 아, 그리고 이번 작업은 모든 웹 요소를 픽셀 단위로 제작했는데, 웹 페이지의 크기를 조절할 때마다 메인 로고와 검색 창의 위치가 바뀌는 것이 너무 신경쓰인다. 개강 전에 시간이 되면 그리드 레이아웃, 플렉스박스 레이아웃을 사용해 반응형 웹 페이지를 만들어보려고 한다. 이번엔 하위 메뉴를 .. 2022. 8. 19.
제주 여행사 웹 사이트 Preface HTML + CSS + JavaScript 책의 마지막 부분에 있는 웹 사이트 만들기 프로젝트를 진행하는 과정을 업로드한다. 한 번에 전부 완성하려 했지만, 이틀에 걸쳐 완성해야 할 것 같다. 다른 웹 사이트를 클론 코딩하기 전 연습한다는 생각으로 필요한 부분을 임의로 수정하며 책에 있는 코드를 따라 적고 있다. 처음엔 간단한 웹 사이트를 만드는 것 정도는 쉽게 할 수 있을 것이라 생각했는데, 예상했던 것 보다 신경 쓸 부분이 많다. 무엇보다 처음 큰 틀을 제대로 잡는 것이 정말 중요한 것 같다. 자세한 내용은 코드를 전부 완성한 후 이번 글에 추가하겠다. 모든 코드를 완성했다. 웹 사이트에 링크를 따로 연결한 것도 아니고 기본적인 형태만 만든 것 뿐인데, 시간이 꽤 오래 걸렸다. 그래도 .. 2022. 8. 12.
[JS] 문서 객체 모델(DOM) Preface 이번 장에선 문서 객체 모델의 정의와 사용법을 공부했다. 자바스크립트의 기본이 되고 가장 중요한 내용이라고 하는데, 생각보다 복잡하고 고민해야 할 부분도 많은 것 같다. 해당 책에 있는 내용만으론 부족한 것 같아 유튜브에서 다른 강의를 조금 더 찾아보려고 한다. 이번 장을 끝으로 해당 책의 내용은 모두 마무리했다. 나름 쉽고 빠르게 웹의 기본적인 내용을 학습한 것 같아 다행이다. 책의 마지막 부분에 웹 페이지 제작하기 프로젝트가 수록되어 있어 이번 글을 업로드한 후 제대로 된 웹 페이지를 만들어 볼 계획이다. 이후엔 생활코딩 사이트에서 깃과 깃허브에 관한 내용을 공부한 후, 개강 전까지 몇몇 사이트를 모방해볼까 한다. → 클론 코딩(clone coding)이라고 한다. 개강 후엔 자바 공부.. 2022. 8. 11.
자바스크립트 객체 사용 가이드 자바스크립트 객체의 메서드(method)와 프로퍼티(property) 종류를 나열하고 설명해주는 사이트 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects 표준 내장 객체 - JavaScript | MDN 이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다. developer.mozilla.org 2022. 8. 9.