Little Jay

IIFE(Immediate Invoked Function Expression) 말 그대로 해석을 해보면 된다. 즉시 실행함수를 가리킨다. function foo() {}(); 그렇다면 위의 코드는 왜 실행이 안되는 것일까? 자바스크립트 Parser는 function foo() {} 이 부분은 함수의 선언부인 반면에 후자(괄호의 쌍)는 함수를 호출하려는 시도이지만 실제로 어떠한 이름도 지정이 된 것이 없기 때문에 Uncaught SyntaxError: Unexpected token ). 와 같은 에러 상황이 발생할 것이다. 이를 해결하기 위해서는 괄호를 추가하는 두 가지의 방법이 있다. (function foo(){ })() (function foo(){ }()) function으로 시작하는 선언문은 함수..

자바스크립트 관련 단골 질문 중 하나입니다. 자바스크립트에서 모든 객체는 __proto__ 속성을 가지고 있습니다. 단, 어떤 객체가 Object.create(null)을 사용해서 생성이 되었다면, __proto__는 만들어지지 않습니다. 이 __proto__ property는 다른 객체에 대한 참조이며, 이를 객체의 "prototype"이라고 합니다. 만약 객체의 property에 접근하고, 해당 객체에서 property가 발견되지 않았을 때 자바스크립트 엔진(Javascript Engine)은 해당 객체의 __proto__를 살펴보기 시작합니다. 이때 __proto__만 참조하는 것이 아니라, __proto__의 __proto__를 계속해서 찾아보는데, 이 __proto__중 하나에 property가..

설명 elementSeparotor는 attribute를 파싱하는 함수입니다. class는 "."으로, id는 "#"으로, tag이름은 알파벳으로 시작하기 때문에 이에 따라서 return 값을 다르게 반환합니다. getElems는 querySelectorAll을 모방한 것입니다. elementSeparator을 기반으로 받은 toFind와, attr을 받아 이를 바탕으로 element를 찾기 시작합니다. querySelectorAll은 element의 배열을 반환하기 때문에 최종적으로는 elementsArr을 반환합니다. 본격적인 logic은 다음과 같습니다. 시작점을 default arugment로 body 태그에서부터 찾기 시작했는데, 성능을 위해 시작점을 임의로 지정해줄 수 있습니다. bfs 알고리..

질문출처: https://www.frontendinterviewhandbook.com/javascript-questions#explain-how-this-works-in-javascript JavaScript trivia questions in front end interviews | Front End Interview Handbook Answers to Front-end Job Interview Questions - JS Questions. Pull requests for suggestions and corrections are welcome! www.frontendinterviewhandbook.com Javascript "this"에 대하여 사실 자바스크립트에서 "this"라는 키워드를 간단하게 정..

나는 현재 학교의 교양전담교수님의 수업 TA로 일하고 있다. 교수님께서 개인 홈페이지가 필요하다고 하셔서 비록 백엔드 처리는 잘 못하지만 일단 Front는 내가 하고 있는 부분이기 때문에 이 부분을 만들고 또 비용적인 면에서 아직 학생이고 교수님께서 정말 컴퓨터에 무지하기 때문에 Netlify로 간단하게 배포를 하기로 했다. https://github.com/MyuB/Prof_Jung GitHub - MyuB/Prof_Jung Contribute to MyuB/Prof_Jung development by creating an account on GitHub. github.com 대단한 것은 아니고, React로 만들어진 무료 개인 홈페이지 템플릿을 찾고 clone해서 사용했다. MIT License를 사..

Toy Project를 하는 도중 Kakao톡을 연동시키고 싶어서 Kakao API를 연동하던 중 의도하지 않은 에러가 나타났다. 카카오톡 공유 기능을 추가하기 위해서 Kakao톡 공식문서에서 Set Up을 하라는 대로 하고 공유를 위한 환경을 잘 만들어놨다. https://developers.kakao.com/docs/latest/ko/message/js-link Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com React Framework를 통해서 Netlify를 통해 Project를 배포하려면 알다싶이 배포에 근간이 되는 public 폴더 안..

질문 출처: https://www.frontendinterviewhandbook.com/javascript-questions#explain-event-delegation JavaScript trivia questions in front end interviews | Front End Interview Handbook Answers to Front-end Job Interview Questions - JS Questions. Pull requests for suggestions and corrections are welcome! www.frontendinterviewhandbook.com 이벤트 위임 이벤트 위임이라고 하는 것은 부모 요소에 이벤트를 등록해서 하위의 자식 요소들을 제어하는 방식이다. 이벤트..

wordle이라는 게임이 있는데 살짝 행맨 같은 게임이다. 다시 생각해보니 행맨 보다는 단어로 하는 야구게임이 오히려 더 어울리는 것 같다. https://www.nytimes.com/games/wordle/index.html 위의 사이트에서 해볼 수 있다. css를 먹이면 조금 따라할 수 있을 것 같은데 일단 이정도만 구현하는 거로 해봐도 괜찮은 것 같다. 너무나 간단하기 때문에 live를 사용하였고, 배포도 안할 예정이다. 제출

mobX를 공부하면서 decorator를 사용하려고 했지만 decorator을 사용하려고 하면 컴파일 자체가 안되고 계속해서 eslint 에러가 뜨는 모습을 볼 수 있다. 이 이유에 대해서는 babel 6 이상의 버전에서는 decorator를 지원하지 않는 다는 것이다. 이 옵션을 변경을 해주려면 CRA 프로젝트를 eject 해줘야 하지만 eject하는 것에 대한 부담이 크기 때문에 이 부분을 해결하려고 시도했고, 이를 eject하지 않고 사용할 수 있는 방법이 존재한다. eject를 하는 방법에 대해서는 아래의 블로그를 참조하면 될 것 같다. https://blog.woolta.com/categories/1/posts/147 https://github.com/ember-codemods/ember-mod..

저번글에 이어 SCSS의 문법을 살펴보겠습니다. Data Types CSS에 없는 새로운 개념입니다. CSS에서는 자료형의 타입을 고민하지 않아도 되기때문이죠. SCSS의 자료형에는 자바스크립트와 비슷한 문법적 개념들이 많습니다. Data Description Ex Numbers 숫자(단위가 붙어도 상관 없음) 20px, 3rem Strings 문자(따옴표가 안붙어도 상관 없음) "/docs/image.jpg", center, absolute Colors 색상 표현이 가능한 것들 #ffffff, rgba(0, 0, 255, .5), red, orange Booleans 논리(참, 거짓) true, false Nulls 없음(js의 Null) null Lists 공백 혹은 컴마(,)로 구분된 목록 (a, ..