전체 글69 [React] - 컴포넌트(Component란?) 리액트는 컴포넌트(Component) 라고 하는 단위를 기반으로 구성되어 있다. 컴포넌트의 특징1. 재사용성컴포넌트는 여러 곳에서 재사용할 수 있어 개발 속도와 생산성을 높여준다. 2. 컴포넌트 내부에서 state를 관리할 수 있도록 해준다useState 메서드를 사용하여 쉽게 관리 가능하다. 컴포넌트는 크게 함수형 컴포넌트, 클래스형 컴포넌트로 나눌 수 있다. 함수형 컴포넌트말 그대로 함수 기반 컴포넌트로, 자바스크립트 함수를 작성함으로써 가장 간단하게 컴포넌트를 정의하는 방법이다.(상단에 import React from "react"; 는 필수적으로 작성해줘야 한다.) Home.js에서 함수형 컴포넌트를 만드는 예시import React from "react";function Home() { .. 2025. 2. 26. [JavaScript] - 타입 변환 (명시적 형변환 vs 암시적 형변환) 자바스크립트는 동적 타입 (dynamic type) 언어로, 변수의 타입이 실행 도중에 유연하게 변할 수 있다. 오늘 포스팅에서는 자바스크립트의 타입 변환 방식에 대해 포스팅해보도록 하겠다. 자바스크립트에서 타입 변환은 크게 2가지로 나뉜다.1. 암시적 변환(implicit conversion) : 자동으로 타입이 변환됨2. 명시적 변환(explicit conversion) : 개발자가 의도적으로 타입을 변환시킴 (ex. String(), Boolean())암시적 타입 변환 (Implicit Conversion)암시적 타입 변환은, 자바스크립트 엔진이 코드 문맥에 따라 자동으로 타입을 바꿔주는 경우를 말한다.알맞게 변환해줬을 경우 코드가 간결해지고 개발자 입장에서도 편리하지만, 의도치 않게 다른 결과가 .. 2025. 2. 25. [React] - package.json과 package-lock.json의 차이 리액트 프로젝트를 세팅하고 나면, 프로젝트 폴더 안에 package.json과 package-lock.json 두 가지 파일을 발견할 수 있을 것이다. 두 파일은 중요한 역할을 담당하지만, 각각의 목적과 기능은 조금씩 다르다. 이번 포스팅에서는 두 파일의 차이점에 대해서 설명해 보려고 한다.package.json프로젝트의 전반적인 정보를 담고 있는 핵심 파일이다. => 프로젝트의 설계도 역할을 한다고 이해하면 된다.{ "name": "study", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@t.. 2025. 2. 24. [React] - JSX란? (개념, 변환 과정, 주요 문법) JSX (Syntax Extenstion to JavaScript)란? 리액트를 처음 접할 때 헷갈렸던 부분이 JSX이다. js는 JavaScript의 확장자이기 때문에 익숙하지만, JSX는 생소했다.JSX는, JavaScript XML의 약자로, 자바스크립트 코드 안에서 HTML과 유사한 문법을 사용할 수 있도록 지원해주는 문법 확장 도구이다. (JSX = JavaScript + HTML, XML)=> 자바스크립트 내에서 HTML을 사용하기 위해서 JSX가 권장된다!JSX 변환 과정브라우저는 JSX 문법을 이해하지 못하기 때문에, JSX 코드를 JavaScript 코드로 변환해주는 과정을 내부적으로 거치게 된다. (Babel과 같은 컴파일러가 사용된다고 한다)//JSX 코드const element = .. 2025. 2. 23. [React] - 리액트 동작 흐름 살펴보기 (App.js, index.js, index.html) React 프로젝트의 중요한 파일 3가지create-react-app 명령어를 통해 리액트 프로젝트를 생성했다면, 위와 같은 index.js 파일이 만들어졌을 것이다. 이 중에서 중요한 3가지 파일에 대하여 간단히 설명해보고자 한다.index.htmlpublic 폴더에 있다. index.js에 대응되는 기본 HTML문서로, 웹페이지의 뼈대를 제공한다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 렌더링된 결과가 표시된다. (이름 변경 시 에러가 나므로 주의하자)App.jssrc 폴더에 있으며, 실제로 화면에 표시되는 내용들이 여기에서 정의된다.index.jssrc 폴더에 포함되어 있는 메인 프로그램이다. 여기에서 HTML 템플릿 및 컴포넌트를 조합하여 렌더링하고 실제로 화면에 표시한다... 2025. 2. 22. [Front-end] - JavaScript와 TypeScript 비교 JavaScript와 TypeScript자바스크립트와 타입스크립트는 둘 다 웹 개발 시 널리 사용되는 프로그래밍 언어이다.(보통 자바스크립트로 웹개발에 입문 하나 후 타입스크립트를 배우는 경우가 많다고 한다.)오늘은 자바스크립트와 타입스크립트의 차이점에 대해 설명해보도록 하겠다. JavaScript와 TypeScript 중 어떤 언어를 사용해야 할지 고민하는 사람들에게 도움이 되길 바란다. 자바스크립트(JavaScript)자바스크립트는 동적이고 유연한 언어이지만, 타입(자료형)이 정해져 있지 않아 오류가 발생하기 쉽다는 단점이 있다. 타입스크립트(TypeScript)타입스크립트는 자바스크립트를 기반으로 한 언어로, 2012년 Microsoft에서 개발한 언어이다. 자바스크립트의 단점을 보완하기 위해 등장.. 2025. 2. 21. 이전 1 2 3 4 ··· 12 다음
