본문 바로가기

Frontend

Next.js 사용하기 React는 라이브러리이며, 서버로부터 데이터를 받아와 브라우저에서 실시간으로 HTML을 만드는 Client Side Rendering 방식이다. 이러한 방식은 구글 검색 노출에 오랜 시간이 소요되고, 첫 페이지 로딩 속도가 느리다는 단점이 있다. 반면에, Next.js는 풀스택 프레임워크이며, 프론트엔드(React 문법)랑 백엔드를 모두 개발할 수 있다. 또한, Server Side Rendering 방식으로 모든 정보가 담긴 HTML을 서버가 만들어서 전송해 준다. 💬 React는 라이브러리로 우리가 모든 것을 직접 생성하고 설정해주어야 했지만, Next에서는 이미 만들어져 있어 Next 규칙에 따라 코드만 작성하면 된다. 💬 Next.js는 React 문법을 사용해서 웹 페이지를 제작한다. 장점 ◼.. 더보기
CSR과 SSR, SSG ◼ 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 브라우저 렌더링이라고 한다. ◼ 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 화면에 그려주는 것이다. ◼ 그리고 이러한 브라우저 렌더링은 크게 CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation)으로 나뉘어 이에 대해 알아보고자 한다. CSR(Client Side Rendering) CSR은 클라이언트(브라우저)에서 렌더링이 이루어지는 방식을 말한다. 즉, 클라이언트는 서버로부터 HTML, CSS, JavaScript를 받아와서, 받아온 파일들을 이용.. 더보기
TypeScript 사용하기 /* JavaScript */ 10 - '1' // 9 (Dynamic Typing) /* TypeScript */ 10 - '1' // 컴파일 시점에 에러로 출력 ◼ JavaScript는 타입에 관련된 에러를 런타임 시점에 확인할 수 있다. 이러한 문제점을 개선하기 위해서 TypeScript가 나왔다. ◼ 즉, TypeScript는 JavaScript + Type 문법으로 JavaScript에 타입에 대한 내용을 확장시킨 언어이다. ◼ 컴파일 시점에 타입에 관련된 에러를 보여주기 때문에, 버그를 방지할 수 있다. 프로젝트에 적용하기 ✔ 별다른 라이브러리 없이 사용하기 ◼ nodejs 설치하기 ◼ npm install -g typescript 명령어로 설치한다. { "compilerOptions": { .. 더보기
React 성능 개선하기 📒 왜? ◼ React는 SPA로, 사용자가 처음 메인 페이지에 접속하면, 모든 js 파일을 다운로드 하여 초기 로딩 속도가 느려, 성능 개선 작업을 위한 방법에 대해서 알아보고자 한다. 📒 React 성능 개선하기 ✔ 개발 도구 설치 ◼ React Developer Tools를 설치한다. ◼ Components 창에서 Component의 구조, Props 등을 확인할 수 있다. ◼ Profiler 창에서 성능 저하가 발생하고 있는 Component를 찾을 수 있다. (녹화 버튼을 누르고 페이지 이동 및 버튼 클릭 등 사용하다 보면 Component 별로 렌더링 속도를 알려준다.) 💥 대부분의 지연은 서버의 통신이 느린 것 ✔ Lazy 로딩 ◼ React는 SPA이기 때문에, 하나의 html, js, c.. 더보기
React 사용하기 📒 왜? (React 사용 이유) ◼ Single Page Application을 만들 때, 사용한다. 💬 Single Page Application은 새로고침 없이 돌아가는 페이지로 앱처럼 부드럽게 동작한다. ◼바닐라 JS로 웹 페이지를 만들 경우, 코드가 길어지고 너무 복잡해진다. 그래서 React 라이브러리를 사용한다. ◼ React를 사용하면 HTML 재사용이 편리해진다. ✨ React는 HTML, CSS, JavaScript 웹 개발을 편리하게 도와주는 라이브러리이다. 📒 개발 환경 세팅하기 1. node js를 설치한다. 2. 터미널에서 원하는 경로로 이동한 뒤, npx create-react-app {프로젝트 폴더명} 명령어를 입력한다. 💬 create-react-app(cra)는 React.. 더보기
[React-Native] React-Native (2) React-Native는 초기에 많은 Component를 제공하고자 했으나, 많은 버그 발생, 유지 관리, 업데이트가 어려워 지원할 수 없게 되어 최소한의 핵심 Component만 제공한다. React-Natvie가 제공하지 않는 Component, Api 들은 Third Party Package를 사용하여 이용할 수 있다. ** reactnative.directory 사이트에서 원하는 Component, Api를 검색하여 사용할 수 있다. Expo SDK Expo SDK란 Expo 팀 자체적으로 react-native에서 지원하지 않는 Component와 Api를 만들어 무료로 제공한다. https://docs.expo.dev/versions/latest/ 사이트에서 Expo가 제공하는 Componen.. 더보기
[React-Native] React-Native (1) React Js지식을 97%가량 사용하여 IOS, Android 모바일 개발을 동시에 할 수 있도록 도와주는 프레임워크 Live Reload를 지원한다. Create-react-native-app / Expo를 사용하여 쉬운 개발 시작이 가능하다. React Native 앱은 JavaScript로만 이루어지지 않는다. -> 위와 같은 구조로 이루어져 있다. React Native 앱에서 가장 중요한 부분은 Bridge들을 통해서 코드가 운영체제와 통신할 수 있도록 도와주는 인프라 시설이다. (React Native Js Modules, ...) Java와 Xcode로 우리가 개발한 App을 가져와서 .apk와 .ipa로 만들어주고 App Store에 등록한다. * ReactJs (웹사이트): HTML 작.. 더보기

티스토리툴바