Jinoo.keem

1. 호출스택- Anonymous는 가상의 전역 컨텍스트- 함수 호출 순서대로 쌓이고 역순으로 실행됨- 함수 실행이 완료되면 스택에서 빠짐- LIFO 구조라서 스택이라고 불림 호출 스택 / 백그라운드 / 테스크 큐 / 이벤트 루프 / 콘솔 / 메모리 구조를 이해 해야함> 예제function oneMore() { console.log('one more');}function run() { console.log('run run'); setTimeout(() => { console.log('wow'); }, 0) new Promise((resolve) => { resolve('hi'); }) .then(console.log); oneMore();}setTimeout(run, 5000);..

1. 노드의 정의Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다.(런타임이란? > 특정 언어로 만든 프로그램들을 실행할 수 있게 해주는 가상 머신의 상태)노드는 서버의 역할도 수행할 수 있는 자바스크립트 런타임으로 자바스크립트로 작성된 서버를 실행할 수 있도 http/https/http2 모듈을 제공 > 노드 외의 다른 자바스크립트 런타임으로는 크롬, 파이어폭스 같은 브라우저가 있음> 노드는 V8과 libuv를 내부적으로 포함한다.- V8 엔진: 오픈소스 자바스킄립트 엔진 -> 속도문제 개선- libuv: 노드의 특성인 이벤트 기반, 논블로킹 I/O 모델을 구현한 라이브러리 2. 이벤트 기반> 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식. 대부분의 프로그램은 이벤..

https://news-morn.vercel.app/ NewsMorn - AI 뉴스 요약 서비스AI의 3줄 요약으로 최신 뉴스를 빠르고 쉽게 이해하세요😊news-morn.vercel.app 1.1. 프로젝트 개요긴 뉴스 기사를 요약하여 핵심 정보를 제공하는 AI 기반 서비스사용자가 뉴스 URL을 입력하면 OpenAI API를 활용하여 요약된 내용을 출력1.2. 개발 스택Frontend: Next.js, TypeScript, React, TailwindCSSAPI 호출: OpenAI API (GPT), Fetch API / Axios뉴스 데이터: Newsdata.io API배포: Vercel1.3. 기능1.3.1. 뉴스 요약 기능사용자가 뉴스 URL을 입력하면 OpenAI API가 자동으로 핵심 내용을 ..

Defining RoutesNext.js는 라우터를 별도로 설치하지 않고, app 디렉토리를 기반으로 하는 파일 기반 라우팅을 지원함폴더 기반 라우팅 : 각 폴더는 URL 세그먼트에 매핑되는 경로를 나타냄특수 파일 : ‘page.js’ , ‘layout.js’, ‘loading.js’, ‘error.js’ 등의 특수 파일을 사용하여 각 라우트의 UI와 동작을 정의중첩 라우팅 : 폴더를 중첩하여 복잡한 라우트 구조를 만듦레이아웃 공유 : ‘layout.js’ 파일을 사용하여 여러 페이지에서 UI를 쉽게 공유할 수 있음서버 컴포넌트 : 기본적으로 ‘app’ 디렉토리의 모든 컴포넌트는 React 서버 컴포넌트로 처리Not Foundnot-found.tsx는 일치하지 않는 전역 URL을 처리.app폴더 root..

RequirementsNextJS 시작 전 요구사항React의 jsx, state, props, data fetch, routing 의 기본 개념을 숙지해야 함.NextJS는 프레임워크다.공식문서 : https://nextjs.org/docsProject Setupnpm initJSON script license → MITnpm install react@latest next@latest react-dom@latestapp 폴더에 page.tsx OR page.jsx 만들고npm run dev (package.json 에서 scripts “dev” : “next dev” 로 수정 후) 실행 노마드 코더에서 강의를 보고 Next 웹을 만들고 배포까지 해보려고 한다.사실 이미 다했는데 정리할겸 써보는 블로그글..

26.1 함수의 구분ES6 이전까지 자바스크립트의 함수는 다양한 목적으로 사용되었으며, 크게 구분되지 않았다. 자바스크립트의 함수는 호출할 때 일반 함수로 호출할 수도 있고, new 연산자와 함께 호출하여 인스턴스를 생성하는 생성자 함수로도 사용될 수 있으며, 객체에 메서드로 바인딩되어 호출될 수도 있다. 그러나 이러한 함수의 구분이 명확하지 않아 실수나 성능 저하를 유발할 수 있다.예시: var foo = function () { return 1;}// 일반적인 함수로서 호출foo(); // 1// 생성자 함수로서 호출new foo(); // foo {}// 메서드로서 호출var obj = { foo: foo };obj.foo(); // 1함수의 종류:Callable: 호출할 수 있는 함수 객체C..

클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합을 의미하는 중요한 자바스크립트 개념이다. 핵심 특징클로저는 자바스크립트 고유의 개념이 아니며, 하스켈, 파스칼, 얼랭, 스칼라 등 다양한 프로그래밍 언어에서 사용되는 특성ECMAScript 사양에는 클로저에 대한 정의가 명시되어 있지 않으나, MDN에서 상세히 다룸렉시컬 스코프 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 정의했는지에 따라 상위 스코프가 결정되는 개념이다. 예제를 통해 살펴보자const x = 1;function outerFunc() { const x = 10; function innerFunc() { console.log(x); } innerFunc();}outerFunc();이 예제에서..

21.1 자바스크립트 객체의 분류자바스크립트 객체는 크게 3개의 객체로 분류표준 빌트인 객체: ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공. 자바스크립트 실행환경(브라우저 또는 Node.js환경)과 관계없이 언제나 사용. 전역객체의 프로퍼티로서 제공되며 별도의 선언 없이 참조가능.호스트 객체: ECMAScript 사양에 정의되어있지 않고 자바스크립트 실행환경(브라우저 또는 Node.js환경)에서 추가로 제공하는 객체. 브라우저 환경에서는 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker와 같은 클라이언트 사이드 Web A..

17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환함빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있음 // 빈 객체의 생성const person = new Object()// 프로퍼티 추가person.name = 'Lee'person.sayHello = function () { console.log('Hi My name is ' + this.name)}console.log(person) // {name: "Lee", sayHello: f}person.sayHello() // Hi My name is Lee생성자 함수는 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수생성자 함수에 의해 생성된 객체를..

HelloWord 프로젝트는 기본적으로 가로모드로 개발되었는데 중간에 회원가입 및 로그인을 세로로 바꾸자는 의견이 나왔다. 갑작스러운 제안이었지만 모바일에서 가로화면으로 입력하는 것에 대한 불편함에 대해 인지하고 있었기 때문에 변경을 팀적으로 결정했다.이미 가로화면에 기반하여 모든 코드가 개발되어 있었기 때문에 반응형으로는 구현하기 어렵다고 판단했고 UX적으로 어떻게 하면 자연스러울까 고민하던 중 화면의 방향을 감지해서 회전유도를 해야겠다는 생각이 들었고,`portraitModeWarning`, `landscapeModeWarning` 컴포넌트를 구현했다 화면 방향 감지 로직const checkOrientation = () => { if (window.screen && window.screen.orie..