[심화] 프로그래스 바 구현하는 방법

프로그래스 바 구현하기function updateProgressBar(progress) { const barLength = 20; const filledLength = Math.round((progress / 100) * barLength); const emptyLength = barLength - filledLength; const filledBar = "\x1b[103m \x1b[0m".repeat(filledLength); const emptyBar = "\x1b[100m \x1b[0m".repeat(emptyLength); process.stdout.write("\x1b[1A\x1b[2K"); console.log(` 조금만 기다려주세요.${progress}%`);}function p..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2024. 8. 26.
• textsms

[심화] Object / Map 의 차이점은 뭘까?

Object / MapJavascript Type⸰ 원시 타입 : boolean,null,undifiend,number,string,symbol⸰ 객체 타입 : 함수,배열,정규표현식등 원시 타입을 제외한 나머지 Object⸰ Key :string,symbol⸰ Key 순서 보장 X⸰ Value 는 Key 를 통해서만 접근 가능 ⸰ for-in 문으로 반복문 수행 가능 (for-of 문 불가)⸰ Symbol.iterator 구현 Xconst person = { name: "yeHyun", gender: "female",};for (const prop in person) { console.log(prop + " : " + person[prop]);}/*name : yeHyungender : female..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2024. 8. 26.
• textsms

[심화] 비동기 함수의 반복문은 어떻게 사용할까?

비동기 함수의 반복문forEach( )⸰ 동기적으로 동작, 비동기 함수를 기다리지 않음⸰ try/catch 가능⸰ 간단한 동기 반복 작업에 사용const func = async () => { await Promise.all(data.map(async (i) => { await insertDatabase(i); }));};비동기 작업의 완료를 보장하지 않으므로, Promise.all을 사용하여 병렬 처리 for ⸰ 동기적으로 동작, 비동기 함수를 기다리지 않음⸰ 조건식, 초기화식, 후위식 설정 가능하여 유연하게 반복 제어const func = async () => { for (let i = 0; i 비동기 작업을 순차적으로 처리 for ... of⸰ 동기적으로 동작, 비동기 함수를 기다리지 않음..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2024. 8. 5.
• textsms

[심화] 비동기 함수 Promise, async/await 파헤치기

PromisePromise⸰ 여러 개의 비동기 작업을 순차적으로 수행할 때 콜백 함수가 중첩되어 코드의 깊이가 깊어지는 콜백 지옥을 개선⸰ 콜백 함수를 대체하고, 비동기 작업의 흐름 쉽게 제어 3가지 상태⸰Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태new Promise(function(resolve, reject) { // ...});위 메서드를 호출한 상태 ⸰Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값 반환해준 상태new Promise(function(resolve, reject) { resolve();});resolve( )가 호출된 상태로 then( )을 이용하여 처리 결과 값을 받을 수 있음 ⸰Rejected(실패): 비동기 처리가 실패하거나 오..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2024. 7. 29.
• textsms

[심화] 이벤트를 발생시키는 EventEmitter

EventEmitter EventEmitter⸰ event 를 발생시키는 모든 객체는 EventEmitter 클래스의 객체⸰ 하나의 EventEmitter 객체가 발생시키는 이벤트는, 해당 객체 내에서만 유효 > 하나의 EventEmitter 객체에 설정된 콜백 함수가 다른 EventEmitter 객체의 이벤트에 반응하지 않음  ⸰on( )  - 이벤트가 발생했을 때, 실행할 콜백 함수를 등록하는 함수  - 이벤트 핸들러를 설정하는 함수  - addLinster 함수의 역할과 인자가 동일const EventEmitter = require('events');const myEmitter = new EventEmitter();myEmitter.on('test', () => { console.log('Succ..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2024. 7. 25.
• textsms

[심화] 불변성 / 참조 투명성에 대해 알아보자

불변성불변성⸰ 한 번 생성 후 변하지 않는 것⸰ 예상 가능하고, 신뢰할 수 있는 코드를 지향하기 위하여 사용해야 함 Immutable type⸰ 원시 타입(Boolean,String,Number,Null,Undefined,Symbol) ⸰ 메모리 영역 안에서 불변하며, 새로운 값이 재할당let name = 'foo';name = 'bar';name 은 새로운 값이 재할당 됨 Mutable type⸰ 객체 타입(Object,Array,Map등)⸰ 변할 수 있는 값이며, 직접적으로 변경 가능let x = ['foo'];x.push('bar');console.log(x); // ['foo', 'bar']x.push('bar') 라는 코드를 보지 못한다면, x = ['foo'] 라고 생각하여 잘못 코드를 작성할..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2024. 7. 24.
• textsms

[심화] JSON.stringify / JSON.parse에 대해 알아보자

JSON.stringify( ) / JSON.parse( )JSON.stringify( )⸰ JavaScript 객체를 JSON 형식의 문자열로 변환⸰ JavaScript 객체를 서버로 전송하거나, 로컬 저장소에 저장하기 위해 필요한 작업 > 데이터를 일관된 형식으로 전송 가능 형식JSON.stringify(value, replacer, space)⸰value(필수) : JSON 문자열로 변환할 값, 배열 / 객체 / 숫자 / 문자 등 가능⸰replacer(선택) : null이거나 없으면, 객체의 모든 속성이 JSON 문자열 결과에 포함, 함수 / 배열 가능⸰space(선택) : 출력에 공백을 삽입, string / number 가능 replacer가 함수인 경우 ⸰ 문자열로 바뀌는 프로세스의 작동을 변..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2024. 7. 17.
• textsms

[심화] 전역변수도 매개변수로 하는 이유는 무엇일까?

전역변수도 매개변수로 하는 이유전역 변수를 직접 사용⸰ 장점  -간결함: 코드가 더 간단하고, 함수 호출 시 매개변수를 추가로 전달할 필요가 없음  -직관성: 빠르게 변수를 참조⸰ 단점  -테스트와 디버깅의 어려움: 함수가 외부 상태에 의존하게 되어 유닛 테스트가 어렵고, 코드의 이해도가 떨어짐  -부작용의 위험: 전역 변수를 수정하는 함수는 다른 부분에서도 영향을 미칠 수 있어, 부작용이 발생 매개변수로 전달⸰ 장점  -테스트와 디버깅의 용이성: 외부 상태에 의존하지 않으므로 테스트가 용이하고, 함수의 의도를 명확하게 파악  -부작용의 방지: 함수가 직접 수정하지 않고, 수정된 결과를 반환하기 때문에 함수의 부작용을 줄일 수 있음  -재사용성: 함수가 다양한 상태를 입력으로 받아 동작⸰ 단점  -코드의..

• format_list_bulleted 💠프로그래밍 언어/JavaScript
• · 2024. 7. 15.
• textsms