본문 바로가기

장원익 기술블로그

📺 Front End/- React, Next.js42

[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (2) 부제 :: Broswer History API를 사용해서 페이지 라우팅 하기 이 글은 리액트의 초심자들을 위한 글로 깊은 내용은 최대한 배제하고 쉬운 개념에 대해 작성하였고, 리액트의 진입 장벅을 낮추기 위한 요소로 어려운 내용이 생략되어 있을 수도 있습니다. 이 부분은 꽤나 핵심적이라고 생각하기 때문에 3부작으로 나눠서 설명해보도록 하겠다. 해당 글에 대해서 본인이 이 부분은 넘어가도 되겠다고 생각하는 부분은 넘어가서 확인하는 것을 권장한다. 하지만 길지 않은 글이므로 가볍게 읽는 것도 좋은 방법이다. 1부 리액트가 페이지를 라우팅 하는 방법 2부 Broswer History API를 사용해서 페이지 라우팅 하기 3부 react-router-dom을 이용해서 페이지 라우팅 하기 우리는 저번 시간에 리액트가 페이지에서 어떤 식으로 라우팅 되길 원하는지? 에 대해서 잠깐 알아보았다.. 2020. 7. 20.

[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (1) 부제 :: Single Page Application이 무엇이고 어떻게 리액트에서 사용할까? 이 글은 리액트의 초심자들을 위한 글로 깊은 내용은 최대한 배제하고 쉬운 개념에 대해 작성하였고, 리액트의 진입 장벅을 낮추기 위한 요소로 어려운 내용이 생략되어 있을 수도 있습니다. 이 부분은 꽤나 핵심적이라고 생각하기 때문에 3부작으로 나눠서 설명해보도록 하겠다. 해당 글에 대해서 본인이 이 부분은 넘어가도 되겠다고 생각하는 부분은 넘어가서 확인하는 것을 권장한다. 하지만 길지 않은 글이므로 가볍게 읽는 것도 좋은 방법이다. 1부 리액트가 페이지를 라우팅 하는 방법 2부 Broswer History API를 사용해서 페이지 라우팅 하기 3부 react-router-dom을 이용해서 페이지 라우팅 하기 이번 주제에 대해서 이야기를 하기 위해선 우선 페이지가 어떤 방식으로 사용자에게 보여지는지 알아야 한.. 2020. 7. 20.

[리액트 분석하기] 리액트의 핵심 JSX에 대해 알아보자. (부제 :: 리액트에서는 JSX를 어떻게 이용할까?) 우리는 지금까지 계속 리액트에 대한 핵심에 대해서 이야기를 했었다. 이제 그 리액트라는 것이 어떤 식으로 돌아가는지 확인해보자. JSX JSX는 JavascriptXML이라고 하는데, 이는 Javascript도 아니고 HTML도 아닌 것이다. 정확히는 스크립트에 확장 문법이라고 하는 것인데, 우리는 리액트로 이 JSX를 할용하여 UI를 구성할 것이다. 이렇게 말 하면 너무 어려우므로 우리가 create-react-app을 통해서 프로젝트를 생성했다고 가정하고, 해당 코드에서 JSX란 무엇인지 보이겠다. 코드로 봐보자 우리의 프로젝트에서 Index.js에 있는 코드를 한 번 봐보자. ReactDOM.render();라는 구문에서 우리는 JSX를 사용할 것이다. 원래 코드를 지워보고 다음과 같이 구성해보자... 2020. 7. 20.

[리액트 분석하기] Create-React-App으로 리액트 개발 환경을 구축해보자. 지난 시간에는 왜 우리는 리액트와 같은 라이브러리를 사용해야 하는지와 Create-React-App이 무엇인지에 대해서 알아보았다. 이번 시간에는 create-reacat-app으로 실제로 리액트 개발을 위한 개발 환경을 구축해보자. 해당 게시물의 소스코드는 리액트 공식 홈페이지의 이미지를 가져다 쓴 글입니다. 리액트는 4 가지의 방식으로 Create-React-App을 사용할 수 있다. NPM NPX Yarn CDN (react) 별로 어렵지 않으므로 차례대로 봐보자. 이들중에 꼭 무엇을 써야한다는 것은 없다. 그냥 원하는 도구로 시작을 하면된다. npm으로 create-react-app 시작하기 npm install -g 는 pc에 global하게 설정한다는 것을 의미합니다. npx로 create-r.. 2020. 7. 20.

[리액트 분석하기] React를 분석해보자. (부제 :: create-react-app에 대해 분석해보자) 리액트란 무엇일까? 리액트는 페이스북에서 개발하고 관리하는 UI 라이브러리다. 사람들이 대부분 오해하고 있는데, 리액트는 프레임워크가 아니라 라이브러리이다. 우리가 알고있는 여러 javascript 프레임워크들과 확실히 다르다. 사람들이 오해하는 또 다른 내용은 React는 웹 개발에 모든 것을 제공한다고 알고 있는데, 사실 React는 UI를 조금 더 효율적으로 구조적으로 작성할 수 있게 해주는 UI라이브러리이다. React 입문하기 우리가 라이브러리로 개발을 하기 위해선 우리에게 필요한 라우팅, 빌드 환경 구성, 분석등과 같은 세팅을 직접 구성해야 한다는 점이 있다. 예전에는 개인들이 내는 Bolierplate 리액트에 의존해서 개발을 했다고 하는데, 그에 따른 각각 다른 환경에 불편함을 느낀 개발자.. 2020. 7. 19.

[리액트 분석하기] 우리는 왜 자바스크립트 라이브러리나 프레임워크를 이용해야 할까? 우리는 웹을 개발하려면 HTML / CSS / Javascript를 사용해야 한다는 것은 개발을 배워본 누구나도 쉽게 생각해 낼 수 있다. 하지만 우리는 왜 React, Vue, Angular와 같은 라이브러리나 프레임워크를 사용해서 개발을 해야 할까? 단지 쉽게 개발을 하기 위해서? 편한 구조를 위해서? 그에 대한 대답을 제대로 할 수 있는 사람이 되어보자. 사용해야하는 이유 사용해야 하는 가장 큰 이유를 먼저 이야기 해보자면 *_UI 업데이트 *_이다. 우리가 만들 웹 앱은 단순히 정보를 보여주는 것에서 끝나는 게 아니라, 프로그램의 상태가 변경된다면 동적으로 사용자에게도 변경된 UI를 제공하여 반응 해야 한다. 그리고 라이브러리나 프레임워크는 UI를 자동으로 업데이트 해준다는 점에서 우리는 이에 대.. 2020. 7. 19.

이전 1 ··· 4 5 6 7 다음

티스토리툴바