JavaScript로 간단한 투두리스트 만들기

STEP1. 투두리스트의 기본 디자인과 기능 완성하기 주요 기능 투두리스트 추가하기 투두리스트 수정, 삭제 체크한 투두리스트 줄 긋기 디렉터리 구조 my-todo-list/ │ ├── src/ │ ├── js/ │ │ └── main.js │ ├── css/ │ │ └── main.css │ └── assets/ │ │ ├── index.html ├── README.md └── package.json 소스파일 index.html TODO 삭제 main.css body { font-family: sans-serif; } header img { position: relative; width: auto; left: -100px; top: 100px; } .todo-wrapper { position: relat..

• format_list_bulleted Frontend/JavaScript
• · 2024. 3. 11.
• textsms

React란?

React란?React.js는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리로,재사용 가능한 컴포넌트를 기반으로 하는 선언적이고 효율적인 UI 개발을 가능하게 한다.가상 DOM을 사용하여 성능을 최적화하고, 단방향 데이터 흐름을 통해 애플리케이션의 상태 관리를 단순화하는데 용이하다.React는 프레임워크가 아닌 라이브러리이고메타(페이스북)와 개발자 커뮤니티에 의해 유지 관리되고 있다.React의 특징컴포넌트 기반 구조가상 DOM (Virtual DOM)단방향 데이터 흐름 (One-way Data Binding)JSX컴포넌트 기반 구조애플리케이션을 독립적이고 재사용 가능한 부분으로 나누어 코드의 유지 관리를 용이하게 하고,대규모 프로젝트의 개발 효율성을 향상시킨다.각..

• format_list_bulleted Frontend/React
• · 2024. 3. 6.
• textsms

TypeScript란?

TypeScript란?타입스크립트(TypeScript)는 자바스크립트(JavaScript)에 타입을 추가하여 정적 타이핑을 지원하는 언어이다.마이크로소프트에 의해 개발된 오픈 소스입니다. 대규모 애플리케이션을 개발할 때 코드 관리를 용이하게 하도록 도움을 준다.타입스크립트는 자바스크립트와 완벽하게 호환되며 모든 자바스크립트 라이브러리와 프레임워크를 사용할 수 있도록 설계되었다.TypeScript의 특징정적 타입 지정객체지향 프로그래밍 지원컴파일 시간 오류 검출ES6 및 그 이후 버전의 JavaScript 지원JIDE 지원 강화정적 타입 지정변수, 함수 매개변수, 반환 값 등에 명시적인 타입을 지정할 수 있습니다. 이는 개발 단계에서 타입 관련 오류를 쉽게 잡을 수 있게 도와준다...

• format_list_bulleted Frontend/TypeScript
• · 2024. 3. 6.
• textsms

JS 함수

JS 함수 선언 방법JavaScript에서 함수는 크게 선언문(Function Declaration) 방식과 표현식(Function Expression) 방식으로 정의한다.함수 선언문 (Function Declaration)함수 선언문은 function 키워드를 사용하여 이름이 지정된 함수를 정의한다.함수 선언문은 호이스팅 되므로, 선언 전에 호출할 수 있다.호이스팅(Hoisting)호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언을 코드의 최상단으로 끌어올리는 동작이다.이로 인해 코드의 어느 위치에서든지 함수를 호출할 수 있다.// 함수 선언문function sum(a, b) { return a + b;}console.log(sum(2, 3)); // 5함수 표현식 (Funct..

• format_list_bulleted Frontend/JavaScript
• · 2024. 3. 6.
• textsms

JS 연산자

JS 연산자산술 연산자기본적인 수학 연산을 수행한다. console.log(1 + 2); // 덧셈 console.log(4 - 2); // 뺄셈 console.log(3 * 2); // 곱셈 console.log(4 / 2); // 나눗셈 console.log(5 % 2); // 나머지할당 연산자변수에 값을 할당하며, 복합 할당 연산자를 통해 산술 연산과 할당을 동시에 수행할 수 있다.let abc = 0;abc += 2; // abc = abc + 2abc -= 2; // abc = abc - 2abc *= 2; // abc = abc * 2abc %= 2; // abc = abc % 2증감 연산자변수의 값을 1 증가시키거나 감소시킵니다. 전위(++i)와 후위(i+..

• format_list_bulleted Frontend/JavaScript
• · 2024. 3. 6.
• textsms

Markdown문서 개념과 작성법

Markdown 문서란? GitHub 소스를 참고하다보면 README.md 라는 파일이 흔하게 보인다. README.md 파일의 md는 markdown의 약어이다. markdown 문서는 간단하고 읽기 쉬운 형식으로 텍스트를 작성하는 경량 마크업 언어이다. 현재 글을 쓰고 있는 tistory에서도 markdown 형식의 글작성도 지원하고 있다. 💡 README.md란? README.md 파일은 GitHub 프로젝트 또는 저장소의 설명서로 사용된다. 보통 마크다운 문서로 작성되어 간결하고 가독성이 좋게 작성된다. 내용으로는 프로젝트 이름과 설명, 설치 방법, 사용예시, 라이센스, 저작권, 배포자 등의 정보가 포함된다. 장점 문법이 쉽고 간결하다. 관리가 쉽다. 호환성이 좋다. 단점 표준이 없다. 같은 문법..

• format_list_bulleted .ect
• · 2024. 3. 6.
• textsms