JavaScript 썸네일형 리스트형 자바스크립트 Garbage Collector의 동작 https://feel5ny.github.io/2017/11/30/JS_02/ 2/ 메모리 관리와 가비지 콜렉션 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 책을 참고하여 정리합니다. 오류가 있다면 언제든지 댓글 남겨주세요. 요약가비지 콜렉션은 더 이상 사용하지 않는 메모리를 회수하는 역할을 한다. 메모리를 회수하기 전 사용하지 않는 변수를 체킹해야 하는데 이때 표시하고 지우기 방법과 참조 카운팅이 있다. 표시하고 지우기 방법은 처음 컨텍스트의 모든 변수에 마 feel5ny.github.io https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management 자바스크립트의 메모리관리 메모리 생존주기는 프로그래밍 언어와 관계없이 비슷하다. de.. 더보기 자바스크립트 이벤트 관련 https://poiemaweb.com/js-event Event | PoiemaWeb 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다. 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로 일반적인 제어 흐름과는 다른 접근 방식이 필요하다. 즉, 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 한다. 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통 poiemaweb.com 더보기 [Vue] Vuex란 무엇인가? 참고: https://vuex.vuejs.org/kr/ Vuex가 무엇인가요? | Vuex Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있습니다. 또한 Vue의 공식 devtools 확장 프로그램 과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공합니다. "상태 관리 패턴"이란 무엇인가요? 간단한 Vue 카운터 앱부터 시작 해보 vuex.vuejs.org - 상태 관리 패턴 + 라이브러리 - 상태를 직접 변경하지 않고 commit 메서드로 변경한다. (추적을 가능하게 하기 위해서다) 1... 더보기 [Vue] Vue의 LifeCycle - created, monted, updated, destroyed - 모든 라이프사이클 훅은 Vue 인스턴스를 가리키며 호출됨 1. 가장 먼저 new Vue()를 호출하게 된다. 2. Events와 LifeCycle을 초기화한다. 2-1. beforeCreate 훅 함수 호출 3. Injections와 reactivity를 초기화한다. 3-1. created 훅 함수 호출 4. el 만들기, el을 template화 하기 4-1. beforeMount 훅 함수 호출 5. Create vm.$el, el을 대체한다. 5-1. mounted 훅 함수 호출 mounted가 되면 vue가 눈 앞에 보일거고 상태가 변경됨에 따라 자동으로 vue를 변경시킨다. - 상태변경 시 로직 1. 데이터가 변경됨 1-1. .. 더보기 [Vue] mixin 설명 참고: https://kr.vuejs.org/v2/guide/mixins.html 믹스인 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org - 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법 - 모든 구성 요소 옵션을 포함할 수 있음 - 같은 이름의 훅 함수가 있다면 모두 호출되고, mixin 훅이 먼저 호출됨 - 같은 이름의 함수라면 컴포넌트 쪽이 우선된다 - 전역으로도 사용할 수 있다. 더보기 [React] React의 LifeCycle 정리 벨로퍼트님의 리액트 책을 보고 정리한 내용이다. 중요한 메서드 위주로만 정리했다. (get~ 이런건 제외함) - 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. - 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. - 크게 마운트, 업데이트, 언마운트로 나뉜다. 마운트 - DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다. 1. constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 2. render; UI를 렌더링하는 메서드 3. componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 업데이트 - 컴포넌트가 업데.. 더보기 함수와 프로토타입 체이닝 (2) 4.4 함수 호출과 this - 자바스크립트에서는 함수 형식에 맞춰 인자를 넘기지 않더라도 에러가 안난다. - 함수의 인자보다 적게 호출하면 넘겨지지 않은 인자에는 undefined가 할당되고 인자 갯수보다 많게 호출하면 나머지는 무시된다. - arguments 객체는 함수를 호출할 때 넘긴 인자들이 유사 배열 객체로 저장되어 있다. - 매개변수가 정확하게 정해지지 않은 함수를 구현하거나, 전달된 인자의 갯수에 따라 서로 다른 처리를 해줘야 하는 함수를 개발하는데 유용하게 사용할 수 있다. (ES6 이후부터는 나머지 연산자를 사용해서 구현 가능) 4.4.2 호출 패턴과 this 바인딩 - 함수 호출을 할 때 암묵적으로 arguments 객체와 this 인자가 전달된다. - this가 이해하기 어려운 이유.. 더보기 함수와 프로토타입 체이닝 (1) 자바스크립트 단골 면접 질문 중 하나인 this란 무엇인가와 prototype에 대한 설명을 작성하기 위해서 이 글을 작성한다. 이 글은 책 '인사이드 자바스크립트' 중 4번째 챕터인 함수와 프로토타입 체이닝을 읽고 정리한 글이다. 책 내용 중 생성자 함수와 관련된 부분 위주로 정리할 것이다. 자바스크립트에서 가장 중요한 개념 1순위는 함수이다. 4.1 함수 정의 함수를 정의하는 방법은 세가지다. 1. 함수 선언문 2. 함수 표현식 3. Function 생성자 함수 (잘 안쓰임) 4.1.1. 함수 리터럴 function add(x,y) { return x + y } 위와 같은 모양이 함수 리터럴이다. 4.1.2 함수 선언문 방식으로 생성 - 함수 리터럴 형태와 같다. 반드시 함수명이 정의되어 있어야 한다.. 더보기 [React] Nodebird 5.3 api 만들기 기본 정리 routes 폴더에는 각 분야 api들 파일을 나눠주고 const express = require("express"); const router = express.Router(); router.get("/", (req, res) => {}); module.exports = router; 이런식으로 기본적으로 작성해주고 index에서는 const postsAPIRouter = require("./routes/posts"); app.use("/api/posts", postsAPIRouter); 이런식으로 가져와서 사용해준다. 더보기 [React] Nodebird 5.2 DB 세팅 정리 1. sequelize-cli를 global로 설치함 2. sequelize init이라고 입력 3. mysql2 설치 4. config 파일 설정 5. models 폴더에 index.js 파일 설정 "use strict"; const Sequelize = require("sequelize"); const env = process.env.NODE_ENV || "development"; const config = require("../config/config")[env]; const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config ); Object.keys(db).forEach.. 더보기 이전 1 2 3 4 다음