본문 바로가기

장원익 기술블로그

📺 Front End71

[Javascript-Core] Execution Context, 실행 문맥에 관하여 알아보자. Execution Context 실행 컨텍스트는 실행할 코드에 필요한 환경 정보를 모은 객체를 뜻한다. 이는, OS를 학습하다가 마주하게 되는 실행 문맥, 실행 컨텍스트, 익스큐션 컨텍스트와 다들 동일한 개념이다. 조금 쉽게 이야기 한다면 예를 들어서 우리가 var a = 10; function hello() { var b = "hello"; return b; } 와 같은 코드가 있다면 여기서 실행에 필요한 환경 정보는 var a = 10과 hello()함수와 var b = 'hello'가 있을 것이다. 식별자와 변수등과 같은 정보를 가리키고 있는 객체를 실행 컨텍스트라고 한다. 이런 실행 컨텍스트는 콜 스택에 의해 실행 환경에 대한 순서를 보장하는데, 순차적으로 코드를 Interpreting 하면서 콜.. 2020. 7. 27.

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

[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (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.

이전 1 ··· 7 8 9 10 11 12 다음

티스토리툴바