본문 바로가기
반응형

분류 전체보기289

[JavaScript 문법] 1일차: JavaScript 소개 및 설정 JavaScript란?JavaScript는 웹 페이지를 동적으로 만들기 위해 사용되는 프로그래밍 언어입니다. HTML과 CSS와 함께 웹의 핵심 기술 중 하나로, 클라이언트 측 스크립팅을 통해 사용자와의 상호작용을 가능하게 합니다.JavaScript의 역사JavaScript는 1995년 Brendan Eich가 넷스케이프(Netscape) 브라우저를 위해 개발한 언어입니다. 이후 ECMA 국제 표준화 기구에서 표준화되어 ECMAScript(ECMA-262)라는 이름으로 발표되었습니다. 현재 최신 버전은 ECMAScript 2022(ES13)입니다.JavaScript 환경 설정JavaScript를 작성하고 실행하기 위해 필요한 환경을 설정합니다.1. 브라우저 콘솔 사용모던 브라우저는 모두 JavaScrip.. 2024. 8. 1.
[웹 디자인] 1일차: HTML 소개 및 기본 구조 HTML이란 무엇인가?HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다. 웹 페이지의 구조를 정의하고 콘텐츠를 표시하는 데 사용됩니다. HTML은 태그를 사용하여 문서의 각 부분을 나타냅니다.HTML의 역사1991년: 팀 버너스 리(Tim Berners-Lee)가 처음으로 HTML을 제안하고 개발1995년: HTML 2.0 표준이 발표됨1997년: HTML 3.2 및 HTML 4.0 표준이 발표됨2014년: HTML5 표준이 발표되어 현재까지 사용됨기본 문서 구조HTML 문서는 기본적으로 다음과 같은 구조를 가집니다: Hello, World! This is a simple HTML document.: 문서 타입 선언으로, HTML5 문서임을 나타냅니다.: HTM.. 2024. 8. 1.
[JavaScript 프레임워크] 1일차: React 기초 이해하기 1. React 기초React란 무엇인가?React는 Facebook에서 개발한 UI 라이브러리로, 컴포넌트 기반의 사용자 인터페이스를 구축하는 데 사용됩니다. React는 효율적인 상태 관리를 통해 동적이고 반응성 있는 웹 애플리케이션을 쉽게 만들 수 있도록 도와줍니다. React 설치 및 프로젝트 설정React 프로젝트를 설정하기 위해, Node.js와 npm이 필요합니다. 프로젝트를 생성하고 설정하는 방법은 다음과 같습니다. Node.js와 npm이 설치되어 있는지 확인합니다.node -vnpm -v Create React App을 사용하여 새로운 React 프로젝트를 생성합니다.npx create-react-app my-react-appcd my-react-app 프로젝트 폴더 구조는 다음과 같습.. 2024. 8. 1.
[JavaScript 프로젝트 시리즈] 1일차: JavaScript로 간단한 To-Do 리스트 애플리케이션 만들기 1. 간단한 To-Do 리스트 애플리케이션 만들기프로젝트 개요이번 프로젝트에서는 JavaScript를 사용하여 간단한 To-Do 리스트 애플리케이션을 만들어보겠습니다. 이 애플리케이션은 사용자가 할 일을 추가하고, 완료한 할 일을 체크하며, 목록에서 제거할 수 있는 기능을 포함합니다.준비물HTMLCSSJavaScript단계 1: 기본 HTML 구조 만들기먼저, To-Do 리스트 애플리케이션의 기본 HTML 구조를 만듭니다. To-Do List Add 단계 2: 기본 CSS 스타일링다음으로, 애플리케이션의 기본 스타일을 정의합니다./* styles.css */body { font-family: Arial, sans-serif; background-.. 2024. 8. 1.
[JavaScript 최신 기능 시리즈] 1일차: JavaScript의 let과 const 키워드 이해하기 1. let과 const 키워드let과 const 키워드란 무엇인가?ES6(ECMAScript 2015)에서 도입된 let과 const 키워드는 변수를 선언하는 새로운 방법을 제공합니다. 이들은 var 키워드에 비해 몇 가지 중요한 개선 사항을 가지고 있습니다.let 키워드let 키워드는 블록 스코프를 가지며, 변수의 재할당이 가능합니다.1. 블록 스코프let으로 선언된 변수는 블록 내에서만 유효합니다.{ let x = 10; console.log(x); // 출력: 10}// console.log(x); // 오류 발생: x is not defined2. 재할당 가능let으로 선언된 변수는 값을 재할당할 수 있습니다.let y = 20;y = 30;console.log(y); // 출력: 30.. 2024. 8. 1.
[JavaScript 심화 시리즈] 1일차: JavaScript 클로저와 스코프 체인 이해하기 1. 클로저와 스코프 체인클로저란 무엇인가?클로저는 함수가 선언될 당시의 렉시컬 스코프(Lexical Scope)를 기억하고, 선언된 이후에도 그 스코프에 접근할 수 있는 기능입니다. 클로저를 사용하면 외부 함수의 변수에 접근할 수 있습니다. 이는 데이터 캡슐화와 같은 다양한 용도로 사용될 수 있습니다.클로저 예제function outerFunction() { let outerVariable = '나는 외부 변수야'; function innerFunction() { console.log(outerVariable); } return innerFunction;}const myFunction = outerFunction();myFunction(); // 출력: 나는 외부 변수야이 예제에서 inn.. 2024. 8. 1.
[JavaScript 기초 시리즈] 1일차: JavaScript의 역사와 기본 개념 1. JavaScript 소개 및 역사JavaScript란 무엇인가?JavaScript는 웹 개발의 핵심 언어 중 하나로, 웹 페이지를 동적으로 만들기 위해 사용됩니다. HTML과 CSS가 웹 페이지의 구조와 스타일을 담당한다면, JavaScript는 웹 페이지의 동작을 담당합니다. JavaScript를 사용하면 사용자의 입력에 반응하고, 데이터를 조작하며, 페이지의 콘텐츠를 동적으로 업데이트할 수 있습니다.JavaScript의 역사JavaScript는 1995년에 넷스케이프(Netscape)에서 브렌던 아이크(Brendan Eich)에 의해 처음 개발되었습니다. 당시 JavaScript는 모카(Mocha)라는 이름으로 시작되었고, 이후 라이브스크립트(LiveScript)를 거쳐 JavaScript로 명.. 2024. 8. 1.
[로드맵] Javascript 로드맵 1. Javascript1.1 Javascript(기본: VanillaJS + ModernJS) 1.2 Javascript(상세) 1.3 Javascript(기본: ES2018이후) 2. Typescript2.1 Typescript 2.2 Typescript(상세) 3. 코딩테스트3.1 프로그래머스 4. 전문분야4.1 웹: 프론트엔드(HTML/CSS/Bootstrap/JS/React.js) 4.2 웹: 백엔드(Node.js/Express.js/Socket.io/Nest.js) 2024. 7. 13.
[개발 규칙] Javascript 코딩컨벤션 공통 규칙1. 들여쓰기: 보통 2칸 스페이스를 사용2. 각 줄은 80자 또는 100자로 제한3. 모듈 레벨 함수 및 클래스 정의는 두줄 간격으로 작성4. 괄호, 중괄호, 대괄호 내부에는 공백 사용 금지5. 쉼표, 콜론, 세미콜론 앞에 공백 사용 금지. 뒤에는 공백 사용6. 주석은 한 줄의 경우 //을 사용하고 코드와 두칸의 공백을 둠. 여러 줄의 경우 /** ~ */을 사용7. docstring 작성시 JSDoc을 사용./** * Adds two numbers together. * @param {number} a - The first number. * @param {number} b - The second number. * @return {number} The sum of the two numbers. .. 2024. 7. 5.
[환경설정] Javascript 환경설정 WindowsNode.js 사용법(버전 고정)1. Node.js 다운로드- 버전, LTS과 CPU 확인 후 Windows installer 다운- 다운로드후 설치 2. terminal에서 node.js 버전확인node -vnpm -vNVM 사용법(버전 변경 가능)1. nvm 설치- nvm-setup.zip 압축 해제후 .exe를 실행하여 설치- 설치 후 환경변수(Path)에 추가 2. terminal에서 버전확인# nvm 버전확인nvm version# node.js 20 버전 설치nvm install 20# 설치된 node.js 목록nvm list# 사용할 node.js 버전 설정nvm use # node 버전 확인node -v MacOSNode.js 사용법(버전 고정)1. homebrew로 node.j.. 2024. 7. 5.
반응형

티스토리툴바