React/Next 일기

리액트 개발 환경 구축에서... 바로 될 때도 있었고 완전히 하루 왼종일 node.js만 깔고 지우고 깔고 지우고 했던 일도 있어서(진짜 10번 넘게 지우고 5번은 재부팅함) 기록용으로 남겨둔다. --; 1. git clone 리액트 git clone했을 때 그냥

react 숙제를 하는데 아무리 생각해도 모르겠어서 정말 많은 시도를 해봤다설명을 봤는데도 음,........................ 싶어서 chatGPT한테 물어봤다.웃긴거 : GPT가 질문 칭찬해줌ㅋㅋㅋㅋㅋㅋ좋아요! 질문이 아주 훌륭합니다. 기존 코드와 수정한

props 공부하는데 숙제 내주신걸 계속 붙잡고 있어도 안풀려서 결국 답을 봤다...근데 내가 했던 것들이 왜 안 됐는지 궁금해서... 챗 GPT한테 물어봤다.안녕하세요, 저는 react 기초 중 props에 관해 공부하고 있습니다. Modal이라는 App의 자식 컴포

안녕, 나는 react 로 input을 받아 데이터를 처리하는 연습을 하고 있어.선생님이 내준 숙제를 스스로 풀어보고 있었는데, 숙제의 내용은 다음과 같아 : 'input에서 전송버튼을 누르면 글이 하나 등록되고, 글의 삭제하기 버튼을 누르면 글이 지워지도록 만들어 오

참고함 > https://ghi512.tistory.com/110% homebrew 어쩌구로 했을 때 안 돼서 여러가지로 시도했다.결과적으로는 %만 빼고 하니까 되더라.brew update - brew 업데이트brew search <패키지 이름> - 해당

react 블로그에 매우 간단한 input 유효성 검사를 해보려고 했다.e.target.value에 들어있는 값이 '' 이면 alert를 띄우려고 했는데, 이렇게 하면 전송버튼을 눌렀을 때 그대로 올라갔다.의심되는 것은 input 이 아니라 button에서 검사했어야

2025.01.02 리액트 개발환경 구축 오류 2 기존 글에 추가할까 하다가 이게 더 보기 쉬울것 같아서 따로 올림배경: 새로운 프로젝트 만들려고 npx create-react-app 했는데 안 됨난 폴더에 아무것도 안 만든 상태였어서 (package.json도 없음)

쇼핑몰 구현중에...컴포넌트를 만들어서 map으로 화면에 뿌리기까지 했다! 일단 오류 없이 잘 나왔는데...여기서 데이터를 더 늘려보고 싶어서 data.js의 데이터들을 여러개 복사해서 넣어 봤다.근데 데이터를 3개에서 6개로 늘렸으니 당연히 6개가 출력되어야 하는데,

쇼핑몰 구현 중...Detail 페이지를 따로 컴포넌트로 만들었고, 그 컴포넌트를 다른 파일로 분리하고 import 해 왔다.근데 분명 export도 잘? 한? 것 같고 import도 했는데...일단 내가 궁금했던 점 1 : Detail 이라고 불러왔는데 이라고 쓸수

Detail가지고 매닥질치다가 궁금해진 점이 있다.Detail 이라고 불러왔는데 <Detail / >이라고 쓸수 있나?ㄴ 이건 된다고 한다. 왜인지 모르겠으나 일단 그렇다고함. 궁금하니까 chatGPT한테 물어봤다.분명 import 할 때는 Detail 이라는 것

state에 들어있는 상품의 id를 상세 페이지에서 사용하고 싶은데, 그러려면 그게 몇 번째 상품인지를 알아야 합니다. 그런데 제가 반복문을 사용하지 않아서 i 를 전해줄 방법을 모르겠어요. data.js의 데이터는 배열로 되어 있기 때문에 먼저 배열의 몇번째 요소에

나는 URL에 잘못된 값이 들어온 경우를 대비하여 코드를 넣고 싶어요.그런데 if (!foundProduct) { return 상품을 찾을 수 없습니다.;} 그런데 저는 JSX 의 return 안에서는 이렇게 쓸 수 없다는 걸 알고 있어요.그래서 이렇게 작성해 보았습

여태 react 궁금증을 다 GPT한테 물어봤는데, 질문을 여러 번 나눠서 하기도 했고 할루시네이션 안 오게 나름? 잘 ? 했다고 생각했음 (여태 크게 없었기 때문에) 근데 나에게도 오다 아까 리액트로 쇼핑몰 구현중에,,, foundProduct가 있으면 글을 보여주고 없으면 없다고 뜨게 하려고 했다. GPT가 이렇게 해보래서 음 그렇구나~하고 나름 이...

방금 전에 썼던 글에서... 수정되기 전(할루시네이션이 왔던 것 같은) 코드와 고쳐서 나온 코드를 비교해 봤었는데,다른 건 다 똑같아 보이는데 이 부분만 다른 것 같았다.내가 그 전에 이렇게 썼던 게 화근인가 본데, 왜 그런지 물어봤다.id를 {} 로 감싸야만 제대

방금 질문했던 것에서...GPT가 객체 구조 분해 할당을 알려줬는데, 거기서 의문점이 하나 생겼다.내가 만든 아무 변수명이 어떤 요소인줄 알고 data 객체에서 요소와 매칭시킬 수 있는거지?그래서 생각해보니 id라는 키 값으로 매칭했나 보다.그래서 하나 더 물어봤다.제

https://hushkmj.tistory.com/141 참조

숙제로 인풋태그에 숫자가 아닌 게 들어오면 alert를 띄우는 걸 해 보라고 해서isNaN()을 쓰려고 했다.숫자가 아니면 true숫자이면 false 리턴그런데 내가 뭘 잘못했는지 모르게... 오류가 나서??? GPT한테 물어봤다.결론적으로 정리하면 e.target.v

useEffect 앞에서 변수 선언해야 오류가 안난다. 선언하고 나서 불러야되는 건 당연한거긴 한데, 왠지 헷갈렸다. 랜더링 다 된 다음에 실행되는 거니까 여기 써도 되나? 하고...이렇게 useEffect() 앞에 변수를 썼을 떄는 정상적으로 작동하지만, 이렇게

버튼을 누르면 비동기로 가져온 데이터를 기존 데이터 밑에 출력하고 싶어서 코드를 짰다.코드는 에러 없이 동작하는데(console에 데이터가 제대로? 출력된 것 같음) 근데 눌러도 실제로 데이터가 표시되지 않음.App.js당신의 코드에서 데이터가 제대로 화면에 표시되지

탭 만들기를 강의 안 듣고 혼자 해봤는데 완전 잘못 생각했다...탭 3개를 만들어서 각각 눌렀을 때 내용이 보이도록 하는 게 목표였는데,난 그걸 탭이 보이는 상태와 탭이 안보이는 상태<로 나누어서 저장해야 된다고 생각해서 이렇게함탭은 컴포넌트로 뺐고...map으로

문자+변수+문자 하려고 했는데 안되고 그부분에서 계속 오류가 나서뭐지...? 했는데바보다,,,이미 겉에서 중괄호를 썼으니까 안에는 중괄호 안써도 되는데... 이렇게했어야했음

props 쓰기 귀찮으면 이렇게 해도 된다고함원래 props 들어가는 자리에 중괄호 열고 props들 이름을 적어주면 됨하나 쓸 때는 하나, 여러개 쓸 땐 여러개 쓰면 되는 것 같다props 여러개 되니까 쓰기도 귀찮고 자꾸 깜빡하고 변수명만 입력해서 오류나는 것도 그

오늘은 CSS 관련한걸 해봤다사실 어제 좀 고생한게 클래스명 붙이는 법이 react적으로는 어떤지를 몰라서도 있었는데그걸 봤음이거 import 다른거랑 똑같이 import 뭐뭐 from "../App.css" 이렇게 썼더니 에러나길래 다 빼니까 된다.state를 빈 문

여러 중첩된 컴포넌트들 간에 state를 넘겨보고 있었는데 에러가 났다.ERRORObjects are not valid as a React child (found: object with keys {id, title, content, price, img}). If you

여러 중첩된 컴포넌트들 간에 state를 넘겨보고 있었는데 에러가 났다.ERRORObjects are not valid as a React child (found: object with keys {id, title, content, price, img}). If you

이전에 주석에다가 필기해둔 것들 옮겨놓음서버에 데이터 요청할 때 규격에 맞춰야함방법? (GET/POST)어떤자료? (URL)GET은 주로 가져올때 / POST는 주로 보낼때GET요청은 브라우저 주소창이 원래 GET요청 날리는 곳임.근데 주소창 통해서 GET/POST하면

주석 필기 옮김 2react는 SPA라서 html파일을 하나밖에 사용을 안함 (index.html)리액트 사용 안한 경우html파일을 만들어서 상세페이지 내용을 채움누가 /detail로 접속하면 detail.html을 보여줌리액트 사용한 경우 ☆ detail 컴포넌트를

이거 넣기< Provider store={import해온거} > 로 < App /> 을 감싼다끝

Redux 왜 씀?ㄴ state를 한곳에 모아놓고 모든 컴포넌트가 state를 직접 꺼내쓸 수 있다ㄴ props 없이도 편리하게 state 공유가 가능하다ㄴ 컴포넌트가 많아질수록 관리가 용이해짐여기서는 state 하나를 slice 라고 부른다store.jscreateS

state 만든 데 가서 수정하는 함수 만들기만든 함수를 export 해주기import해서 사용하는데 useDispatch() 안에다가 쓴다return 하고 새로운 값을 넣어주면 이 값으로 기존 state를 갈아치워 준다.여기서 기존 state 의 값이 필요한 경우 파

이렇게 state 가 object나 array 자료인 경우에 state 변경하는 법에 대해 공부했다.여기서 return하면 기존 state 를 갈아치워 주니까 이렇게 해도 되지만무슨 말이냐면 return을 안 쓰고, 그 안의 내용물을 직접 건드려도 바뀐다!!// 이건

state 변경함수에 파라미터를 줄 수 있다. 그래야 훨씬 간편하게 바꿔서 쓸 수 있으니까...기본으로 넣은 state 뒤에 추가하면 된다.근데 여기서 그냥 a 하고 끝. 이게아니고a.payload 라고 붙여줘야 한다.아마 그건거 같음~ 헤더 다 떼고 정말 내용만 있는

여태 서울에서 노트북으로 개발하다가 본가에 내려와서 데스크탑에서 PULL했다.처음에 git pull 했는데 뭔가 에러가 떠서git pull origin master 해봤는데 이제 된다.그러고 나서 별 생각 없이 npm start를 했는데 컴파일 에러가 떴다.읽어보니 전

지난번에 chatGPT한테 물어봤던거 (dispatch 로 상태변경하는 거) 상태 함수 안 쓰고 그냥 했다가 또 에러남 >Redux에서는 모든 state는 반드시 Slice의 reducers 안에서 관리해야 하며, 변경할 때는 reducers의 함수를 dispatch

findIndex()는 배열(Array)에서 특정 조건을 만족하는 요소의 "인덱스(배열의 위치)"를 찾아주는 JavaScript 함수입니다. ✅ findIndex()는 배열을 순회하면서, 특정 조건을 만족하는 첫 번째 요소의 위치(index)를 반환합니다.✅ 찾으면

헷갈려서 한번 정리함export default 변수명ㄴ 변수명은 자유롭게 작명 가능export { a, b } ;import 변수이름 from '경로'import { 변수이름, 변수이름2 } from '경로'주의 : 중괄호로 여러개 import 할 때는 자유롭게

임의로 데이터를 넣어서 테스트해봤는데 여기에 이렇게 공백으로 뜬다.이게 왜그런가,,, 했는데생긴 게 다른 데이터를 집어넣어서 그렇다고 한다.현재 addToCart 리듀서에서 newData를 하드코딩하여 추가했지만, 공백이 나오는 이유는 Redux Toolkit의 Imm

: 브라우저에서 제공하는 데이터 저장소개발자 도구 > Application > Local storageKey : Value 형태로 값이 저장됨.문자 데이터만 저장 가능 (최대 5MB까지)데이터가 반영구적으로 유지 (브라우저 청소하면 사라짐)DB 없이도 임시로 저장해둘

그 전부터 이상하게도 내가 새 폴더 만들어서 리액트 앱 좀 설치하려고 하면 계속 이 에러가 떴다. 한두 번도 아니고 계속 이러니까 대체 뭔가 했는데 ㅡㅡ오늘에야 그 원인을 찾아냈다...아니 원래도 써있긴 했는데? 그전에 왜 못 찾았을까?해당 폴더가 없어서 에러가 뜬다고

혼자 오늘 한 것 정리했는데코딩애플님 강의 듣고 있어서 layout 설명 같은건 강의에 있던 그림을 첨부했다. 참고.App router 는 yes 로 함난 tailwind CSS 도 써볼거라서 같이 깔았다.실행 명령어는 npm run devapp 폴더 : 내가 코드짤

여러색깔이 들어갈 수 있는 버튼을 만들라고 하셔서tailwind CSS 도 써볼 겸 클래스 자리에 구멍을 뚫고 props를 넘겨주는 방식으로 해 보려고 했다.근데 위에꺼는 되는데 아래꺼는 안되는거임. 왜지?!그래서 windsurf 한테 물어봤는데,문제는 Button 구

예전에 내가 개발 배웠을때 (22년에 부트캠프 다녔으니) 까지만 해도 bootstrap을 많이 사용하고 tailwind css 를 많이 안 썼던 걸로 기억하는데요즘은 tailwind css 가 거의 대세를 이루는 것 같다(느낌상 채용공고에 부트스트랩 찾는 데 아무데도

Next.js 기준 내가 중요하게 봐야 될 곳은 여기 DB Access는 DB 사용자 계정? 관리인것 같고 Network Access는 접속 가능한 IP를 설정

지난번에도 이거때문에 고생을 좀 했었는데(윈드서프가 알아서 해줌 ,,,근데지금은 크레딧이 없어 내가) 이번에도 또 떠서도대체뭐냐!!!!하고 파봤음새 프로젝트 생성하고 tailwindcss 세팅하려고 하면 에러가 남.npm error could not determine

KPI (Key Performance Indicator, 핵심 성과 지표)란,어떤 조직이나 개인이 목표를 얼마나 잘 달성하고 있는지 측정하는 지표입니다. 쉽게 말해, "우리 목표를 잘하고 있는지 확인하는 체크리스트"라고 보면 돼요. 💡 예를 들어보면:👉 헬스장에

🔥 React 프론트엔드 개발자로서 KPI를 쌓을 수 있는 혼자 할 수 있는 프로젝트 아이디어 & 학습 방법을 정리해드릴게요! 🚀 🎯 KPI 목표: 웹페이지 로딩 속도 2초 이하 유지, Lighthouse 성능 점수 90점 이상 ✅ "Next.js + Reac

다이나믹 로딩으로 코드 스플리팅을 해서 성능을 향상시킨다고 해서,다이나믹 로딩이 뭔지 부터 물어봤다...다이나믹 로딩(Dynamic Import)이란 필요한 순간에만 특정 코드나 컴포넌트를 로드하는 기술입니다.Next.js에서는 import()와 next/dynamic

Next.js에서는 서버 없이도 API를 만들 수 있다는데 그게 잘 와닿지 않아서 어떤 뜻인지 물어봤다.next.js가 서버 없이도 API를 만들어서 데이터를 처리할 수 있다는 말을 더 자세히 알고 싶어요. 무슨 뜻인가요? 원래는 서버가 있어야 데이터를 처리할 수 있는

토이프로젝트 하고 있는데,{pdfText && <TranslationResult text={pdfText} 를 화면에 출력해보니 결과가object Object object Object object Object object Object object Object ob

배경 혼자 토이프로젝트 만든거를 이제 빌드해서 vercel 에 올려보려고 했는데 npm run build 할때 빌드가 안되는거다 음?ㅋㅋ 이러고 걍 다시 빌드하고 그랬는데 별 거 아닐 줄 알았는데 이게 날 ...이렇게 고톹ㅇ받게 할줄은... 진짜 영원히 괴롭힘ㅁㅊ

GPT가 자꾸 헛소리하고 리눅스용 명령어로 알려주길래 따로 올려놓는다

겨우 빌드 성공했더니만 pdf js 가 api 버전이 안맞는다고? 에러가 뜬다브라우저 콘솔hook.js:608 zdetails: "Error: The API version \\"3.11.174\\" does not match the Worker version \\"3.