본문 바로가기
반응형

javascript107

[로드맵] 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.
[백엔드] 목차 백엔드 개발 학습 시리즈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.
[JavaScript 문법] 목차 JavaScript 문법 학습 시리즈1. JavaScript 소개 및 설정JavaScript의 역사, 환경 설정, 첫 번째 스크립트 작성2. 변수와 데이터 타입var, let, const, 문자열, 숫자, 불리언, null, undefined3. 연산자와 표현식산술 연산자, 할당 연산자, 비교 연산자, 논리 연산자4. 조건문if, else if, else, switch 문5. 반복문for, while, do-while 문6. 함수 기초함수 선언, 함수 표현식, 매개변수와 인수7. 스코프와 클로저전역 스코프, 지역 스코프, 블록 스코프, 클로저8. 객체 기초객체 리터럴, 속성 접근, 메서드9. 객체의 프로토타입프로토타입 체인, 상속10. 배열 기초배열 선언, 배열 메서드 (push, pop, shift, .. 2024. 6. 21.
[Javascript 기초 시리즈] 목차 1. JavaScript 기초 시리즈1.1 JavaScript 소개 및 역사1.2 변수와 자료형1.3 연산자와 표현식1.4 함수와 스코프1.5 객체와 배열1.6 조건문과 반복문1.7 DOM 조작 기초 2024. 6. 19.
[To Do List] 4단계: 확장 가능한 프로젝트 구조 4. 확장 가능한 프로젝트 구조프로젝트 구조를 확장 가능하게 설계하면 나중에 기능을 추가하거나 유지보수하기가 쉬워집니다. 다음은 Simple To-Do List 프로젝트의 확장 가능한 디렉토리 및 파일 구조 예시입니다:simple-to-do-list/│├── index.html├── css/│ └── style.css├── js/│ ├── app.js│ ├── storage.js│ └── ui.js└── assets/ └── images/ └── logo.png디렉토리 및 파일 설명index.html: 프로젝트의 메인 HTML 파일입니다. 전체 구조를 정의하고, 필요한 CSS와 JavaScript 파일을 포함합니다.css/style.css: 모든 스타일 관련 정의가 들어있.. 2024. 6. 16.
[To Do List] 3단계: 규칙 설정 3. 규칙 설정: 코딩컨벤션, Git 커밋 메시지 양식코딩 컨벤션파일 및 디렉토리 구조파일명은 소문자와 하이픈(-)을 사용합니다. 예: index.html, style.css, script.js디렉토리명은 소문자와 하이픈(-)을 사용합니다.HTML들여쓰기는 2칸을 사용합니다.속성명은 소문자를 사용하며, 값은 큰따옴표("")로 감쌉니다.자주 사용되는 HTML 구조를 주석으로 표시합니다.CSS들여쓰기는 2칸을 사용합니다.클래스명은 소문자와 하이픈(-)을 사용합니다. 예: .todo-item, .completedCSS 속성은 알파벳 순으로 정렬합니다.JavaScript들여쓰기는 2칸을 사용합니다.변수명은 카멜케이스(camelCase)를 사용합니다. 예: todoItem, completedTasks함수명은 동사.. 2024. 6. 16.
[To Do List] 2단계: README.md 작성 To Do List프로젝트 설명To Do List는 사용자가 해야 할 일들을 추가, 수정, 삭제할 수 있는 간단한 웹 애플리케이션입니다. 이 프로젝트는 JavaScript의 DOM 조작과 로컬 스토리지를 활용한 데이터 저장 방법을 사용할 것입니다. 또한, HTML과 CSS를 사용하여 사용자 친화적인 인터페이스를 제공하며, JavaScript를 통해 사용자 인터랙션을 처리합니다.이 애플리케이션의 주요 기능은 다음과 같습니다:사용자가 새로운 할 일을 입력하고 목록에 추가할 수 있습니다.추가된 할 일을 클릭하여 완료 상태로 표시할 수 있습니다.할 일을 수정하거나 삭제할 수 있습니다.로컬 스토리지를 사용하여 할 일 목록을 브라우저에 저장하고, 페이지를 새로고침해도 데이터가 유지됩니다.주요 기능할 일 추가: 사용.. 2024. 6. 16.
[포트폴리오 페이지] 5단계: 스타일링 및 레이아웃 개선 5단계: 스타일링 및 레이아웃 개선5.1 전체적인 레이아웃과 스타일링 개선styles.css 파일에서 전체적인 스타일링을 개선합니다.styles.css (수정된 부분)body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; /* 배경색을 설정합니다. */}header { background-color: #333; color: #fff; padding: 1em 0; text-align: center; position: sticky; /* 스크롤 시에도 상단에 고정됩니다. */ top: 0; z-index: 1000; /* 다른 요소보다 위에 표시됩.. 2024. 6. 16.
반응형