Meme's IT

백준에서 js(node.js)로 문제를 풀 때, 가장 먼저 생기는 문제...input을 어떻게 받지...? 백준에서 알려준 예제에 따르면require('fs')라는 코드를 이용해서 파일을 읽어오는 것 같은데, 얘네가 뭔지 한번 알아보고자 한다.# fs 모듈?fs 모듈은 node.js에서 파일의 입출력을 다룰 때 사용하는 모듈이다.node js에서 파일을 다루는 함수들을 모아놓은 페이지에서 더 자세하고, 다양한 함수들을 확인할 수 있다. let fs = require('fs');다음과 같은 방법으로 가져오면 되고, 이때 let이나 const등은 상관없다. 그리고, 공식 페이지에서는 require('node:fs') 이런식으로 가져오는데, 이 차이는 Node.js 14.13.0 버전에서 도입된 네임스페이스 ..

프론트엔드 직무에서는 JS로 코테를 보는 경우가 많아서,알고리즘을 기존에 풀던 파이썬으로 한 번 풀고, JS로 한번 풀려고 한다. 우선 파이썬에서 만약 0이 10001개로 이루어진 배열을 만들려면,arr = [0 for _ in range(10001)]arr = [[0] * 10001]이 두 방법을 사용하면 된다. 그럼 JS에서는 어떤식으로 배열을 만들 수 있을까? 📌 Array: 빈 배열 만들기우선 길이가 10001인 빈 배열을 만들고 싶다면,const arr = new Array(10001); Array 함수 안에 원하는 길이를 적어주면 된다. 이 때, arr는 크기만 있는 빈 배열이므로 출력하면 다음과 같다당연히 이 안에 값을 일일히 지정해 줄 수도 있다const arr = new Array(10..

파이썬에서는 다른 파이썬 파일에 있는 함수를 가져올 때 import ~ from 을 이용했었음 JS에서도 되나 한번 볼까? // test1.js const sayT1 = () => { console.log('페이커는 신이야') } const sayDong = () => { console.log('T1 화이팅') } // test2.js import test1 from './test1.js' → 오류난다 다른 파일에서 쓰려면 export 해주기 // test1.js const sayT1 = () => { console.log('페이커는 신이야') } const sayDong = () => { console.log('T1 화이팅') } export { sayT1, sayDong } 근데 이렇게 해도 오류가 ..

Promise의 chaining → 콜백 함수에 비해서는 간결하긴 한데 그래도 너무 복잡하지 않나...? 좀 더 간단하게 하는 방법이 없을까? async와 await를 사용해보자 # async & await Promise chaining의 가독성 문제를 해결하기 위해 등장 일반적으로 try & catch와 함께 사용한다 🔹 async 함수 async 키워드를 함수 앞에 붙여서 비동기 함수를 선언 항상 Promise를 반환한다. async function process() { return result; } 🔹 await 표현식 await 키워드를 async 함수 내에서 사용 비동기 함수의 완료를 기다렸다가, 완료하면 resolve를 통해 전달된 데이터를 반환한다. function placeOrder(men..

Promise가 뭐더라..? # Promise 다음에 할 행동을 약속한다 resolve( ): Promise 객체가 성공할 때 호출되어 결과 값을 전달 reject( ): Promise 객체가 실패할 때 호출되어 결과 값을 전달 then( ): 로직 이행 성공 시 then으로 넘어감(resolve 호출 시) catch( ): 로직 이행 실패 시 catch로 넘어감(reject 호출 시) 간단한 Promise를 이용하는 코드 const myPromise = new Promise((resolve, reject) => { let num = 3 if (num === 0) { resolve('성공') } else { reject('로직 수행 실패!') } }) myPromise.then((result) => { ..

비동기 처리의 단점 Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리됨 코드의 실행 순서가 불명확함 → 콜백 함수를 사용하자 # 비동기 콜백 비동기적으로 처리되는 작업이 완료되었을 때 실행되는 함수 연쇄적으로 발생하는 비동기 작업을 순차적으로 동작할 수 있게 함 근데 이렇게 하다보면 콜백 지옥(파멸의 피라미드)가 생김 → (콜백 안에, 콜백 안에, 콜백 안에....) 그래서 만든게.. # Promise 비동기 콜백과 같은 역할, Axios 라이브러리 = 작업이 끝나면 실행시켜 줄께 then(callback) 요청한 작업이 성공하면 callback실행 이전 작업의 성공 결과를 인자로 전달 받음 실패에 대한 약속 catch() then()이 하나라도 실패하면 callback 실행 ca..

# 동기(Synchronous) 프로그램의 실행 흐름이 순차적으로 진행 즉, 하나의 작업이 완료된 후에 다음 작업이 실행되는 방식 # 비동기(Asynchronous) 프로그램의 실행 흐름이 순차적이지 않으며, 작업이 완료되기를 기다리지 않고 다음 작업이 실행되는 방식 → 작업 완료 여부를 신경 쓰지 않고, 동시에 다른 작업들을 수행할 수 있음 기다려주지 않는 것일 뿐, 앞에 일을 안하는게 아님! 비동기의 특징 병렬적 수행 당장 처리를 완료할 수 없고 시간이 필요한 작업들은 별도로 요청을 보낸 뒤, 응답이 빨리 오는 작업부터 처리 JavaScript는 Single Thread언어 → 한번에 한개밖에 못 함, 그럼 어떻게 여러개를 한번에 할 수 있나? # JavaScript Runtime JavaScript..

# 웹에서의 이벤트란? 무언가 일어났다는 신호, 사건 버튼을 클릭했을 때 팝업 창이 출력되는 것 마우스 커서에 위치에 따라 드래그하는 것 웹은 이벤트를 통해 특정 동작을 수행 모든 DOM 요소는 이벤트를 만들어 냄 event object DOM에서 이벤트가 발생했을 때 생성되는 객체 종류 매우 많음 → mdn 찾아서 쓰기 더보기 https://developer.mozilla.org/ko/docs/Web/API/Event DOM요소는 event를 받고, event handler를 이용해서 event를 처리한다. # event handler 이벤트가 발생했을 때 실행되는 함수 .addEventListenr() :대표적인 이벤트 핸들러 EventTartget.addEventListener(type, handl..