기발자

리액트에서 Form 사용하기 (1) - Controlled Components

2021-10-19T02:50:00Z

<input>, <textarea>, <select> 같은 <form> 안에 들어가는 요소들은 다른 태그들과 달리 사용자 입력에 따라 실시간으로 내용이 변경되는 태그이다. 예를 들어 <input type="text" />, <input type="radio" />는 사용자의 입력과 선택에 따라 value 속성값이 실시간으로 달라진다. 이를 리액트에 적용하면

state와 setState

2018-11-09T12:05:36Z

state는 클래스 안에서 데이터를 저장하는 일종의 저장소이다. 몇몇 책에서는 state를 상태 객체로 번역하는 경우가 있는데, 여기에서는 state로 표현하겠다. state를 사용할 때는 class fields 문법을 사용한다. state는 클래스 컴포넌트에서만 사용이 가능하며, 해당 컴포넌트에 데이터를 저장하고, 이를 변경할 수 있다. 이전에 학습한

props

2019-08-07T19:01:15Z

리액트에서 데이터를 다루기 위해서는 props 또는 state를 사용한다. 이번 챕터에서는 props 사용법에 대해 알아보겠다. 기본적으로 props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용한다.이때 자식 컴포넌트는 props로 전달된 값을 받을 수만 있으며, 수정은 불가능하다. 먼저 함수형 컴포넌트로 props를 받아오는 방법을 살펴보자

리액트와 JSX 문법

2022-02-20T11:09:03Z

JSX 문법은 리액트의 매우 훌륭한 기능 중 하나이다. 리액트에서 JSX 문법은 객체 생성과 함수 호출을 위한 문법적 편의를 제공한다. 먼저 아래 이미지를 보고 자세한 설명을 이어가겠다. 오른쪽 코드를 보면 충접된 React.createElement()가 여러 개 있다. 한 눈에 보기에도 복잡한 구조를 갖고 있으며, 직관적이지도 않고 가독성 또한 떨어

리액트와 컴포넌트

2019-11-10T17:20:48Z

리액트는 컴포넌트 기반으로 구성되어 있다. 앞에서 언급했듯이 <nav>나 <footer>처럼 반복적으로 사용되는 영역을 컴포넌트로 작성하면 코드를 재사용할 수 있어 효과적인 작업이 가능하다. 리액트의 컴포넌트에는 클래스 컴포넌트, 함수형 컴포넌트 두 가지 종류가 있다. 그럼 각 컴포넌트를 만드는 방법과 주요 특징을 알아보자. 클래스 컴포넌트 클래스 컴

리액트 개발 환경 세팅하기

2024-10-17T12:56:49Z

그럼 리액트를 사용하기 위한 개발 환경을 세팅해보자. 대부분의 블로그에서 리액트와 함께 Webpack, Babel을 함께 소개하는 경우가 많다. 하지만 입문자 입장에서는 리액트만으로도 공부하기 벅차기 때문에 본 글에서는 내용은 다루지 않겠다. Node.js 리액트를 설치하고, 리액트 관련 외부 패키지를 쉽게 설치하기 위해서는 NPM이 필요하다. NPM(

리액트 시작하기

2023-11-06T07:23:24Z

리액트(React) 소개 리액트는 페이스북과 인스타그램 개발자들이 만든 UI 라이브러리이다. 2013년 처음 공개됐으며 MVC(Model View Controller) 패턴에서 V(View)에 집중되어 있다. 뷰에서 사용되는 여러 개의 컴포넌트를 관리하고 만드는 것이 리액트이다. 컴포넌트는 웹 사이트를 구성하고 있는 요소를 의미한다. HTML로 비유하면

#13. If Statement 와 삼항 연산자 - Condition ( 조건문 )

2022-03-30T01:35:21Z

Condition ( 조건문 )에 대한 정의 Condition 은 발생할 수 있는 여러 경우의 수에 대한 결과값을 제시할 수 있도록 도와주는 문장입니다. 만약 Condition 을 사용할 수 없다면 제대로 된 프로그램을 구현하는데 애를 먹을 수 있습니다. 그만큼 중요한 개념이기 때문에 본 글 외에 다른 블로그에서 다루고 있는 다양한 실습 예제를 살펴보면서

#12. Property 와 Method (기원편)

2021-05-28T08:09:59Z

Contradiction JavaScript 는 Number (수), String (문자열), Boolean (불리언), Null, Undefined, Object (객체) 총 6개의 데이터 타입을 가지고 있고, Object 안에는 Array (배열), Function (함수), Date (날짜), RegExp (정규식) 이 포함되어 있습니다.- #4.

#11. Property 와 Method (현상편)

2023-09-08T09:56:38Z

데이터 타입의 Property 와 Method 지금까지 JavaScript 의 주요 데이터 타입인 Number, String, Array, Function, Object 가 갖고 있는 기본 특징을 살펴보았습니다. #4. 데이터 타입 편에서 언급했듯이 게임 스타크래프트 종족별로 사용할 수 있는 스킬이 다르듯 JavaScript 데이터 타입별로 사용할 수 있

#10. Primitive && Reference

2022-07-14T09:15:10Z

JavaScript 의 2가진 진영, Primitive 과 Reference 많은 마블 덕후들이 기다리던 영화 "캡틴 아메리카: 시빌워"가 지난 4월 27일에 개봉하였습니다. 영화 내용을 모르는 분들을 위해 간단하게 스토리를 얘기하면 어벤져스와 관련된 사고로 부수적인 피해가 발생하자 정부에서는 어벤져스 맴버를 관리.감독하는 "슈퍼 히어로 등록제" 시스템

#9. Object ( 객체 )

2023-10-04T19:40:07Z

JavaScript 의 심장 , Object ( 객체 ) JavaScript 는 Object-Oriented Programming ( OOP - 객체 지향 프로그래밍 ) 이라고 불립니다. Stephen Gilbert 와 Bill McCarty 저서, "Object-Oriented Design in Java" 에서는 OOP 의 기본 개념을 5가지로 정의하고

<3> head elements

2022-07-14T09:17:43Z

필자가 자주 사용하는 <head> elements 웹사이트 작업을 하다보면 <head> elements 로 무엇을 넣어야 할지 고민할 때가 있습니다. 필자의 경우에는 우선 <meta> 항목으로는 아래 6가지 속성을 기본적으로 사용하는 편입니다. <meta charset="utf-8"><meta name="description" content="이 문서에

<2> Sublime Text 제대로 활용하기

2022-07-14T09:15:10Z

자비스와 같은 존재, Package Control 실무에서 사용되는 웹스타일을 공부하기에 앞서 웹개발에 최적화된 개발 환경을 세팅할 필요가 있습니다. 보통 비전공자분들이 Sublime Text 로 공부하는 경우가 많기 때문에 Sublime Text 를 제대로 활용하기 위한 몇 가지 팁을 전달하고자 합니다. Sublime Text 를 제대로 사용하기 위해

<1> Prologue

2023-06-18T19:40:01Z

실무에서 사용하는 HTML, CSS 스타일이 궁금하다. 재작년 처음 HTML, CSS 기초 공부를 마치고 "이제 웹사이트를 만들어볼까?!!" 하고 자신감있게 에디터를 실행시켰으나... 어디서부터 어떻게 접근해야할지 망막하기만 했습니다. 주요 태그와 속성들에 대해서는 이해를 했는데 이를 완벽하게 버무리는 경험이 전혀 없었기 때문에 한동안 멘붕 상태에 빠지기

#8. Function ( 함수 )

2022-08-21T19:40:07Z

Function ( 함수 ), LASCIATE OGNI SPERANZA, VOI CH'ENTRATE. PER ME SI VA NELLA CITTA DOLENTE, 나를 지나는 사람은 슬픔의 도시로,PER ME SI VA NELL'ETTERNO DOLORE, 나를 지나는

#7. Array ( 배열 )

2022-07-14T09:15:10Z

여러 개의 데이터를 담을 수 있는 창고, Array (배열) 먼저 "사과" 가 담겨있는 변수를 선언해 보겠습니다. var apple = "사과"; 만약 3개의 과일이 담겨있는 변수를 만들고자 한다면 아래처럼 3개의 변수를 생성해야 합니다. var apple = "사과";var banana = "바나나";var orange = "orange"; 그

#6. String ( 문자열 )

2022-07-14T09:15:10Z

자바스크립트의 String ( 문자열 ), "Hello World" 자바스크립트도 다른 개발 언어와 마찬가지로 String 데이터 타입을 가질 수 있습니다. 여기서 얘기하는 String 은 "" (큰 따옴표) 또는 '' (작은 따옴표) 로 감싸진 숫자, 글자, 공백, 구두점 등을 의미하며, 아래 예시 코드처럼 사용해야 합니다. var greetingH

#5. Number ( 수 )

2022-07-14T09:15:10Z

Number 데이터 타입의 형태, Double (실수) 와 Integer (정수) Number 데이터 타입은 크게 실수와 정수, 2가지 형태의 숫자값을 취하고 있습니다. 저를 포함한 수포자분을 위해 간단히 용어 정리를 하자면.... 실수란 유리수와 무리수를 집합체로 0.228192 또는 -3.14920... 같은 숫자를 의미합니다. 정수는 10, 0, -

#4. Data Type ( 데이터 타입 )

2022-07-14T09:15:10Z

데이터 성격을 결정짓는 Data Type 데이터 타입이란 변수에 들어가는 데이터의 유형을 의미합니다. 게임을 예로 들면 스타크래프트에서는 테란, 저그, 프로토스 3가지 종족이 있습니다. 각 종족별로 강점과 약점이 존재하고 사용할 수 있는 스킬 또한 다릅니다. 데이터 타입도 마찬가지입니다. 각각의 데이터 타입별로 서로 다른 스킬과 능력치를 가지고 있습니다