코드노트

디자인 패턴은 면접을 볼때 많이 물어보는 질문중 하나였다. 어떻게 보면 여러 디자인 패턴이 있지만 처음 디자인 패턴이라는 이야기를 들었을때에는 디자인이라는 단어 때문에 UI를 다루는 패턴인가? 라는 생각을 했던것 같다. 비전공자인.. 특히 나는 디자이너로 시작하여 개발자로 이직을 했다보니 더 그렇게 생각했었다. 그래서 첫 면접에서 당당히 나는 아토믹 패턴을 구구절절 이야기했었던 기억이 있다...ㅋ 그렇게 프론트엔드 개발을 공부하면서 디자인 패턴에 대해서 많이 알게 되었고, 현재 회사에서도 여러 패턴들을 적용하며 코드를 보다보니 내가 몰랐던 패턴들도 같이 정리를 해보려고 한다!생성 패턴 (Creational)- 객체의 생성 방식에 중점을 둔다. - 객체 생성 과정에서 복잡성을 줄이고, 코드의 유연성과 재사..

리액트를 들어가기전 자바스크립트로 팀프로젝트를 진행하고 있다. 팀프로젝트를 진행하면서 SPA(단일 페이지 애플리케이션)을 개발하기로 했고, 바닐라로 라우터를 구현하려고 했지만.. 기간이 있는 팀프로젝트에서 라우터 기능하나를 잡고 구현하기에는 시간이 너무 촉박했다.. 그렇게 다른 수강생분의 도움으로 navigo라는 라이브러리를 알게 되었다. 그전 카카오엔터 FE 기술블로그에 올라온 라이브러리 없이 라우터(Router) 만들기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 라이브러리 없이 라우터 만들기라는 글을 보게 되었고, 바닐라 JS로 라우팅 시스템을 개발하기 위해서는 2가지 방법이 있는걸 알게 되었다. - 첫 번째, 해시 라우터 : Fragment 해시를 이용하는 방..

fetch API를 통해서 값을 보내고 받고 하면서 여러개의 요청들을 한번에 실행하려고 했다. 예를 들면 전체선택? 전체해제? foreach를 통해서 요소들을 순회하며 fetch를 사용하니 요소 하나하나 적용되는 이슈가 있었다. ux에 있어서도 좋지 않고 과제 작업을 하면서도 계속 신경이 쓰였다... 그래서 찾은 해결 방법! Promise.all() - 이 메서드는 순회 가능한 객체를 주어진 모든 프로미스가 이행하게 되면 그때 이행한 프로미스를 반환한다. - 여러 프로미스의 결과를 집계할 때 사용 ex) function exPromiseAll() { let arr = [1, 2, 3, 4, 5] arr.forEach(async(i) => { await fetch('url', { method: "PUT" ..

AJAX (Asynchronous JavaScript And XML) 음... 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술? 서버와 통신하기 위해 XML객체를 사용하는 것! 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청 -> 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 * XML (XMLHttpRequest) - 서버와 상호작용을 할 때 사용 - 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다. HTTP요청 메서드는 클라이언트가 서버에 요청의 종류와 목적을 알리는 방법 5가지 요청 메서드 CRUD ( Create(생성), Read(읽기), Update(갱신), Delete(삭제) ) HTTP 요청 메서드 종류 목적 페이로드..

영화검색 사이트를 만들면서 무한스크롤을 구현하는데 Intersection Observer API를 사용했다. 일반적으로는 addEventListener를 사용해서 구현하지만 문제점이 꽤 많았다. - 스크롤을 할때마다 이벤트가 발생하는 문제점 - 스크롤 이벤트가 무거워질수록 위험하다는 점 등등 여러 문제점들이 있기에 다른방법을 찾다가 Intersection Observer API를 알게 되었다! Movie Search strong-rolypoly-f45a54.netlify.app 위 사이트에서 구현해보았는데 사용법도 어렵지 않고 활용도가 많을 것 같다. 이번에 사용하면서 막히던 부분들이 있었기 때문에 Intersection Observer API에 대해서 정리해보려고 한다. See the Pen Untit..

super키워드는 클래스에서 빠질 수 없는 키워드이다. 자바스크립트를 공부하다보면서 느낀건 호출, 참조에 대해서 참 헷갈리게 정리되어있는거 같다.( 나만 이해 못하는거겠지만..) 이 부분만 이해하기 시작하면 어느정도의 동작원리나 코드 명령어의 이해도가 빠르게 높아진다. 객체부터 시작해서 이 사고가 어느정도 진행되는 순간 학습능력이 올라가는거 같다. 클래스를 사용하면서 필요한 super키워드를 빠르게 이해해보자. super - super 키워드는 함수처럼 호출할 수 있다.(constructor 내에서) - this와 같이 식별자처럼 참조할 수 있는 특수한 키워드 * super를 호출하면 수퍼클래스(부모 클래스)의 constructor를 호출 * super를 참조하면 수퍼클래스(부모 클래스)의 메서드를 호출..

function scroll() { const header = document.querySelector("header"); // const maxheight = header.clientHeight; // document.addEventListener("scroll", onScroll, { passive: true }); function onScroll() { const scrollLocation = document.documentElement.scrollTop; const bar = document.querySelector(".scroll_search"); if (maxheight

클래스 - 클래스는 생성자 함수와 유사하게 동작하지만 몇 가지의 차이를 가지고 있다. - 클래스는 class 키워드를 사용하여 정의 // 클래스 선언문 class Person{} // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; - 클래스는 표현식으로 정의할 수 있다. * 무명의 리터럴로 생성할 수 있고 런타임에 생성 가능 * 변수, 자료구조(객체, 배열) 저장 가능 * 함수의 매개변수에 전달 가능 * 함수의 반환값으로 사용 1. 클래스를 new 연산자 없이 호출하면 에러가 발생 - 생성자 함수를 new 연산자 없이 호출하면 일반 함수로 호출 2. 클래스는 상속을 지원하는 extends와 super 키..

실행 컨텍스트 Execution context - 자바스크립트 동작 원리를 담고 있는 개념 실행 컨텍스트를 이해해야하는 이유 - 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인당된 값을 관리하는 방식 - 호이스팅이 발생 - 클로저의 동작 방식 - 테스트 큐와 함께 동작하는 이벤트 핸들러 - 비동기 처리의 동장 방식 실행 컨텍스트 구성 - 전역공간은 자동으로 컨텍스트로 구성 - 함수를 실행 - eval()함수를 실행 - block을 만든다. 소스코드 타입 소스코드 타입 설명 전역 코드 global coad 전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않음 함수 코드 function code 함수 내부에 존재하는 소스코드. 함수 내부에 중첩된 함수, 클래스 등의 ..

생성자 함수를 예로들어보자. 생성자 함수 내부에서 프로퍼티, 메서드를 추가하려면 자신이 생성하는 인스턴스를 참조할 수 있어야한다. * 참조할 수 있지만 함수 이름을 통해서 재귀적으로 참조하는 방식은 바람직하지 않은 방법 - this를 사용 this - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencting variable) - this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티 또는 메서드를 참조 - JS 엔진에 의해서 암묵적으로 생성 - 어느 코드에서나 참조 가능 - 함수 호출시 arguments객체와 this가 암묵적으로 함수 내부에 전달 - 지역 변수처럼 사용할 수 있다. - this가 가리키는 값은? this바인딩, 함수 호출..