728x90
반응형

📜 오류 발생

 

redux-toolkit을 클래스형 컴포넌트에서 사용하기 위해 'react-redux'에서 제공되는 connect를 사용하게 되었는데 아래와 같은 오류가 발생하였다.

 

usesyncexternalstore is not a function

 

 

해결 방법을 찾아보니 react 버전이 낮아서 발생하는 오류일 가능성이 있다고 해서 버전을 업그레이드 해주었더니 해결되었다.

기존 버전 ^17.0.1 -> 업그레이드 버전 ^18.1.0

 

"react" : "^18.1.0",
"react-dom": "^18.1.0",
728x90
반응형

'Frontend > 트러블슈팅' 카테고리의 다른 글

[Next.js] You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found. 오류 해결  (0) 2024.03.20
[Next.js] cannot use jsx unless the '--jsx' flag is provided 오류 해결  (0) 2024.03.13
[Next.js] Error: NextRouter was not mounted 오류 해결  (0) 2024.03.12
[node] Missing class properties transform 오류 해결  (0) 2024.01.17
[homebrew] homebrew-cask is a shallow clone 오류 해결  (0) 2024.01.17
728x90
반응형

📜 오류 발생

 

redux-toolkit을 사용하기 위해 라이브러리를 설치했는데 프로젝트 실행시 아래와 같은 오류가 발생하였다.

 

./node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js
SyntaxError: /Users/otdeal/Desktop/projects/otdeal_projects/robomd/frontend/node_modules/@reduxjs/toolkit/dist/redux-toolkit.legacy-esm.js: Missing class properties transform.

 

 

여러가지 라이브러리를 설치하면서 꼬이거나 오류가 발생했을까 싶어서,

node_modules를 지우고 package.json의 모듈을 다시 설치해주기 위해 'yarn' 명령어를 실행했는데 아래와 같은 오류가 발생했다.

 

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error expect@29.7.0: The engine "node" is incompatible with this module. Expected version "^14.15.0 || ^16.10.0 || >=18.0.0". Got "16.8.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

 

에러 메세지를 확인하니 node 버전 문제로 인해 발생하는 오류로 확인되었다.

현재 사용하고 있던 노드 버전이 많이 낮은 상태였기 때문에 과감하게 노드 버전을 LTS 버전으로 변경하기로 하였다.

 

노드 버전을 올려주니 문제가 해결되었다.

https://nodejs.org/en/download

 

Node.js — Download

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

 

특정 버전으로 설치를 원한다면 아래 주소에서 찾아볼 수 있다.

https://nodejs.org/download/release/

 

Index of /download/release/

 

nodejs.org

728x90
반응형

'Frontend > 트러블슈팅' 카테고리의 다른 글

[Next.js] You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found. 오류 해결  (0) 2024.03.20
[Next.js] cannot use jsx unless the '--jsx' flag is provided 오류 해결  (0) 2024.03.13
[Next.js] Error: NextRouter was not mounted 오류 해결  (0) 2024.03.12
[react] usesyncexternalstore is not a function 오류 해결  (0) 2024.01.22
[homebrew] homebrew-cask is a shallow clone 오류 해결  (0) 2024.01.17
728x90
반응형

📜 오류 발생

 

yarn 버전 업그레이드를 할 일이 생겨서 'brew upgrade yarn' 명령어를 실행했는데 오류가 발생하였다.

 

Error: 
  homebrew-cask is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow
This command may take a few minutes to run due to the large size of the repository.
This restriction has been made on GitHub's request because updating shallow
clones is an extremely expensive operation due to the tree layout and traffic of
Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you
automatically to avoid repeatedly performing an expensive unshallow operation in
CI systems (which should instead be fixed to not use shallow clones). Sorry for
the inconvenience!

 

에러 메세지에 'brew update'를 실행하기 위해서 어떤 명령어를 입력해야하는지 친절하게 알려주고있다.

 

아래 명령어들을 차례대로 실행해주어 brew를 업데이트 한다.

 

git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow
brew update

 

이후, yarn 버전 업그레이드를 위해 'brew upgrade yarn' 명령어를 다시 입력해주었더니 정상적으로 업그레이드 되었다.

728x90
반응형

'Frontend > 트러블슈팅' 카테고리의 다른 글

[Next.js] You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found. 오류 해결  (0) 2024.03.20
[Next.js] cannot use jsx unless the '--jsx' flag is provided 오류 해결  (0) 2024.03.13
[Next.js] Error: NextRouter was not mounted 오류 해결  (0) 2024.03.12
[react] usesyncexternalstore is not a function 오류 해결  (0) 2024.01.22
[node] Missing class properties transform 오류 해결  (0) 2024.01.17
728x90
반응형

만들어봅시다

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div>
		아이디 :
		<input type="text">
	</div>
	
	<div>
		비밀번호 :
		<input type="password">
	</div>
	
	<!-- 라디오 버튼은 name값이 같아야 개별 선택이 가능합니다 -->
	<div>
		성별 :
		<input type="radio" name="gender" value="f"> 여자
		<input type="radio" name="gender" value="m"> 남자
	</div>
	
	<div>
		생일 :
		<input type="date">
	</div>
	
	<div>
		취미 :
		<input type="checkbox" name="hobby" value="game"> 게임
		<input type="checkbox" name="hobby" value="piano"> 피아노
		<input type="checkbox" name="hobby" value="ani"> 애니 감상
	</div>
	
	<div>
		지역 :
		<select>
			<option>==선택==</option>
			<option>서울</option>
			<option>경기</option>
		</select>
	</div>
	
	<div>
		자기소개 :
		<textarea rows="3" cols="50"></textarea>
	</div>
</body>
</html>

 

입력요소는 여러가지가 있습니다. 원하는 대로 잘 사용하시면 좋을것같습니다. 임시로 만들었기 때문에 뭔가 요소가 규칙적인 위치에 있지 않고 지렁이처럼 되었습니다. 이것을 해결하고 싶다면 table을 사용하여 각 칸마다 요소가 들어갈 수 있도록 하면 예쁘게 정렬됩니다.

728x90
반응형

'Frontend > HTML & CSS' 카테고리의 다른 글

[css] 이미지 드래그 막는 방법  (1) 2024.01.25
부트스트랩과 원하는 폰트로 주문 화면 만들기  (0) 2021.07.26
HTML의 완성도를 높이는 부트스트랩 기초 사용법  (1) 2021.07.21
HTML에서 style요소를 CSS파일로 분리하기  (0) 2021.07.21
HTML 주석 달기  (0) 2021.07.21
728x90
반응형

HTML 폰트 적용하는 방법 :: 러아니푸의 공부방 (tistory.com)

 

HTML 폰트 적용하는 방법

https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 1. 위 링크에서 원하는 폰트를 누릅니다. 2. '+ Select this..

fjdkslvn.tistory.com

HTML의 완성도를 높이는 부트스트랩 기초 사용법 :: 러아니푸의 공부방 (tistory.com)

 

HTML의 완성도를 높이는 부트스트랩 기초 사용법

https://getbootstrap.com/docs/4.0/components/alerts/ Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. getbootstrap.com..

fjdkslvn.tistory.com

 

* 부트스트랩과 폰트를 적용하는 방법은 위의 글을 참고하시길 바랍니다*

 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!-- 글꼴 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">

    <title>판매화면</title>

    <style>
      *{
        font-family: 'Do Hyeon', sans-serif;
      }
      .main{
        width: 600px;
        margin: auto;
      }
      .center{
        width: 600px;
        height: 400px;
        margin: auto;
        display: block;
        background-size: cover;
        background-position: center;
      }
      .btn_center{
        margin: auto;
        display: block;
      }
    </style>
  </head>
  <body>
  <div class="main">
    <img class="center" src="강연.png">
    <h1>강연 한정판 블루레이 <span style="font-size: 20px">가격:30,000원/개</span></h1>
    <p>모든 것은 등가교환의 법칙으로 설명할 수 있습니다. 제가 이 블루레이를 드리는 대신 당신은 30,000원을 내놓으셔야겠습니다.</p>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="name">주문자 이름</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">수량</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>--수량을 선택하세요--</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="주소">주소</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">수량</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

    <button style="margin-bottom: 50px" type="button" class="btn btn-primary btn_center">주문</button>
  </div>

  </body>
</html>

솔직히 강연을 좋아하는 것도 맞지만.. 새로운 사진 찾기가 귀찮아서 자꾸 저걸 쓰게 됩니다. 누가 좀 평범한 사진 하나 주면 그거 넣어서 쓸텐데..ㅎㅎ

 

일단 html만 구성해보자고 생각해서 부트스트랩에서 끌어다 쓴거라 id값들은 무시하는게 좋습니다.

 

코드에서 이해가 안가는 부분이 있으면 질문하셔도 좋습니다!

728x90
반응형

'Frontend > HTML & CSS' 카테고리의 다른 글

[css] 이미지 드래그 막는 방법  (1) 2024.01.25
HTML 입력 요소 모음  (0) 2021.08.20
HTML의 완성도를 높이는 부트스트랩 기초 사용법  (1) 2021.07.21
HTML에서 style요소를 CSS파일로 분리하기  (0) 2021.07.21
HTML 주석 달기  (0) 2021.07.21
728x90
반응형

https://getbootstrap.com/docs/4.0/components/alerts/

 

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

getbootstrap.com

 

 

 

1. 위 링크를 타고 들어가면, 부트스트랩을 사용할 수 있는 사이트가 열립니다. Getting started -> Starter template가 나올때 까지 스크롤합니다.

 

개인적으로 지저분한건 head로 다 뺴버리는것을 선호하기 때문에 script를 헤더로 이동시켰습니다. 뭘 사용하시든 상관없습니다.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
  <body>
    <button type="button" class="btn btn-success">Success</button>
  </body>
</html>

 

 

 

2. Components -> 원하는 요소로 들어가서 찾기

저는 버튼으로 들어왔습니다. 다양한 색의 버튼들이 있는데 페이지에서 누르면 각 버튼의 효과도 보입니다. 버튼 하단의 코드를 보고 원하는 버튼의 코드를 긁어서 사용하시면 적용됩니다.

 

제가 위에 코드블럭에 넣어드린 코드는 Success버튼을 넣은 코드입니다.

 

 

 

예시

 

강연 꼭 보세요..

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>
    <title>강철의 연금술사 시청하기</title>

    <style>
        .mycenter{
            width: 1200px;
            margin:auto;
        }
    </style>
</head>
<body>
<div class="mycenter">
  <div class="jumbotron">
      <h1 class="display-4">강철의 연금술사를 아직 안보셨다구요?</h1>
      <p class="lead">강철의 연금술사 무료로 보기</p>
      <p class="lead">
          <a class="btn btn-primary btn-lg" href="#" role="button">여기를 클릭</a>
      </p>
  </div>
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">1화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">4화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">2화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">5화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">3화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text">6화 보기</p>
      </div>
    </div>

</div>
  </div>
</body>
</html>

점보트론과 카드 뭉탱이를 활용하여 만들었습니다. 원하는 요소를 넣어서 자유롭게 페이지를 만들 수 있습니다.

 

 

 

+폰트 적용, 색상변경

더보기 
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
    <title>강철의 연금술사 시청하기</title>

    <style>
        *{
            font-family: 'Song Myung', serif;
        }
        .mycenter{
            width: 1200px;
            margin:auto;
        }
        .blue{
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="mycenter">
  <div class="jumbotron">
      <h1 class="display-4">강철의 연금술사를 아직 안보셨다구요?</h1>
      <p class="lead">강철의 연금술사 무료로 보기</p>
      <hr>
      <p class="lead">
          <a class="btn btn-primary btn-lg" href="#" role="button">여기를 클릭</a>
      </p>
  </div>
  <div class="card-columns">
    <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">1화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">4화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">2화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">5화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">3화 보기</p>
      </div>
    </div>
      <div class="card">
      <img class="card-img-top" src="강연.png" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">강철의 연금술사</h5>
        <p class="card-text blue">6화 보기</p>
      </div>
    </div>

</div>
  </div>
</body>
</html>

 

728x90
반응형

'Frontend > HTML & CSS' 카테고리의 다른 글

HTML 입력 요소 모음  (0) 2021.08.20
부트스트랩과 원하는 폰트로 주문 화면 만들기  (0) 2021.07.26
HTML에서 style요소를 CSS파일로 분리하기  (0) 2021.07.21
HTML 주석 달기  (0) 2021.07.21
HTML 폰트 적용하는 방법  (0) 2021.07.21

+ Recent posts

티스토리툴바