비동기 프로그래밍에 대해 공부하고 내용을 정리한다. 먼저 동기(Synchronous)란 작업이 순차적으로 진행되는 것을 말한다.특정한 작업이 진행중이면 그 작업이 끝날 때까지 다른 작업이 기다려야 한다. 실행 흐름이 직관적이고 간단하지만 작업이 끝날 때까지 기다리는 동안 시간이 소요되어 전체 프로세스의 성능이 저하된다.또한 한 작업의 실행이 지연되면 다른 작업들도 줄줄이 밀리게 된다. 비동기(Asynchronous)란 작업이 독립적으로 실행되는 것을 말한다.비동기 방식은 작업의 종료를 기다리지 않고 다음 작업을 진행한다.자바스크립트 기준으로 여러개의 비동기 콜백들이 있을 경우 비동기 콜백들 끼리는 동기적으로 실행된다.네트워크 통신에 많이 사용된다. 실행흐름이 복잡하지만 전체 프로세스의 성능이 향상된다.이..

자바스크립트의 배열에도 다른 언어들처럼 많은 메소드들이 있다.forEach, map, filter, find, some, every, reduce, sort, reverse에 대해 복습하고 정리한다. 먼저 forEach 함수는 콜백함수를 인자로 사용하고 배열의 각 요소들을 콜백의 파라미터로 전달해 콜백함수를 수행한다.forEach의 콜백함수의 첫번째 파라미터는 배열의 요소를 가져오고 두번째 파라미터는 배열의 인덱스를 가져온다.const arr = [1, 2, 3, 4, 5];arr.forEach((item, index) => { console.log(`Index: ${index}, Value: ${item}`);});// 실행결과// Index: 0, Value: 1// Index: 1, Valu..

구조분해(Destructuring)는 es6에서 새로 등장한 문법이다.객체, 배열을 분해해서 할당할 수 있게 해준다. 먼저 배열 구조분해를 살펴보면 다른 언어나 기존 문법에서는 배열의 인덱스를 통해 각각의 변수에 할당한다.es6 이후의 자바스크립트에서는 다음과 같이 구조분해를 통해 변수에 값을 할당할 수 있다.const arr = ['a', 'b', 'c', 'd'];const [first, second, third, fourth] = arr;console.log(first, second, third, fourth); // 결과 : a b c d 또한 기본 값을 지정하거나 rest parameter도 활용 가능하다 const arr = ['a', 'b', 'c', 'd'];const [one, two,..

Spread는 객체 및 배열, 문자열, map, set 등 이터러블한 대상의 요소들을 각각의 개별값으로 펼친다.Spread를 사용할 때 앞에 ...을 붙인다.Spread 구문에 대해 배열과 객체를 통해 확인해보려한다.rest parameter와 표현이 동일해 많이 헷갈려서 확실히 복습하고자 한다.const arr = [1, 2, 3, 4, 5]console.log(arr);console.log(...arr); 위와 같이 코드를 작성하고 실행시키면 다음과 같이 결과가 나온다. arr을 그대로 출력하면 배열 객체로 콘솔에 나오지만 Spread 구문으로 사용한 arr은 각각 개별값으로 나온다. 또 Spread 구문을 사용하면 배열을 객체로 만들 수도 있다.const arr = ['a', 'b', 'c']con..

최근 react나 next.js 같은 웹 개발 프레임워크들을 공부하면서 근본적으로 큰 한계에 부딪쳤다. react는 typescript 기반으로 배우는 책을 통해 공부했었고next.js도 react를 공부했었던 기억을 바탕으로 공부해 나가고 있었다. springboot를 공부하면서 익혔던 웹 개발의 개념이나 논문을 작성하며 http method와 rest api에 대해 공부하고rest api를 구현해본 경험으로 간단한 웹 프로젝트는 어떻게든 진행을 해왔다. 그러나 점점 복잡한 프로젝트로 진행해나갈 때react, next.js와 같은 js 기반의 웹 개발 프레임워크들은 springboot 프로젝트를 진행했을 때 보다 훨씬코드 작성요령이나 구조가 잘 이해되지 않았다. react나 next.js 자체의 개념이..