기록

~오늘의 참조 영상~ 많은 도움을 받고 있는 라메개발자님의 영상(https://youtu.be/ntFeJ30GE40) 아직 개발된 것이 없는 상태에서 배포까지 어떻게 하는지 배워보자. 개발도 하기 전에 배포를 먼저 해서 얻을 수 있는 이점은 이러하다. 로컬에서는 잘 동작하던 게 실제 배포했을 때는 제대로 동작하지 않는 경우가 비일비재하기 때문. 따라서 매일 개발이 끝나고 즉시 배포를 해서 실서버에서 확인할 수 있다면, 문제를 빨리 발견하고 수정할 수 있다! 그러나 개발이 끝날 때마다 배포를 하는 것은 매우 번거로운 작업이다. 개발이 끝나고 코드를 업로드하면 자동으로 배포되도록 해보자. 기술스택: TS + React + Express root 디렉토리에 클/서 폴더 각각 생성 mkdir client mkd..

vs innerHTML vs appendChild innerHTML은 기존 노드 위에 html을 덮어씀. 기존 노드가 아예 변경됨 insertAdjacentHTML은 기존 노드는 그대로 두고 특정 position에 html을 추가함 appendChild도 부모 노드에 자식 노드를 추가하는 방식 만약 인자로 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 해당 노드를 현재 위치에서 새로운 위치로 이동시킨다.(만약 인자로 주어진 노드가 이미 부모를 가지고 있다면 우선 그곳에서 삭제되고 새로운 위치로 이동된다. 따라서 문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로부터 지워버릴 필요가 없다.) 즉, innerHTML이 실행되면 해당 요소 내 DOM Tr..

2-1 프로미스의 최고 장점을 아십니까 https://youtu.be/0f-jNhnN0Qc "프로미스는 결과값을 나중에 쓸 수 있다" call back setTimeout(() => { console.log('a'); }, 1000); 위 코드는 1초만 지나면 () => {console.log('a');}가 반드시 즉시 실행됨 (코드 분리 불가능. 강제적으로 즉시 실행) 콜백함수의 단점 결과값을 바로 받아야 한다. 코드 가독성이 떨어진다. 콜백이라고 꼭 비동기가 아니다. 비동기콜백/동기콜백 비동기콜백의 대표적인 것 setTimeout Promise const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 1000..

this this는 함수가 호출될 때 결정된다! -> 비동기에서도 마찬가지 this는 함수가 호출될 때 호출 방식에 따라 정해진다.(동적) 1. JS에서 this는 기본적으로 window이다.(브라우저에서) - window가 아닌 경우는 다음 2~4번과 같다. - Node.js에서는 global - 최근에는 브라우저, 노드 모두 globalThis로 통합됨 console.log(this); // window function a() { 'use strict'; console.log(this); } a(); // undefined 'use strict'; 가 있으면 window가 아닌 undefined 2. 객체의 메서드가 호출될 때, 해당 메서드를 호출한 객체에 바인딩 - 단, 반드시 .앞 객체에 바인딩된..

호출과 선언을 구분하라 호출스택 참고로 console.log()는 다음과 같은 코드가 있다고 생각하면 됨 const console = { log() { // 콘솔에 글자 적는 기능 }, }; 호출스택: 함수의 호출과 동시에 스택에 쌓임 스코프체인: 함수의 선언으로 생기는 것. 블록 안에서 어떠한 값에 접근이 가능한지/불가능한지 const x = 'x'; function c() { const y = 'y'; console.log('c'); } function a() { const x = 'x'; console.log('a'); function b() { const z = 'z'; console.log('b'); c(); } b(); } a(); // a b c c(); // c // a b c c 여기서 ..

코드가 실행되기 전에 어떻게 돌아갈지 정확하게 알기 위해 다음 강의를 듣고 정리한 내용 출처: https://youtu.be/NS1cIsWlFGI 1. 함수와 함수 호출 // 함수 선언 const add = (a, b) => a + b; console.log(add(3, 5)); // 8 function calculator(func, a, b) { return func(a, b); } console.log(calculator(add, 3, 5)); // 8 // func 파라미터 자리에 함수 호출이 아니라 함수를 넣어야 함 // 만약 헷갈린다면, 머릿 속으로 함수 호출을 넣었을 때, 그 함수 호출 넣은 자리에 그 함수 리턴값을 넣어보면 됨 // 그 함수의 리턴값이 없으면 함수 호출 자리에 undefine..

JSON 데이터를 주고 받을 때 쓸 수 있는 간단한 파일 포맷 프로그래밍 언어, 플랫폼에 관계없이 쓸 수 있음 데이터를 서버와 주고 받을 때 직렬화 함. serialization 대부분 언어들이 JSON으로 serialize된 object를 다시 그 언어의 특징에 맞게 object로 변환하고, object를 다시 JSON으로 serialize하는 것을 지원해줌. 혹은 외부 라이브러리를 통해 변환함. 직렬화 JSON.stringify(): object -> string(JSON) 역직렬화 JSON.parse(): string(JSON) -> object web api 브라우저 api에서 제공하는 web api 브라우저 api의 종류 DOM API Network API Graphics API Storage ..

https://d2.naver.com/helloworld/8540176 flex를 적절하게 활용하기 위해 읽을 것

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. 이미지 슬라이더 기능을 도입하면서 bxslider를 추가하였는데, 슬라이더 안에 있는 a 태그를 클릭할 때마다 위 경고창이 추가되고 a태그의 링크로 이동하지 않는 문제 -> bxslider의 버그 중 하나였다. bxslider의 touchEnabled는 터치 스와이프로 슬라이드를 전환할 수 있는 옵션이며 기본값이 true이다. touchEnabled: false 출처: https://stackoverflow.com/..

전체선택/개별선택 기능에 버그가 생겨서 다른 방법을 시도하다가 알게 된 내용 form 요소의 disabled, selected, checked와 같은 속성값을 확인 또는 변경하는 경우는 .prop()를 사용하는 것을 권장한다. https://ojava.tistory.com/133 .prop(), .attr()의 차이 jQuery를 통해서 동적으로 화면 구성을 만들일이 많다. 그런 경우, selector를 통해 선택한 element나 append 하면서 새롭게 생성하는 element에 특정한 속성을 지정하게 되는 경우가 많은데 이 때 사용되 ojava.tistory.com