shadcn 라이브러리
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
shadcn는 next.js에서만 사용가능한 라이브러리 인가요?
- react
- 인터랙티브-웹
- 클론코딩
- next.js
- tailwind-css
- zustand
갓건
댓글 1
좋아요 0
조회수 258
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
영상보기전 풀어봤습니다.
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
const solve = (str) => { let answer = '' let count = 1; for (let i = 0; i < str.length; i ++) { if (str[i] === str[i + 1]) { count ++; } else { answer += count !== 1 ? `${str[i]}${count}` : `${str[i]}` count = 1; } } return answer } 대략적인 내용은 비슷한거 같습니다.
- javascript
- 코딩-테스트
hollis9797
댓글 1
좋아요 0
조회수 149
이건 어디에 저장이 되는 것인가요?? redux에 저장이 되는 것인가요??
미해결
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
await updateProfile(auth.currentUser, { displayName: data.name, photoURL: `http://gravatar.com/avatar/${md5(createdUser.user.email)}?d=identicon` }) realtime db와는 아무런 연관이 없는데요?? db에서 변화가 되면 프로필상에도 바뀌어야되는데 원칙이 아닌가요??
- react
- 웹앱
- firebase
김동호
댓글 1
좋아요 0
조회수 275
husky 설치 과정중 질문 있습니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn add --dev husky과 npx husky install 하니 .husky 폴더가 생겼는데 강의와는 다른 폴더들이 많이 있구요 이후에 npx husky add .husky/pre-commit "yarn lint" 실행하니 add 명령어를 권장하지 않는다고 뜹니다 이 경우에 어떻게 해야할까요??
- react
- node.js
- seo
- graphql
- next.js
leeyunje96
댓글 2
좋아요 0
조회수 331
5.6 API 호출에서 from 속성을 불러올 수 없습니다.
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
5-2강의 내용은 문제 없이 잘 됐고, 그 다음부터 5-5까지도 문제가 없었습니다. 에러가 다음과 같이 나옵니다. 어떤 게 문제일지 잘 모르겠습니다. 도움을 구합니다. <콘솔로그 상 오류 메시지> Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'from') npm으로 설치를 진행하였으며, npx create-next-app@latest로 최신버전입니다.
- react
- 클론코딩
- next.js
- supabase
오영택
댓글 3
좋아요 0
조회수 436
jest.config.cjs로 작성했을 때 modules를 읽어올 수 없음
해결됨
2시간으로 끝내는 프론트엔드 테스트 기본기
강의 1분쯤에 jest.config.cjs로 쓰는 것과 package.json에서 작성하는 법 2가지를 알려주셨을 때 전자대로 적용해 실행하니 아래와 같은 에러가 발생했습니다! 이후에 package.json에 작성해서 실행하는 방법으로 변경하니 정상적으로 작동했는데 혹시 이 원인을 알 수 있을까요? modules를 import하지 못한 이유를 잘 모르겠습니다!
- react
- jest
- 소프트웨어-테스트
- Cypress
- storybook
- chatgpt
갈길toofar
댓글 1
좋아요 0
조회수 319
npm start 관련 에러 질문
해결됨
[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론
npm WARN config global --global , --local are deprecated. Use --location=global instead. npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # View packages marked as favorites npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run 위와 같은 코드가 나오는데요.. 패키지.json을 보면 "scripts": { "dev": "webpack-dev-server --config webpack/config.js --open", "build": "webpack --config webpack/config.prod.js" }, 이 내부에 start 도 없어서 생기는 오류같은데.. 다 질문글 보니까 github에서 git reset 커밋번호로 해결 하시는거 같았는데.. 환경상 git 사용이 제한되어서요.. 방법이 있을까요?
- javascript
- phaser
이거사면공부할까?
댓글 2
좋아요 0
조회수 413
action.type 불러오는 방식
미해결
웹 게임을 만들며 배우는 React
import/export가 아닌 require/module.export로 파일 불러오고 있는데요. action.type 값 전달에서 궁금한 점이 있어서 질문 남겼습니다! 먼저 아래 코드로 // main.jsx const SET_WINNER = 'SET_WINNER'; const CLICK_CELL = 'CLICK_CELL'; const CHANGE_TURN = 'CHANGE_TURN'; exports.SET_WINNER = SET_WINNER exports.CLICK_CELL = CLICK_CELL exports.CHANGE_TURN = CHANGE_TURN // td.jsx const { SET_WINNER, CLICK_CELL, CHANGE_TURN } = require('./tiktaktok_functional'); 불러오면 action.type이 undefined로 출력됩니다. 근데 아래 방식대로 작성하면 action.type이 불러와집니다. 1. // main.jsx exports.SET_WINNER = SET_WINNER = 'SET_WINNER'; exports.CLICK_CELL = CLICK_CELL = 'CLICK_CELL'; exports.CHANGE_TURN = CHANGE_TURN = 'CHANGE_TURN'; // td.jsx // 불러오지 않음 2. // main.jsx const SET_WINNER = 'SET_WINNER'; const CLICK_CELL = 'CLICK_CELL'; const CHANGE_TURN = 'CHANGE_TURN'; exports.SET_WINNER exports.CLICK_CELL exports.CHANGE_TURN // td.jsx const CLICK_CELL = 'CLICK_CELL'; const CHANGE_TURN = 'CHANGE_TURN'; 원래라면 module.export 사용 중이면 어떻게 불러와야 되나요?
- react
현대적인유교보이
댓글 2
좋아요 0
조회수 246
5.1 최소 최대 가격 수정 관련 테스트 질문
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
최소 최대 가격을 수정할 때 최소 금액이 0보다 작을 때 최대 금액이 최소 금액보다 작을 때 위 같은 조건을 처리할 때 관련 질문입니다 describe 사용 여부 // 1 describe('최소 최대 가격 확인 테스트', () => { it("최소 금액이 0보다 작을 때, 이렇게~ 처리", () => {}); it("최대 금액이 최소 금액보다 작을 때, 이렇게~ 처리", () => {}); it("최소 최대 가격을 수정하면 setMinPrice, setMaxPrice action이 호출된다", () => {}) }) // 2 it("최소 금액이 0보다 작을 때, 이렇게~ 처리", () => {}); it("최대 금액이 최소 금액보다 작을 때, 이렇게~ 처리", () => {}); it("최소 최대 가격을 수정하면 setMinPrice, setMaxPrice action이 호출된다", () => {}) 위 같은 조건 테스트를 작성 하는게 좋은지 아니면 아예 입력 처리를 해서 작성 안하는게 좋은지 확인 (0보다 작은수는 입력되지 않고, 최대 금액은 최소 금액보다 무조건 크게 작성하도록 처리 등)
- javascript
- react
- 소프트웨어-테스트
- vitest
allmy
댓글 1
좋아요 0
조회수 199
프로젝트 NEW 구현하기에서 파일 옮길때 오류
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12분40초에 New.js 파일을 DiaryEditor.js 파일로 옮기는 작업에서 오류가 납니다.
- javascript
- react
- node.js
hyuk
댓글 1
좋아요 0
조회수 390
숙제 최소힙 만들기
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
class Heap { arr = []; #reheapUp(index) { if (index > 0) { const parentIndex = Math.floor((index - 1) / 2); if (this.arr[index] > this.arr[parentIndex]) { // 값 바꾸기 const tmp = this.arr[index]; this.arr[index] = this.arr[parentIndex]; this.arr[parentIndex] = tmp; this.#reheapUp(parentIndex); } } } #reheapDown(index) { if (index > 0) { const parentIndex = Math.floor((index - 1) / 2); if (this.arr[index] < this.arr[parentIndex]) { const tmp = this.arr[index]; this.arr[index] = this.arr[parentIndex]; this.arr[parentIndex] = tmp; this.#reheapDown(parentIndex); } } } insert(value) { const index = this.arr.length; this.arr[index] = value; // 마지막에 값을 넣어준다. this.#reheapUp(index); } insertDown(value) { const index = this.arr.length; this.arr[index] = value; this.#reheapDown(index); } remove() { // root만 remove } search(value) { for (let i = 0; i < this.arr.length; i++) { if (arr[i] === value) { return i; } } } } const heap = new Heap(); heap.insert(8); heap.insert(19); heap.insert(23); heap.insert(32); heap.insert(45); heap.insert(56); heap.insert(78); const downHeap = new Heap(); downHeap.insertDown(78); downHeap.insertDown(56); downHeap.insertDown(45); downHeap.insertDown(32); downHeap.insertDown(23); downHeap.insertDown(19); downHeap.insertDown(8); console.log(downHeap.arr); reheapDown 이라는걸 만들어서 최소힙 만들기를 해보았는데 부모 index의 값과 비교하는 조건문의 부등호 방향만 바꾸니까 되는데 이게 맞나요...?
- javascript
- 코딩-테스트
- 알고리즘
rhkdtjd_12
댓글 1
좋아요 0
조회수 182
TSLint 말고 TSLint Vue 설치해도 되나요?
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
TSLint가 Deprecated 됐다고 나와서요 TSLint Vue 설치해도 되나요?
- javascript
- vue.js
- es6
- vuex
빵다
댓글 3
좋아요 1
조회수 405
유저정보 수정 후 서버세션 업데이트할 수 있는 방법이 있을까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 여쭤보고 싶은 부분이 있습니다. 유저정보 수정 후 서버세션을 업데이트하려는데 검색해도 생각처럼 잘 되지 않더라구요. 혹시 업데이트 방법을 아실까해서 문의드립니다.
- react
- next.js
- react-query
- next-auth
- msw
챠챠_
댓글 1
좋아요 0
조회수 240
CURS
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요 강의 들으려고 구매했습니다! 혹시 CURS에 대한 내용은 이 강의에서 다루지 않나요??
- javascript
- typescript
- rest-api
- nestjs
- backend
joyjoy312
댓글 2
좋아요 0
조회수 255
08-01-map-fruits 실무 효율적인 렌더링 예제
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
데이터를 bbb 같은 데이터에 담고 그걸 presenter에 담으면 presenter에서 데이터를 알아보기 어려우니까 3번과 같이 map 자체를 <div> 에 담아서 렌더링 한다고 말씀하셨는데요, 그렇다면 3번과 같은 렌더링은 컨테이너의 return에 적는걸까요 아니면 presneter의 return에 적는걸까요?
- react
- node.js
- seo
- graphql
- next.js
minwoo
댓글 2
좋아요 0
조회수 190
root layout 질문
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. beforeLogin과 afterLogin 둘다 layout.tsx를 가지고 있는데, localhost:3000 에서 beforeLogin의 layout.tsx를 렌더하는 이유가 궁금합니다. page.tsx가 있으면 그쪽을 인식하는 건가요?
- react
- next.js
- react-query
- next-auth
- msw
안혜원
댓글 1
좋아요 0
조회수 278
tno값 초기화
미해결
코드로 배우는 React 19 with 스프링부트 API서버
제목 그대로 tno값은 어떻게 초기화 시키나요? testDelete 함수를 이용해서 삭제후 다시 testInsert 함수를 이용해서 1 ~ 100까지 만들고 싶은데, tno값은 1부터 시작하는게 아닌, 기존의 tno값부터 1씩 증가됩니다.
- react
- spring-boot
- jpa
- jwt
- redux-toolkit
tobot222
댓글 1
좋아요 0
조회수 191
Number를 써서 풀어봐도 될까요?
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
return Number(str.replace(/[^0-9]/g,'')); 이렇게만 작성했습니다.
- javascript
- 코딩-테스트
hollis9797
댓글 1
좋아요 0
조회수 162
피그마 회원가입 만들기
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 css까지 다 완성했는데 비교해보니 비슷한 느낌은 나는것 같습니다. 혹시 코드 예제? 라던지 대표적인 완성코드를 볼 수 있는건 없나요?? 한번 비교해보고 싶어서요.. 추가로 남성/여성 부분 radio 동그라미가 피그마 원본? 상에는 크고 회색으로 칠해져 있는데 저건 어떻게 적용하나요?? 가입하기 버튼 위 구분선도 제게 사라졌는데 원인을 알수있을까요? <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel = "stylesheet"> </head> <body> <div id="tBox"> <h2 id="title">회원 가입을 위해 <br/> 정보를 입력해주세요</h2> <input class = "underline" type="text" placeholder="*이메일"><br><br> <input class = "underline" type="text" placeholder="*이름"><br><br> <input class = "underline" type="pw" placeholder="*비밀번호"><br><br> <input class = "underline" type="pw" placeholder="*비밀번호 확인"><br><br> <!-- <select> <option disabled="true" selected="true">지역을 선택하세요</option> <option>서울</option> <option>경기</option> <option>인천</option> <option>부산</option> <option>울산</option> <option>김해</option> </select> --> <div id = "gender"> <input type="radio" name="gender">여성 <input type="radio" name="gender">남성 </div> <br><br> <div class="checkbox-container"> <input type="checkbox" id="terms"> <label for="terms">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</label> </div> <br> <div class = "register"> <button class = "button">가입하기</button> </div> <!-- <input type="button" value="가입하기"> --> </div> </body> </html> * { box-sizing: border-box; } #title { width: 466px; height: 94px; color: #0068ff; font-size: 32px; font-family: Noto Sans CJK KR; text-align: justify; } #tBox { width: 670px; height: 960px; border: 1px solid #aacdff; margin-top: 60px; margin-left: 625px; padding: 100px; box-shadow: 7px 7px 39px 0px #0068ff; border-radius: 20px; display: flex; flex-direction: column; align-items: center; } input[type="text"]{ width: 466px; height: 80px; padding: 10px; margin: 10px 0; border: 1px solid #797979; } input[type="pw"]{ width: 466px; height: 80px; padding: 10px; margin: 10px 0; border: 1px solid #797979; } button { padding: 10px 20px; color: #fff; background-color: #0068ff; border: none; border-radius: 5px; cursor: pointer; } input.underline { border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 1px; } #gender { width : 140px; height: 23.94px; border : 1px solid #fff; display: flex; justify-content: space-between; } .checkbox-container { width: 466px; height: 21.06px; border: 1px solid #fff; border-radius: 3px; align-items: center; display : flex; } .checkbox-container input[type="checkbox"] { margin-right: 10px; } .register { border-top : 1px solid #e6e6e6; width: 470px; height: 1px; } .button { background-color: #FFFFFF; border :1px solid #0068FF; width: 470px; height: 75px; border-radius: 10px; font-size : 18px; color : #0068FF; text-align: center; font-weight: 400; line-height: 26.64px; font-family: Noto Sans CJK KR; }
- react
- node.js
- seo
- graphql
- next.js
민선
댓글 2
좋아요 0
조회수 311
onClickRedo 질문
미해결
웹 게임을 만들며 배우는 React
componentDidUpdate를 사용하지 않고 this.componentDidMount()를 다시 불러와서 실행시켜도 정상적으로 작동하는데 이건 권장하지 않는 방법인가요? 혹시 그 이유가 더 긴 라이프 라이클을 갖게 돼서 그런가요? onClickRedo = () => { this.setState({ winNumbers: lottoNumbers(), winBalls: [], bonus: null, redo: false, }) this.timeout = []; this.componentDidMount(); }
- react
현대적인유교보이
댓글 1
좋아요 0
조회수 199
인기 태그
인프런 TOP Writers
- 정현섭 6
- hush park 5
- eggmun(문성진) 4
- Billy D Sanchez 4
- 박효정 3
- morneau 3
- 코코리코코 3
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv