티스토리

Yung_Developer

검색하기

블로그 홈

Yung_Developer

yung-developer.tistory.com/m

곤이씨 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

mkcert - localhost를 https 환경으로 만들기 webpack의 dev server를 이용해 localhost로 개발을 진행하다보면 https로 인해 스트레스를 받는 상황이 생깁니다. (웹 서버가 http를 이용한 접근을 제한하거나 쿠키의 Secure 옵션이 설정되어 있는 경우 등) 이는 localhost가 http로 동작하기 때문입니다. 이러한 문제가 발생했을 때 서버의 설정을 바꾸기 보다는 localhost의 설정을 바꿔 문제를 간단하게 해결할 수 있습니다! 바로 mkcert를 이용하면 localhost를 https로 동작시킬 수 있습니다 👍 GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any nam.. 공감수 8 댓글수 0 2021. 9. 8.
Github Actions를 이용한 CI/CD for 우테코 레벨 4의 첫 미션인 성능 최적화 미션은 AWS S3와 Cloudfront로 배포해야 합니다. 따라서 CI/CD를 적용하지 않으면 코드의 변경사항이 생길 때마다 매번 수동으로 빌드해야 합니다. 그리고 드래그 앤 드랍으로 S3 버킷에 파일을 업데이트 해줘야 합니다. 하지만 Github Actions를 이용해 CI/CD를 적용한다면 이러한 불편함을 단번에 해소할 수 있습니다. 다음과 같은 순서로 Gihub Actions를 적용해보겠습니다. 1. S3와 Cloundfront 생성 및 연동 2. S3 ACL(액세스 제어 목록) 편집 3. 개인 AWS 계정 새 액세스키 발급 4. Github Settings에서 Secrets 추가 5. Github Actions workflow 생성 6. 자동 배포 결과 확인 1.. 공감수 5 댓글수 0 2021. 8. 28.
우아한테크코스 프론트 : Lv.3 댓글 모듈 다라쓰 인사이트 1. 댓글 모듈 iframe 개발기 { event.stopPropagation(); setShowOptionBox(state => !state); }; const onHideOptionBox = () => { if (ref.current) setShowOptionBox(false); }; useEffect(() => { window.addEventListener("click", onHideOptionBox); return () => { window.removeEventListener("click", onHideOptionBox); }; }, []); 다른 영역이 클릭됐는지는 특정 영역만 렌더링 하는 컴포넌트에서 알 방법이 없다. 따라서 window에 클릭 이벤트를 달아주어야 한다. 이 때, 특정 상태값을.. 공감수 0 댓글수 0 2021. 8. 22.
React에서 contentEditable 사용하기 contentEditable은 HTML 요소를 수정 가능하게 만들어주는 속성이다. 예를 들어, div에 contenteditable 속성을 true로 설정해주면 div 요소도 input처럼 입력을 할 수 있게 된다. contentEditable을 사용하는 이유는 웹 에디터를 쉽게 만들기 위함이다. contentEditable을 사용하면 브라우저가 자체적으로 클립보드, 드래그&드롭, 실행 취소, 서식과 같은 기능을 전부 제공해준다. 또한, 특정 내용을 편집 모드로 수정하기 쉽다는 장점이 있다. 편집 모드 변경 시 input이나 textarea로 수정할 필요없이 간단하게 contentEditable=true 속성만 추가해줘도 편집 모드로 변경할 수 있다. 때문에 div를 input으로 바꿨을 때 발생할 수 .. 공감수 8 댓글수 0 2021. 8. 22.
댓글 모듈 iframe 개발기 { if (!type) return; if (type === POST_MESSAGE_TYPE.SCROLL_HEIGHT) { resizeElementHeight({ element: $replyModuleIframe, height: data }); return; } }); // reply-module (content window = iframe에 그려지는 페이지) // 부모 window에 컨텐츠의 높이를 보내는 함수 const postScrollHeightToParentWindow = () => { window.parent.postMessage( { type: POST_MESSAGE_TYPE.SCROLL_HEIGHT, data: document.querySelector("#root")?.scrollHeigh.. 공감수 0 댓글수 0 2021. 8. 22.
[React] 리스트와 Key 리액트에 익숙한 사람이라면 반복되는 컴포넌트 혹은 엘리먼트에는 고유한 키 값이 필요함을 알고 있다. 동시에 키값으로 인덱스 값을 주는 것이 안티패턴이라는 사실도 알고 있다. 그렇다면 왜 키값으로 인덱스를 주는 것이 안티패턴일까? 재조정 (Reconciliation) – React A JavaScript library for building user interfaces ko.reactjs.org 리액트에서 Key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할 때 트리를 매번 새로 그리는 것이 아니라 기존과 비교하여 효율적으로 트리를 변경할 수 있도록 돕는 역할이다. 이제 키 값이 왜 사용되는지는 알겠다. 그러면 왜 키 값으로 index가 아닌 고유한 값을 사용해야하는 것일까? 리액트 공식문서에 있는 co.. 공감수 7 댓글수 0 2021. 6. 22.
React Router의 Hash Router와 Browser Router 1. React Router의 Hash Router와 Browser Router 리액트 라우터에는 자주 사용되는 두 가지의 라우터가 있다. 바로 Hash Router와 Browser Router이다. 이전 2-2, 2-3 미션에는 Hash Router를 사용하였고 2-4 단계 미션에는 Browser Router를 사용하였다. 간단하게 두 라우터의 차이를 짚어보면 다음과 같다. Hash Router 주소에 해쉬(#)가 붙는다. 검색 엔진이 읽지 못한다. 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 새로고침 시 404 에러가 발생한다. Hash Router는 검색 엔진 최적화가 지원되지 않.. 공감수 3 댓글수 1 2021. 6. 10.
우아한테크코스 프론트 : Lv.2-4 지하철 노선도 미션 인사이트 1. React Router의 Hash Router와 Browser Router 리액트 라우터에는 자주 사용되는 두 가지의 라우터가 있다. 바로 Hash Router와 Browser Router이다. 이전 2-2, 2-3 미션에는 Hash Router를 사용하였고 2-4 단계 미션에는 Browser Router를 사용하였다. 간단하게 두 라우터의 차이를 짚어보면 다음과 같다. Hash Router 주소에 해쉬(#)가 붙는다. 검색 엔진이 읽지 못한다. 별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 새로고침 시 404 에러가 발생한다. Hash Router는 검색 엔진 최적화가 지원되지 않.. 공감수 1 댓글수 2 2021. 6. 9.
Redux / React Redux / Redux Thunk 1. Redux / React Redux / Redux Thunk 1-1. Redux Redux는 전역 상태 관리를 위한 라이브러리이다. 기존에는 하나의 상태를 여러 곳에서 사용하기 위해서는 최상단의 부모 컴포넌트에서 자식 컴포넌트에게 Props로 상태를 전달해줘야했다. 만약 자식 컴포넌트가 부모 컴포넌트로부터 깊은 곳에 위치해있다면 중간에 상태를 사용하지 않는 컴포넌트에게도 Props를 전달해야하는 Prop drilling이 발생하게 된다. 리액트가 아무리 바닐라 자바스크립트보다 편하다고 해도 이렇게 수고스러운 작업이 반가울리 없다. 따라서 사람들은 모든 컴포넌트에서 전역으로 상태에 접근하기 위한 도구의 필요성을 느꼈고 여러 전역 상태 관리 라이브러리들이 등장하게 됐다. Redux 기본 개념 - 액션(.. 공감수 1 댓글수 0 2021. 6. 8.
9. 프로토타입 with 크리스 (소요시간: 1시간) 워밍업 - 변수 네이밍 kettanaito/naming-cheatsheet 내 질문 Q1. 화살표 함수는 왜 프로토타입 객체를 가지지 않을까요? A. 화살표 함수는 contstructor를 가지지 않기 때문에 생성자 함수가 아니다. 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다. 따라서 화살표 함수는 프로토타입 객체를 가지지 않는다. Q2. 왜 객체 전용 메서드들은 Object.someMethod(instance) 이런 식으로 써야할까요? instance.someMethod() 이런 식으로 사용할 수 있으면 편할텐데 말이죠 🤔 (ex. Array.forEach([1, 2]) (x) / [1, 2].forEach (o)) A. 어떤 생성자 함수이든 prot.. 공감수 1 댓글수 1 2021. 6. 6.
우아한테크코스 프론트 : Lv.2-3 장바구니 미션 인사이트 1. Redux / React Redux / Redux Thunk 1-1. Redux Redux는 전역 상태 관리를 위한 라이브러리이다. 기존에는 하나의 상태를 여러 곳에서 사용하기 위해서는 최상단의 부모 컴포넌트에서 자식 컴포넌트에게 Props로 상태를 전달해줘야했다. 만약 자식 컴포넌트가 부모 컴포넌트로부터 깊은 곳에 위치해있다면 중간에 상태를 사용하지 않는 컴포넌트에게도 Props를 전달해야하는 Prop drilling이 발생하게 된다. 리액트가 아무리 바닐라 자바스크립트보다 편하다고 해도 이렇게 수고스러운 작업이 반가울리 없다. 따라서 사람들은 모든 컴포넌트에서 전역으로 상태에 접근하기 위한 도구의 필요성을 느꼈고 여러 전역 상태 관리 라이브러리들이 등장하게 됐다. 처음 리덕스를 배우는 입장에서 .. 공감수 1 댓글수 0 2021. 6. 6.
8. 에러 핸들링 Q1. 왜 비동기 예외처리에서 await을 하지 않으면 try/catch문에서 에러 처리가 불가능할까요? function sleep(time) { return new Promise((resolve, reject) => { setTimeout(() => { reject('더 잘래') }) }) } try { sleep(0) // 프로그램 다운 } catch (error) { console.log(error) } function sleep(time) { return new Promise((resolve, reject) => { setTimeout(() => { reject('더 잘래') }) }) } (async () => { try { await sleep(0) } catch (error) { consol.. 공감수 1 댓글수 1 2021. 5. 23.
우아한테크코스 프론트 : Lv.2-2 페이먼츠 미션 인사이트 미션 PR - https://github.com/woowacourse/react-payments/pull/27 1. React.memo React.memo는 고차 컴포넌트(Higher Order Component) 이다. 말그대로 memo의 인자로 컴포넌트를 넘겨 사용할 수 있다. memo를 사용하면 메모이징을 이용하여 기존과 props가 다른 경우에만 리렌더링이 일어나도록 할 수 있다. 보통 성능최적화를 위해 많이 사용된다. 페이먼츠 미션 중 카드정보를 입력 받는 페이지는 카드 번호, 만료일 등 다양한 인풋을 처리하기 위해 그만큼의 상태를 가져야했다. 때문에 하나의 인풋만 변경되어도 페이지의 모든 요소들이 리렌더링 됐다. 당시에는 이를 불필요한 리렌더링이라고 판단하여 memo로 컴포넌트를 래핑하여 리렌.. 공감수 1 댓글수 0 2021. 5. 15.
7. Scope and Closure with 하루 내 질문에 대한 내용 정리 Q1. 스코프와 스코프 체인은 언제 결정되는 것 일까요? 상위 스코프(외부 렉시컬 환경에 대한 참조)는 함수 정의가 평가되는 시점에 함수가 정의된 위치에 의해 결정된다. Q2. 자바스크립트에서 지역 스코프를 가지는 키워드들은 무엇이 있을까요? (ex. function 등) 전역 스코프 function, class if, for, while, try / catch 📌 주의) 객체 리터럴은 지역 스코프를 가지지 않는다. (코드 블록이 아니기 때문) Q3. 내부 함수는 무조건 클로저라고 할 수 있을까요? 자바스크립트의 모든 함수는 상위 스코프를 기억하므로 이론적으로 모든 함수는 클로저이다. 하지만 일반적으로 모든 함수를 클로저라고 하지는 않는다. 클로저는 내부 함수가 .. 공감수 0 댓글수 0 2021. 5. 9.
6. This 총 소요시간 90분 with 체프 내 질문에 대한 내용 정리 Q1. 콜백 함수 호출 시 this는 왜 window 혹은 global을 가리킬까요? 항상 그렇지는 않다. 콜백 함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조한다. const obj = { handleClick() { console.log(this); }, }; obj.handleClick(); // obj setTimeout(() => { obj.handleClick(); }, 1000); // obj setTimeout(obj.handleClick, 1000); // window $('#btn').addEventListener('click', () => { .. 공감수 2 댓글수 3 2021. 5. 2.
props를 변경하지 못하는 이유 props는 읽기 전용입니다. 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 됩니다. (리액트 공식문서 중) 리액트에서는 왜 props를 변경하지 못하게 하는 걸까? 리액트에서 컴포넌트는 다음과 같은 총 네 가지의 경우에 업데이트된다. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때 기본적으로 리액트에서는 setState만을 사용하여 state를 변경하게 한다. 이는 상태가 변경될 때 리액트에게 리렌더링을 하라는 명령을 요청하기 위함이다. 즉, setState는 리액트에게 상태가 변경되었으니 리렌더링을 하라는 트리거이다. 하지만 props를 단순하게 할당연산자로 변경하는 경우 setS.. 공감수 0 댓글수 0 2021. 4. 26.
제어 컴포넌트와 비제어 컴포넌트 제어 컴포넌트(Controlled Component) React에 값이 완전히 제어되는 Input과 Form Element State를 값으로 넘기고 그 State을 다룰 수 있는 핸들러를 콜백으로 넘긴다. input의 값은 항상 React의 state 값과 동일하다. (신뢰 가능한 단일 출처 - Single source of truth) 비제어 컴포넌트(Uncontrolled Component) 전통적인 HTML처럼 DOM에 제어되는 Input Element 오직 사용자만 값과 상호작용 ref를 사용하여 직접 DOM의 값을 가져온다. 일반적으로 제어 컴포넌트의 사용이 권장된다. 제어 컴포넌트를 사용해야 다양한 interaction을 관리하기가 편리하기 때문이다. Controlled and uncontr.. 공감수 1 댓글수 1 2021. 4. 26.
JSX JSX는 HTML 문법과 자바스크립트 문법이 결합된 문법이라고 볼 수 있다. JSX는 다음과 같은 특징을 가진다. React 엘리먼트(element) 생성 JavaScript를 확장한 문법 JSX는 React.createElement의 syntactic sugar이다. {isNew ? 'Nice to Meet you' : 'Hello'} 위의 JSX 코드를 babel로 실행하면 다음과 같이 변한다. // babel 실행 결과 React.createElement("div", { className: "greeting", color: getColor() }, isNew ? 'Nice to Meet you' : 'Hello'); } JSX에서 중괄호를 열면 자바스크립트의 표현식을 사용할 수 있다. 여기서 중요한.. 공감수 0 댓글수 0 2021. 4. 26.
리액트 동작 원리 리액트는 DOM을 직접 제어하는 방식이 아니라 중간에 가상의 Virtual DOM을 둔다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서 적절하게 Virtual DOM을 DOM에 반영하는 작업을 하게 된다. DOM에 엘리먼트 렌더링하기 ReactDOM.render( React.createElement(App) , document.getElementById('root')); ReactDOM.render ReactDOM.render(element, container[, callback]) React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를 반환한다. React .. 공감수 1 댓글수 0 2021. 4. 26.
우아한테크코스 프론트 : Lv.2-1 로또 미션 인사이트 1. 리액트의 동작원리 리액트는 DOM을 직접 제어하는 방식이 아니라 중간에 가상의 Virtual DOM을 둔다. Virtual DOM은 실제 DOM의 구조와 비슷한, React 객체 트리다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서 적절하게 Virtual DOM을 DOM에 반영하는 작업을 하게 된다. DOM에 엘리먼트 렌더링하기 ReactDOM.render( React.createElement(App) , document.getElementById('root')); ReactDOM.render ReactDOM.render(element, container[, callback]) React 엘리먼트를 container DOM에 렌더링하고 컴포넌트에 대한 참조를.. 공감수 1 댓글수 1 2021. 4. 26.
5. 변수와 데이터 With. 지그 (@zigsong) 소요시간: 1시간 45분 Q1. 원시 타입과 참조 타입 데이터가 메모리에 할당되는 과정을 이야기해봐요. 원시 타입 데이터 참조 타입 데이터 Q2. 자바스크립트의 콜스택과 힙에는 각각 어떤 것들이 저장될까요? 그리고 자바스크립트는 왜 힙이라는 별도의 메모리 공간을 가질까요? 콜스택 원시타입 데이터가 저장된다. 실행 컨텍스트를 통해 변수 식별자 저장, 스코프 체인 및 this 관리, 코드 실행 순서 관리 등을 수행 메모리 힙 참조타입 데이터가 저장된다.[자바스크립트] 콜스택/메모리힙 구조, 데이터 저장/참조 원리 [자바스크립트] 메모리 구조, 원시타입 변수 생성 원리, 가비지컬렉터 힙을 왜 쓰는가? 참조 타입 데이터의 프로퍼티를 동적으로 변경하는 것이 가능하도록 하기 위함.. 공감수 2 댓글수 0 2021. 4. 25.
우아한테크코스 프론트 : Lv.1-4 지하철 노선도 미션 인사이트 1. 바닐라 자바스크립트 SPA 이벤트 관리 방법 1-1. index.html에 모든 레이아웃을 집어넣고 display: none 속성을 준 뒤, 필요한 경우에 보여준다. 장점: 이벤트를 한번만 걸면 된다. 단점: 최초 로딩 시간이 길어진다. 사용자가 display: none 속성을 해제하여 내용을 확인할 수 있으므로 보안상 위험하다. App의 크기가 커질수록 index.html 관리가 힘들다. 1-2. App이 최초 실행될 때, 필요한 DOM을 모두 생성해놓은 뒤, 필요할 때마다 replaceChild로 DOM을 교체한다. 장점: 이벤트를 한번만 걸면 되고 component 별로 template 관리가 가능하다. 단점: 최초 로딩 시간이 길어진다. 1-3. 메인 컨테이너 이벤트 위임 장점: innerH.. 공감수 1 댓글수 0 2021. 4. 19.
4. 함수 내 질문에 대한 정리 Q1. 함수의 매개변수는 최대 몇개까지 두는 것이 이상적일까요? 만약 그 이상의 매개변수가 필요한 경우에는 어떤 식으로 해결하시는 편인가요? 매개변수가 많은 함수라면 이 함수가 하나의 동작만을 하고 있는 것인지 확인할 것 같다. 쪼갤 수 있다면 쪼갠다. 객체로 묶는 것도 좋다. 하지만 매개변수가 많지 않고 매개변수의 성격이 다르다면 객체로 묶는 것이 무조건 좋다고 할 수 없을 것 같다. 최근에는 코드 에디터가 함수 매개변수에 대한 힌트를 제공하기 때문에 꼭 객체로 묶을 필요는 없을 것 같다. Q2. 리액트에서 함수형 컴포넌트를 선언할 때, 함수 선언문과 함수 표현식으로 작성할 수 있는데 차이가 있을까요? 자바스크립트 함수 선언문과 함수 표현식의 차이만 존재하는 듯 하다. 리액트 공식.. 공감수 1 댓글수 0 2021. 4. 18.
3. 비동기 내 질문에 대한 정리 Q1. Promise.all에 대해 설명해주시고 어떤 상황에서 쓰면 좋은지 예시를 들어주세요. Promise.all은 여러개의 promise를 병렬적으로 처리하고 싶을 때 사용한다. 여러개의 url request가 필요한 경우에는 단순하게 await을 여러번 사용할 수 있다. 하지만 이는 동기적으로 정보를 요청하기 때문에 시간이 오래걸린다. 하지만 Promise.all을 사용하면 병렬적으로 여러개의 요청을 보내고 모든 응답이 정상적으로 온 경우에 다음 행동을 시작할 수 있다. 여러개의 Http request를 보내는 경우에 사용하면 효율적이다. const sleep = (delay) => { return new Promise((resolve) => { setTimeout(() => .. 공감수 2 댓글수 1 2021. 4. 12.
Custom DOM Library 만들기 Custom DOM Library DOM API를 통해 요소 노드를 불러오는 것은 꽤나 번거로운 일이다. 이를 해결하기 위해 Lv.1-1 자동차 경주 미션에서 jQuery 스타일로 코드를 작성하는 방법을 배웠다. 그리고 강의 시간에 준이 이보다 더 개선된 형태의 custom DOM library를 만들어봐도 좋을 것 같다는 이야기를 해주었다. 페어였던 카일이 주도하여 custom DOM library를 만들었고 이후 좀 더 코드를 개선하였다. (Thanks to 카일) export const $ = (() => { const constructor = function (selector) { if (!selector) { return; } this.targets = document.querySelectorA.. 공감수 2 댓글수 1 2021. 4. 5.
2. CSS selector [ Specificity Calculator Specificity Calculator A visual way to understand CSS specificity. Change the selectors or paste in your own. specificity.keegan.st ](https://specificity.keegan.st/) 내 질문 CSS 선택자 네이밍을 어떤 식으로 하고 계신가요? CSS의 가상 요소와 가상 선택자에 대해 설명해주세요. CSS에는 가상요소(:pseudo-element)와 가상 클래스(:pusedo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있다. HTML 문서를 읽는 화면 리더기가 무의미한 정보를 읽지 않도록.. 공감수 2 댓글수 0 2021. 4. 4.
1. 이벤트 내 질문 [Q1] addEventListener의 세번째 인자인 option에는 어떤 옵션들이 있을까요? options Optional 이벤트 리스너에 대한 특성을 지정하는 옵션 객체입니다. 사용 가능한 옵션은 다음과 같습니다 : - capture: DOM 트리의 하단에 있는 EventTarget 으로 전송하기 전에, 등록된 listener 로 이 타입의 이벤트의 전송여부를 나타내는 Boolean 입니다. - once: 리스너를 추가한 후 한 번만 호출되어야 함을 나타내는 Boolean입니다. true이면 호출할 때 listener 가 자동으로 삭제됩니다. - passive: true일 경우, listener에서 지정한 함수가 preventDefault()를 호출하지 않음을 나타내는 Boolean입니다... 공감수 2 댓글수 0 2021. 4. 4.
[Git] reset을 되돌리는 방법 오늘도 어김없이 git에서 conflict가 발생하였고 문제를 해결하는 가장 쉽지만 무시무시한 방법인 reset을 통해 문제를 해결하고 있었다. reset --hard로 이전 커밋과 파일들을 날려버리고 보니 이게 뭐람???? 왜 있어야 할 파일이 없지???? 한 순간의 부주의로 인해 잘못된 커밋 로그로 리셋 해버리고 말았다. reset을 hard 옵션으로 했기 때문에 남아있는 커밋 로그와 파일들 역시 모두 날아간 절망적인 상황... 더욱이 새벽 코딩으로 인해 몸과 마음은 이미 지칠 때로 지쳐있었다. 그냥 컴퓨터를 끄고 잠이나 자자라고 체념한 순간, '그래, 분명 나만 이런 실수를 한 건 아닐꺼야... 위대하신 git 개발자 분들께서 나같이 실수를 한 사람들을 구제할 방법을 마련해놓으시지 않았을까?'하는 .. 공감수 1 댓글수 1 2021. 4. 3.
[Git] 대소문자 변경 후 Github에 반영하기 Netlify를 이용해 배포를 진행하던 중 build 과정에서 반복적으로 오류가 발생했다. 오류 내용은 "./login/Login.js can't resolve"였다. 처음으로 웹팩과 바벨을 사용해서 배포를 하던 터라 당연히 잘못된 웹팩 설정 때문에 문제가 발생하는 줄 알았다. 그러나, 웹팩의 설정을 아무리 변경해도 해당 문제는 계속해서 발생했다... 해당 문제의 원인은 웹팩 설정이 아니라 Git에 있었다. 리팩토링 과정에서 폴더의 이름 하나가 다른 폴더와는 다르게 Camel case로 작성되어 있어 소문자로 변경했다. 그리고 깃헙 레포에 푸쉬했다. 그러나 Git은 대소문자 변경을 인식하지 않기 때문에 깃헙 레포에 있는 폴더명은 그대로 대문자로 남아있었다. 위와 같은 문제를 해결하기 위해서는 아래의 코드.. 공감수 2 댓글수 2 2021. 4. 3.
eventListener의 Garbage Colletion에 대한 고찰 이벤트를 바인딩한 DOM 요소가 삭제되는 경우, 바인딩 된 이벤트는 어떻게 되는지에 대해 알아보도록 하자. 우선, 이 글은 정확한 정보 전달을 위한 글이 아님을 밝힌다. 정보보다는 초짜 개발자가 어떻게 궁금증을 해소하기 위해 고군분투 했는지에 대해 쓴 글이므로 넓은 마음과 아량으로 글을 읽어주면 좋을 것 같다 😂 이 글은 Garbage Collection에 대한 기본적인 내용을 알고 있어야 이해하기 수월하므로 만약 Garbage Collection에 대한 이해가 부족하다면 아래의 글을 읽어보길 추천한다 👍👍👍 자바스크립트의 메모리관리 - JavaScript | MDN 자바스크립트의 메모리관리 C 언어같은 저수준 언어에서는 메모리 관리를 위해 malloc() 과 free()를 사용한다. 반면, 자바스크립트.. 공감수 0 댓글수 0 2021. 3. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.