본문 바로가기

LAMP/JavaScript

 (10)
[JS] 클로저 함수 Closure ✅ 클로저, 클로저 함수라는 말은 자바스크립트를 공부하며 자주 들어봤다.하지만 클로저는 정확히 뭘 뜻하는 말일까? 🤔 ☑️ 클로저 Closure- 주변 상태에 대한 참조와 함께 묶인 함수의 조합- 함수와 함수가 선언된 환경과의 관계의 개념을 뜻함- 클로저 함수는 자신이 선언될 당시의 환경(lexical)을 기억하는 함수- 내부 함수가 외부 함수의 context에 접근할 수 있음// 렉시컬 스코핑function outer() { let name = "anne"; function inner() { console.log(name); } inner();}outer();- 예를 들어 위와 같은 형태의 함수가 있을 때, name이라는 변수는 outer 함수 내에서 기능-  inn..
[JS] 스코프 Scope ✅ 클로저, 클로저 함수라는 말은 자바스크립트를 공부하며 자주 들어봤다.하지만 클로저는 정확히 뭘 뜻하는 말일까? 🤔클로저를 알아보기 전에 기초 이론인 범위, '스코프'에 대해 먼저 살펴보는 시간을 갖자. ☑️ 스코프 Scope- 스코프는 '범위'를 뜻함- 함수 지향 언어인 javascript에서는 중괄호 { } 를 이용한 함수의 범위를 의미- 선언된 변수에 대해 접근할 수 있는 유효한 범위를 뜻하며, 함수 내부에서는 함수 외부에 있는 변수에 접근할 수 있음{ let m = "Hi"; alert(m); // Hi}alert(m); // Reference Error- 지역 변수를 선언하면 블록 내에서는 접근할 수 있지만 블록 밖에서는 접근할 수 없음 (Reference Error)- 다른 블록..
[Next.js] 기초 학습 내용 정리 ✅ 노마드 코더 Next.js 시작하기 강의 내용 정리 1. 설치1) 폴더 생성2) npm init -y (혹시 모르니 license는 MIT로 바꿔주기)3) react@latest, next@latest, react-dom@latest 설치4) "scripts"에  "dev": "next dev" 추가 2. 실행1) next js를 실행하면 app/page.jsx(tsx)를 실행함2) TS가 설치되어있지 않다면 자동으로 TS 설치3) layout.tsx가 없으면 자동으로 생성 3. Routing 라우팅1) 폴더를 생성하고 폴더 내에 page.jsx(tsx) 파일을 생성하면 자동으로 라우팅(ex) app/movie/page.jsx => /movie 로 접속 시 표시2) page.jsx 파일 없이 폴더만 ..
[React] 리액트 생명 주기 React Life Cycle ✅ 리액트에는 라이프 사이클 Life Cycle이라는 것이 있다.리액트가 컴포넌트 기반의 라이브러리이기 때문에 각 컴포넌트에 수명 주기가 존재하고, 컴포넌트 프로세스를 통제하기 위해서는 라이프 사이클에 대해 파악해야만 한다. 리액트 컴포넌트는 크게 생성 (마운팅) > 업데이트 (업데이팅) > 제거 (언마운팅) 의 순서로 생명 주기를 갖는다.Class로 리액트 컴포넌트를 구성할 때는 라이프 사이클 메서드를, funtional 리액트 컴포넌트를 구성할 때는 Hook을 이용해 컴포넌트를 관리한다. ⏹️ 리액트 생명주기 메소드1. 마운트컴포넌트 인스턴스 생성, DOM에 삽입될 때 호출- constructor : 컴포넌트 생성자 메서드, 컴포넌트 생성 시 가장 먼저 실행됨. state, props에 접근해 값 할..
[JS] Callstack, Event Loop ⏯️ Philip Roberts - What the heck is the event loop anyway? ❇️ 우연히 모든 자바스크립트 개발자가 알아야 하는 33가지 개념 이라는 문서를 보게 되었는데, 그 첫번째 항목인 콜 스택에서 위의 영상을 보게 되었다. Philip Roberts라는 분이 진행한 발표인데, V8과 브라우저 얘기를 하며 "이벤트 루프", "비 차단", "콜백", "비동기", "단일 스레드", "동시성" 같은 단어를 언급했다. 생각해보면 JS를 좋아한다고 생각은 하지만, 확실한 이론에 대해서 공부하진 않았던 것 같다. 하나씩 천천히 살펴보아야겠다고 다짐했다.그 첫번째로, 위의 발표 영상에서 언급한 내용을 개인적으로 정리해볼까 한다. 워낙 잘 정리해서 설명해주신 영상이라 복습하는 느낌으..
[JS] Promise & async/await 팁 ✅ 유튜브를 둘러보다가, Promise와 async/await에 관련된 유용한 쇼츠를 발견했다.(링크는 아래에) 영상 내용을 보고 신기한 걸 보니, 비동기 관련해서 여러번 사용했지만 명확하게 알지 못하고 있었구나 하는 생각도 들었다.시간내서 비동기 관련 내용도 개인적으로 정리해둬야겠다. +_+아무튼 몰랐던 내용을 메모해두고자 한다.✅ 그리고 async의 발음은 [어싱크] 가 아니라 [에이싱크] 라고 한다.asynchronous [ eɪˈsɪŋkrənəs ] 이기 때문에 에이싱크가 올바른 발음이라고 하는데...!난 항상 어싱크라고 했다... ㅠㅠ 개발 용어들은 발음할 때마다 멈칫하게 되는 것도 같고.(그치만 다른 분들도 나한테 어싱크라고 했었는데!!!)  1. Promise.all / await 차이// ..
[Node.js] 기본 설정 - package.json{ "name": "newtodolistpjt", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "bcrypt": "^5.1.1", "body-parser": "^1.20.2", "compression": "^1.7.4", "ejs": "^3.1.10", "express": "^4.19.2"..
[Node.js] Mysql 연동 1. npm 설치npm i --save mysql 2. DB 연결let mysql = require("mysql");let connection = mysql.createConnection({ host: "localhost", // DB 서버주소 port: "3306", // 포트 번호 user: "root", // 사용자 이름 password: "1234", // 비밀번호 database: "db_test", // 데이터베이스 이름});connection.connect(); ➕ Mysql 계정 설정 명령어 모음로그인 mysql -u root -p 사용할 DB 선택 use mysql 계정 정보 확인(user 테이블) SELECT user, host, authentication..

티스토리툴바