자바스크립트는 동적 언어로서 다른 언어와 달리 독특하게 동작하는 경우가 종종 있습니다. 실행 컨텍스트는 자바스크립트가 이런저런 특이하게 동작하는 개념인 "실행 컨텍스트" 에 대해 깁게 학습한 내용에 대해 공유하고자 합니다. Execution Context ( 실행 컨텍스트 )실행 컨텍스트는, 코드를 실행하는데 제공할 환경 정보들을 모아놓은 객체입니다. 이 객체에는 식별자들에 대한 정보, 외부 환경 정보, this와 같은 정보들이 저장됩니다. VariableEnvironment : 해당 컨텍스트가 최초 실행 될 때의 식별자들의 정보(environmentRecord), 외부 환경 정보 (outerEnvironmentReference)LexicalEnvironment : 최초에 VariableEnvrionme..

개요웹 프론트엔드 개발자 설탕시럽입니다. 이번에는 URL Encoding에 대해 알아보려고 합니다. TLDRReact를 통해 개발하다 보면, 전역 상태를 통해 데이터를 전달하기도, Component의 Props를 통하는 방법 등등 여러 방법으로 데이터를 전달하지만, URL의 params를 통해 데이터를 전달하곤 합니다. 이번 프로젝트 개발에서도 특정 데이터에 대한 "메모"와 "메모 수정 페이지"로 이동하기 위해 메모 데이터를 URL params를 통해 넘기고자 시도했습니다.api를 통해 받아온 responseData에서 바로 URL로 데이터를 전달하기 위해 아래와 같은 코드를 작성했습니다.navigate(`/place/${id}/edit?memo=${responseData.memo)}`); 결과는,, 원..

JavaScript 에서 변수 선언할때 var만 쓰면 되지.. 왜 let과 const가 있는 걸까? var name = "Hello"; let name = "Hello"; const name = "Hello; 똑같은 변수 선언 같아 보이지만 다른 3가지 변수 선언 방법에 대해 정리해 놓으려고 한다. Var let과 const는 모두 var이 생긴 이후, ES6에 추가된 변수 선언 방식이다. 즉, var 방식의 단점을 보완하기위해 추가된 방법인 것이다. var의 단점 1. hoisting : 인터프리터가 변수와 함수가 선언 되기 전에 메모리 공간에 미리 할당 하는 것을 의미한다. var은 이 hoisting 방식이 적용되어 있다. console.log(name); var name = "Hello?"; 위 ..

문제의 발생.. github Links NomadCoders의 side-projects 모임에서(매주 간단한 side-projects과제를 받고 코딩하는 모임) Collor Palette를 제작할 때였다. github-pages를 이용해 보기 위해 정적인 웹페이지를 만들기로 하고 COLOR.js에 있는 변수명을 Import 하려고 하자 문제가 발생했다. 문제1 Uncaught SyntaxError: Cannot use import statement outside a module script의 type을 module로 설정 해야지만 import를 사용할 수 있다는 Error였다. Module? 기본적으로 JavaScript 파일을 담고있는 파일이지만, 일반 JavaScript 파일과 다른 차이점을 가지고 ..

특정 다수의 input의 값을 className을 통해서 불러 오면서 그에 맞는 key값을 html에서 불러 올때 사용가능한 코드 들이다. 1. element.parentElement : 해당 요소의 부모 요소를 불러 온다. value.parentElement; //value의 부모 요소를 불러온다 2. element.previousElementSibling : 해당 요소의 이전 요소를 불러 온다. value.previousElementSibling; //value의 이전 요소를 불러온다 3. element.nextSibling : 해당 요소의 다음 요소를 불러 온다. element.nextSibling //element의 다음 요소를 가져온다 # previousElementSibling과 nextSib..

내가 아는 방식에는 parentNode를 통해서 appendChild를 이용하는 방법 뿐이었다. 이번에 프로젝트를 하면서 해당 요소의 다음 또는 parentNode의 중간에 삽입을 해야 하는 상황에서 html을 고치면 javascript까지 고쳐야 할것 같아서 위의 상황에 바로 맞출수 있는 방법을 알아 보게 되었다. 0. !! !의 경우 false를 true로 true를 false로 바꾸는 입력값을 "boolean"형으로 변환하게 된다. 하지만 !!를 사용하게 되면, 다른 타입의 데이터를 형변환 해준다. ex) !!("asdf") //true !!("") // false !!111 //true !!0 //false !!NaN //false !!true //true 1. parentNode.insertBe..