AI Platform / Web

리액트(react)에서 html과 css를 활용하여 image를 배경화면으로 두고 앞쪽 가운데 글을 넣는 방법에 대해 적어보겠다. 다른 react/nodejs에 대한 기초 지식은 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 기본적으로 css는 module을 사용했다. module을 사용하면, 중복 현상이 일어나지 않아서 좋다. 사용법은 이름을 만들 때 .module.css를 붙여서 만들어주면된다. 그리고 아래와 같이 jsx에서 import styles from '모듈 위치' 로 불러와서 className 부분에 추가를 해서 사용하면 된다. import styles from './intro.module.css' const INTRO_IMAGE = '/images/miss..

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를 누르면, 여러가지 버튼이 나온다. 쓰고 싶은거 아무것이나 눌러준다(개인취양)...

Error : in unpopulated submodule git add를 통해 github 커밋을 하는 도중에 fatal: in unpopulated submodule 폴더명 과 같은 에러를 만나는 경우에 대해 적어볼까 한다. 그리고 github에서 확인에 보면 위와 같이 폴터에 화살표가 있고 들어가지지 않는다. submodule를 만들려고 하는게 아니라면 아래와 같은 해결책으로 쉽게 가능하다. 저러한 현상이 나는 폴더를 play-ground라 가정하고 이야기를 풀어보겠다. 해결방법1. git파일 폴더 내부의 .git을 지워줍니다. 외부에 .git이 있는데, 그 내부에 .git이 하나 더 있다면 submodule로 판단하고 커밋 추가가 안됩니다. 이러한 경우에는 play-ground 내부에 있는 .gi..

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'..

Layered Pattern 계층화 패턴(Layered pattern)에 대해 알아보자. 기본적으로 계층을 분리하는 이유는 한 곳에서 작업이 모두 이루어진다면, 코드의 복잡성 증가, 유지보수의 어려움, 중복 코드 증가, 확장성 감소와 같은 문제가 발생한다. 즉, 계층화 패턴은 이러한 문제를 해결하기 위해, 계층을 나눈 패턴이다. 각 계층은 다음 상위 계층에 서비스를 제공하고. 각 하위 모듈들은 특정한 수준의 추상화를 제공한다. 계층에 정답은 없다. 구현하는 도메인에 따라 최정화된 계층은 다르기 때문이다. 일반적으로 공통적으로 볼 수 있는 계층은 아래와 같다. 3계층으로 나눌 시 아래와 같다. Presentation layer (표현계층) Business logic layer (서비스계층) Persiste..

Promise에 대한 기초에 대해 정리해 보려고 한다. 우선은 아래의 코드를 보자. 이해가 되는가? 이해가 되지 않는다면, 이곳에서 알아가 보자. const Loading = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)) }; 1. promise promise는 시간이 걸리는 비동기 작업에 대해, 성공/실패를 나타내는 객체이다. 그리고 함수에 콜백을 전달하는것이 아닌 콜백을 첨부하는 객체라고도 할 수 있다. 이말을 조금 더 쉽게 적어보면, 성공/실패를 나타내는 함수를 호출할 수 있게 담아서 전달해 주는 것이라고 할 수 있다. 아래의 예시를 보자. function successCallback(result) { console...

리액트 네이티브에서 로딩 페이지를 만들어보자. 기본적으로 데이터를 받아오기 전에 화면을 띄우면 안된다. 따라서 화면이 뜨기 전까지 이미지나 데이터를 전부다 받기 전까지는 로딩페이지를 띄워야 한다. 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 ..