15호의 개발자

[React] 리액트 프로젝트 디렉터리 생성하는 방법 (create-react-app) 리액트 프로젝트 폴더를 생성하기 위해서는 우선 NPM과 create-react-app 모듈이 설치되어있어야 한다. 우선 콘솔(터미널)에서 NPM이 설치되어있는지 확인한다. npm -v 버전이 뜬다면 제대로 설치되어 있는 것이다. 이후 create-react-app 모듈을 설치한다. 콘솔에 아래와 같이 입력한다. sudo npm install -g create-react-app 설치가 완료되었다면 이제 리액트 프로젝트 디렉터리를 만들 수 있다. create-react-app 디렉터리명 create-react-app 뒤에는 만들고자 하는 디렉터리 명을 적으면 된다. 디렉터리가 정상적으로 설치되었다면 이제 리액트를 실행해보..

깃허브에 프로젝트 도메인 만들기 (웹서버 호스팅, GitHub Pages) 직접 개발한 웹 앱을 다른 사람이 쓸 수 있도록 배포하려면 서버를 운영해야하고, 그러기 위해서는 서버용 컴퓨터가 항상 켜져 있어야 하므로 여간 쉬운 일이 아니다. 깃허브에서는 무료 웹서버 호스팅을 지원한다. 이를 이용해 웹 프로그램 배포를 쉽게 할 수 있다. 단, 여기서 말하는 웹 사이트는 정적 웹사이트를 말하며, HTML, CSS, JavaScript로 만든 웹페이지이다. 방법은 아래와 같다. 굉장히 간단하다. 1단계. 깃허브에 리파지토리를 만들고 프로젝트 파일을 올린다. 2단계. Settings > GitHub Pages 또는 Pages > Source에서 None으로 되어있는 부분을 main 또는 master branch로 ..

[React] prop-types 사용법 prop-types는 전달받은 props가 원하는 타입의 props인지 확인해 준다. import React from 'react'; Food.propTypes = { greeting: PropTypes.string.isRequired, name: PropTypes.number.isRequired, } function App() { return ( ); } export default App; greeting은 string이므로 true, name은 number이므로 true가 나온다. isRequied를 적지 않으면 작성한 type뿐만 아니라 undefined일 때도 true가 나온다. propTypes는 코드를 작성 할 때 발생할 수 있는 실수를 줄이는 데 도움..

[React] 리액트의 기초 문법 몇 가지_2탄 '리액트의 기초 문법 몇 가지_1탄'은 아래 링크에서 확인할 수 있다. [React] 리액트의 기초 문법 몇 가지_1탄 [React] 리액트의 기초 문법 몇 가지_1탄 1. 태그는 항상 닫혀있어야 한다 태그는 열린 개수와 동일한 개수만큼 닫혀있어야 한다. HTML에서는 input이나 br 태그의 경우 태그를 닫지 않아도 사용 가능 unit-15.tistory.com 6. props 선언 규칙 import React from 'react'; function Test() { return Hello React } function App() { return ( ); } export default App; HTML에서는 와 같은 형식으로 작성하지만 JSX에서는 와 ..

[React] 리액트의 기초 문법 몇 가지_1탄 1. 태그는 항상 닫혀있어야 한다 태그는 열린 개수와 동일한 개수만큼 닫혀있어야 한다. HTML에서는 input이나 br 태그의 경우 태그를 닫지 않아도 사용 가능하지만 리액트에서는 허용되지 않는다. 태그를 열었으면 그와 매칭되는 태그로 항상 닫아주어야 한다. 단, 컴포넌트와 같이 태그와 태그 사이에 내용이 들어가지 않을 때는 Self Closing 태그를 사용할 수 있다. 이는 태그를 엶과 동시에 닫는다는 의미이다. 2. 함수형 컴포넌트의 이름은 항상 대문자로 시작한다 리액트에서 컴포넌트를 만드는 방식은 두 가지가 있다. 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 이중 함수형 컴포넌트를 선언할 때 함수의 첫 글자는 항상 대문자이어야 한다. import ..

[React] 리액트에서 컴포넌트(component)란? 리액트는 유저 인터페이스 설계를 위한 자바스크립트 라이브러리이다. 리액트를 한 마디로 정의하긴 했지만, 사실 리액트는 그렇게 간단하게 정의내리긴 어렵다. 리액트를 한 줄로 설명할 수 없다면, 리액트를 직접 사용해 보는 것이 무엇인지 정의내리는 것보다 더 의미있을 것이다. 리액트를 사용하면 우리는 컴포넌트를 만들고, 컴포넌트를 보기 좋게 바꾸며, 이 컴포넌트가 데이터를 보여주게 된다. 즉, 리액트에서는 모든 게 컴포넌트이다. 컴포넌트란? (component) 컴포넌트는 html를 반환하는 함수이며, 재사용하기 편한 UI 조각이다. 컴포넌트의 기본 형식은 아래와 같다. 또는 컴포넌트는 항상 대문자로 시작해야 하고, 위와 같은 태그 형식을 Self Cl..

[React] localhost? npm start? React는 코드를 짜면서 실시간으로 수정사항이 바로 반영된다. 이를 localhost:3000에 접속하여 확인해야 한다. localhost:3000은 리액트 앱의 default port 값이다. 이 값은 package.json에서 언제든지 바꿀 수 있다. localhost:3000에 접속하기 위해서는 콘솔 창에서 npm start를 실행해야 한다. 또한 localhost를 계속 유지하고, 실시간으로 refresh되는 것을 보려면 콘솔을 종료하지 않아야 한다. localhost에서 'page not found'라고 뜬다면 이는 서버가 없다는 뜻으로, 서버를 제대로 실행시키지 않았을 가능성이 크다.

localhost에 대해 알아보기 위해 크롬 주소창에 localhost를 입력하면 google에 검색되는 게 아니라 '사이트에 연결할 수 없음'이라는 것이 뜬다. localhost는 무엇이길래 그 자체로 주소가 되는 것일까? host란? localhost를 알기 전에 우선 host가 무엇인지 알아야 한다. host는 사전적인 의미로는 '주인, 주최자'의 의미를 갖고 있고, IT에서 말하는 host란 네트워크를 이용하기 위해 네트워크에 연결된 장치를 의미한다. 그러한 장치로는 컴퓨터가 될 수도 있고 스마트폰이 될 수도 있다. 즉, 검색을 하기 위해 사용하는(=네트워크에 연결된) 컴퓨터나 스마트폰이 host가 되는 것이다. localhost란? localhost는 말 그대로 해석하면 지역(local)+호스트..

[React] props와 state 기본 개념 (+setState, useState) 리액트에서 중요한 두 개념이 바로 props와 state이다. props는 properties(속성)의 줄임말로, 컴포넌트에게 어떤 값을 전달할 때 사용한다. 즉, 부모 컴퍼넌트가 자식 컴퍼넌트에 값을 전달할 때 사용하는 것이다. props에 대한 자세한 설명은 아래 링크에 나와있다. [React] 리액트의 기초 문법 몇 가지_2탄 [React] 리액트의 기초 문법 몇 가지_2탄 '리액트의 기초 문법 몇 가지_1탄'은 아래 링크에서 확인할 수 있다. https://unit-15.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%EA%B8%B0%EC.. uni..

[JavaScript] filter() 함수 간단한 사용 방법 filter() 함수 사용 방법에 대해 간단히 알아보자. 우선, filter()은 true와 false에 반응한다. true를 받으면 filter처리를 하고, false를 받으면 filter처리를 하지 않는다. 먼저 예시부터 봐보자. 1. function alwaysTrue() {return true}; [1, 2, 3, 4].filter(alwaysTrue); //결과값: [1, 2, 3, 4] 항상 true가 반환되는 함수를 만들고, 이를 filter에 집어 넣으면 filter처리한 array는 모든 내용을 가지고 있다. 이번엔 false로 해보자. function alwaysFalse() {return false}; [1, 2, 3, 4..