본문 바로가기

분류 전체보기

 (20)
[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.js는 라이브러리고, Next.js는 프레임워크라고 한다.둘 다 소프트웨어 개발 시간 단축, 유지관리 용이성을 위해 개발자가 사용하는 도구인데,라이브러리와 프레임워크는 뭐가 다른 걸까? 1. 프레임워크(Fremework)란?- 애플리케이션의 구조, 틀을 제공하는 클래스와 인터페이스 집합- 개발자는 프레임워크가 제공하는 요소와 규칙, 가이드에 따라 코드를 작성해야 함- 개발 범위가 정해져 있어 기능 구현에 집중하여 개발 가능- 검증된 패턴과 구조로 정형화 되어 품질을 보장하고, 통일성과 유지보수성 높음- 대규모이거나 복잡한 개발에서 주로 사용주요 프레임워크: Mybatis, Spring Framework, Django, Android, Angular, Vue... 2. 라이브러리(Librar..
[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를 좋아한다고 생각은 하지만, 확실한 이론에 대해서 공부하진 않았던 것 같다. 하나씩 천천히 살펴보아야겠다고 다짐했다.그 첫번째로, 위의 발표 영상에서 언급한 내용을 개인적으로 정리해볼까 한다. 워낙 잘 정리해서 설명해주신 영상이라 복습하는 느낌으..
[코딩테스트] 특이한 정렬 (javascript) ✅ Programmers 코딩테스트 연습 > 코딩테스트 입문 > 특이한 정렬     🔗링크  코딩 테스트는 해봐야겠다고 생각했지만 지금껏 도전해본 적이 없었다.그래도 안 하는 것보다는 도전해보는 게 좋을 거 같아서 기초! 아주아주 쉬운 문제부터 하나 풀어봤다. ❓ 문제와 조건 💭 생각하기문제를 요약하자면, numlist의 원소를 n과 가까운 순서대로 정렬하되, 가까운 순서가 같으면 숫자가 큰 순서대로 정렬하라는 것이다.문제를 보고 생각한 방법은, n(기준값)과 numlist(테스트 배열)의 차(가까운 순서)를 key로 하는 객체를 만들고, 키 값(=값의 차이)이 낮은 순서대로 answer에 넣는 방법이었다. value는 해당하는 numlist의 값. 하지만 두 숫자의 값의 차가 같은 경우가 생기니 v..
[JS] Promise & async/await 팁 ✅ 유튜브를 둘러보다가, Promise와 async/await에 관련된 유용한 쇼츠를 발견했다.(링크는 아래에) 영상 내용을 보고 신기한 걸 보니, 비동기 관련해서 여러번 사용했지만 명확하게 알지 못하고 있었구나 하는 생각도 들었다.시간내서 비동기 관련 내용도 개인적으로 정리해둬야겠다. +_+아무튼 몰랐던 내용을 메모해두고자 한다.✅ 그리고 async의 발음은 [어싱크] 가 아니라 [에이싱크] 라고 한다.asynchronous [ eɪˈsɪŋkrənəs ] 이기 때문에 에이싱크가 올바른 발음이라고 하는데...!난 항상 어싱크라고 했다... ㅠㅠ 개발 용어들은 발음할 때마다 멈칫하게 되는 것도 같고.(그치만 다른 분들도 나한테 어싱크라고 했었는데!!!)  1. Promise.all / await 차이// ..

티스토리툴바