FE

웹 브라우저에서 알림 기능을 지원하는지 확인if('Notification' in window) { console.log('지원함');} else { console.log('지원 안 함함')}알림 권한 요청// 알림 기능을 브라우저에서 지원하면, 권한을 요청Notification.requestPermission().then(permission => {console.log(permission);}) 알림 띄우기버튼 알림 내용 수정 (이미지 띄우기)const noti = document.querySelector('#noti');noti.addEventListener('click', () => { console.log('실행'); const notification = new Notification('제목..

웹에서의 데이터 저장데이터를 서버가 아닌 클라이언트에 저장할 수 있다. 보통 로컬 스토리지, 세션 스토리지, 쿠키를 사용하고 가끔 Service workers를 사용한다.로컬 스토리지와 세션 스토리지의 차이는 서비스의 데이터 크기 차이고,쿠키는 보안 설정 같은 것을 할 수 있다. 개발자 도구 -> 애플리케이션 에서 확인할 수 있다. 로컬 스토리지지속적으로 필요한 데이터를 저장할 때 사용한다.백엔드 서버와 상관 없고, 브라우저를 껐다 켜도 유지된다. 키와 값으로 저장한다.window.localStorage.key01 = "value01";버튼 눌러서 저장되게 하기로컬 스토리지 저장 세션 스토리지일시적으로 큰 데이터를 저장할 때 사용한다.백엔드 서버와 상관 없고, 브라우저 껐다 키면 초기화된다.세션 스토리지..

동기 vs 비동기동기서버에서 아직 처리를 안 해줬으면 동작이 멈추는 것서버에 요청을 보낸 후 기다렸다가 해당 응답을 받아야 다음 동작을 실행 비동기서버에서 아직 처리를 안 해줬지만 클라이언트에서 동작이 멈추지 않음요청을 보낸 후 응답에 관계 없이 순차적으로 다음 코드를 먼저 실행AJAX, fetch, Promise, axios 1. AJAXJavaScript를 사용하여 서버로부터 비동기적으로 데이터를 가져오는 기술XML뿐만 아니라 JSON, 텍스트 등 다양한 데이터를 가져올 수 있음옛날에 쓰던 기술 장점오래된 브라우저에서 동작하기 때문에 호환성 높음단점코드가 길고 가독성이 떨어짐비동기 처리 코드가 복잡해질 수 있음const xhr = new XMLHttpRequest(); // XMLHttpRequest..

배열 객체 값 넣기let objList = [];objList.push({ value: 12 });objList.push({ value: 23 });objList.push({ value: 6 });objList.push({ value: 1 }); 배열 객체 정렬objList.sort(); a와 b를 가져와서 이 함수로 실행하는 것객체의 value라는 값을 가져와서 실행해라objList.sort((a, b) => a.value - b.value);   배열 객체 삭제// 배열의 맨 뒤의 값 삭제objList.pop(); 특정 값 포함 여부값이 포함되어 있다면 true, 포함되어 있지 않다면 falselet arr = [1, 2, 3, 4, 5];arr.includes(1); // truearr.inclu..

DOM이란?Document Object ModelHTML 문서를 브라우저에서 JavaScript로 접근하고 조작할 수 있도록 트리 구조로 표현한 것DOM을 활용하면 HTML 요소를 선택하고, 내용을 변경하거나 스타일을 변경할 수 있다.DOM 요소찾기getElement-* 함수 사용// 아이디로 찾기let getTagById = document.getElementById("subtitle");// 태그 이름으로 찾기let getTagByTagName = document.getElementsByTagName("h1");// 클래스로 찾기let getTagByClassName = document.getElementsByClassName("title"); querySelector, querySelectorAll..

변수와 상수 (var, let, const)변수 다루는 법// 변수 만드는 법let 변수;// 변수에 무언가를 저장하는 법변수 = 무언가;// 변수 사용하는 법변수 이름 var함수 스코프과거에 사용하던 변수 키워드중복 선언 가능var x;x = 10;var y = 5; let ES6에 새로 생긴 문법블록 스코프중복 선언 불가능, 재할당 가능let x;x = 10;let y = 5;  const블록 스코프선언 후 값을 변경할 수 없음const x = 10;// x = 20; => 에러 발생  데이터 타입 (기본, 참조)변수 타입 확인// typeof 변수이름// type을 알려주는 문자열을 반환한다.let x = 10;console.log(typeof x); // "number" 데이터 타입은 크게 기본 ..

자바스크립트란?자바스크립트는 인터프리터 언어다.JS를 실행하기 위한 인터프리터 = 웹 브라우저nodejs -> 자바스크립트를 실행하기 위한 인터프리터 자바스크립트 코드가 하는 일백엔드에서 데이터를 가져오는 것웹 페이지에서 원하는 태그를 변경하는 것 (렌더링) 자바스크립트 작성 script 태그에 자바스크립트 코드를 넣거나, src로 js 파일을 연결해서 사용한다. 렌더링 때문에 보통 js를 제일 아래에 넣어준다.만약 백엔드에 게시글을 가져와 h1 태그 안에 내용을 DB에 저장되어 있는 제목으로 바꿔주려고 하는데,자바스크립트가 제목 위에 있다면 h1 태그가 아직 안 만들어졌을 수도 있다.그래서 보통 자바스크립트는 body의 제일 밑에 작성한다. html, css, javascript를 한 파일에 다 만들면..

Next로 개발을 하던 도중 페이지 이동 시 Link를 써야 하는지, useRouter를 써야 하는지 헷갈려서 찾아보았다. HTML 태그를 확장하여 경로 간 프리패칭 프리패칭(prefetching) : 사용자가 경로를 방문하기 전에 백그라운드에서 페이지를 미리 로드하는 방법렌더링된 링크에 대해 Client-Side Page Navigation을 지원하여 페이지 전환이 빠르고 부드럽게 이루어진다.사용자가 브라우저에서 페이지 간 이동을 할 때, 브라우저가 전체 HTML 페이지를 새로 요청하고 다시 로드하는 것이 아니라, 자바스크립트가 브라우저 내에서 페이지 콘텐츠만 동적으로 전환하는 방식SEO 최적화에 유리하다. 기본 navigation보다 빠르며, SPA(Single Page Application)의 특..

next에서 dev server를 열어서 작업 중 계속 이런 에러가 떴다.[Error: UNKNOWN: unknown error, open 'C:\Projects\.next\static\chunks\app\layout.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'open', path: 'C:\\Projects\\.next\\static\\chunks\\app\\layout.js'}[Error: UNKNOWN: unknown error, open 'C:\Projects\.next\static\chunks\app\layout.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'open', path: 'C:\\Projec..

node.js 버전 업데이트next.js를 사용하려고 했는데 node 버전을 업데이트하라는 메시지가 떴다. 노드 버전을 업데이트하려면 보통 nvm을 통해 원하는 버전으로 설치하지만,나는 nvm 없이 노드 버전을 먼저 설치한 상태여서 다른 방법을 찾아봤다. npm install -g n 을 사용해서 업데이트하는 방법이 있었는데, 이 플러그인은 윈도우에서 지원하지 않음 !그래서 결국 nvm을 설치하기로 했다.nvm이란?nvm은 node version manager의 줄임말. Node.js의 여러 버전을 하나의 컴퓨터에 설치할 수 있도록 도와주며 사용자는 손쉽게 여러 개의 버전을 제약 없이 사용할 수 있음 nvm을 설치하기 위해 기존에 설치된 node.js를 삭제해야 한다. 삭제를 안 한다면 꼬이는 사태가 발..