AI Platform / Web

React Router React를 페이지를 분할하고 이동하기 위해 React Router를 사용법에 대해 알아보자. 버전5는 다른 블로그에 많이 있기 때문에 아래에서는 최신 버전인 React Router 버전 6을 사용하는 방법에 대해 알아보자. // 프로젝트 적용버전 "react-router-dom": "^6.2.1", // 라우터 적용가능 버전 React >= 16.8. 만약 버전 6을 설치했지만, 버전 5로 변경하고 싶은 경우에는 아래의 url을 보고 따라하면 버전5로 다운그래이드가 가능하다. https://han-py.tistory.com/433 [react] router 버전 해결 (react-router-dom) 먼저 버전 문제를 살펴 보자. 그 후에 사용법을 적어본다. 0. 버전 문제 해결..

React Native 이모티콘 리액트 네이티브(react native)에 아이콘을 넣어주는 방법에 대해 알아보자. 사용법은 굉장히 간단하다. 아래의 화면을 보면, V 이모콘을 확인할 수 있다. 아래의 예와 같이 다양한 이모티콘을 넣는 방법에 대해 알아보자. 기본 환경 react native의 환경은 아래와 같은 환경이다. $ npx create-react-native-app 설치 우선 아래의 명령어로 expo-font 패키지를 설치해 준다. $ expo install expo-font 이모티콘 찾기 아래의 url에 들어가서 그림과 같이 나오면 Filters를 눌러준다. https://icons.expo.fyi/ Filter를 누르면, 여러가지 버튼이 나온다. 쓰고 싶은거 아무것이나 눌러준다(개인취양)...

React Native Google font React Native에서 구글 폰트를 사용하여 어플을 꾸미는 방법에 대해 알아보자. 글꼴을 변화시키면 어플 전체의 분위기가 변경되기 때문에 중요한 부분이라고 할 수 있다. 사용법은 굉장히 간단하다. 기본 환경 react native의 환경은 아래와 같은 환경이다. $ npx create-react-native-app 설치 우선 아래의 명령어로 @expo-google-fonts/inter 패키지를 설치해 준다. $ expo install @expo-google-fonts/inter expo-font 폰트 적용 전 코드 import React from 'react'; import { StyleSheet, Text, View } from 'react-native'..

리액트 네이티브에서 로딩 페이지를 만들어보자. 기본적으로 데이터를 받아오기 전에 화면을 띄우면 안된다. 따라서 화면이 뜨기 전까지 이미지나 데이터를 전부다 받기 전까지는 로딩페이지를 띄워야 한다. 0. 들어가면서 react native의 환경은 아래와 같은 환경이다. $ npx create-react-native-app 1. 설치 $ expo install expo-app-loading 만약 create-react-native-app으로 설치한게 아니라 bare한 react-native라면 여기를 눌러 추가 설치를 해야한다. 2. 사용 우선 app.js를 아래와 같이 수정해 보자. import AppLoading from 'expo-app-loading'; import { StatusBar } from ..

리액트(.env)로 개발 시 개발 환경과 배포 환경에 대한 기본 설정을 해보자. 기본적으로 우리는 Nodejs위에서 개발을 한다. 그리고 package.json 파일에 기본 설정을 하게 된다. 하지만, 개발을 진행하다보면, 개발 환경과 배포환경을 다르게 해야하는 경우가 생긴다. 예를 들면, DB를 mysql로 진행한다고 한다면 현재 운영하는 DB와 개발 시 동작이 가능한지를 판단하는 DB는 다르게 만들어야 하기 때문에 DB id/pw가 다르게 설정을 하여 시작 시 필요한 DB를 사용할 수 있게 만드는 것이 좋다. 정리하면 개발환경과 운영환경에서의 변수 값을 다르게 설정해야 할 경우 아래의 방식을 이용하면 된다. 본 내용에 들어가기 전에 nodejs 자체에 대한 기초지식이 부족하다고 느낀다면, 아래의 ur..

React에서 사용되는 class field(클래스필드)에 대해 알아보고자 한다. 기본적으로 우리는 클래스컴포넌트와 함수형 컴포넌트에 대해 비교을 해야한다. 그렇다면, 언제 어떻게 클래스 컴포넌트를 사용하는지를 순차적으로 알아보자. 만약 비전공자라 class에 대한 개념이 없다면, 우선은 함수형 컴포넌트로 리액트를 구성해 보는것도 추천한다. 1. Class Component React를 처음 공부하면서 무작정 공식문서를 봤다. 그러다 가장 헷갈렸던 것은 컴포넌트 만들 때 언제 class를 쓰나? class에서 construct랑 super은 쓸때가 있고 안쓸 때가 있네? 2. 언제 class 쓸까? 결론부터 말하면, state와 Lifecycle 사용할 때 쓴다. 지금은 함수형 컴포넌트에서 Hook()을..

먼저 버전 문제를 살펴 보자. 그 후에 사용법을 적어본다. router 최신버전은 여기를 눌러서 확인하자. 0. 버전 문제 해결 최근 router가 버전 6으로 업그레이드가 됐다. 따라서 옛날 강의를 보는 사람들은 멘붕에 따졌을 것이라 생각한다. 왜냐하면 아래와 같이 명령어로 설치를 하니, switch가 없다고 뜨는 등의 에러가 떴을 것이다. 이 문제는 버전을 업그레이드 하면서 기존의 방식을 호환이 되지 않게 만들었기 때문이다. $ npm install router-react-dom 간단한 해결책은 아래와 같다. (버전 6을 5로 변경해 준다.) // 삭제 $ npm uninstall router-react-dom // 재설치 $ npm install router-react-dom@5 아니면, packa..

유튜브의 영상데이터를 가지고 와서 브라우저에 보여주는 방법을 알아보자. 만약 react나 nodejs를 통해 구축환경을 고려하고 있다면, 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 기본적으로 유튜브 영상을 넣기 위해서는 유튜브 api를 가져올 수 있어야 한다. 우선은 공식문서에 들어가 보자. 구글에서 youtube API를 검색하거나, 아래의 url을 들어가 보자. https://developers.google.com/youtube/v3/getting-started?hl=ko 시작하기 | YouTube Data API | Google Developers 시작하기 소개 이 문서는 YouTube와 상호작용할 수 있는 애플리케이션을 개발하려는 개발자를 위해 작성되었습니다...