프론트엔드 자바 스크립트

AJAX

페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술.

• jQuery, axios 같은 라이브러리 사용.

브라우저에서 객체를 제공하긴 하지만
사용방법이 복잡, 서버에서는 사용 불가.
(실험적 단계.)

1. script 태그 첫번째에 axios 링크 추가.

GET

axios.get('요청을 보낼 주소').then((result)=>.....
. catch((error) => {.......

? axios에서 catch?

axios.get 내부에 new Promise가 들어있어
then, catch 사용이 가능.
result, error를 인자로 받는다.

result.data에 서버로부터 보낸 데이터가 들어있다.
또한, 프로미스라 async, await 방식으로 변경 가능.

(async() => {
try {
const reult = await axios.get('...');
}
catch(error) {...}
})()

POST

데이터를 서버로 보낼 수 있다.
전체적 구조는 유사하나 두번째 인수로 데이터를 보낸다.

const result = await axios.post('...', {
	name : '...',
    birth: 199, ...});

서버로 form 데이터 보내기

const formDate = new FormData();
formData.append('name','zerocho'); 
....

form 객체에 append 메서드로 키-값 형태로 추가 가능.
has는 주어진 키가 해당하는 값이 있는 여부,
get은 주어진 키에 해당하는 값을 하나 가져오고,
getAll은 전부 가져오며,
delete는 현재 키를 제거,
set은 현재 키를 수정.

formdata를 만든 뒤 axios로 서버에 보낸다.

try{
	const formData = new FormData();
    formData.append('name', 'zerocho');
    const result = await axios.post('..URL', formData);
    ...

한글 주소 변환, encodeURIComponent, decodeURIComponent

한글 주소를 이해하지 못한다면
서버에 따라 불가할 경우
window 객체의 메서드인 encodeURIComponent 메서드를 사용하자.

한글 주소 부분만 메서드로 감싼다.

axios.get('....${encodeURIComponet('한글')}...

받는쪽이 decodeURIComponent를 쓰면 해석할 수 있다.

데이터 속성과 dataset

보안 관련 없는 데이터를 HTML에 저장할수 있는 데이터 속성.
(data attribute..)

태그 속성으로 data-id="..." 식으로 쓰면
document.querySelector('li).dataset
같은 형태로 data 태그로 들어간 거 한번에 접근 가능.

반대로 이러한 접근으로 dataset에 추가해도
HTML에 태그가 추가 됨.

노드 기능 알아보기

모듈로 만들기

파일 별로 코드 집합을 관리하여 사용할 수 있음.
노드에는 두 가지 형식의 모듈을 사용.

• CommonJS
• ECMAScript

CommonJS

모듈을 만들어보자.

• 모듈이 될 파일
• 모듈을 불러와서 사용할 파일

모듈이 될 파일

const 변수 = 값;

module.exports = {
	변수
    };

다른 파일에서 이 파일을 불러오면
module.exports에 대입된 값을 사용할 수 있다.

모듈을 불러올 파일

const { 변수 } = require('./경로');

경로만 잘 지정하면 다른 폴더에 있는 파일도
모듈로 사용할 수 있다.

js, json 같은 확장자는 생략할 수 있다.

exports에는 객체 말고도
함수나 변수를 대입할 수도 있다.

이것 외에도...

module 객체 말고 exports 객체로 쓰기

모듈이 될 파일

exports.변수 = '값'ㅣ

도 가능하다.
왜냐하면,
module.exports=== exports 이기때문!

단, 서로의 참조 관계가 깨질수도 있어서
(exports는 객체만 받음...)
한 모듈에 두개를 동시에 사용하진 말자.

또, 노드에서 this는
이 module.exports를 가리킨다.
(함수 선언문 내부에서는 global 객체를 가리킴.)

require?

require은 함수고,
객체이므로,

객체로서 속성을 몇개 갖고 있다.
우리가 알아볼 것은...

• require.cache
• require.main

알아둘 것은...

• require과 exports는 순서를 지킬 필요는 없다.
• require.cache는 파일 이름이 속성, 속성값으로는 파일이 객체로서 들어있다.
  한번 require된 파일은 모두 cache에서 저장 중!
  자식 관계, 로딩 여부를 확인할 수 있으니 의존관계 확인에 중요하겠지?
  다시 require 하고 싶다면 cache를 삭제하는것도 방법!(위험하긴 함.)
• require.main은 노드 실행 시 첫 모듈.
  현재 파일이 첫 모듈인지 알고 싶다면,
  require.main === module을 해보자.
  첫 모듈의 이름을 알고 싶다면
  require.main.filename을 하면 되겠지?

서로 require한다면...

• 순환참조가 일어난다.
  순환 참조 되는 대상을 빈객체로 만들고, 에러발생 없이 변경만 되므로
  예기치 못한 동작이 발생할 수 있으니 참고.

ECMAScript

공식 자바스크립트 모듈 형식.
브라우저에도 사용 가능하다는 장점.

• export시 그냥 변수 앞에 export를 덧붙인다.
  export const odd = '...';
export default checkOddOrEven;
  default는 그냥 문법이니 이렇게 쓸것.
• import 시 변수명, from, 경로 순으로 적는다.
  import {odd} from './경로';
• 파일도 js가 아니라 mjs로 확장자를 모두 변경해야한다.
  js 그대로 쓰고 싶다면 package.json에 type :"module 속성을 넣자.
• 또한 import시 파일 경로에서 js, mjs 확장자 생략 불가.

두 모듈은 잘 호환되지 않으니
한 가지 형식만 쓰자!

다이내믹 임포트(동적 불러오기, dynamic import)

조건부로 모듈을 불러오는 경우...
if(a) { require('./..') 시
조건에 따라 실행 되는걸 동적 불러오기라고 한다.

• CommonJS : 가능
• ES 모듈 : 불가능.
  대신, import라는 함수 사용.

if(a) {
const m1 = await import('./func.mjs');

import 함수는 Promise를 반환하므로 await나 then을 붙여야한다.
async를 붙일 필요는 없는게, 최상위 스코프에서는 가능.(ES모듈 한정.)

filename, dirname

파일 사이에 모듈 관계를 맺기 위해서는
현재 파일 경로, 파일 명을 잘 알아야한다.

그를 위한 편의 기능.

• __filename 파일 이름까지 포함한 경로
• __dirname 파일이 들어있는 폴더의 경로.

OS에 따라 경로가 다르기때문에...
이를 해결해주는 path 모듈을 보통 같이 쓴다.

그러나, ES 모듈에서는 이 둘이 사용불가.
대신 import.meta.url 로 호출 가능.

노드 내장 객체 알아보기

브라우저의 window 객체처럼 설치하지 않아도 바로 사용 가능.

global

window와 같은 전역 객체.
모든 파일에서 접근 가능.

애초에 require도
global.require임.
(window.open에서 open만으로 되는 것과 같은 원리.)

단, 노드에는 window, document 객체가 사용 불가하여
이를 모두 아우르는 globalThis를 쓰기도 함.

global은 어떤 파일에서 값을 대입했는지 찾기 힘드니까
사실 global로 주고받기 보다

모듈 형식으로 만든 후,
명시적으로 값을 불러와 사용하는 것을 추천.

global.console

• console.table(배열)
  객체 리터럴을 테이블 형식으로 표현.
  (비주얼라이즈 처럼 그려줘용.)
• console.dir(객체, 옵션)
  표시할 객체를 넣고, 옵션을 넣으면
  color를 true로 하면 색깔을, depth는 객체 안 단계
  깊이 설정도 가능.
• console.trace(레이블)
  에러 위치가 안 나온다면 추천.

디버깅 용으로 알차게 쓰자.

global.timer

기본은 콜백 기반이지만
프로미스 방식을 쓸수도 있다.

단, 프로미스 방식을 쓴다면
노드 내장 객체가 아니라
노드 내장 모듈이라 import 해야한당.

import { setTimeout } from 'timers/promises'

await setTimeout(3000);

for await (const startTime of setInerval....

프로미스 기반이라 await 바로 사용하라고 ES 모듈로 예시를 듦.
setInterval은 for await of 문법으로 쓸 수 있다.

노드 내장 모듈 사용하기

파일 시스템 접근하기