js를 이용한 HTML 요소 추가 방법들 프로젝트를 만들다 보면 js를 통해서 html의 요소를 추가해야하는 경우가 자주 있다. 특히나 어떠한 상호작용(서버에서 특정 데이터를 가져온다던지, 페이지 내에서의 input value의 값을 출력해야한다던지 등)에 의해서 html의 요소가 변경된다거나 추가 또는 삭제되어야 하는 경우가 있을 것이다. 이러한 기능을 수행하기에 여러 방법들이 있을텐데 이에 대한 각각의 장단점을 알아보고자 한다. 물론 마지막에 결합되거나 만들어진 문자열로 된 html 코드를 innerHTML을 통해서 넘겨주어야 하는 것은 동일하다. 다양한 방법에 대한 예를 들기 위해서 index.html 내에 존재하는 div class='container' 이라고 하는 태그 내에 로 감싸진 많은 태그와 태그 등의 다른 태그들이 생성되어야 한.. ocean floor/js floor / 2021. 12. 10. / dankthedust

XMLHttpRequest(XHR) 기초 이해 XMLHttpRequest XMLHttpRequest (XHR) 객체는 서버와 상호작용하기 위한 객체로 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다. 즉, AJAX 프로그래밍에 주로 사용되는 객체이다. HTTP 이외의 프로토콜을 지원한다(file 과 ftp ) XMLHttpRequest는 readyState 값이 존재 하는데 다음과 같은 상태를 정의한다. 0: UNSET(미전송) - 요청이 생성된 상태로 아직 서버에 요청을 보내지 않은 상태 1: OPENED(열림) - open() 함수가 호출된 이후로, 요청 초기화가 된 상태 2: HEADERS_RECEIVED(헤더 응답) - send() 함수 호출 이후, 서버에 요청한 결과의 헤더를 수신한 상태 3: LOADING(로딩) - send.. ocean floor/js floor / 2021. 12. 10. / dankthedust

JSON과 Storage(local, session) JSON JSON은 속성과 값으로 쌍을 이루는 데이터 포맷으로, 비동기 브라우저/서버 통신(AJAX)를 위해 넓게는 XML을 대체한다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. JSON파일은 하나의 문자데이터이나, JavaScript에서 데이터 값을 불러와지면서 그 파일의 자료형이 해석되어 사용된다. // myData.json { "name": "Lee", "age": 25, "emails": ["dankthedust@gmail.com", "8wall_dawn@kakao.com"] } import myData from './myData.json' console.log(typeof myData); // Object const user = { name:.. ocean floor/js floor / 2021. 10. 9. / dankthedust

Import와 Export Import와 Export를 통한 가져오기, 내보내기 프로젝트를 만들면서 많은 js 파일들이 생기게 되는데 특정 js파일에서의 생성한 함수, 변수 등을 다른 js에서도 사용하며 활용할 수 있도록 하는 역할을 import(가져오기), export(내보내기)이 한다. Export export 는 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용하며, 내보낸 값은 다른 프로그램에서 import 를 통해서 가져가 사용할 수 있다. 내보내지는 모듈은 "use strict"와 관계없이 엄격 모드가 적용된다. 기본(default) 내보내기 // 모듈 내의 선언한 식별자 내보내기 export { 식별자 as default }; // 각각의 식별자 내보내기 export default function .. ocean floor/js floor / 2021. 10. 9. / dankthedust

원시값과 참조값, 얕은 복사와 깊은 복사 자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리안, null, undefined, 심벌, 객체 타입)은 크게 원시 타입(Primitive type)과 객체 타입(object/reference type)으로 구분된다. 원시타입과 객체 타입의 차이 원시값은 변경 불가능한 값이지만, 객체 타입(참조값)은 변경 가능한 값이다. 원시 값을 변수에 할당하면 확보된 메모리 공간에는 실제 값이 저장된다. 하지만 객체를 변수에 할당하면 확보된 메모리 공간에는 참조값이 저장된다. 원시값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달된다. 하지만 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조값이 복사되어 전달된다. 원시 타입(원시값) 원시 데이터 : String, Number,.. ocean floor/js floor / 2021. 10. 8. / dankthedust

assign() 과 객체의 참조값, 참조에 의한 전달 온라인 강의를 병행하던 중 Object.assign() 함수에 대한 예문을 연습하고 있었는데 의아한 점이 있었고 의문점을 해결하면서 확실하게 알게된 객체의 특성중 참조값의 개념에 대해서 작성하여 남기고자 한다. Object.assgin(target, ...sources)의 개념은 대상 객체인 target에 출처 객체sources의 열거 가능한 자체 속성들을 복사하여 붙여넣은 후 대상 객체를 반환하는 메소드이며, target이 빈객체{}가 아닐 경우, 반환받은 값을 저장한 새로운 변수는 target과 참조값을 공유한다. 여기서 MDN의 내용에서의 기본개념에대한 설명과 달리 내가 추가한 내용은 target과 참조값을 공유한다 라는 것이다. MDN문서에도 참조값을 복사한다라고 명시되어 있으며, 객체의 특성에 .. ocean floor/js floor / 2021. 10. 7. / dankthedust

UI와 API #UI, API UI(User Interface)는 사용자들이 시스템을 제어하기 위해서 조작하는 장치를 의미하고 API(Application Programming Interface)는 프로그래머들이 사용하는 조작 장치를 의미한다. 간단히 html에서 버튼을 생성하고 클리 시에 'Hello world'라는 경고창이 뜨도록 코딩을 해보면 버튼은 UI가 되는 것이고, alert()라는 함수는 웹브라우저를 만든 사람들이 미리 만들어둔 API이다. 우선은 이런 API를 응용하고 결합해서 새로운 프로그램을 만들 수 있다라고 간단한 개념만 짚고 넘어가자. www.boostcourse.org/cs124/lecture/147574/?isDesc=false 자바스크립트의 시작 부스트코스 무료 강의 www.boostcour.. ocean floor/js floor / 2021. 3. 14. / dankthedust

JavaScript 연동과 라이브러리(Library) #JavaScript 연동 themeChanger()이라는 함수를 구현하고 코딩한 JavaScript를 1부터 4.html에 모두 붙여 넣어 원활한 구동이 되는 것을 확인했다. 그런데 이런 페이지가 많다면 모두 복사하고 수정 소요가 생겼을 때, 일일이 수정해야 하는 것은 상당히 비효율적인 일이 될 것이다. 보다 효율적으로 코딩하기 위해서 css를 hmtl에 불러왔던 것처럼 JavaScript도 불러온다면 우리는 한번의 수정으로 모든 페이지를 변경할 수 있게 될 것이다. themeChanger는 글씨색과 배경색을 변경하는 기능인만큼 color.js라는 파일을 만들고 html 내 사이에 있던 코딩을 붙여 넣었다. var Links = { SetColor:function (color){ var alist = .. ocean floor/js floor / 2021. 3. 14. / dankthedust