전체 글

자바스크립트는 싱글 스레드로 동작하는 언어로 한번 할 때 하나의 작업만 처리되는 언어입니다async, await, promise 등 정리하기 전에 동기와 비동기에 대한 개념을 어느 정도 정리하고자 작성하였습니다1. 동기와 비동기 이해하기-동기(Synchronous)동기는 한 작업이 끝나야 다음 작업으로 실행되는 방식으로 코드가 위에서 아래로 순서대로 흐른다.작업이 끝날 때까지 다음 코드가 실행불가 하며 네트워크통신, 파일처리 같은 지연되는 작업에는 취약한 방식이다(중간에 오래 걸리는 작업이 있으면 그 뒤로는 멈춰짐)console.log("start");for (let i = 1; i 위에 예제코드를 보면 처음 start가 출력되고 for문을 50까지 다 돌아야 end가 출력된다 이런 흐름을 동기식이라고..

자바스크립트에서는 못 보던 enum이라는 사용자 정의에 자료형이 있습니다한국어로는 열거형(enumeration)이라고 합니다 enum은 여러 개의상수(변경되지 않는 일정한 값)를 관련된 걸로 그룹 하여 관리합니다1. 숫자형 enum숫자형 enum은 별도의 초기값이 지정되지 않으면 자동으로 0부터 시작해 1씩 증가하며 enum안에 항목들은 숫자값과 이름이 양방향으로 매핑되어 숫자, 문자열 모두 접근할 수 있다 enum Status { Ready, // 0 Working, // 1 Done // 2}console.log(Status.Ready); // 0 //문자로 불러옴console.log(Status[1]); // "Working"//배열처럼 인덱스로 불러옴consol..

최근 nestjs를 공부하기 시작했다node기반 타입스크립트를(자바스크립트도 가능하긴 함) 사용하는 백엔드로 쉽게 말해 express보다 확장된 백엔드 프레임워크다express보다 확장됬기때문에 대규모(기업용)에 적합하며 많이 사용하며 자바의 스프링과 비슷하게 생겼다.(스프링한테 구조적으로 영향을 많이 받았다고 이야기가 있음)1.NestJS기본적인 구조- ControllerController는 사용자(client)의 요청과 서버의 응답이 오가는 통로이다.사용자가 요청을 보내면 가장 먼저 도착하는 곳이며, GET, POST, PUT, DELETE 같은 요청 방식을 구분해 각각의 요청을 알맞은 기능으로 연결한다. 예를 들어 POST /login 요청은 로그인 기능으로, GET /search 요청은 검색 기능..

1. interface란?(기본 사용법)인터페이스는 객체(참고로 자바스크립트는 객체기반언어)가 가져야 될 형태와 타입을 정의해 두는 것으로속성에 대해 어떻게 할 건지에 대한 세밀한 설명서 같은 느낌이다interface Player{ name:string; age:number; score():void; //void는 반환값 없음을 뜻함}let player:Player={ name:"kim", age:30, score(){ console.log("점수") }}player.age = 40 //player객체안에 age:30 키값이 age:40으로 변경console.log(player);console.log(player.age)player.score();inte..

1.forEach 사용법forEach의 경우 함수를 받아 사용하며 반환값은 없다const fruit = [ "사과", "바나나", "오렌지", "포도", "키위", "망고", "복숭아", "수박", "딸기", "체리",];fruit.forEach((ele, index) => { console.log(ele, index);});forEach내부에 arrow function 넣고 함수의 매개변수를 받아 출력하게 됨 ele 매개변수를 통해 forEach가 배열에 있는 거를 받아 console.log로 출력하게 된다두 번째 매개변수인 index는 각 배열의 인덱스이며 출력하면 아래와 같이 나오게 된다//출력결과사과 0바나나 1오렌지 2포도 3키위 4망고 5복숭아 6수박 7딸기 8체리 9그리고..

multer는 파일 업로드에 사용되는 node.js 미들웨어로 멀티파트(multipart/form-data) 형식으로 이루어져 있다 멀티파트는 데이터 요청 시 쓰이는 Content-Type의 한 종류로 multer에서 사용된다 쉽게 말해 이미지,영상,pdf 등 파일형식들을 보낼 때 multer를 사용한다고 보면 된다!1.설치 방법과 importnpm i multer const multer = require("multer");const upload = multer({ dest: "uploads/" }); express 설치해준다음에 해당 npm을 입력해 주면 설치하고 불러와주면 됩니다2.upload.single()const express = require('express')const app = expres..

자바스크립트에서 변수 선언은 var, let, const이 있다실제 동작 레벨에서 보면 호이스팅 타이밍, 초기화 방식, 스코프 결정 구조에서 차이가 크며프론트엔드 면접 질문으로도 많이 물어보는 것 같아 정리하게 되었다1.호이스팅(Hoisting)자바스크립트에서 코드는 실행되기 전에 변수 선언과 함수 선언이 먼저 메모리에 등록된다. 이 과정을 호이스팅이라고 부른다.즉, 변수 선언이 작성 위치와 상관없이 스코프의 최상단으로 끌어올려진 것처럼 동작한다.var → 선언과 동시에 초기값(undefined)까지 호이스팅let, const → 선언만 호이스팅, 초기화는 실행 시점에서 이루어짐console.log(a); // undefinedvar a = 10;console.log(b); // ReferenceErro..

리액트를 공부하다 보면 seo최적화 문제를 한 번쯤 듣게 되거나 경험하게 됩니다(저도 그랬고요)이때 next.js를 사용하면 react hook이라던지 기능들을 사용하면서 해결할 수 있다고 합니다오늘은 next.js에 대해 포스팅하겠습니다 1. next.js란 무엇인가?next.js 공식 홈페이지에 들어가면 이렇게 적혀있습니다 "웹을 위한 리액트 프레임워크로 세계적인 여러 대기업들이 사용하며 next.js는 리액트 컴포넌트의 강력함을 바탕으로 고품질 웹 애플리케이션을 만들 수 있다고 합니다" next.js는 2016년 10월에 처음 출시된 풀스택 프레임워크입니다말 그대로 프론트엔드와 백엔드를 다루는 프레임워크로 프론트엔드 부분에서는 react를 사용하게 됩니다next.js는 기본적으로 서버 사이드 렌더링..