본문 바로가기
반응형

분류 전체보기276

[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.
[코딩 테스트] 18일차: 문자열 알고리즘 문자열 알고리즘문자열 알고리즘은 문자열을 처리하고 검색하는 데 사용됩니다. 이번 글에서는 문자열 검색 알고리즘인 KMP와 Rabin-Karp, 문자열 정렬, 그리고 다중 패턴 검색 알고리즘인 아호-코라식(Aho-Corasick)에 대해 알아보겠습니다.KMP 알고리즘 (Knuth-Morris-Pratt)KMP 알고리즘은 문자열 검색 알고리즘으로, 부분 일치를 이용하여 불필요한 비교를 줄여 검색 속도를 향상시킵니다. 예제: KMP 알고리즘 구현JavaScriptfunction kmpSearch(text, pattern) { const lps = buildLPSArray(pattern); let i = 0; // text index let j = 0; // pattern index while (i Py.. 2024. 6. 27.
[백엔드] 목차 백엔드 개발 학습 시리즈1. 백엔드 개발 개요백엔드 개발이란?백엔드 개발의 정의와 역할백엔드와 프론트엔드의 차이백엔드와 프론트엔드의 주요 차이점과 협업 방식백엔드 아키텍처모놀리식 vs 마이크로서비스 아키텍처서버리스 아키텍처2. 웹 서버와 기본 프로토콜HTTP와 HTTPSHTTP/HTTPS의 동작 원리와 차이점RESTful APIRESTful API의 개념과 설계 원칙웹 서버 설정Apache, Nginx 등 주요 웹 서버 설정3. 프로그래밍 언어 선택JavaScript (Node.js)Node.js 개요, 주요 기능, 이벤트 루프Python (Django, Flask)Django와 Flask의 개요, 주요 기능 비교Java (Spring)Spring 프레임워크 개요, 주요 기능Ruby (Ruby on Ra.. 2024. 6. 26.
[프론트엔드] 목차 프론트엔드 개발 학습 시리즈1. 프론트엔드 개발 개요프론트엔드 개발이란?프론트엔드 개발의 정의와 역할프론트엔드와 백엔드의 차이프론트엔드와 백엔드의 주요 차이점과 협업 방식프론트엔드 아키텍처SPA, MPA, PWA의 개념과 차이점2. HTML 기초와 고급HTML 기본 문법HTML 문서 구조, 태그와 속성시맨틱 HTMLheader, footer, nav, section, article 등폼과 입력 요소폼 태그, 입력 필드, 버튼, 폼 속성멀티미디어 요소오디오, 비디오, 캔버스 요소3. CSS 기초와 고급CSS 기본 문법선택자, 속성-값 쌍, 외부 스타일시트레이아웃 기초박스 모델, 여백, 패딩, 테두리, 너비와 높이레이아웃 고급Flexbox, Grid 레이아웃반응형 디자인미디어 쿼리, 반응형 이미지와 비디오4.. 2024. 6. 26.
반응형

티스토리툴바