React 컴포넌트 (함수형 VS 클래스형)

React 컴포넌트리액트(React)에서 컴포넌트(Component)는 UI를 구성하는 재사용 가능한 독립적인 모듈이다.화면에 나타나는 각각의 독립적인 요소를 말한다.  예를 들어 버튼, 헤더, 푸터, 입력 폼 등 모든 것들이 컴포넌트로 만들어질 수 있다.컴포넌트 표현 방법리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나누어진다.함수형 컴포넌트가 더 간단하고 가독성이 좋아 선호하는 추세이다. 클래스형 컴포넌트 방식class MyClassComponent extends Component { render() { return {this.props.message}; }} 함수형 컴포넌트 방식const MyFunctionalComponent = (props) => { return {props...

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

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