호지

ReactJS로 토이 프로젝트를 진행 중일 때, 지도 사용을 위해 카카오맵API를 사용했다. 하지만 페이지 새로고침이나, 페이지 재진입 혹은 그냥 페이지 진입을 해도 계속해서 div가 하나만 나와야하는데, div가 2개 생성되서 지도 위에 지도가 생성이 됬다 CDN방식 대신 동적 스크립트도 사용해보고 도대체 어디서 문제가 되는걸까 2일넘게 삽질을 했다.... 결국 찾은 범인은 React.StrictMode 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로, 개발모드일때 사용된다. 컴포넌트를 unmount 시켰다가 다시 한 번 remount 시키게 되면서 div가 2개 생기는 것으로 추정되었고 React.StrictMode를 제거하니 정상적으롤 원하는 지도 화면을 볼 수 있었다! 카카오MapAPI를 ..

1. 클로저란 무엇인가? 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달한 경우, 함수 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상.(이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수) 2. 클로저에서 메모리 관리는 어떻게 이뤄지나요? 클로저가 사용되었다가 필요성이 사라진 시점에 메모리를 소모하지 않도록 null이나 undefined를 할당하여 참조 카운트를 0으로 만든다. 따라서 클로저에서 메모리를 소모하는 것은 클로저의 특성일 뿐, 메모리 누수의 위험이 있다고 할 수 없다. 3. 클로저는 어떻게 활용할 수 있나요? 클로저는 정보은닉 및 부분 적용 함수에 사용될 수 있다.

스터디에서 콜백함수 관련 내용을 발표하였다. 비동기 관련 내용이 나와 추가적으로 비동기처리에 대해 조사하여, 자바스크립트에서 비동기처리에 대해 자세하게 알아볼 수 있었다. 1. 콜백 함수는 무엇인가? 콜백 함수는 함수나 메서드의 인자로 넘겨주면서 제어권도 같이 넘겨준 함수를 뜻한다. 2. 콜백 지옥이란? 콜백함수를 익명함수로 전달하는 과정이 길어지면서 들여쓰기 수준이 깊어지는 현상. 이로 인해 코드의 가독성이 떨어지게 되는데, Promise나 Generator를 사용해 동기적으로 보이게끔 만들어줄 수 있고, async, await와 프로미스 객체를 같이 사용하는 방법이 주로 쓰임. 3. 비동기 vs 동기 비동기는 이전코드가 끝나지 않아도 즉시 코드를 실행하고, 동기는 이전코드가 끝나야 다음 코드를 실행 ..

코어 자바스크립트 3강 this에 대해 스터디했다. this가 가리키는 것이 사용자와 의도와 다르게 동작할 수 있고, 이를 방지하기 위해 꼭 알아되는 내용이었다. 1. this란 무엇인가? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this가 가리키는 값(this바인딩)은 실행 컨텍스가 생성될 때 결정된다. 전역 공간에서는 전역 객체를 가리키며, 브라우저 환경에서는 window, Node.js 환경에서는 global 객체를 가리킨다. * Node.js를 js파일에서 동작해보니 this는 global객체를 출력하지 않고 module.exports를 출력했다. 이는 js파일이나 터미널로 Node.js를 수행할 시, Node.js에서 최상위 범위는 전역스코프가 아..

JS스터디로 코어 자바스크립트를 공부했다. 개인적으로 실행 컨텍스트 내용은 모던자바스크립트 딥다이브 내용이 이해가 더 잘 되서 딥다이브 내용을 많이 참고했다. 1. 실행컨텍스트란? 실행할 코드에 제공할 환경 변수들을 모아놓은 객체로 자바 스크립트 동작 원리에 대한 핵심 개념입니다. 실행컨텍스트에서 실행순서는 실행컨텍스트 스택인 콜스택으로 관리하고, LexicalEnvironment를 통해 식별자와 스코프를 관리합니다. 2. 콜스택이란? 콜스택은 실행순서를 관리하며, 선입후출인 스택의 자료형을 갖고 있습니다. 가장 최상단에 위치한 실행 컨텍스트는 현재 실행 중인 실행 컨텍스트를 의미합니다. 3. LexicalEnvironment란? 실행컨텍스트에서 식별자와 스코프를 관리하는 하며 VariableEnviro..

코어자바스크립트 책으로 스터디를 진행했다. 1강 내용으로 자료를 준비해서 약 1시간 정도의 강의를 했다. 책을 읽었을때보다 발표를 준비하면서 더 내용을 잘 이해할 수 있어서 유익한 시간이었다. 1강 데이터 타입 정리 1. 자바스크립트 데이터 타입은 어떤 것이 있나요? - 자바스크립트에서는 기본형 타입과 참조형 타입의 2가지 데이터 타입이 있습니다. 기본형 데이터 타입은 불변값을 가지고 있으며 null, undefined, number, string,boolean 과 ES6에서 추가된 BigInt와 Symbol이 있습니다. 참조형 데이터 타입은 object, 객체를 의미하며 Date, Map, Set, 정규표현식 등이 있습니다. 기본형 타입은 값을 직접 저장하고, 복사할 때 값이 복사됩니다. 반면 참조형 ..

HTML(Hyper Text Makrup Langauge)는 오류가 있으면 오류를 알려주지 않고 웹페이지가 임의로 결과를 보여줍니다. 따라서 오류를 방지하거나 유효한 태그를 맞게 썼는지 확인하기 위해 사용하면 유용한 페이지가 있습니다. https://validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org 해당페이지에서는 마크업 검사가..