분류 전체보기 (16) 썸네일형 리스트형 왜 리액트에서 React를 임포트해야 할까? 리액트 프로그래밍을 하다 보면 React라는 객체를 쓰지 않음에도 임포트하는 경우가 있다. 예를 들어, 아래 코드에서 React는 쓰이지 않았다. 하지만 React는 꼭 임포트해주어야 한다. 그 이유가 무엇일까? import React from "react"; export default function App() { return example } 위와 같은 코드는 빌드될 때 바벨을 통해 변환이 되는데, 변환된 코드는 다음과 같다. import React from "react"; export default function App() { return /*#__PURE__*/React.createElement("p", null, "example"); } 위 코드를 보면 React를 사용하는 것을 볼 수 있다... Vim 입문기와 느낀 점 Vim이란? Vim 은 유닉스에서 많이 쓰이는 문서 편집기인 Vi의 향상된 버전, Vi Improved를 뜻한다. 명령 모드, 편집 모드가 따로 존재하며, 방향키를 사용하지 않는 등의 특징이 있다. Vim은 Vim 에디터 자체를 사용하여 이용할 수도 있지만, 다른 IDE나 코드 에디터의 익스텐션 등을 이용해서도 Vim의 기능을 사용할 수 있다. 나 또한 Visual Studio Code의 Vim 익스텐션을 사용하고 있다. Vim을 사용하게 된 이유 멋있다. 이 점이 Vim을 배워보겠다는 생각이 들게 한 단순하면서도 가장 큰 이유이다. 아직 코딩 초보이기 때문에 그럴 수도 있지만 전부터 작은 키보드 하나만을 가지고 빠르게 코딩하는 모습이 참 멋있다는 생각을 했다. 그런 모습이 프로그래머로서 별로 의미가 없.. [리액트/노드 기초] 영화 사이트 만들기 (3) - Grid Cards 컴포넌트 만들기 이번 글에서는 Grid Cards 컴포넌트를 만들어보겠습니다. Grid Cards 만들기 Grid Component는 기본적으로 ant design을 이용하겠습니다. 기본적으로 Row 컴포넌트 안에 Col 컴포넌트를 넣어주면 되고, 여기에서는 Col 컴포넌트를 이용해 GridCards 컴포넌트를 만들어주겠습니다. 관련된 내용은 아래에서 확인할 수 있습니다. https://ant.design/components/grid/ Grid - Ant Design Child elements depending on the value of the start,center, end,space-between, space-around, which are defined in its parent node typesetting mo.. [리액트/노드 기초] 영화 사이트 만들기 (2) - Main Image 컴포넌트 만들기 이번 글에서는 Main Image 컴포넌트를 만들어보도록 하겠습니다. MainImage 컴포넌트 만들기 src/components/views/LandingPage/Sections/MainImage.js를 만들고 다음과 같은 코드를 작성해줍니다. // src/components/views/LandingPage/Sections/MainImage.jㄴ import React from "react"; export default function MainImage(props) { return ( {props.title} {props.description} ); } 코드에서 볼 수 있듯이, props를 통해 image(메인 영화의 이미지), title, description을 받아오고, 그것들을 이용해 MainIma.. [리액트/노드 기초] 영화 사이트 만들기 (1) - Landing Page 템플릿 만들기, API 정보 받아오기 들어가기 앞서 이번 글에서부터는 저번에 만든 로그인 시스템을 이용해서 영화 정보 사이트를 만들도록 하겠습니다. 로그인 시스템이 구현된 상태에서 시작하기 때문에 지난 포스팅을 먼저 보고 와주시기 바랍니다. https://joonganglib.tistory.com/5 [리액트/노드 기초] 로그인 시스템 만들기 (1) - 미들웨어 설치, 회원가입 기능 안녕하세요 오늘은 대부분의 웹사이트에서 필수적인 기능인 로그인 시스템을 만들어 보겠습니다. 로그인 시스템은 단순히 로그인만 있는 것이 아니라 회원가입, 로그인, 로그아웃, 유저 인증 joonganglib.tistory.com LandingPage 만들기 LandingPage는 movie API에서 인기있는 영화 데이터를 가져와 그리드 형태로 배치하여 만들겠습니다.. [리액트/노드 기초] 로그인 시스템 만들기 (8) - 회원가입 페이지, 로그아웃 만들기 이번 글에서는 회원가입 페이지와 로그아웃 기능을 만들어 보겠습니다. 회원가입 페이지 만들기 회원가입 페이지의 레이아웃은 기본적으로 로그인 페이지와 거의 비슷한 모습을 하고 있습니다. 따라서 로그인 페이지를 변형하여 다음과 같은 기본 형태를 만들어줍니다. import React, { useState } from 'react'; import { useDispatch } from 'react-redux'; import { withRouter } from 'react-router-dom'; function RegisterPage(props) { // redux의 dispatch const dispatch = useDispatch(); // react hook에서 state 사용 const [Email, setE.. [리액트/노드 기초] 로그인 시스템 만들기 (7) - 로그인 페이지 만들기 안녕하세요 이번 글에서는 실제로 리액트 컴포넌트인 로그인 페이지를 만들어보도록 하겠습니다. react hook을 이용한 함수형 컴포넌트로 만들 것이고, 클래스형으로 만들어도 무방합니다. State 설정, 컴포넌트 레이아웃 함수형 컴포넌트는 state를 설정하는 방법이 클래스형과 조금 다릅니다. hook을 이용해서 컴포넌트 안에 다음과 같이 작성해줍니다. import React, { useState } from 'react'; // react hook에서 state 사용. 컴포넌트 안에 작성 const [Email, setEmail] = useState(''); const [Password, setPassword] = useState(''); 이렇게 해주면 Email 과 Password라는 state를 이.. [리액트/노드 기초] 로그인 시스템 만들기 (6) - 리액트 라우터, 리덕스, 프록시 설정 안녕하세요 오늘은 저번 글에 이어서 리액트 프로젝트에서 필요한 여러가지 설정을 해보겠습니다. react-router-dom을 이용해 라우트 설정을 해주고, state를 관리하는 redux를 설정해주고, 개발할 때의 편의를 위해 프록시 설정을 해주도록 하겠습니다. 리액트 라우터 설정 리액트 라우터는 저번 글에서 설치한 react-router-dom을 이용합니다. 리액트 라우터를 통해 url에 따라 리액트 페이지로 라우팅해줄 수 있습니다. 리액트 라우터는 src의 App.js에서 설정합니다. App.js를 다음과 같이 바꿔줍니다. // client/src/App.js import './App.css'; // 리액트 라우터 돔에서 필요한 기능들을 불러오기. import { BrowserRouter as Rou.. 이전 1 2 다음
