본문 바로가기

전체 글121

React-Native - 폰트 설정하기 리액트 네이티브에서 폰트 적용하는 방법을 알아보자! 1. 디렉토리 루트에 react-native.config.js 파일 추가하기 module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts'],}; 2. 폰트 다운로드사용하고자 하는 폰트를 다운로드(.ttf, .otf)하여 assets/fonts에 넣어준다. 3. 글씨체 적용fontFamily 스타일 속성을 사용해 사용하고자하는 글씨체의 이름을 써주면 적용된다~ 2025. 4. 5.
React 라우터(Router) 설정하기 오늘은 React 라우터 설정하는 법에 대해서 알아보자~라우터란 무엇일까?라우트는 사용자가 특정 URL로 이동했을 때, 어떤 컴포넌트를 보여줄지 결정하는 경로를 의미한다한마디로 요약하자면 페이지 전환을 관리하는 역할을 담당한다! React Router에서 라우트 사용법React에서는 react-router-dom 라이브러리를 사용해서 라우팅을 구현한다.다운로드터미널 창을 켜서 다음과 같은 명령어를 입력해서 다운로드 받는다.npm install react-router-dom 1. index.jsimport { BrowserRouter } from 'react-router-dom';index.js 파일에 BrowserRouter를 import 받기! 2. App.jsimport { BrowserRouter.. 2025. 3. 30.
Next.js에서 환경변수 설정하기 보안을 위해 API KEY를 가져올때는 .env파일을 생성해서 가져온다.근데 이번에 Next.js 공부를 처음하면서 환경 변수명을 REACT_ ~ 이런식으로 지정해줬더니 값을 가져오지 못하는 오류가 났다. 이를 통해 찾아 본 결과 Next.js에서는 NEXT_PUBLIC 키워드를 사용해야 된다는 것을 알게 되었다. 그러면 Next.js에서 환경 변수 설정에 대해서 알아보자!1. env 파일 생성하기env파일은 프로젝트, 루트 디렉토리에 생성해야 된다. 2. 환경 변수 설정하기NEXT_PUBLIC_API_KEY= 여기에 API KEY 작성하기 Next.js는 서버와 브라우저 모두에서 환경 변수를 사용하려면 환경 변수명 앞에 NEXT_PUBLIC_ 을 붙여줘야 된다. 즉, 클라이언트 측에서 접근.. 2025. 3. 23.
[ 프로그래머스 ] JS - 크기가 작은 부분문자열 문제숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다.풀이1. for문2. substr(startIndex, length)을 이용해서 이번 문제를 풀어 보았다.function solution(t, p) { var answer = 0; let num = []; const partLen = p.. 2025. 3. 2.