민아의 개발블로그

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)을 지원한다는 것입니다. 이러한 기술을 통해 개발자들은 애플리케이션의 성능, 검..

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

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. 원시값 변경 불가능한 값 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다. => 변수는 언제든지 재할당을 통해 변수 값을 변경 가능하다. 변수의..

이름설명변수하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름값의 위치를 가리키는 상징적인 이름할당(대입, 저장)변수에 값을 저장함참조변수에 저장된 값을 읽음식별자변수 이름어떤 값을 구별해서 식별할 수있는 고유한 이름메모리 주소에 붙인 이름키워드자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어ex) var 키워드를 만나면 자바스크립트 엔진은 뒤에 오는 변수 이름으로 새로운 변수를 선언실행 컨텍스트자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역소스코드를 실행하는데 필요한 환경을 제공하고 코드..

1. 사용자가 웹브라우저 주소창에 www.naver.com을 입력한다. 2. 웹브라우저는 캐싱된 DNS기록들을 통해 해당 도메인 주소와 대응하는 IP주소를 확인한다. 이 단계에서 캐싱된 기록에 없을 경우, 다음 단계로 넘어간다. DNS는 웹사이트의 IP 주소와 도메인 주소를 연결해주는 시스템이다. 인터넷의 모든 URL에는 고유한 IP 주소가 할당되어 있다. 예를 들어, www.naver.com의 IP 주소는 125.209.222.142, 따라서 브라우저에서 https://125.209.222.142 를 입력하여 www.naver.com에 접속할 수 있다. 캐싱 : 파일 복사본을 캐시 또는 임시 저장 위치에 저장하여 보다 빠르게 액세스할 수 있도록 하는 프로세스 DNS(Domain Name System)..