반응형 개발/react 홈페이지 만들기4 리액트 웹페이지 만들기 ep.3 - 모바일,데스크톱 구분하여 웹페이지 띄우기(react-device-detect) 2022.03.16 - [개발/리액트 홈페이지 만들기] - 리액트 웹페이지 만들기 ep.1 - 환경 구축, react-create-app 설치 및 테스트 2022.03.18 - [개발/리액트 홈페이지 만들기] - 리액트 웹페이지 만들기 ep.2 - 컴포넌트(component), JSX의 이해 (feat. 화살표함수) 리액트 모바일 웹개발을 하려고 하는데 기왕이면 모바일 뷰와 데스트톱 뷰를 구분하여 만들고 싶습니다. 네이버나 다음을 접속할 때 데스크톱으로 접속하면 데스트톱 뷰, 모바일로 접속하면 모바일 뷰로 연결되는 것과 동일하게 말이죠. 즉 데스트톱과 모바일을 감지하여 반응형으로 사이트를 만드는 것입니다. 반응형 웹페이지는 접속형태에 따라 사이즈를 조절하도록 하는 것이 궁극적인 목표이지만 일단 데스크톱과.. 2022. 3. 19. 리액트 웹페이지 만들기 ep.2 - 컴포넌트(component), JSX의 이해 (feat. 화살표함수) 2022.03.16 - [개발/리액트 홈페이지 만들기] - 리액트 웹페이지 만들기 ep.1 - 환경 구축, react-create-app 설치 및 테스트 앞서 react-create-app 을 사용하여 project를 생성한 후, npm start 를 통해 간단히 테스트 해보았습니다. 먼저 프로젝트를 생성하면 폴더 내에 여러 파일이 생성됩니다. npm start 명령어를 입력하면 여기에서 index.js 를 실행 시켜줍니다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; R.. 2022. 3. 18. 리액트 웹페이지 만들기 ep.1 - 환경 구축, react-create-app 설치 및 테스트 리액트 웹페이지를 만들기 위해 환경구축과 간단한 테스트를 시작해봅시다. 저는 M1 맥북 에어를 사용하고 있는점 참고해주세요. 필요한 사항은 다음과 같습니다. 1. visual studio code (VSCode) - code 편집 툴(IDE) 2. node.js, npm - 자바스크립트 런타임 VSCode 설치 code 편집 툴인 VSCode 는 아래 페이지에서 다운받아 설치하시면 됩니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and .. 2022. 3. 16. 리액트 웹페이지 만들기 ep.0 - 왜? 그리고 계획 개발자라면 한번쯤 리액트라는 단어를 들어봤을 것 같습니다. 리액트는 요즘 가장 핫한 프론트앤트 라이브러리(React.js) 입니다. 2021 스택오버플로우 개발자 선호도 조사에 따르면, 웹 프레임워크 및 라이브러리 부문 40% 이상을 차지하고 있을 정도입니다. 트랜드에 민감한 저로써는 가장 유명세를 떨치고 있는 리액트를 공부해봐야겠다는 생각이 듭니다. 리액트를 이용해 홈페이지를 제작하기 위해서는 자바스크립트, 데이터베이스 등 다루어야할 기술이 많습니다. 리액트가 무엇이고, 어떠한 목적으로 만들어졌는지, 장황한 역사와 구조를 자세히 알아보기보다는, 직접 홈페이지를 만들면서 그때 그때 필요한 부분을 정리하고 기록하고자 합니다. 가장 기초부터 다져나가는 건 너무 재미없잖아요. 계획 - 리액트로 모바일 홈페이지.. 2022. 3. 14. 이전 1 다음 반응형
