728x90 728x90 분류 전체보기153 리액트 Failed to load resource : the server responded with a status of 404 () 문제 상황 react에서 작성했던 코드를 next로 옮기는 과정에서 api호출 시 404에러가 발생했다. react에서는 문제없이 get호출을 했으나 옮겨서 실행해보니 404에러가 발생하면서 컴포넌트를 렌더링하지 못했다. Failed to load resource : the server responded with a status of 404 () 잘못된 코드 처음에는 next의 param으로 username을 받아오는 문제가 있는 줄 알고 useEffect를 통해서 username을 잘 받아오는지 확인해보았다. username은 잘 받아오는데 GitHubCalendar 컴포넌트에 props로 username을 전달 할 때는 전달이 안되는 것 같았다. GET 요청을 자세히 보니까 username에 unde.. 2023. 3. 10. Next.js 설치 방법 및 기본 사용법 Next.js 설치 방법 및 기본 사용법 Next.js 설치 방법 간단히 아래의 명령어를 실행하면 설치 할 수 있다. 이 명령을 실행하려면 먼저 NodeJS가 설치되어 있어야 한다. npx create-next-app@latest # or yarn create next-app # or pnpm create next-app 타입스크립트 기반으로 프로젝트를 설치하고 싶다면 —typescript 플래그를 추가한다. npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 먼저 pages 폴더에서 보여줄 페이지를 설정한다. const Home = () => {.. 2023. 3. 9. tailwind template literal 사용 시 스타일 적용 문제 상황 tailwind를 사용하여 sns 로그인 버튼의 color를 sns의 종류에 맞게 설정하기 위해서 props로 color를 넘겨주고 템플릿 문자열을 사용했지만 color가 적용되지 않았다. 잘못된 코드 tailwind에서 background를 스타일링 하기 위해서는 앞에 bg를 붙여야 하는데 템플릿 문자열과 함께 쓰니 문제가 생겼다. tailwind 공식 문서에 따르면 Dynamic class name을 설정할 때는 항상 완전한 클래스 이름으로 설정해야 한다. 존재하지 않는 클래스 이름은 생성하지 않기 때문이다. props를 이용하여 color를 설정하고 싶다면 다음과 같이 설정한다. function Button({ color, children }) { const colorVariants = .. 2023. 3. 6. Next.js 사용하는 이유 Next.js 사용하는 이유 Next.js란 NextJS는 대규모의 양산형 React 앱을 더 편리하게 구축할 수 있도록 많은 기능을 제공하는 React 프레임워크이다. 하지만 대규모의 React 프로젝트를 구축하려면 보통 라우팅에 필요한 라이브러리나 인증에 필요한 라이브러리들을추가해야 한다. NextJS는 React를 기반으로 하는 프레임워크로 라이브러리보다 더 크고 기능이 많다. 또한 코드를 작성하는 방법이나 파일을 구성하는 방법에 관한 명확한 규칙과 지침이 있다. 이를 이용해서 대규모 React 앱을 편리하게 구축할 수 있다. Next.js의 주요 기능 1. 서버사이드 렌더링 NextJS에서 추가된 가장 중요한 기능은 서버 사이드 렌더링을 내장하고 있다는 것이다. React만 이용해서 만든 일반적인.. 2023. 3. 3. 이전 1 ··· 24 25 26 27 28 29 30 ··· 39 다음 728x90 728x90
