Frontend/React (34) 썸네일형 리스트형 React jsx안에서 `${}`쓰고싶을때 jsx내 일반방법 Go Klaytnscope jsx내 삼항연산자 target="_blank" Context API _context undefined 에러 store/user.js import React, { createContext } from "react"; export const userContext = createContext(); //useContext() export default function UserStore(props) { let userObj = { name: "mike", job: "developer" }; return ( {props.children} ); } export안해줘서 그랬음.. 사용방법 1. app.js에서 감싸주기 import "./styles.css"; import UserStore from "./store/user"; import Test from "./Test"; export default function App(.. React option import { useState } from "react"; import "./styles.css"; export default function App() { const selectList = ["select", "sample1", "sample2"]; const [options, setOptions] = useState([]); const onChange = (e) => { if (!options.includes(e.target.value) && e.target.value !== "select") { setOptions((options) => [...options, e.target.value]); } }; return ( {selectList.map((item) => ( {item} ))} {optio.. nextjs Link태그에 _blank import Link from "next/link"; 새 탭으로 링크열기 경로를 직접설정하는것보다 .env나 파일로 따로빼서 export후 호출 https://stackoverflow.com/questions/65632698/how-to-open-a-link-in-a-new-tab-in-nextjs 브라우저단 에러 error - FetchError: request to http://localhost:8000/main failed, reason: connect ECONNREFUSED 127.0.0.1:8000 Nextjs 개인 프로젝트 도중 게시글 등록후 메인페이지(상품목록)로 이동하게해놨는데 계속은 아니고 가끔가다 한번씩 이런 에러가뜬다. 확실히 서버단에는 문제가없었다. 해결시도1. getServerSideProps()에서 getStaticProps()로 변경해보았다. 서버사이드는 브라우저환경이아니기때문에 윈도우 에러가 난다고한다. 상품목록은 staticProps를 권장한다고해서변경해보았으나 큰 효과는없었다. 해결시도2. localhost에서 127.0.0.1로 변경해보았으나 마찬가지로 에러가 떴다. 해결시도3. 환경변수 process.env로 처리(개발단) 여전히 에러발생!! 500에러이고 네트워크창을 보면 다음과같다 //General Request URL: http://localhost:3000/ Req.. Component Life cycle 기본개념 컴포넌트의 생명주기 * mount 페이지에 장착됨 : 컴포넌트 로드될때 사용 * update 업데이트됨 : 컴포넌트 업데이트될때 사용 * unmount 필요없을때 제거됨 : 컴포넌트 삭제될때, 다른페이지로 넘어갈때 과거 class로 만든 컴포넌트일때는 ComonentDidMount(), ComonentDidUpdate(), ComonentWillUnmount와같은 함수를 사용했다고한다. 이제는 useEffect훅으로 컴포넌트의 생명주기에 따른 조종이 가능하다. 마운트, 재랜더링될때마다 실행하고싶을때 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ 로드될때(mount), 업데이트될때마다 실행됨 console.. Nextjs styled-components 그냥 리액트 nextjs와 타입스크립트용 nextjs는 약간다르다. 그냥 리액트 nextjs yarn add styled-components _document.js import React from "react"; import Document, { Html, Head, Main, NextScript } from "next/document"; import { ServerStyleSheet } from "styled-components"; class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; .. Nextjs API basic Nextjs 공부좀하려고 js파일로만든 간단한 예제 데이터를 불러온뒤 useState를 활용했는데 데이터가 undefined라고 뜬다..ㅠ 아 또왜... 찾아보니 API폴더를 활용해 API route를 만드는 방법이있어서 별수없이 이걸 이용하기로했다. 예제 [pages] > [api] > index.js export default function handler(req,res){ res.status(200).json({name:'Home API route test'}) } //localhost:3000/api 이제 프론트서버를 켜고 주소/api를 입력해주면 참고, 만약 [pages] > [api] > hello.js를 만들경우 route경로는 localhost:3000/api/hello 가 된다. 만약 [.. 이전 1 2 3 4 5 다음
