page.js

export default function Cart() {
  let 장바구니 = ['Tomatoes', 'Pasta'];
    return (
      <div>
        <h4 className="title">Cart</h4>
        <CartItem item={장바구니[0]}/>
        <CartItem item={장바구니[1]}/>
        <Banner content="롯데카드"/>
        <Banner content="삼성카드"/>
      </div>
    )
  } 

  function Banner(props){
    return <h5>{props.content} 결제 행사중</h5>
  }
  
  function CartItem(props){
    return (
        <div className="cart-item">
          <p>{props.item}</p>
          <p>$40</p>
          <p>1개</p>
        </div>
    )
  }

 

Cart 부모에서 CartItem 으로 [장바구니] 라는 데이터를 전달

<컴포넌트명 변수명={전달할 데이터}/> 로 사용

자식 펑션에서는 함수 데이터 받듯이 props 를 적어주고

자식 펑션 안에서 props.변수명 으로 사용

 

자식에서 부모로는 전송 불가

자식에서 자식으로도 전송 불가

 

 

 

+ css

import { Component } from "react"

export default function Cart() {
  let 장바구니 = ['Tomatoes', 'Pasta'];
  return (
    <div>
      <h4 className="title">Cart</h4>
      <RedButton color='blue' />
    </div>
  )
}

function RedButton(props) {
  return (
    <button style={{ backgroundColor: props.color, width: '30px', height: '30px' }}></button>
  )
}
저작자표시 (새창열림)

'공부 > Next.js' 카테고리의 다른 글

querySrv EREFUSED 오류 해결  (0) 2025.02.05
invariant expected app router to be mounted 오류  (0) 2024.04.18
next.js - 다른 파일의 내용 import 하는 방법  (1) 2024.04.18
next.js - client component, server component  (0) 2024.04.18
Next.js route 페이지 이동 방법  (3) 2024.02.10

프로젝트 구조

 

 

data.js

let age = 20;
//let name = 'lee';
export default age;

//여러개의 변수는 export {age, name} , import {age, name}

 

 

cart > page.js

import data from './data.js'

export default function Cart() {
    return (
      <div>
        <h4 className="title">Cart</h4>
        <div className="cart-item">
          <p>상품명 {data}</p>
          <p>$40</p>
          <p>1개</p>
        </div>
      </div>
    )
  }

 

다른곳에 사용할 파일 마지막에 export default 변수;

사용할 파일에 import 변수 from '파일경로';

 

html 에서 {변수} 로 사용

import 할때 경로는 ./ 부터 적는게 좋음

 

 

- 컴포넌트 import

cart > work.js

export default function work() {
    return (
        <h1>안녕하세요</h1>
    )
}

 

cart > page.js

import { Component } from "react"
import Work from './work.js'


export default function Cart() {
    return (
      <div>
        <h4 className="title">Cart</h4>
        <Work/>
      </div>
    )
  }

컴포넌트는 첫글자  대문자로 작성 !!

저작자표시 (새창열림)

'공부 > Next.js' 카테고리의 다른 글

invariant expected app router to be mounted 오류  (0) 2024.04.18
next.js - 부모에서 자식으로 데이터 전달 (props)  (0) 2024.04.18
next.js - client component, server component  (0) 2024.04.18
Next.js route 페이지 이동 방법  (3) 2024.02.10
Next.js 프로젝트 생성  (0) 2024.02.10

-컴포넌트 만드는 방법

 

page.js

import { Component } from "react"

export default function Cart() {
    return (
      <div>
        <h4 className="title">Cart</h4>
        <CartItem/>
        <CartItem/>
        <CartItem/>
      </div>
    )
  } 

  function CartItem(){
    return (
        <div className="cart-item">
          <p>상품명</p>
          <p>$40</p>
          <p>1개</p>
        </div>
    )
  }

 

function 이름() {

   return (   <html> ) 

}

html은 <div></div> <div></div> 이렇게 올수 없으며 큰 <div> 로 감싸주어야 함

컴포넌트를 만들고 다른곳에서 <이름/> 이렇게 가져다 쓸 수 있음.

ex)

이거 안됨

 

이거 됨

 

 

 

 

 

- server component

onclick 같은 자바스크립트 기능 넣기 불가 (오로지 html만)

속도 빠름

검색엔진 노출에 유리

큰 페이지에 추천함

 

- client component

.js 파일 맨위에 'use client' 를 넣으면 사용가능

자바스크립트가 들어가므로 로딩 속도가 느림

자바스크립트가 필요한 파일에만 넣으면 좋음

저작자표시 (새창열림)

'공부 > Next.js' 카테고리의 다른 글

invariant expected app router to be mounted 오류  (0) 2024.04.18
next.js - 부모에서 자식으로 데이터 전달 (props)  (0) 2024.04.18
next.js - 다른 파일의 내용 import 하는 방법  (1) 2024.04.18
Next.js route 페이지 이동 방법  (3) 2024.02.10
Next.js 프로젝트 생성  (0) 2024.02.10

mvn dependency:tree 로 메이븐 트리구조를 확인하고 싶었는데

메이븐이 http 로된 nexus 에 접근하지 못했을때 발생하는 오류.

 

빨간 네모 박스의 주소를 기억해주고,

 

C:\Users\사용자\.m2 경로의 settings.xml 파일을 수정해주어야 한다. (혹은 m2가 있는 다른 경로)

settings.xml 파일이 없으면 만들면 된다.

 

 

 

 

파일 안에 다음과 같이 입력하면 된다.

<?xml version="1.0" encoding="UTF-8"?>
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0
http://maven.apache.org/xsd/settings-1.0.0.xsd">

<mirrors>
<mirror>
    <id>maven-default-http-blocker</id>
    <mirrorOf>external:dont-match-anything-mate:*</mirrorOf>
    <name>Pseudo repository to mirror external repositories initially using HTTP.</name>
    <url>빨간네모주소</url>
    <blocked>false</blocked>
</mirror>
</mirrors>


</settings>

 

 

저장하고

 

다시 mvn dependency:tree 하면 성공 

저작자표시 (새창열림)

'공부 > Java' 카테고리의 다른 글

springboot 3 + java17 QueryDSL gradle 파일  (0) 2024.12.30
java - switch 문 대신 enum 사용  (1) 2024.10.29
maven 중복 의존성 해결 (The package javax.xml.namespace is accessible from more than one module: <unnamed>, java.xml)  (1) 2024.02.28
maven 설치, 환경변수 추가('maven'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 해결)  (1) 2024.02.28
1,2,3 숫자를 입력받아 가,나,다,가가,가나... 로 반환해주는 함수(가나다 번호 자동 생성)  (0) 2022.09.26

+ Recent posts

티스토리툴바