var, let, const 자바스크립트를 한 번이라도 사용해보았더라면 변수 선언에서 var, let, const를 본 적이 있을 것이다. 셋의 차이를 조금 명확히 기록해 남겨두려고 한다. 자바스크립트를 ES6 기준으로 ES6 이전에는 var를 많이 사용하였고 let, const ES6 이후로 사용되어지는 변수 선언식이다. 일반적으로는 var는 이제 쓰지말고 let, const를 쓰자!로 시작하여 let은 변할 수 있는 수, const는 변하지 않는 상수로 사용하자! 라고 들어보았을 것이다. 뭐.. 나도 이렇게 알고는 있지만 육안으로 확인해보고 싶었다. function test() { var a = 10; if (true) { var a = 20; console.log(a); } con.. 2024. 12. 5. 콜백함수 및 비동기, 동기 처리 시간이 있을 때마다 모던 자바스크립트를 공부하고 더 나아가 타입스크립트를 진행하여 이를 사용하고 있는 nest.js 프레임워크까지 직접 경험해보려고 한다. 실무에서 이미 자바스크립트를 사용하고는 있는데 정확히 자바스크립트가 어떻게 구동되고 있는지 학습이 필요해보였다. 콜백함수콜백함수는 다른 함수의 인자로 전달되어 그 함수 내부에서 호출되는 함수이다. 솔직히 말하면 이해를 못했다. 비동기, 동기 처리에 대한 부분을 어느 정도 이해해야 전달이 쉬운데 언어의 시작을 동기 처리로 대부분 진행되는 것을 하다보니 아무리 해도 이해가 안갔었다. 그래서 무작정 코드로 부딪혔다. function taskA(callback) { setTimeout(() => { console.log('Task A com.. 2024. 7. 15. 객체의 value 값을 다른 객체의 key 값으로 호출 상황은 다음과 같다. 프론트엔드 측에서 백엔드로부터 받은 데이터를 엑셀 처리해주는 모듈을 이행해주고 있어 이를 확인하던 중, 모듈의 리턴값에 객체로써 key-value로 전달하고 이를 엑셀 처리해주고 있다. 하지만 i18n을 적용하면서 또 다른 JSON 객체에서 값을 빼와 이를 언어별로 이름을 구분해주어야 하는 상황이 생겼다. 즉, { '한글' : '한글' } 이라고 리턴하여 엑셀로 변환했을 때 무조건 시트에는 한글이 나오던 상황을 영어인 상황에서는 'hangeul' 이라고 보여주어야 되는 상황이다. 어찌보면 하드코딩된 영역을 동적으로 처리해주어야 하는 상황이기에 나는 언어별로 내려주는 값을 JSON을 통해 미리 받아 선언해주고 리턴값에 바인딩해주는 걸 고려했다. JSON을 통해서 key-value 형태.. 2024. 7. 10. 동기 처리와 비동기 처리 처음엔 단순히 비동기 처리는 뭐다! 하고 자바스크립트에선 setTimeout, Promise, async/await이 있다라고 이해하고 넘어가려 했다. 하지만 스프링 부트를 가지고 공부를 했을 당시에 내부에서 비동기 처리를 해본 적이 없으니 명확한 차이를 알고 싶어졌다. 스프링부트에서 처리했던 방식 내가 스프링부트를 사용해 서버 단에서 데이터를 처리했던 방식은 대부분 동기적인 방식이었다. 동기 처리에 대한 개념은 순차적으로 데이터를 처리하는 것이라 생각하면 되는데 순차적으로 처리하기에 처리하던 부분이 완료될 때까지 기다려야되는 상황이 생긴다. 그러면 동기 처리는 별로인가? 그렇다는 것은 아니다. 상황에 따라서 동기 처리가 좋을지 비동기 처리가 좋을지는 경험을 통해서 알아가야 할 것이라고 생각하고 있다. .. 2024. 3. 21. 비동기 처리 자바스크립트를 사용하는 회사로 이직을 하게 되면서 그 전부터 정리가 안되있던 개념 중 한 가지인 비동기 처리에 대한 부분을 정리하려고 한다. 동기 처리부터 알아보자. '비'동기 처리니까 동기 처리에 대한 부분도 있을 것이다. 이것부터 코드로 먼저 알아보자. function sync() { console.log("처리를 시작한다."); let startTime = new Date().getTime(); while (new Date().getTime() 처리를 시작한다 -> 처리를 완료.. 2024. 3. 13. 이전 1 다음