민아의 개발블로그

1type Operation2 = { (a: number, b: number): number; name: string;};const add2: Operation2 = (a, b) => a + b;(...)add2(1, 2);add.name; 참고로 이때 다음과 같이 호출 시그니쳐 아래에 프로퍼티를 추가 정의하는 것도 가능합니다. 이렇게 할 경우 함수이자 일반 객체를 의미하는 타입으로 정의되며 이를 하이브리드 타입이라고 부릅니다.   2type Dog = { name: string; isBark: boolean;};type Cat = { name: string; isScratch: boolean;};type Animal = Dog | Cat;function warning(animal: Anima..

Next.jsNext.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. 현대적인 웹 애플리케이션 개발 과정을 간소화하는데 사용됩니다. Vercel에서 개발된 Next.js는 서버 사이드 렌더링, 정적 사이트 생성, API 개발에 대한 쉬운 솔루션을 제공하는 데 중점을 둡니다. React의 강력함과 유연성을 더해 고급 성능 최적화와 내장된 개발 기능을 제공함으로써, Next.js는 개발자들이 쉽게 빠르고 확장 가능하며 SEO 친화적인 웹 애플리케이션을 구축할 수 있도록 지원합니다.  서버 사이드 랜더링 (SSR)Next.js의 주요 기능 중 하나는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원한다는 것입니다. 이러한 기술을 통해 개발자들은 애플리케이션의 성능, 검..

1.react.memouseCallbackuseMemo사용법을 모르겠습니다.https://stackblitz.com/edit/vitejs-vite-t65bvj?file=src%2FApp.jsx React - 5일차 (forked) - StackBlitzNext generation frontend tooling. It's fast!stackblitz.com  2. unsplash api 사용법을 모르겠습니다

React웹과 네이티브 사용자 인터페이스를 위한 자바스크립트 UI 라이브러리SPA를 쉽고 빠르게 만들 수 있도록 해 주는 도구사용자 인터페이스 : 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해 주는 것SPA : 하나의 페이지만 존재하는 웹사이트 (하나의 html 틀을 만들어놓고 사용자가 특정 페이지를 요청할 때 그 안에 해당 페이지의 내용을 채워서 보내주는 것)  라이브러리와 프레임워크프레임워크 : 흐름에 대한 제어 권한이 개발자가 아닌 프레임워크라이브러리 : 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 사용  React의 장점빠른 업데이트와 렌더링 속도 : 가상 돔에서 업데이트해야할 최소한의 부분만 검색하여 업데이트하고 렌더링함컴포넌트..

const express = require('express');const app = express();let posts = []; // 게시글을 리스트로 사용할 posts에 빈 리스트 할당// req.body를 사용하려면 JSON 미들웨어를 사용해야 합니다.// 사용하지 않으면 undefined로 반환app.use(express.json()); // JSON 미들웨어 활성화// POST 요청 시 컨텐트 타입이 application/x-www-form-urlencoded인 경우 파싱app.use(express.urlencoded({ extended: true }); // JSON 미들웨어와 함께 사용app.get('/', (req, res) => { // /로 요청이 오면 실행 res.json(post) ..

1. 카카오 인증 페이지 접속https://developers.kakao.com/  Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com  2. 로그인   3. 내 애플리케이션 접속 후 애플리케이션 추가하기 버튼 클릭  4. 앱이름, 사업자명, 카테고리 입력 후 저장  5. 생성한 애플리케이션 클릭 후 플랫폼 접속   6. 작업중인 도메인 입력 후 저장  7. 카카오 로그인 메뉴 접속  8. 카카오 로그인 활성화   9. redirect url 입력 후 저장  10. 동의항목 메뉴 접속  11. 필수 동의항목 설정 후 저장 12. 앱 키 메뉴 접속 13...

1. 구글 콘솔 대시보드 페이지 접속 https://console.cloud.google.com/apis/dashboard Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com  2. 프로젝트 만들기  3. 프로젝트 생성 버튼 클릭   4. 프로젝트 명 입력 후 생성  5. oauth consent screen 메뉴 클릭  6. 선택하지 않고 create 클릭   7. app name, user email 작성  8. 이메일 작성 후 저장   9. Scopes, Test users 단계 계속하기  10. 생성 완료   11. 사용자 인증 정보 클릭 : 생성 > oauth client id  12. application type, name 입력  13. ..

Node.jsV8 자바스크립트 엔진과 libuv 및 C/C++에 의존성을 가진 자바스크립트 런타임 환경 런타임 : 자바스크립트로 된 프로그램을 실행할 수 있는 프로그램  Node.js 구성요소구성요소설명Node.js API자바스크립트 APINode.js 바인딩자바스크립트에서 C/C++ 함수를 호출할 수 있게 합니다Node.js 표준 라이브러리 (C++)운영체제와 관련된 함수들. 타이머(setTimeout), 파일시스템(filesystem), 네트워크요청(http)C/C++ 애드온Node.js 에서 C/C++ 소스를 실행할 수 있게 하는 애드온V8(C++)오픈 소스 자바스크립트 엔진, 자바스크립트를 파싱, 인터프리터, 컴파일, 최적화에 사용됩니다.libuv(C++)비동기 I/O에 초점을 맞춘 멀티플랫폼을 ..

1. 3번째 라인의 Lee를 왜 저렇게 쓰는지 모르겠습니다.const person = (name => ({ sayHi() {return `hi my name is $name`;}}))('Lee');console.log(person.sayHi()) // hi my name is Lee.  2. 함수에 나오는 this가 뭘 가리키는지 이해가 가지 않습니다. class Base { constructor(name) { this.name = name; } sayHi() { return `hi ${this.name}`; }}class Derived extends Base { // 화살표 함수의 super는 상위 스코프인 constructor의 super을 가리킨다. sayHi ..