AI Platform / Web

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

0. 들어가면서 Beautiful Soup은 주로 웹 크롤링(web crawling)에 사용되는 라이브러리로 HTML 문서나 XML 문서에서 데이터를 불러오는 데 사용된다. 자연어 처리에서는 원하는 웹페이지를 가지고 온 후에, HTML 태그를 제거하기 위해 사용된다. 1. 설치하기 설치는 아래와 같이 하면 된다. # conda $ conda install -c anaconda beautifulsoup4 # colab (python) $ pip install beautifulsoup4 불러오려면 아래와 같이 import를 하면 된다. from bs4 import BeautifulSoup beautifulsoup에는 기본적으로 파이썬 표준라이브러리인 html 파서를 지원하지만, lxml이라는 모듈이 더 빠르..

CSS로 Web layout(웹 UI 배치)을 하는 방법(flex, inline, block... 등등)에 대해 알아보자. 사실 초보자의 기준에서는 css에서 구조를 정리하는 것과 원하는 요소에 배치하는 것이 가장 어렵다. 핵심 위주로 간단히 정리해 보고자 한다. 사실 퍼블리셔로 css를 딥하게 공부할 거 아니면, flex만 우선적으로 이해하고 프로젝트에 적용해도 된다. 당장 마감이 임박하다면, 바로 flex를 보러가자! 1. 인라인(inline)/ 블록(block) flex를 이해하려면, 인라인/블록을 우선적으로 구별할 수 있어야한다. 기본적으로 html 태그는 인라인 요소와 블록 요소로 나누어진다. 인라인 요소는 기능이나 디자인 효과를 줄 때 사용하고, 블록 요소는 블록을 쌓듯 레이아웃을 설정하는 태..