728x90 반응형 SMALL React JS5 단일 페이지 애플리케이션 만들기 리액트 애플리케이션의 페이지 전환은 단일 페이지 애플리케이션(Single Page Application, SPA) 방식으로 개발하는 것이 정석입니다. 단일 페이지 애플리케이션은 초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 웹 애플리케이션 입니다. 전통적인 방식의 웹 페이지는 페이지를 전환할 때마다 랜더링 결과를 서버에서 받기 때문에 화면이 깜빡이는 단점이 있습니다. 단일 페이지 애플리케이션은 페이지 전환에 의한 랜더링을 클라이언트에서 처리하기 때문에 마치 네이티브 애플리케이션 처럼 자연스럽게 동작합니다. 브라우저 히스토리 API 먼저 단일 페이지 애플리케이션을 구현하기 위해 필요한 브라우저 히스토리 API가 있습니다. 히스토리 API란? 단일 페이지 애플리케이션 구.. 2022. 1. 23. [React] react-router-dom 설치 후 Route 시 오류 / 해결방법 React-router-dom 실습하는 도중 localhost :3000 화면은 오류없이 흰창으로 나오지만 콘솔에서 많은 오류가 생겼습니다... 이중 index.tsx:19 Uncaught Error: A is only ever to be used as the child of element, never rendered directly. Please wrap your in a . 이 주된 이유였습니다 ㅠㅠ3개 전부 가 원인인것을 알수있습니다. 문제의 원인? react-router-dom 라이브러리가 버전 업데이트가 되어서 최신버전에 맞게 설치해주거나 이전 버전을 설치하는 방법이있습니다. 제가 사용하고있는 router-dom 라이브러리 버전을 먼저 확인해보겠습니다. 저에게 설치되어진 버전은 6.2.1 버전입.. 2022. 1. 23. CSS 작성 방법 "결정"하기 웹 어플리케이션을 개발할 때 돔 요소에 스타일을 적용하기 위해서 CSS 를 이용합니다. CSS 를 작성하는 전통적인 방법은 CSS를 별도의 파일로 작성하고 HTML의 link 태그를 이용해서 사용자에게 전달하는 것입니다. 순수 CSS 문법은 코드를 재사용하기 힘들기 때문에 SaSS (syntactically awesome stylesheets)를 이용하기도 합니다. SaSS 에서는 변수와 믹스인 개념이 있어서 중복 코드를 많이 줄일 수 있습니다. 리액트의 UI는 컴포넌트의 조합으로 표현되며, 컴포넌트 하나를 잘 만들어서 여러 곳에 재사용하는 것이 좋습니다. 그렇게 하기 위해서 각 컴포넌트는 서로 간의 의존성을 최소화 하면서 내부적으로는 응집도를 높여주어야 합니다. 컴포넌트는 화면에 보이는 한 부분이므로 .. 2022. 1. 22. AUTOPREFIXER CSS에서 비교적 최신 기능을 사용하려면 벤더 접두사(Vendor Prefix) 가 붙은 이름을 사용합니다. 벤더 접두사를 붙이는 것은 create-react-app 에서는 autoprefixer 패키지를 통해서 벤더 접두사가 자동으로 붙습니다. create-react-app 에서 최신 CSS 기능을 사용했을 때 실제로 벤더 접두사가 자동으로 붙는지 확인해 보겠습니다. 최신 CSS 기능을 사용했을 때 실제로 벤더 접두사가 자동으로 붙는지 확인해 보겠습니다. src 폴더 밑에 test.css 파일을 만들고 다음 내용을 입력한 후 App.js 에서 test.css 파일을 가져오면 되겠습니다. .prefix-example { writing-mode: horizontal-tb; scroll-snap-type: .. 2022. 1. 21. Create-react-app으로 시작하기 Create-react-app은 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공합니다. 이것을 이용하면 기존 기능을 개선하거나 새로운 기능을 추가했을때 패키지 버전만 올리면 됩니다. 앞에서 다룬 바벨과 웹팩도 create-react-app에 포함되어 있습니다. 또 다른 장점은 어떤 문제를 해결하기 위한 선택지가 여러 개일 때 create-react-app에서 가장 합리적인 선택을 ㅐ 준다는 점입니다. 현재 자바스크립트 생태계는 춘추 전국 시대라고 볼수도 있습니다. 그래서 한번 써보는 것을 배워보겠습니다. Create-react-app 사용해보기 다음 명령어를 입력하면 create-react-app을 이용한 개발 환경이 설치됩니다. npx create-react-app cra-test 그러기위해 새로운.. 2022. 1. 20. 이전 1 다음 728x90 반응형 LIST
