목록분류 전체보기 (63)
강신규

Promise란?비동기 처리에 사용되는 자바스크립트 객체, 비동기 작업이 맞이할 성공 혹은 실패를 나타냄 프로미스는 하나의 상자라고 볼 수 있음. 프로미스라는 상자는 비동기 작업이 시작될 때 만들어짐. 처음엔 상자가 텅 비어있다가 언젠가 결과물로 채워지게 됨. (비동기 작업이 완료될 때) 비동기 작업은 완료되기까지 시간이 좀 걸린다는 특징. 비동기 작업이 진행 중일 때는 프로미스 상자가 텅 비어있다. 그러다가 비동기 작업이 끝나면, 그 결과물로 프로미스 상자가 채워지게 됨. 이처럼 프로미스는 비동기 작업의 상태를 나타냄 진행 중인 비동기 작업은 언젠가 끝나게 됨. 작업이 성공할 수도 있고, 실패할 수도 있음. 예를 들어 서버로부터 데이터를 받아오는 비동기 작업이라고 가정했을 때, 데이터를 성공적으로..
콜백함수(Callback Function) 란?콜백함수(Callback Function)는 함수의 인자로 전달되어, 해당 함수 내부에서 호출되는 함수를 말합니다. 콜백 함수는 다른 함수의 실행이 끝난 후 실행되도록 설계되어, 프로그램의 흐름을 유연하게 제어할 수 있습니다.콜백 함수의 기본 사용법아래는 콜백 함수의 간단한 예제입니다:function main(x) { x();}function sayHi() { console.log("Hello");}main(sayHi);이처럼 main 함수는 sayHi라는 함수를 파라미터로 전달받아 내부에서 실행합니다. 이 과정에서 sayHi 함수는 콜백 함수로 동작합니다. 다양한 콜백 함수 활용콜백 함수는 특정 기능을 다른 함수에서 재사용하거나, 원하는 시점에 실행할 ..
자바스크립트(ES6)에서 함수를 정의하는 방법은 크게 두가지로 나뉩니다.일반함수와 화살표 함수 function main() { console.log('hello'); } const main = () => { console.log('hello'); }; 1. 가변인자(arguments) function main() { console.log(arguments) // arg[0] -> 1 , arg[1] -> 2, arg[2] -> 3 } main(1,2,3)main()함수에 매개변수를 따로 정의해 주지 않아도 함수 내에서 arguments라는 변수를 전달 받습니다.즉, argumant 변수는 main()함수가 전달받은 인자를 담고있는 배열 형태의 객체 const main = (..
JavaScript에서 this 키워드는 많은 개발자들이 헷갈려하는 개념 중 하나입니다. 이 글에서는 this의 의미와 동작 방식, 그리고 실제 사용 예를 통해 이해를 돕고자 합니다. 1. this의 기본 개념this는 한마디로 함수를 호출한 객체를 가리킵니다. 이 간단한 정의가 처음에는 이해하기 어려울 수 있지만, 예제를 통해 살펴보면 이해가 될것입니다! 2. 전역 스코프에서의 thisconsole.log(this) // window 객체가 출력전역 스코프에서 this는 기본적으로 window 객체를 가리킵니다. 3. 객체 메서드에서의 thisconst object = { name : 'kangNew', main : function () { console.log(this.name); // ka..
JavaScript에서는 변수를 선언할 때 var, let, const를 사용할 수 있습니다. 그러나 var는 여러 문제점을 가지고 있어 사용을 지양하고, 대신 let과 const를 사용하는 것이 권장됩니다. 그 이유를 아래와 같이 정리했습니다. 1. var와 let의 차이점var와 let의 주요 차이점은 스코프(Scope), 중복 선언 가능 여부(Variable Redeclaration), 그리고 호이스팅(Hoisting)입니다. (1) 스코프(Scope)스코프란 코드가 변수에 접근할 수 있는 범위를 뜻합니다. JavaScript에서 스코프는 크게 세 가지로 나뉩니다:함수 스코프: var는 함수 스코프를 가집니다.블록 스코프: let과 const는 블록 스코프를 가집니다.전역 스코프: 전역 범위에서 선..
리렌더링이란 무엇인가?리렌더링은 React 컴포넌트가 자신의 UI를 다시 그리는 과정을 말합니다. 이는 컴포넌트의 상태나 속성이 변경되었을 때 발생하며, React는 이전 렌더링 결과와 새로운 결과를 비교하여 실제 DOM에 필요한 변경사항만을 적용합니다. 리렌더링이 발생하는 경우1. 상태(state)변경: 컴포넌트의 상태가 변경이 되었을 때2.속성(props) 변경: 부모 컴포넌트로부터 전달받는 props가 변경 되었을때3.부모 컴포넌트의 리랜더링: 부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 기본적으로 리렌더링 상태(state)변경의 최적화컴포넌트를 실행을 하게되면 useState에 값을 Fiber Node에 저장을 하게 됩니다. 만약에 setState를 통해 값이 변경이 된다면 저장했었던 Fibe..

최종코드 : https://github.com/singyuKang/javascript-convenience-store-7-singyuKang GitHub - singyuKang/javascript-convenience-store-7-singyuKangContribute to singyuKang/javascript-convenience-store-7-singyuKang development by creating an account on GitHub.github.com 목표설정[설계] README.md 작성 [개발] 메서드의 길이가 10라인 넘어가지 않도록. 한 메서드는 하나의 기능을 수행하도록 개발 [테스트] TDD 및 Unit Test 확인(전체적인 구현을 먼저 진행하다보니 테스트 코드 작성할 시간 부족..

최종코드:https://github.com/singyuKang/javascript-lotto-7/tree/singyuKang GitHub - singyuKang/javascript-lotto-7Contribute to singyuKang/javascript-lotto-7 development by creating an account on GitHub.github.com 목표설정[설계] README.md 작성 [개발] 메서드의 길이가 15라인 넘어가지 않도록. 한 메서드는 하나의 기능을 수행하도록 개발 [테스트] TDD 및 Unit Test 확인 README.md를 통해 전체적인 흐름을 설계하였습니다. # javascript-lotto-precourse## ✏️ 과제 진행 요구 사항 - 구현할 기능 목록..