본문 바로가기

전체 글

 (69)
[React.js] State State란 : 계속해서 변화하는 특정 상태로 상태에 따라 각각 다른 동작을 수행하게 하는 것 : 컴포넌트 안에서 관리되며 하나의 컴포넌트가 여러 state를 가질 수 있다. : 짧은 코드와 유연한 문법으로 화면에 나타나는 데이터를 쉽게 교체하고 업데이트할 수 있게 해준다. : props와의 차이는 사용하는 쪽과 구현하는 쪽을 철저히 분리시켜 양쪽의 편의성을 도모하는 것에 있다. state 사용하기 import { useState } from "react"; const App = () => { const [value, setValue] = useState(초기값); return ... } : 우선 상태 지정을 위해서는 React의 useState를 import 해주어야 한다. : useState의 인자는..
[React.js] JSX JSX (JavaScript XML) : 자바스크립트의 확장문법이자 자바스크립트와 html을 혼합해서 쓸 수 있는 React에서 주로 쓰는 표현식 1. 닫힘 규칙 : 여는 태그가 있으면 닫는 태그도 있어야 한다. : a, image, br 같은 경우는 열자마자 바로 닫는 self closing tag로 사용이 가능하다. (ex. ) 2. 반드시 하나의 부모를 가져야 한다. : JSX에서 컴포넌트를 만들어서 리턴하려면 반드시 하나의 부모로 묶어서 리턴해야 한다. : 하지만 하나의 부모로 묶고 싶지 않을 때는 React.Fragment를 사용해 준다. React.Fragment를 사용하기 위해 우선 React를 import 해주고 최상위 태그에 로 지정해 준다. 빈태그로도 가능하다. //App.js impo..
[React.js] React 시작하기 Create React App : React는 Node.js 기반의 JavaScript 라이브러리로 React를 다방면에서 도와줄 추가적인 라이브러리가 필요한데 대표적으로 Webpack과 Babel이 있다. *Webpack : 모듈 번들 라이브러리로 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 패키지 *Babel : 자바스크립트의 컴파일러로 JSX라는 자바스크립트와 html을 혼용하여 사용하는 문법등의 여러 가지 쉽고 간단한 자바스크립트 코드를 작성할 수 있게 도와주는 패키지 : 이런 부수적인 패키지를 직접 설치하지않아도 create-react-app 명령어를 통해 react app을 set up 할 수 있다. : React App을 생성할 폴더를 오픈 후 터미널에서 아래 명령어를 통해 생성해 준다..
[React.js] React.js란 React란? : Facebook에서 제공해 주는 프론트엔드 라이브러리 : 싱글 페이지 애플리케이션의 UI 개발을 위한 자바스크립트 라이브러리 React 특징 1. Component 기반의 UI 라이브러리 : React는 Component 기반의 UI 라이브러리로 HTML의 모든 요소들을 컴포넌트화하여 재사용할 수 있다. : 컴포넌트가 필요한 페이지들이 반복해서 코드를 입력할 필요없이 컴포넌트 이름만을 가져와 사용이 가능하다. : 기존엔 코드가 중복될 경우 중복되는 코드들을 각각 수정해야했다면, 컴포넌트화 방식에서는 컴포넌트만을 수정하여 공통으로 사용되는 요소에 수정사항이나 문제가 발생했을 때 유지보수하기 쉬워진다. 2. 선언형 프로그래밍 : React는 선언형 프로그래밍을 추구한다. 프로그래밍은 명령형..
[Front-End] Angular, Vue, React 시대가 지나면서 사용자들이 원하는 기능이 많아지고 웹이 발전함에 따라 프론트엔드 기술에도 변화가 일어났다. 1세대 2세대 3세대 HTML / CSS / JavaScript jQuery Angular, Vue, React 기본적인 HTML, CSS, JavaScript로 DOM을 조작하고 이벤트를 발생시킨다. JavaScript에서 빈번히 사용되는 기능들을 모아 사용이 가능하지만 결국 DOM을 조작한다는 행위에서 벗어나지 못해 한계에 도달한다. jQuery 한계 이후 패러다임을 완전히 바꾼 새로운 프레임워크 이 중 Angular, Vue, React 각각의 의미와 차이에 대해 살펴보겠다. 1. Angular : 2010년 Google에서 개발한 프레임워크 : TypeScript 기반으로 매우 안정적이고 잘..
[JavaScript] call, apply, bind 자바스크립트에서 함수를 호출하는 방법에는 기본적으로 사용되는 함수명 뒤에 ()를 붙여 호출하는 방법 외에 call, apply, bind를 이용하는 방법이 있다. this가 함수 호출식에 따라 객체를 가리켰다면 call, apply, bind는 함수의 this를 명시적으로 바인딩해 직접 실행문맥을 결정할 때 사용된다. 1. call func.call(thisArg[, arg1[, arg2[, ...]]]) - thisArg: func 호출에 제공되는 this의 값 - arg1, arg2, ...: func이 호출되어야 하는 인수 let person1 = { name: 'Jo' }; let person2 = { name: 'Kim', study: function(some) { console.log(this..
[JavaScript] 모듈 내보내기/불러오기 자바스크립트를 서버에서 사용할 수 있는 큰 이유 중 하나가 모듈화가 가능하기 때문이다. 그리고 이런 자바스크립트의 모듈화 명세를 만든 대표적인 그룹 중 하나로 Common.js가 있고 Common.js의 명세가 현재 node의 표준이 되어있다. node의 표준이 바로 require, module.exports()이다. 그런데 ES6로 넘어오면서 자바스크립트 자체에서 ES6 Module이라는 이름으로 모듈화를 지원하기 시작했고 그것이 import와 export이다. 1. Common.js 기반 모듈 내보내기/불러오기 1-1. 복수 객체 내보내기/불러오기 : 복수 객체를 내보낼 경우에는 exports 변수의 속성으로 할당한다. : 모듈을 가져올 때는 require()을 사용한다. //index.js cons..
[JavaScript] Node.js, NPM Node.js : 크롬의 v8엔진을 이용해 자바스크립트를 브라우저가 아닌 곳에서도 실행시킬 수 있게 해주는 자바스크립트의 실행환경 (Javascript's Runtime) NPM (Node Package Manager) : Node.js의 패키지 관리 도구 npm init : npm init 명령어를 통해 package.json파일 생성 : package name을 지정해 주고 이후 version, description, entry point 등 나오는 설정값들은 본인에 맞게 지정해 주거나 엔터를 클릭해 넘겨주면 자동으로 생성이 된다. package.json : 패키지의 정보를 기록하는 환경설정 파일 : 이름, 버전, 설명, 진입파일, 스크립트, 저자, 라이센스 등을 지정 : 진입파일은 여러파일 중 패키..

티스토리툴바