본문 바로가기

전체 글122

[React-Native] Text strings must be rendered within a text component 에러 해결 문제React Native에서 문자열(텍스트)을 화면에 보여주고 싶을 땐 반드시 태그 안에 넣어야 한다.HTML에서는 Hello 이런 식으로도 텍스트를 쓸 수 있지만, React Native는 텍스트 전용 컴포넌트가 따로 있기 때문에 다음과 같은 코드는 에러가 난다!Hello //error 해결 Hello  결론 React Native는 모든 텍스트는 반드시 태그 안에 있어야 한다.나 같은 레이아웃 컴포넌트는 문자열을 직접 감싸면 렌더링 에러가 발생한다. 이번 에러를 통해서 문자열을 사용하려면 무조건 로 감싸고 이 안에다가 쓰고자하는 문자열을 입력해야 된다는 것을 알게되었다!  다음에는 또 이런 실수를 하지 않도록 해야겠다. 2025. 4. 9.
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.

티스토리툴바