CategoryReact (15)

[React] 2. JSX에 대해서 간단하게 알아보자

JSX란?JSX의 단어 유래부터 알아봅시다. Javascript + XML을 합쳐서 탄생한 기존 자바스크립트의 확장 문법입니다.그렇다면.. 두가지를 합쳐서 얻는 장점은??개발자가 자바스크립트 내부에 마크업 코드를 작성해 줄 수 있게 해줍니다. 단순히 XML만 아니라 변수나 프로퍼티의 바인딩 기능도 제공합니다JSX 한번 봅시다.ReactDOM.render( Hello, world!, document.getElementById('root'));이전 포스트를 보시면 Render 부분에서 위와 같은 코드를 보셨을 겁니다.h1태그 부분을 따로 변수로 저장해서 아래와 같이 쓸 수 도 있습니다const element = Hello, world!; ReactDOM.render( element, document.getE..

[React] 1. 리액트 시작하기

React 시작하기React로 사이트를 간단하게 만들어도 잘 이해가 되지 않거나 하는 부분이 있어서 시작부터 해보자 하고 작성하는 포스트 입니다.아래 두 내용을 듣고 영감을 받아서 시작하게 되었습니다. React가 당신을 슬프게 하나 React 배우는 법유익한 내용이니 한번 보고 오시면 좋을 듯 합니다.들어가며저 글들을 보고 내린 결론은 바로..!Redux? Flux? 이런거 신경쓰지 말고 페이스북 문서에서 제공하는 기본적인 기능부터 접근을 하자!네 그렇습니다. 벌써 웹팩이니 걸프니 뭐니 여러고민 하지 않고 기초 부터 시작해보도록 하겠습니다. (물론 어느정도 HTML이나 자바스크립트에 대한 지식은 있으셔야 합니다. 여기서 초보는 React 초보..! 정말정말 기초부터 하시는 분들은 About Javasc..

[Redux] GNIN - Simple Posting Site

GNIN이 사이트는 간단한 포스트를 올리는 사이트입니다.개인적으로 아는 Noname이라는 작가분의 닉네임을 기려서 Guest Name Is Noname의 앞글자를 따서 지었습니다.그래서 제목만 보면 마치 비회원도 포스팅할 수 있는 사이트 같지만, 사실 회원제라는게 함정입니다. 😃 React를 사용하다보니 단순 웹페이지라기 보다는 웹어플리케이션이라는 느낌으로 만들었습니다. 사이트 주소GNIN - gnin.herokuapp.com개발환경Server : Node.JS 서버 환경은 Node.JS(Express.js)입니다. 빌더는 Webpack을 사용하였습니다. FrontEnd : React + Redux (로그인, 프로필 페이지 제외) 로그인, 프로필 수정 페이지는 간단한 html페이지지만 메인기능은 포스트페..