소소한 기록 방

보통 우리가 페이지 이동을 구현 할 때 를 사용하여 만들었을 것이다. 하지만 a 태그를 사용 했을 때 문제가 있다. 는 페이지가 이동 할 때 js와 css 모두 다시 다운로드 한다는 문제점이 있다. React Application은 SPA 방식으로 한 번 다운로드 하고 나선 다운로드 하지 않기 때문에 react-router-dom을 이용하여 Link를 사용해주어야 한다. App.js import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './pages/Home'; import Profile from './pages/Profile'; import About from './pages/About'; import No..

다이나믹 라우팅이란? 여기서 말하는 다이나믹 라우팅이란 다음과 같다. http://localhost:3000/profile - 이런 방식의 라우팅만 커버하고 있지만 http://localhost:3000/profile/1 - 원래 있던 라우팅 되는 path 뒤에 또 다른 값이 붙었을 때 처리하는 방식을 말한다. Dynamic Routing by ID import { BrowserRouter, Route } from "react-router-dom"; import About from "./pages/About"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; function App() { return ( /*새로 추가된 코드..

React가 나오기 전 전통적인 방식은 다음 그림과 같다. url이라고 불리는 단위를 바탕으로 해당 페이지의 html, css, js를 서버에게 url에 해당하는 html을 받아왔다. React로 넘어오면서 url을 받아오는 것이 아니고, 큰 앱 전체를 받아왔다. 각각의 페이지를 요청하는 것이 아닌 전체(Single Page Application)을 받아오는 방식을 사용하기 시작했다. SPA의 라우팅 과정 브라우저에서 최초에 '/'(root) 경로를 요청하면 서버에서 React Web App을 내려준다. 내려 받은 React App에서 '/' 경로에 맞는 컴포넌트를 먼저 보여준다. React App에서 다른 페이지로 이동하는 동작을 수행하게 된다면 새로운 경로의 컴포넌트를 보여준다. React 범주에서 ..

Class Component 작성법 위와 같이 작성하면 Class Component를 사용할 수 있다. Class Component 정의하기 class ClassComponent extends React.Component{ //React안에 Component라는 클래스를 상속 받음 render(){ //render 메서드는 정의 되어야하고 return 값이 꼭 있어야 함 return Hello; } } ClassComponent라는 이름의 클래스 컴포넌트를 React 라이브러리 안에 있는 Component 클래스로부터 상속받았다. Component 클래스 안에는 render() 메서드 값이 필요하며 render 값에는 꼭 return 값이 있어야 한다. Class Component 사용하기 ReactDO..

CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 브라우저가 렌더하는 방식들을 의미하는 단어들이다. CSR Client Side Rendering의 약자이다. 서버 쪽에서 렌더링 준비를 마쳤을 때 클라이언트에게 전달하는 방식을 의미한다. 과정 설명 어떤 특정 도메인, 즉 웹 서비스에 접속 하게 될 때 그 웹 서비스에서 html을 먼저 다운로드하게 되고 html 화면을 보여주고, html 안에 있는 DOM 요소가 보이거나 CSS가 적용된 스타일이 보인다. React에선 html은 빈 껍데기 html만 내려오게 되고 Browser가 JS 파일을 요청하게 됩니다. (React는 JS파일이 모두 존재 해야 UI가 그려진다) JS 파일 안에는 React Web A..

BootStrap vs React BootStrap 일단 React BootStrap은 BootStrap의 코드를 기초로 개발 되었기 때문에, BootStrap Library를 꼭 가지고 있어야 구동이 가능하다. 일반 BootStrap말고 React-BootStrap, Vue-BootStrap 같이 일반적으로 많이 사용되는 반응형 웹 프레임워크같은 경우엔 본인들만의 BootStrap을 따로 개발하여 사용하고 있다. 일반 부트스트랩을 사용하지 않는 이유는 간단하다. BootStrap 4 기준으로 작성 된 부트스트랩 코드를 살펴보자 import React from 'react'; const ReactWithBootstrap = () => { return ( Email Password Address Addre..

🕶️ State에 관한 고찰Flutter에서 Widget은 꼭 필요한 요소이다. Flutter에서 UI 구성요소 == Widget이라고 보아도 무방하다. 모든 widget은 자신이 stateless widget인지 stateful widget인지 결정을 해줘야 한다.일단 Widget의 종류를 알기 위해 가장 먼저 알아야 할 선수 지식이 있다. 바로 State(상태)이다.예를 들어 타이머 앱이 있다고 생각 하자. 타이머 앱에 있는 StopWatch는 1초마다 화면을 전환 해줘야 한다.나의 focus it에서class timerPage extends StatefulWidget { const timerPage({Key? key}) : super(key: key); @override _timerPageS..

PUB.DEVCross Flatform Framework의 장점을 꼽자면 ReactNative와 Flutter의 방대한 오픈 소스이다.Flutter 개발자들 사이에선, Widget과 패키지를 레고처럼 조립하면 앱이 완성된다고 한다.The official package repository for Dart and Flutter apps.pub.dev는 dart와 flutter의 공식 패키지 저장소라고 볼 수 있다.✔ Flutter 패키지 추가 방법Example) permission_handler 패키지 설치하기pubspec.yaml 파일에 버전을 기록한다.name: description: A new Flutter project.# 다음은 앱 버전 및 빌드 번호를 정의합니다.# 버전은 점으로 구분된 세개의 숫..