개발일지

팀원 분이 for문에 let을 붙이지 않아도 실행이 된다고 하셔서 같이 구글링을 하여 찾아보니 아래와 같은 답변을 얻게 되었다.변수에 let 을 붙이지 않아도 문제가 없는 것은,오래 전의 자바스크립트 문법과의 호환성을 위해 남겨둔 것으로 권장하지 않는 방법이다.이렇게

vs code 터미널에 node 파일명.js 엔터아침부터 'Error: Cannot find module'이라는 에러가 발생했다.저장하고 한 번 더 실행하니 역시나 다시 에러가 발생했다.생각해보니 어제 밤에 Git에 올린다고 부모폴더를 하나 더 생성한 것이 원인이었다.

vs code프로그램, node 설치js파일에서 터미널 열고 node 파일명.js 엔터로 실행Javascript 문법공부1-1 자바스크립트 소개1-2 변수와 상수1-3 데이터 타입 11-4 데이터 타입 21-5 형변환1-6 연산자1-7 함수1-8 스코프 및 화살표함수1

Python과 mongoDB를 이용하여 협업협업에 효율적이면서 개개인에 대한 파트분배자바스크립트 문법 공부

vim plugin을 일단 제거해서 해결함.

1) 한 일프로젝트 명: 팀원 소개페이지 프로젝트필수 작업: CRUD,Mongo DB를 활용한 웹페이지 작성추가 작업: AWS를 통해 배포하였다. 날씨 API, Bootstrap를 사용하여 UI작업을 구현2) 느낀점지영 - 그동안 배운 것을 통해 기능을 만들고, 여러

팀원들과 프로젝트 정리 중이다.SA 수정하고 팀원 분이 수정된 UI대로 와이어프레임 디자인해주셨고 버그들을 수정했다.git저장소에서 파트별로 브랜치 생성한 걸 main브랜치에 풀리퀘스트를 통해 병합하였다.댓글 수정기능과 좋아요 기능만 추가하면 된다.

git & github 학습강민철 강사님의 zoom 강의를 수강하였고 기초부터 차근차근 알려주셨습니다.팀 프로젝트 시작팀원들과 팀프로젝트(팀원 소개페이지)구상을 진행하였습니다.일주일 후 팀원들이 바뀌었고 프로젝트 기능구현 파트분배를 진행하였습니다.(함수단위로 나눠서)

flask활용한 프로젝트 작업 중에static디렉터리 안에 css,img,js 디렉터리를 구성해서 파일을 옮겨 js에서 이미지 파일을 불러오려고 하는데 상대경로로 잘 불러와지지 않았다.이상하게도 static까지 적어줘야 불러와지는 현상을 경험했다.

TemplateSyntaxErrorjinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'comment'.프로젝트를 하다가 레이아웃을 싹 다 교체하게 되어 ui를 바꿔버리는 중 link태그에 주석을 단축키를 써

음식 카테고리별 맛집추천(한식,양식,일식,중식,분식)글쓰기 기능 : 음식 섬네일, 식당 이름, 식당 설명, 별점 기능, 음식 카테고리, 코멘트읽기 기능 : 목록 보여주기컨셉 : 망고플레이트 색상, 망고플레이트 크롤링 예정

프로젝트 폴더 생성vs code로 프로젝트 열어서 터미널 실행macpython3 -m venv venv 엔터오른쪽 아래 3.8.6 인터프리터 venv 가상환경으로 세팅하면 venv폴더 생성됨터미널 닫고 재실행하고 (venv) 확인templates폴더 생성 후 index

맥 환경 터미널에서 python파일을 실행하다보면 오류가 생기는데이럴 땐 5000포트가 이미 사용 중이니 포트번호를 5001이나 다른 포트로 변경해주면 해결이 된다.

파이썬 패키지 설치 및 사용웹스크래핑(크롤링) 연습mongoDB 연결pymongo로 DB조작하기웹스크래핑 결과 이용하기

Flask서버 세팅html 파일 주기API 만들기프로젝트 세팅(뼈대 준비,POST,GET)

Flask 파이썬파일 실행하려는데 Method Not Allowed 오류가 나는 문제app.py에 Port를 5000에서 5001로 변경해주면 대부분 해결이 되었는데(된 줄 알았는데 아니어서 아래와 같이 다시 세팅해야 했다.)MAC환경의 경우 에어드랍때문에 5001로

맥 환경 vs code에서 팀원과 프로젝트를 공유받던 중 아래 메시지가 떴다.command not found: pip인프런에서 나도코딩님의 답변으로 해결하였다.맥북이라면 pip 대신 pip 3 명령으로 설치맥북에는 기본적으로 파이썬2가 깔려 있어서 pip 명령으로 하시

콘솔 에러 내용 :Uncaught SyntaxError: missing ) after argument list (atJavscript에서 백틱(\`\`)안에 문자열과 변수를 사용하고 이벤트를 주기 위해 onClick 테스트를 하고 있었는데 위에와 같은 에러가 나타났다.

원페이지에서 검색창을 구현하는데 input태그에 검색키워드를 쓰면 기존영역에 해당된 검색결과가 보이는 형식이었다.form 태그 안에 text 타입의 input 박스가 하나만 존재 할 경우(hidden 제외) input 박스에서 엔터를 치면 자동으로 form태그에 sub

프로젝트 작업을 하던 중에 위와 같이 크롬 콘솔에러가 나왔는데 찾아보니 evernote 웹스크랩에 대한 오류였다.구글링을 하면 검색문서가 별로 없는데 그 중에 한글문서는 보이지 않았다.아무래도 evernote사용자가 적어서 그런 것 같다.어제 밤에 크롬용 evernot

form태그에서 작업 중 새로고침 방지를 위해 onsubmit ="return false"를 사용하였다.좀 더 자세히 알아보기 위해 onsubmit ="return false" 과 e.preventDefault() 차이점을 알아보니 onsubmit ="return fa

이번 주는 개인프로젝트를 마치고 팀원들과 알고리즘을 같이 푸는 시간을 보냈다.각자 다른 방식으로 방법을 도출해 내기도 하고 안풀리는 문제를 같이 해결하는데 있어 너무 유익한 시간이 되었다.시간을 내서 조금이라도 문법공부를 하면서 알고리즘도 틈틈히 풀어야겠다.다음 주에는

프로젝트에 사용할 api키를 발급받기 위해 영화진흥위원회에서 api키를 발급받으려고 하는데사용할 url을 입력하라고 하였다.일단 로컬에서 사용할 개발용이라 http://localhost:port번호 or http://127.0.0.1:port번호를 입

프로젝트 작업 중 영화장르를 불러오는 화면 UI에 object Object,object Object가 나타났다.${}는 Template Literals(템플릿 리터럴) 또는 Template Strings(템플릿 문자열)이라고 안에 함수나 변수를 담아 사용할 수 있는데

프로젝트를 git에 커밋하고 푸쉬하려는데 생기는 오류현재 우리는 main브랜치를 최종배포용으로 사용하고 있고dev브랜치를 개발용으로 각각의 파트 브랜치를 생성해서 dev에 병합해서 사용하고 있다.저 위와 같은 오류가 생기는 것은 dev라는 브랜치가 동기화(업데이트)가

git branch 병합 중에 생긴 이슈

버튼 태그 클릭시

Git에서 Readme 파일에 사용할 이미지Readme 작성시에 git 레파지토리에 이미지 파일을 업로드하여 이미지경로를 불러와야 하는 줄 알고 있었는데 팀프로젝트 진행 중에 새로운 사실을 알게 되었다.Github사용시 Readme 파일 작성 중에 사용할 이미지를 Is

이 번 한주는 6월 1주차에 개인프로젝트를 진행하였던 것을 토대로 더 한 단계 업그레이드 된 기능 구현을 하는 시간이었다.팀원들과 협의하에 내가 만들었던 프로젝트가 채택이 되었고 추가 api를 불러와 상세페이지 작업을 이어나갔다.새로운 깃 레파지토리를 생성하여 팀원들을

Javscript 런타임 환경

> React에서 Warning: Each child in a list should have a unique "key" prop. 오류 해결법 map함수를 사용하여 반복하고 있었는데 사용하고 있는 태그에 key값이 없어서 생기는 오류였다. key값을 넣어주면 warning이 사라졌음을 확인 할 수 있었다.

clickCompleteButtonHandler is not a function Section 컴포넌트(상위)에서 WorkingList 컴포넌트(하위)에서 사용할 컴포넌트를 나누던 중 위에 빨간색 문구를 발견했다. WorkingList 컴포넌트에서 button 부분에 clickCompleteButtonHandler가 불러오지 않아서 생긴 현상이었는데 아...

Github Stats의 오류github의 overview에서 Most Used Languages와 github stats를 보여주고 있었는데자정 쯤에 들어가니 제대로 불러오지 못하고 위와 같은 문구를 보여주고 있었다.자정이 지나면 리셋이 되어 제대로 보여질 수 있을

Links must have discernible text Element has no title attributevs code에서 코드 옆에 위와 같은 문구가 나타났다.접근성을 위해 aria-label 속성 설명을 작성하였어야 했는데 누락이 되어 문구가 나타났던 것이다

6월 3주차 이번 주는 React를 활용하여 투두리스트를 만들었다.CRA부터 설치해 jsx를 만들고 usestate,props, props.children을 사용하여 하위 컴포넌트에 전달하는 법을 배웠다.반복되는 부분은 컴포넌트로 분리하고 취소,완료 버튼 부분이 바뀌는

TodoList 작업 중 생긴 오류원인 항상 map 메소드를 쓸 때 발생하게 된다.해결방법1\. 항상 최상위 컴포넌트 html 요소가 key가 가지고 있는 아이디를 부여2\. 2번째 인자로는 index를 항상 반환을 해줌, 그래서 index를 key값에 넣어주는 방법(

React에서 console.log가 두 번 찍힐때해결방법index.js에서 <React.StrictMode> </React.StrictMode> 부분을 주석 처리하면 된다.궁금점해결방법은 알았지만 왜 그런지 궁금했다.이유React.StrictMode는 개발

react hook usestate cannot be called at the top level문제점react hook usestate cannot be called at the top level라는 에러 발생원인useState를 함수 컴포넌트 내에서만 사용해야 하는데

error Couldn't find a package.json file in "/Users/mac/Desktop/study/sparta/bootcamp/study/react"info Visit https://yarnpkg.com/en/docs/cli/run f

jsconfig.json사용방법리액트에서 Json파일을 생성하여import시 상대경로로 불러오지 않고import 'App.css'; 이런식으로 파일명만 적어줘도 된다는 걸 알았다.느낀점일일히 경로 확인하며 작성했었는데 이런 편리한 방법이 있다는 걸 알게 되었다.

UUID와 nanoidUUID와 nanoid는 리액트에서 고유 식별자를 생성하기 위해 사용하는 라이브러리이다.UUID문자와 숫자의 조합으로 이루어져있고 길이가 길어 각각의 데이터를 식별하고 구분하기 위해 사용하고 랜덤하게 생성된다고 한다.각자 모두가 이름이 있어 구별

6월 4주차도 쉴새없이 바쁜 한 주 였다.특히 redux활용한 상태관리가 어려웠다.

버튼 클릭시 새로고침 현상 해결방법버튼태그를

react-icons import시 에러문제점상단에 import로 아래 코드를 넣어주고jsx부분에 아래 코드를 넣어줬더니 생긴 오류였다.해결방법react-icons/ai라고 수정 저장을 해줘도 에러가 나길래 아예 지우고다시 자동으로 불러올 수 있게 수정해주었더니 에러가

id = nextid()nextid()는 다음 번호를 가져오는 함수이다. 함수는 어떤 작업을 수행하기 위해 미리 만들어 놓은 코드 묶음인데 이 함수는 현재까지 사용된 번호 중에서 다음으로 사용할 번호를 알려주는 역할을 한다.따라서, id = nextid()는 다음에

Quota exceeded.FirebaseError: Quota exceeded.문제점파이어베이스와 연결해서 사용하던 중 만난 오류원인프로젝트 중에 팀원들과 공동으로 파이어베이스에서 작업을 하면서 일일 초과 사용량 발생해결방법완벽한 해결방법이라고 할 수 없지만일단 테스

userRef.get is not a functionTypeError: userRef.get is not a function문제점userRef.get is not a functionTypeError: userRef.get is not a function라는 에러 발생

env 환경변수 파일.env 파일은 프로젝트에서 사용할 환경 변수를 설정하는 파일이다. 환경 변수는 프로젝트 설정, API 키, 데이터베이스 연결 정보 등과 같은 중요한 구성 값들을 포함할 수 있다.firebase.jsx 파일 .env.local 파일 (프로젝트 폴더

이번 주는 리액트를 활용하여 협업 프로젝트를 진행했다. 블로그, 커뮤니티, SNS와 같이 내 게시물을 포함한 모든 게시물을 볼 수 있는 공간을 만드는 프로젝트였다.각자 벤치마킹을 하여 가지고 온 내용을 토대로 와이어프레임을 작성하고 우리 팀만의 코딩 컨벤션을 작성했다.

Vercel 호스팅 후 가비아 도메인 연결문제점토요일에 vercel에 호스팅 후 가비아에서 도메인을 생성해서 사용하고 있었는데 오타가 있어 변경해야했다.

1) 한 일프로젝트명 : FIT THROUGH (휘뚜루 마뚜루)필수 작업 : CRUD,Mongo DB를 활용한 웹페이지 작성추가 작업 : AWS를 통해 배포하였다. 날씨 API, Bootstrap를 사용하여 UI작업을 구현2) 느낀점경모 - 그동안 배운 것을 통해 기능

Attempted import error: 'authService' is not exported from '../../firebase' (imported as 'authService').ERROR in ./src/components/Header/Header.jsx 51

문제점https://www.npmjs.com/package/json-server 문서의 내용을 참고하여리액트 프로젝트에서 json-server 패키지를 설치했다.명령어 설치 후 package.json 파일에 설치 된 것을 확인했고프로젝트 루트폴더 안에 db.j

문제점React에서 axios와 json 서버 연결 중 생긴 오류인데json 서버는 포트 4000으로 실행하고리액트 서버는 포트 3000으로 실행하고 있었다.404에러가 나고 있길래 어떤 문제인지 확인해보았다.해결방법axios.get 호출에서 await를 사용하지 않아

<path fill="#000" d="M91.72 134h-4.96l-8.44-18.84V134h-4.04v-24.92h5.48l7.92 17.84v-17.84H92c.04.04.08.12.08.2 0 .12-.04.24-.12.4-.12.12-.2.4-.24.8V13

Git에서 'git checkout'과 'git switch'는 브랜치를 전환하는 명령어이다. 하지만 둘 사이에는 몇 가지 중요한 차이점이 있다.한 달 전쯤, 프로젝트 중 팀원 분이 git switch도 있다고 말씀해주셨다. git switch라는 명령어가 있는지는 알

햇살이 불타는 듯한 7월 2주차, 덥고 따뜻한 여름이 시작되었다.이번 주는 리덕스 툴킷, json 서버, Axios를 공부했고 시간을 할애하여 주로 나에게 집중하는 시간을 가졌다. 시간을 가진 덕분인지 몸과 마음이 조금씩 회복되고, 에너지가 차오르는 것을 느낄 수 있었

Warning: React does not recognize the 'isActive prop on a DOM element. If you intentionally want it to appearreact-dom.development. js:86 in the DOM a

.env파일 환경변수 세팅 오류문제점루트에 .env라는 파일을 아래와 같이 생성src/api/todos.js파일에 아래와 같이 생성해결방법src/api/todos.js파일을 수정해줘야 함.위 부분을 아래와 같이 수정느낀 점발생한 에러를 해결하는 과정에서 디버깅 및 문제

React Hooks에서 useSearchParams 에러 해결하기문제점searchParams가 함수가 아니라고 에러가 발생하고 있다.button 클릭핸들러에서 searchParams를 잘못 사용하고 있는데 searchParams를 업데이트 하려면 setSearchPa

클라이언트의 fetch 요청 URL 오류로 인한 문제 해결(POST http&#x3A;//localhost:3000/posts 404 (Not Found))문제점글 작성 후 추가하기 버튼을 클릭하면 404에러가 생기고 db.json에 데이터를 저장이 안되고 있는 현상원

상황리액트 구현한 프로젝트를 vercel에 배포하고 glitch에 json 서버를 배포하고 있었다.구글링을 해서 https&#x3A;//github.com/kitloong/json-server-vercel.git 을 use this template -> create a

GET http&#x3A;//localhost:3000/undefined/todos 404 (Not Found) 문제 발생404오류가 발생했다. 서버가 요청한 리소스를 찾을 수가 없어서 발생한 오류이다. .env파일을 생성하고 콘솔창에서 3000포트로 요청을 하고 있

어느덧 7월의 3주차가 지나갔고, 두 달여가 흘렀다.지난 주 휴식기간으로 인해 이번 주부터 속도를 내기 시작했는데어떻게 시간이 지나갔는지 모르겠다.너무도 바빴던 하루들이었다.잠을 제대로 자지 못하는 날도 많아 오늘 일어난 일인지 어제 일어난 일인지 기록을 통해 확인해야

팀프로젝트 수행을 시작하는 한 주가 시작되었다.프로젝트의 기획, 구성, 스코프를 정하고 역할 분담을 하였다.CRA 프로젝트 셋업을 하고 .prettierrc 파일도 생성하고 기본적인 세팅을 마치고 git repository를 생성해서 각자 파트별로 브랜치를 생성했다.이

json server 포트번호가 이미 사용 중일 때 뜨는 에러 메시지원인json-server를 설치하고 리액트서버도 재실행하면서 json-server도 실행했다.에러메시지 그대로 이미 4000포트를 실행 중에 있었는데 다른 작업을 하다가 창을 새로 열어서 작업을 한 상

error: Command failed with exit code 1문제점터미널에서 계속 error: Command failed with exit code 1 오류시도한 방법node_modules, yarn.lock 파일을 삭제yarn 공유 캐시 파일 지우기yarn 재

이번 프로젝트를 진행하면서

.env파일이 없을때 생기는 오류GET http&#x3A;//localhost:3000/undefined/visit 404 (Not Found)팀원 중에 자꾸 null값이 뜨면서 데이터가 보이지 않는다고 하는 현상이 있었다.그래서 코드도 다시 받아보고 하였지만 해결되지

이번 주는 리액트로 설문조사 폼을 만드는 프로젝트를 진행했다.많은 시행착오들을 겪었는데 구글스프레드시트 내용을 가져오려고 api키를 발급받았다.구글스프레드시트에 적힌 내용을 그대로 가져오려면 버전을 다운그레이드 해줘야했다.react: ^18.2.0react-script

Youtube API의 하루 할당량(quota)은 10,000 이며, API 종류에 따라 quota cost가 다르니 고려해서 선택해야 합니다. (참고: search list API는 1회 당 100 이므로 하루 최대 100번까지만 검색 기능 사용 가능)참고https&

Warning: Each child in a list should have a unique "key" prop.문제원인각 자식 요소에 고유한 "key" prop을 지정하지 않아서 생긴 메시지이다.예시1예시2문제해결map함수 안에는 key값을 넣어줘야 이와 같은 오류가

배열 메소드 find()를 활용한 데이터 검색 배열 안에서 특정 조건을 만족하는 데이터를 찾아야 할 때 find()를 활용하면 원하는 데이터를 검색할 수 있다.find() 메소드find()는 배열 메소드 중 하나로, 배열의 각 요소를 순회하면서 콜백 함수를 실행하여

Redux Toolkit리덕스를 더 간편하고 효율적으로 사용할 수 있게 도와주는 패키지이다. 리덕스 툴킷을 활용하면 짧고 간결한 코드로 상태를 관리할 수 있도록 해준다. 불변성 관리를 자동으로 처리하고, 액션 생성자와 리듀서를 자동으로 생성해주는 등의 기능을 제공하여

React Redux 페이지 리다이렉션의 중요성수정 페이지에서 리다이렉션을 누락하는 경우 발생하는 문제문제발생handleEditedTodoSubmit 함수에서 navigate("/")를 누락했다.Edit페이지에서 제목,내용을 작성 후 수정완료하기 버튼을 클릭한 후 co

Node환경에서 자바스크립트를 실행할 수 있지만 타입스크립트는 실행할 수 없다.위 에러는 터미널에서 node index.ts로 실행하면 보이는 현상이다.그래서 tsc index.ts 라고 실행해준다.그러면 index.js파일이 하나 더 생성된다.타입스크립트는 브라우저가

7월 마지막주 너무도 무더운 날씨였다.무더운 날씨가 계속되는 것 같아 기운이 빠지기도 했지만, 이번 주는 지난 프로젝트에서 남겨두었던 어려웠던 부분들을 정리하는데 집중할 수 있었다. 새로운 접근 방식을 통해 문제들을 해결해나가는 도중에 많은 깨달음을 얻을 수 있었다.과

React에서 form 태그 안에 여러 개의 버튼 태그 사용 시 주의점문제점폼 제출 처리 문제:여러 개의 버튼을 사용하면 어떤 버튼이 폼을 제출하는 역할을 수행하는지 명확하지 않을 수 있다. 사용자가 다른 버튼을 누르면 폼이 잘못 제출될 수 있으며, 예기치 않은 결과

해결방법

회원 가입 폼주의할 점위 코드에서 alert 함수로 '비밀번호가 일치하지 않습니다.' 메시지를 띄워주고 있지만 메시지를 보여준 뒤 return 문을 사용하지 않으면, 비밀번호가 일치하지 않더라도 회원 가입 함수(signUp)이 계속 실행된다. 즉, 회원 가입이 비밀번호

TypeScript와 Node.js를 함께 사용하여 JavaScript 파일을 실행하는 방법TypeScript는 정적 타입 언어로 코드의 안정성과 가독성을 제공해준다. 하지만 Node.js는 기본적으로 TypeScript를 이해하지 못하기때문에 TypeScript 파일

문제 발생깃허브 원격저장소에 푸쉬가 안되는 현상문제 원인깃허브 설정에서 이메일 주소를 변경 및 이메일 주소를 비공개 처리문제 해결 방법(시도한 방법)구글링 중에 stackoverflow의 답변들을 참고하여 해결https&#x3A;//stackoverflow.com/qu

Mac intellij에서 마우스 더블클릭이 안되는 현상맥용 인텔리제이에서 프로젝트 파일을 열어 보는 중에 특정 파일들이 안 열리거나 늦게 열리는 현상이 있다.키보드의 Caps Lock 키나 한/영 키를 눌러주면 해결을 할 수 있다.스택오버플로우의 참고자료https&

어느 덧, 8월 첫째 주연속되는 폭염으로 인해 공부가 전혀 진행되지 않았다.그 동안 멘탈 관리에 뒷전으로 미뤄진 공부를 따라가기 버거워졌다.해야 할 일도 많고, 여러 가지 개인적인 이유로 인해 무엇 하나 제대로 해내지 못하고 있어, 오히려 문제들만 더 쌓여가고 있다.

업로드중..fatal: destination path already exists and is not an empty directory.문제 발생git repository의 프로젝트를 clone 하는 중에 발생문제 원인경로가 이미 있고 빈 디렉토리가 아니라는 메시지가 출

React 이미지 관리 방식 비교: public 폴더 vs src 폴더public 폴더public 폴더에 이미지를 배치하는 방식은 경로 관리의 간편함과 번들 크기를 줄일 수 있는 장점을 가지고 있다. 이미지가 빌드 시 복사되지 않아 번들 크기에 영향을 주지 않기 때문에

Recoil(리코일) vs Jotai(조타이)Recoil과 Jotai은 상태 관리 라이브러리이다.상태 관리 : 컴퓨터 프로그램에서 정보를 저장하고 업데이트하는 방법을 말한다.원하는 정보를 저장하고 필요할 때 가져와서 사용할 수 있게 해준다.차이점 Jotai는 간단하고

React에서 page-flip 라이브러리를 스타일 컴포넌트로 수정시 에러위 처럼 라이브러리의 코드를 수정 사용시 나타난 에러로위 코드와 같이 너비와 높이를 넣어서 사용하면 해결된다.

React에서 html2canvas를 사용한 이미지 저장(화면 캡쳐) 방법html2canvas 설치

React PageFlip 컴포넌트 내부에 input 태그 삽입시 사용자가 글자 하나를 입력하면 포커스가 사라지는 현상PageFlip의 라이브러리를 활용하여 페이지 넘김 애니메이션을 구현을 하고 있었다.문제 발생HTMLFlipBook 안에 input태그를 삽입시 클릭

벌써 한 주가 지나갔다.이번 주는 고민을 입력하면 랜덤으로 조언을 보여주는 것을 구현하였다.내가 먼저 어느정도 작업을 해놓아야

FirebaseError: Firebase: Error (auth/unauthorized-domain)문제발생FireBase 소셜로그인 오류가 발생문제 원인기존 로컬서버에서 locahost로만 테스트를 하고 있었기때문에 vercel에 배포하면서 주소가 https&#x3

Module not found: Error: Can't resolve 'react-query'문제 원인App.jsx 파일에 react-query 라이브러리를 불러오지 못하는 현상.package.json 파일에 react-query가 미설치 되었었다.해결 방법위 명령어로

Redux Toolkit vs Jotai팀 프로젝트를 진행하기 앞서 리덕스 툴킷과 조타이에 대해 알아보기로 했다.Redux Toolkit리덕스 툴킷은 리덕스(Redux)라는 상태 관리 라이브러리를 더 편리하게 사용할 수 있도록 만들어진 도구이다. 리덕스 자체는 상태 관

Redux(리덕스) vs Jotai(조타이)접근 방식Redux: Redux는 중앙 집중식 상태 관리 패턴을 채택한다. 단일한 상태 스토어를 유지하며, 상태 변경은 불변성을 유지하고 액션을 통해 이루어진다.Jotai: Jotai는 분산된 상태 관리 패턴을 채택한다. 각

왜 리액트에서 상태 관리가 필요한가?컴포넌트 기반의 라이브러리인 리액트에서는 상태 관리가 중요한 역할을 한다.컴포넌트 간 데이터 공유: 여러 컴포넌트가 같은 데이터를 공유해야 할 때, 상위-하위 컴포넌트간 props를 통해 데이터를 전달하는 것은 복잡도를 증가시킨다.

Redux란 무엇인가?Redux는 JavaScript 애플리케이션의 상태를 효과적으로 관리하기 위한 오픈 소스 JavaScript 라이브러리이다. 주로 React와 같은 사용자 인터페이스 라이브러리나 프레임워크와 함께 사용되며, 애플리케이션의 상태를 예측 가능하게 만들

var (어디서든 사용 가능한 변경 가능한 값)어디서든 사용할 수 있는 변수. 언제든지 지우고 다시 쓸 수 있다.let (일정 범위 내에서만 사용 가능한 변경 가능한 값)해당 변수가 정의된 블록 내부에서만 사용할 수 있는 변수. 블록 내부에서는 지우고 다시 쓸 수 있다

입추가 지나서 그런지 날씨가 못 견뎌줄 날씨는 아닌 것 같다.이 번주부터는 약 5주간 프로젝트를 진행하게 되는데 시행착오가 많았다.시행착오를 겪은 만큼 우리 팀이 성장할 수 있는 기회였다고 생각한다.팀원들이 많이 지치고 힘들었을텐데 내색도 안하고 열심히 해주고 계셔서

React에서 Ant Design Modal 이름 충돌 문제 해결코드를 작성하는 도중에 React 프로젝트에서 Ant Design의 Modal을 사용하면서 이름 충돌 문제가 발생할 수 있습니다. 이러한 문제를 해결하기 위해서는 몇 가지 조치가 필요합니다. 아래에서는 이

Local Storage(로컬 스토리지) vs. Session Storage(세션 스토리지)웹 애플리케이션을 개발하면서 클라이언트 측에서 데이터를 저장하고 관리해야 할 때, "Local Storage"와 "Session Storage"를 사용할 수 있다.Local St

무한 스크롤 구현시 고려해야 할 중요사항무한 스크롤은 웹사이트나 애플리케이션에서 사용자 경험을 향상시키는 유용한 기능 중 하나이다. 이를 구현할 때는 여러 요소들을 고려해야 한다.1\. 효율적인 데이터 로딩한 번에 모든 데이터를 로드하는 것은 성능 저하를 초래할 수 있

리얼 돔(Real DOM) vs 버츄얼 돔(Virtual DOM)웹 페이지를 만드는 데 있어 중요한 개념 중 하나가 바로 DOM 이다. (DOM : Document Object Model의 약자로, 웹 페이지의 구조를 표현하는 모델)리얼 돔(Real DOM)리얼 돔은

useRef란?useRef는 React의 Hook 중 하나로, 렌더링 사이에서 값이 유지되는 변경 가능한 객체를 반환하는 데 사용된다. 이 Hook은 .current 프로퍼티에 변화를 넣어두고 해당 값을 가져올 수 있다.useRef의 사용1\. DOM 요소에 접근하기u

호이스팅(Hoisting)이란?자바스크립트에서 변수와 함수 선언을 해당 스코프의 최상단으로 끌어올리는 것을 말한다. 코드를 실행하기 전에 자바스크립트 엔진이 변수와 함수 선언을 먼저 메모리에 할당하기 때문에 발생하는 현상이다.변수 호이스팅변수 선언(var)은 호이스팅되

지난 주까지는 와이어프레임을 뒤엎고 다시 만들어가면 고민을 했던 시간이었다.본격적으로 개발을 시작하게 된 기간이었다.와이어프레임의 기능을 팀원들 모두가 완벽하게 숙지하고 기능개발을 해야했고 다들 어서 개발을 하고 싶어했던 시간이었다.기능 개발을 시작하면서 다들 집중하는

useEffectReact 컴포넌트에서 사이드 이펙트를 수행하는 데 사용된다. 사이드 이펙트란 데이터 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 변경하는 것 등을 말한다.useEffect의 실행 시점컴포넌트 마운팅 후: 컴포넌트가 처음 DOM에

Promise란?Promise는 JavaScript에서 비동기 작업을 다루는 객체이다. 이는 "나중에 결과를 주겠다"라는 약속과 같다. Promise가 성공적으로 완료되면 결과를 제공하며, 실패하면 그 원인을 알려준다.위 코드에서 homework라는 Promise 객체

파일 업로드시 같은 이미지(업로드 했던 이미지)가 적용되지 않는 현상Firebase의 압축된 이미지가 Storage에 저장이 되어 Firestore에 해당 이미지의 링크가 저장이 된다.

React에서 화면에 렌더링이 안되는 현상(return문 누락)문제 발생화면에 렌더링이 되지 않는 현상문제 원인map()함수 내부에서 jsx요소를 반환 할때 필요한 return문이 누락 되어 발생. javascript의 화살표 함수에서 중괄호{}로 본문을 감싸면 명시적

fatal: couldn't find remote ref branch명원인원격 저장소에 해당 브랜치가 존재하지 않아서 생기는 오류해결방법생각해보니 이틀 전에 해당 브랜치를 원격에서 삭제했었던 것이 원인이라이슈를 생성해서 브랜치를 재생성했다.

React Swiper에서 map 함수를 사용할 때 고유한 키(Key) 값React에서 map 함수를 사용하여 배열을 렌더링할 때, 각 자식 컴포넌트에 고유한 키(key) 값을 제공하는 것은 매우 중요하다. 이것은 React의 재조정 알고리즘을 최적화하고 예기치 않은

오류들을 맞이하는 시간이었다.맡은 기능개발을 마치고 오류들이 있는지 확인 후 다른 기능개발을 시작했다.그런데 팀원들과 병합을 시작하면서 이상없었던 문제들이 계속 발생하기 시작했다.원인들을 찾아가며 오류들을 해결하느라 많은 시간을 할애하게 되었지만 그만큼 문제 해결하는

React에서 styled-components와 Ant Design Button을 사용할 때 발생하는 문제 해결 방법React 애플리케이션을 개발할 때 styled-components와 Ant Design의 Button 컴포넌트를 함께 사용하는 경우, 스타일이 적용되지

React에서 이미지 사용Public 폴더에 이미지 저장하기create-react-app을 사용하여 생성된 프로젝트는 public 폴더가 있다. 이 폴더 안에 있는 파일들은 웹 서버에 의해 직접 제공된다. 따라서, public 폴더 안에 이미지를 넣고 그 URL을 im

React에서 이미지 사용React에서 이미지를 사용하는 방법은 여러 가지가 있다. 그 중에서 가장 간단한 방법은 img 태그를 사용하여 이미지를 불러오는 것이다.1\. 이미지 Import먼저, 해당 이미지 파일이 프로젝트 내에 존재하는지 확인하고, 그 경로를 정확히

React와 Firebase,Swiper를 사용하여 리스트 만드는 법Firestore에서 데이터를 가져오는 함수를 설정한다. 이 함수는 useEffect 훅 내부에서 호출되며, 모든 사용자 정보를 가져와서 상태 변수인 usersData에 저장한다.위의 코드는 Fires

React 프로젝트에 Pretendard 폰트 적용Pretendard는 한글과 영문이 모두 잘 어울리는 글꼴로, UI 디자인에서 자주 사용된다.먼저, Pretendard의 GitHub 저장소(https&#x3A;//github.com/orioncactus/preten

React에서 URL 유효성 검사유효성 검사를 위한 정규 표현식만약 사용자가 "test"처럼 도메인 이름만 있는 경우나 "http&#x3A;//", "https&#x3A;//" 등 프로토콜 없이 시작하는 경우에도 '잘못된 URL 형식이다.(https&#x3A;//tes

이제 프로젝트 막바지에 이르렀다.정신 없이 지나간 시간들이었고 버그들을 수정하고 쉴 새 없는 작업에 지쳐갔지만 그 동안 나는 최선을 다해 노력했다.앞으로 일주일정도의 시간이 남았는데 지금처럼 계속 최선을 다할 것이다.지나간 시간은 되돌릴 수 없으니까...

React에서 'key' Prop 경고 메시지 해결(Each child in a list should have a unique 'key' prop)React에서는 리스트 항목을 렌더링할 때 각 항목에 고유한 key prop을 제공해야 하는데 그렇지 않으면, 다음과 같은

React와 Firebase, Ant Design을 이용한 FAQ 만드는 법먼저 현재 로그인한 사용자의 uid를 가져와서 이 uid를 이용하여 Firebase에서 해당 사용자가 작성한 FAQ 목록을 가져온다. 이후에는 가져온 FAQ 데이터를 Ant Design의 Col

JavaScript를 이용한 데이터 정렬 및 상태 설정문제 발생프로젝트 작업 중 이미지와 URL을 Firestore에 저장하고 불러오는 과정에서 역순으로 보여지는 문제가 발생했다.시도한 방법Firestore에서 복합 컬렉션을 자동,수동 설정을 하였지만 실패orderB

Warning: children will be removed in next major version. Please use items instead.문제 원인기능에는 문제없이 잘 작동이 되었지만 콘솔에서는 계속 경고가 발생하고 있어 알아보게 되었다.이 경고는 Ant De

React에서 StrictModeStrictMode란?&lt;React.StrictMode>는 React 애플리케이션의 부분적인 트리를 엄격 모드로 실행할 수 있게 해주는 도구이다. 이 모드는 개발 중에만 활성화되며, 잠재적인 문제를 찾아내기 위해 컴포넌트들에 대한 추

antd에서 'Modal' is not defined no-undef문제 원인Blocks.styles.js파일로 스타일을 분리하였는데antd에서 Modal 컴포넌트를 사용하려면 styled-components와 마찬가지로 antd에서 해당 컴포넌트를 불러와야 하는데

5주간의 프로젝트를 마쳤다.이번에도 어김없이 이 기간동안 정신없이 달려왔는데 완성도면에서 아쉬운 부분들이 있지만 그래도 나는 이 기간동안 항상 최선을 다한 부분에서 후회는 없다.뭐든 아쉽고 완벽한 프로젝트는 없다고 생각한다.프로젝트를 하면서 팀원들과 문제해결을 해가면서

네이버 로그인 서비스 적용 오류(로그인할 수 없습니다.)문제 발생로컬환경에서 배포서버로 주소를 옮기던 중에 발생문제 원인Callback URL을 정확하게 입력해주어야 해결이 되는 것을 확인Callback URL은 네이버 로그인 인증 결과를 반환받을 URL네이버 개발자

Firebase Storage에서 404 에러(env파일에 공백이 있을 경우)문제 발생vercel에 배포 후 firestorge에 연동된 이미지를 불러오지 못하는 현상이 발생하였다.문제 해결위 사진에 주소 뒤에 %20이라는 알 수 없는 문자가 붙어 경로를 바꿔주고 있다

React에서 Swiper를 이용한 이미지 슬라이드 구현1\. Swiper 모듈 설치2\. Swiper 컴포넌트 생성MainBanner라는 이름의 컴포넌트를 생성한다. 이 컴포넌트는 두 개의 이미지 슬라이드(PromoBanner1과 PromoBanner2)를 포함하고

React Router와 Jotai를 사용하여 특정 페이지에만 컴포넌트 표시리액트에서 특정 페이지나 라우트에서만 특정 컴포넌트를 보여주고 싶을 때가 있어서 알아보았다.문제 상황'Theme'라는 컴포넌트가 있고, 이 컴포넌트는 웹사이트의 관리자(admin) 페이지에서만

React와 Firebase를 이용한 사용자별 라우팅 구현 (React와 Firebase를 이용하여 사용자별로 다른 페이지를 보여주는 방법)Firebase의 Authentication 서비스는 로그인한 사용자마다 고유한 uid를 제공해준다. 이 uid 값을 활용하면 사

프로젝트 작업 중 로컬 환경에서는 이상없이 스와이퍼 기능이 작동이 되었는데 배포서버에 배포를 하면 기능이 작동이 안되고 UI도 깨지는 현상이 일어나서 원인을 파악해보았다.React의 Swiper와 Styled Components 사용 시 주의(발생할 수 있는 문제와 해

프로젝트를 마쳤고 다시 재정비를 해야 할 시간을 가져야 하는데 피로가 전혀 풀리지 않고 있다.최근 한달간 프로젝트 기간 중 수면데이터를 보았더니 평균 3시간이었다. 원래 정신상태가 건강할 경우 기본 8시간에서 12시간씩 신생아처럼 수면하는 사람인데 그럴 만하다.기본부터

업로드중..React에서 Firebase를 이용한 데이터 처리와 Antd로 에러 메시지 표시Firebase에서 Firestore 데이터 불러오기Ant Design으로 에러 메시지 표시위의 코드에서 데이터 가져오기 과정 중에 오류가 발생하면 콘솔에 에러 메시지가 출력되는

전체 코드아래 코드를 useRef로 수정수정 된 코드먼저 useRef() Hook을 호출하여 참조 객체인 imageInputRef를 생성한다. 그리고 이 참조 객체를 파일 입력 요소의 ref prop에 연결한다. 그러면 참조 객체인 imageInput.current 을

프로젝트 작업 중 모바일 환경에서도 문제없이 antd에서 RangePicker를 활용하고 싶었는데 반응형을 지원하지 않아 antd-mobile에서 RangePicker를 것을 지원하는지 알아보게 되었다.antd-mobile에서 RangePicker 구현먼저 antd 라

React에서 Styled-components로 Input File 스타일링원하는 CSS 속성과 값들을 작성한다.위의 코드에서 은 커스텀 스타일드 컴포넌트이다. 이제 해당 컴포넌트의 CSS 속성들이 적용되어 일반적인 input 태그 대신에 생성된 StyledInput

CSS에서 색상 설정 var(--color-text)위 코드는 웹 페이지의 배경색을 설정하는 데 사용되는데\--color-text'라는 이름의 CSS 변수를 나타내며, 이 변수에 저장된 값이 최종적으로 배경색으로 설정된다.CSS 변수를 사용하면 동일한 색상이나 스타일

프로젝트를 하던 중 성능 최적화를 위해 Swiper의 Lazy Loading를 활용하기로 했다.React에서 Swiper의 Lazy Loading 활용Lazy loading은 웹 페이지의 로딩 속도를 향상시키기 위한 기술로, 필요할 때만 콘텐츠(이미지, 비디오 등)를

어느 덧 10월, 올해 4분기에 접어들었고 추석 연휴 기간이다.이제 조금씩 걸어봐야 할 것 같다. 건강 관리도 해야하고 지인들도 챙겨야 하고 공부도 해야하고... 이 외에도 해야 할 일은 너무나 많은데 하나씩 차근차근 해야 할 것 같다.오늘부터 자바스크립트 강의부터 다

JavaScript 템플릿 리터럴을 사용하여 CSS 스타일 조건부 설정위 코드에서는 템플릿 리터럴 안에 JavaScript를 넣어 조건문을 사용하여 theme 값에 따라 다른 CSS 스타일을 반환한다. 이렇게 하면 동적으로 스타일을 변경할 수 있으며, 테마가 바뀔 때

window.location.reload(); 후 antd의 message.success('로그아웃 되었습니다.'); 가 나타나지 않는 현상로그아웃 직후 navigate('/')와 window.location.reload();가 실행된다. 이 때문에 페이지가 너무 빨리

React에서 플러그인 사용시 CSS로 적용하면 배포 후 적용이 안되는 현상

db.json파일에 id필드가 없을 시 생기는 문제 1. 데이터 식별의 어려움 ID는 데이터 항목을 유일하게 식별하기 위해 사용된다. 특정 항목을 찾아서 조회하거나 수정하거나 삭제할 때 매우 중요하다. 만약 ID가 없다면, 이런 작업들이 상당히 복잡해질 수 있다. 2. 데이터 무결성 문제 ID는 관계형 데이터 모델에서 매우 중요한 역할을 합니다. 외...

TypeError: Assignment to constant variable.at fetchLinks문제 원인한 번 할당된 후에 값을 변경하려고 시도하여 'Assignment to constant variable'라는 TypeError가 발생했다.해결 방법변하지 않아야

JavaScript Switch문에서 Break를 생략하면 어떻게 될까?JavaScript에서 제어 흐름을 관리하는 방법 중 하나는 switch 문을 사용하는 것이다.위 코드에서는 변수 fruit가 "사과"로 설정되어 있다.그런데 여기서 각각의 case 뒤에 있는 br

자바스크립트에서 객체 비교왜 같아 보이는 두 개의 객체가 다른 것일까?person1과 person2는 모두 이름이 '홍길동', 나이가 '30', 성별이 '남자'인 사람을 나타내고 있다. 그런데 person1과 person2를 비교하면 'false'가 나온다.컴퓨터 내부

이번 주는 자바스크립트 기본기를 잡기 위해서 강의를 듣고 있다.

JavaScript의 while문에서 무한루프이 코드에서 i++라는 부분이 주석처리되어 있다. i++는 반복문 내에서 i의 값을 증가시키는 역할을 하는데 만약 이 부분이 주석처리되면, i의 값은 처음에 설정된 값인 3으로 고정된다.반복문의 조건은 i &lt; 100인데

JavaScript에서 for문과 while문의 공통점과 차이점공통점반복 실행for 문과 while 문 모두 특정 조건이 만족하는 동안 코드를 반복적으로 실행하는데 사용된다.종료 조건두 구조 모두 종료 조건을 가지고 있다. 이 조건이 참인 경우에만 코드가 계속해서 반복

JavaScript에서 화살표 함수는 this를 바인딩하지 않는다.일반적인 함수와 화살표 함수의 가장 큰 차이점 중 하나는 this 키워드를 다루는 방식이다. 일반적인 함수에서 this는 호출하는 객체에 바인딩되는 반면에 화살표 함수에서 this는 자신을 포함하는 외부

JavaScript에서 객체의 참조와 깊은 복사JavaScript에서의 객체는 참조(reference) 타입이다.위 코드에서 obj2 = obj1;을 실행하면 obj2는 obj1을 참조하게 된다. 그래서 obj2를 통해 속성을 변경하면 원래의 obj1에도 그 변경사항이

정수 num1, num2가 매개변수 주어집니다. num1과 num2를 곱한 값을 return 하도록 solution 함수를 완성해주세요.

리액트 컴포넌트의 라이프사이클1\. 마운팅 (Mounting)마운팅은 컴포넌트 인스턴스가 생성되어 DOM에 삽입될 때 발생하는 단계constructor: 컴포넌트가 생성될 때 가장 처음으로 실행되는 메서드static getDerivedStateFromProps: pro

이번 주는 리액트 강의를 들으면서 새로운 것들도 도전해보려고 하고 있다.나를 위해 주변에서 도움 주시는 분들도 계시고 여러가지로 감사함을 느끼고 있다.

Javascript에서 MVC패턴MVC(Model-View-Controller) 패턴은 애플리케이션의 로직을 세 가지 구성 요소로 분리하는 방법이다.1\. ModelModel은 데이터와 그 데이터를 처리하는 논리를 나타낸다. 사용자 정보, 제품 정보 등을 저장하고 관리

Javascript WebSocket(실시간 양방향 통신)웹 애플리케이션에서 실시간 상호작용은 채팅 애플리케이션, 멀티플레이어 게임 등에서 필수적인데, 이를 가능하게 하는 기술 중 하나가 웹소켓(WebSocket)이다.웹소켓이란?웹소켓은 웹 페이지와 서버 간에 열린 연

React에서 SSR(서버사이드 렌더링)을 위한 Next.jsNext.js는 사용자 경험과 검색 엔진 최적화(SEO)를 개선하는 데 중요한 기능들을 제공하는 React 기반 프레임워크이다. 그 중에서도 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API

node.js와 npm 버전 오류 해결방법

정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1 다르면 -1을 retrun하도록 solution 함수를 완성해주세요.풀이num1과 num2라는 두 개의 매개변수를 받아 두 숫자가 같은지(===) 비교한다.=== 연산자는 JavaScript에서 tr

머쓱이는 40살인 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 나이 age가 주어질 때, 2022년을 기준 출생 연도를 return 하는 solution 함수를 완성해주세요.풀이2022 - age + 1를 계산하여 result변수에 결과 값을 저장을 한다.40세의 선

몇 번 만난 분들 그리고 몇 번의 대화를 나눈 분들께 생각치도 못한 도움을 받고 있다.지금까지 살아오면서도 우연히 많은 분들의 도움을 받아왔는데 나에 대해 어떠한 모습도 보여 드린 적 없다고 생각했고 나라는 사람의 어떠한 면을 신뢰해주시는지 모르겠다.그래서 그에 대한

정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요.풀이주어진 숫자 n까지의 모든 짝수를 더한다. 반복문을 사용하여 i가 n 이하이면 i는 2씩 증가하며 (짝수만 고려) 각각의 짝수를 합계에 더한다. 이 합계는

JWT(JSON Web Token) 안전하고 효율적인 데이터 전송JWT(JSON Web Token)는 정보를 안전하게 전송하기 위한 컴팩트하고 독립적인 방법을 제공하는 표준 인증 방식이다. 이 정보는 디지털 서명되므로 검증 및 신뢰할 수 있다. JWT는 일반적으로 웹

JavaScript ES6JavaScript의 주요 업데이트인 ECMAScript 2015(ES6)는 다양한 새로운 기능과 개선 사항을 도입했다.1\. let과 constlet은 블록 스코프 변수를 선언하는 데 사용되며, const는 읽기 전용 상수를 선언하는 데 사용

정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. > 풀이 let answer = 0; answer라는 변수를 선언하여 초기값으로 0을 할당한다. 배열의 모든 요소들의 합계를 저

컴퓨터 과학의 '프로세스'프로세스는 컴퓨터를 사용하면서 매우 중요한 역할을 하는데, 그 이유는 프로세스가 실행 중인 프로그램이기 때문이다. 애플리케이션을 실행하거나 웹 사이트를 탐색할 때마다 실제로 컴퓨터 내부에서 여러 프로세스들이 활동하고 있다.각각의 프로세스는 운영

머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다. 정수 n과 k가 매개변수로 주어졌을 때, 양꼬치 n인분과 음료수 k개를 먹었다면 총얼마를 지불해야 하는지 return 하도록 solu

몇 주간 바쁜 일정의 연속이었다.할 일은 많고 공부도 해야하는데 나는 초기화 되어가고 있다.그 동안 챙기지 못했던 사랑하는 사람들을 조금이나마 챙기고 있는 중이다. 모든 사람들이 행복해하는 모습을 보니 좋고 더 행복해졌으면 좋겠다. 한 동안 내게 없었던 감정들이 살아나

Sourcetree '올바른 원본 경로/URL이 아닙니다' 오류문제 발생Sourcetree에서 원격저장소에 저장된 저장소를 복제하는데 '올바른 원본 경로/URL이 아닙니다'라고 복제가 되지 않는 현상시도한 방법기존 사용자가 있는 경우 키체인에 접근하여 Sourcetre

Invalid client_idThis integration is misconfigured. Contact the vendor for assistance.문제 발생소스트리에서 bitbucket 로그인 에러가 발생해결 방법소스트리 종료 후 계정 추가에서 인증방식 OAut

react-i18next 다국어 번역React 프로젝트에서 국제화(i18n)를 쉽게 처리할 수 있게 도와주는 라이브러리.다양한 언어로의 번역을 지원하며, 동적으로 언어를 변경하는 것도 가능1\. 설치react-i18next와 i18next를 설치2\. i18n.js 파

Cannot find package 'swagger-autogen' imported from /Users/Desktop/project/swagger.js문제 발생노드 모듈을 설치하고 yarn start로 실행을 하니 위와 같은 에러가 발생문제 원인swagger-auto

npm should be run outside of the Node.js REPL, in your normal shell.Node.js의 REPL 환경REPL은 Read-Eval-Print Loop의 약자로, 사용자가 코드 조각을 입력하면 그 결과가 바로 반환되는 대화

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

이번 주는 새로운 시작들을 하다보니 생활패턴을 잘 맞췄는데도 불구하고 긴장이 되어서 한숨도 못자고 긴장을 심하게 해서 속도 좋지 않고 일정이 피곤했다.역시나 이번주도 새삼 세상이 좁다고 한 번 더 느끼며 여전히 괜찮은 척했지만 내면의 폭풍우가 휘몰아쳤다.계획되어 있던

remote: Invalid username or password. fatal: Authentication failed for 'https://github.com/계정/저장소명.git/' 문제 발생 vscode 터미널에서 명령어로 gitlab 프로젝트 저장소를 github에 미러링으로 복제하는 과정에서 발생 해결 방법 vscode의 사용자계정을 gi...

SyntaxError: Unexpected token 'I', "Internal S"... is not valid JSONPOST http&#x3A;//주소:포트번호/ 500 (Internal Server Error)문제 발생문제 해결.env파일에서 백엔드 서버 주소

[mac]Homebrew 설치 방법(for silicon mac) 터미널에서 위 명령어로 Homebrew가 설치되었는지 확인 zsh: command not found: brew 위 메시지가 나오면 Homebrew가 설치되지 않은 것이기 때문에 설치해준다. 아래 주

by CORS policy: Response to preflight request doesn't pass from origin http:///127.0.0,1:5500 has been blocked access control check: No Access-Control

문제 발생프로젝트가 git 저장소에 연결이 되지 않아 git 저장소에 추가해주는 과정에서 발생한 현상 문제 원인git 저장소를 사용하려면 해당 디렉토리에서 git init으로 저장소를 초기화 해줘야 한다.해결 방법그리고 git remote add origin 원격 저장

문제 발생 git push 중 생긴 오류 문제 원인 작업 프로젝트와 백업용 프로젝트(git 저장소)가 달라서 발생 해결 방법 백업용 프로젝트(git 저장소)의 변경내용을 push 느낀 점 혹시 모를... 만약의 사태를 위해 백업 프로젝트가 따로 필요한 경우가

비바람에 날씨가 제법 추워져 두꺼운 옷을 꺼내 입었다.독감접종을 지난 주에 맞았는데 수면시간이 줄어들고 있어 그런지 컨디션이 영...운동 시간과 횟수도 줄고 운동 심박수도 낮아져서 운동강도도 더 높여야 한다.야외에서도 가능한 운동으로 바꾸려고 했는데 핑계거리들이 많아져

nothing to commit, working tree clean 문제 발생 git에 커밋하는 도중 작업 중인 브랜치가 최신 상태이고 수정된 파일이 없어 커밋할 내용이 없음. 문제 원인 작업 중인 브랜치가 수정된 파일이 없고 최신 상태라 발생한 현상. 프론트엔드

git branch update fatal: not a valid object name: 'main' 해결방법 dev@ui-MacBookAir [프로젝트 폴더] % git pull

위의 오류 메시지는 http 변수가 초기화되기 전에 참조되었다는 것을 나타내는데 http 모듈이 적절하게 불러와지지 않았을 때 발생하는 문제이다. 하지만, 웹 브라우저 환경에서는 Node.js의 http 모듈을 사용할 수 없기 때문에 이러한 문제가 발생하

IntelliJ 에뮬레이터 sdk설치

프로젝트 vue 버전 확인

프론트단(클라이언트단에서 해외 사이트 서버 크롤링시 CORS 오류) CORS 오류 크롤링한 외부 서버 데이터 html 안의 이미지 불러오기 iframe으로 html을 불러오면 크롤링 해오는 서버의 스타일을 수정할 수 없음 상세페이지의 상품정보 이미지를 보여주기 위

월요일 아침부터 무슨 날인지 에스컬레이터도 고장이 나고 길이 너무 막혀 늦기 싫어 엄청 뛰었다. 엘리베이터까지 층마다 열렸다. 결국 늦진 않았지만 왠지 피로가 쌓이는 것 같았다. 잘 적응하고 있는지 꽤 오래된 것 같다는 얘기를 듣게 되었다. 낯을 많이 가리는 나지만

ip 확인 localhost 주소 확인 방법 window 터미널 : ipconfig mac 터미널 : ifconfing

프로젝트를 진행하다가 html 파일에서 테스트 하고 싶어 Prettier를 설치해 테스트를 했다. 코드 정렬이 되지 않고 하단에 Prettier 경고가 빨간 영역으로 표시된다. > Prettier 전역 설치 맥에서 파일에 액세스 할 수 있는 권한이 없어 생기는 오류로 앞에 sudo를 붙여 관리자 권한으로 설치를 실행한다. 위 명령어를 입력하고 맥 비밀...

1. Object.assign 메서드를 활용한 방법 Object.assign 메서드를 사용하여 한 번에 여러 속성을 설정하는 방법. 코드가 간결하고 여러 속성을 한 번에 적용할 수 있어 유용하다. 장점: 코드가 간결하고 짧다. 여

Postman 개발을 하다보면 API 문서를 활용한다. 많은 개발자들이 postman을 API 개발과 테스트에 사용하고 있다. Postman은 API 개발, 테스팅, 문서화 등을 지원하는 플랫폼이다. Postman을 통해 API 요청을 보내고, 응답을 확인하며, 다양한 요청(GET, POST, PUT, DELETE 등)을 쉽게 테스트할 수 있다. Po...

createElement 및 appendChild 사용(배열과 반복문을 활용) createElement 및 appendChild 사용 장점: 더 안전하며 보안 취약점을 줄일 수 있다. HTML 문자열에 대한 의존성을 낮

homebrew를 이용한 nvm 설치 프로젝트를 진행하다가 협업 중에 다운그레이드를 한다던지 버전을 높여야 하는 경우가 있어 nvm을 설치하였다. nvm이란? 업로드중.. 터미널에서 nvm -v로 nvm이 설치가 되지 않은 것을 확인 후 brew -v로 homeb

cors 정책때문에 프론트와 백엔드에서 이중으로 크롤링하고 있다. 백엔드에서 크롤링 한 데이터를 불러오지 못하는 오류시 프론트에서 불러와서 해당 부분을 보여줄수 있도록 했다.프론트에서는 cors 정책과 json에서 상세이미지는 이미지 파일이 아닌 링크라 링크에 연결되어

Error: ReferenceError: can't access lexical declaration 'data' before initialization 에러가 발생하면 에러 메시지가 콘솔에 출력되는 것이었는데 'console.error('Error:', error);

Uncaught SyntaxError: await is only valid in async functions, async generators and modules

시도한 방법 관련 함수 아래로 이동 스크립트가 전체 DOM이 로드된 이후에 실행되도록 맨 아래에 이동시킴 (위에서 아래로 순차적으로 로드되므로) 2.동적으로 요소를 생성하고 있어 해당 요소가 생성된 후에 코드를 실행 totalQuantityElement를 참조하

scraper api 키 발급

문제 상황어제 GitHub에서 이메일 주소를 보호해줄 수 있는 보안 옵션 기능이 있어서 체크를 해보았던 부분이 문제여서 push 오류가 발생했다.GitHub 계정 -> settings 클릭으로 이동emails -> Keep my email addresses privat

프로젝트를 진행하면 API문서를 활용하게 되는데 VS CODE의 Thunder Client도 추천받아 사용해보았다. Postman get,post 등 방식을 확인하고 주소를 입력하고 요청한다. text로 요청하면 형식이 안맞아 안나오니 json으로 형식을 변경하여

벌써 12월. 올해가 한달도 안남았다. 제대로 이룬것도 없고 오히려 도태 되어가는 것 같으면서 이렇게 게을러도 되나 싶은데 지인들은 나를 보면 항상 열심히 바쁘게 지낸다고 한다. 이번 주는 크롤링 해오는 json 데이터를 비교해서 다시 백엔드에서 가공한 것을 불러와

해당 언어의 플러그인을 설치해도 파일의 언어가 인식이 되지 않을 경우 문제 발생 프로젝트 작업 중 해당 파일의 언어를 인식을 하지 못하는 경우가 발생 파일을 삭제 후 재생성해도 같은 문제 해결 방법 Settings - 에디터 - 파일 타입 해당 파일을 선택하고 언어

SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data 문제 발생 JSON 데이터를 파싱하는 과정에서 발생했는데 데이터 형식에 관련된 오류이다. 문제 원인 JSON.parse

프로그래머스(BaekjoonHub) 깃허브에 잔디가 심어지지 않는 현상(커밋이 안되는 현상) 문제발생 크롬에서 프로그래머스 문제를 풀었는데 깃허브에 잔디가 심어지고 있지 않는 현상이 발생했다. 레포지토리를 확인해보니 커밋도 되지 않는 현상을 확인했다. 해결방법 이

문제 발생 Uncaught SyntaxError: unexpected token: identifier 템플릿 리터럴과 삼항 연산자가 잘못 사용되어서 SyntaxError를 발생되었다. 해결 방법 skuData.price 값이 있으면 표시하고, 그렇지 않으면 빈 문

추천 받은 GitHub Copilot 사용중이다. VS Code에서 플러그인으로 설치해 사용가능한데 gpt3.5가 이상한 답변을 주고 있어 채팅 기능도 있길래 사용해보았다. gpt4 구독을 한달 전에 해지했더니 지금 대기자 등록을 하고 있다... 백엔드 개발자께서 몇

미루고 미뤄왔던 2022년에 작업했던 Github 잔디를 옮기고 싶어졌다. 로컬에 가져올 해당 프로젝트를 복제한다. 비공개 프로젝트라 복제가 안된다면 Settings - Access - Collaborator에서 사용자를 추가하고 복제해준다.(혹시라도 헷갈린다면

옳지 않은 것을 바로 잡으려다가 중간에 연결되어 있는 사람들이 다치게 생겼다. 예상하고 있던 일이기도 하고 이 사람들을 위한 것이기도 한데. 정의를 바로 잡으려다가 말이다. 전 날에 어쩔 줄 몰라 당황해하던 모습에 아침에 어떤 상태인지 확인하려다가 오해할까봐 모르는 척했더니 점심도 제대로 먹지도 못하고 거르는 모습이 안쓰러웠다. 타이밍을 보다가 엘리베이터에...

며칠 전에 작성한 글에 이어 프로젝트에서 우회로 인해 JSONP와 CORS를 알아보았다. 프로젝트 작업을 하면 다른 도메인의 데이터를 필요로 하는 상황이 자주 발생하게 된다. 웹 브라우저는 보안 문제로 인해 동일 출처 정책(Same-Origin Policy)을 적용하

Node.js에서 발생하는 'node-expat' 모듈 오류 해결 방법 Node.js 프로젝트를 개발하다가 갑자기 'node-expat' 모듈과 관련된 오류 메시지가 발생했다. 1. Node.js 버전 호환성 확인 먼저, 사용 중인 Node.js 버전(ex: v21

Express.js로 서버에 다른 페이지 또는 엔드포인트 추가Express.js를 2017년에 처음 접해보고 그 이후에 프로젝트에서 몇 번 접해보다가 프로젝트에서 경험해야 할 일이 생겨 다시 알아보았다.Express.jsExpress.js는 Node.js를 위한 웹 애

문제 발생express 서버에서 프로젝트 실행 중 경고메시지가 발생했다.문제 원인Node.js에서 punycode 모듈의 사용을 공식적으로 권장하지 않는다는 것을 알려주는 메시지이다. (punycode 모듈은 URL에 사용되는 퓨니 코드 문자열을 ASCII 문자열로 인

문제 발생백엔드 서버에서 json key값 구조를 변경하여 아래 문제가 발생한 현상.문제 원인fetch함수를 사용하여 서버에서 데이터를 가져오는 과정에서 발생한 오류.이 오류는 서버로부터 받은 응답 객체(data) data.result.data가 정의되지 않았기 때문에

서버와 클라이언트 간의 통신 확인 방법(개발자 도구의 Network 탭)웹 개발을 하다 보면 서버와 클라이언트 간의 통신을 파악해야 하는데 브라우저의 개발자도구의 Network 탭을 사용하여 확인 가능하다.먼저 웹 페이지를 브라우저에서 열어준다.키보드의 F12 키를 누

페어 프로그래밍 형식으로 코드를 작성해서 테스트를 하는데 며칠동안 계속 옆에 가까이 붙어서 해야하니까 피곤했다. 개발자분이 감기도 걸리셨고 나도 잠을 계속 못자고 있는 상태라 뒷목이 지끈거렸다. 이번 주는 인간관계로 인해 신경 써야 하는 일도 많아 스트레스가 쌓여 극에 달했다. 하기 싫은 운동까지 했다가 피로만 더 누적시켰다. 감기기운도 있었는데 잠을 못...

Node.appendChild: Argument 1 is not an object.문제 발생동영상 URL, 이미지 URL 등을 받아와서 슬라이드 형식으로 구현하는 중에 문제 발생문제 원인JavaScript에서 특정 DOM 요소에 다른 요소를 추가하려 할 때 발생하는데

동영상 유무에 따른 슬라이드 쇼 구현프로젝트에서 슬라이드 배너에서 동영상과 이미지를 불러와 동영상이 없을 경우 이미지만 보여주도록 구현했다.동영상이 있을 경우에만 동영상을 포함시키는 함수videoUrl이 존재하고 비어있지 않은 경우에만 동영상 관련된 코드가 실행된다.느

문제 발생git에 푸시하던 중 발생한 현상.문제 원인파일 크기가 100mb를 초과할 경우 푸시할 때 발생하는 메시지.시도한 방법1.cd5a37963e9b791d62074fbc41415cdb45921a2f (220.18 MiB) 파일을 찾아 제거하려고 했으나 파일이 존재

setTimeout 함수는 첫 번째 인자로 전달된 함수를 두 번째 인자로 전달된 시간(ms) 후에 실행한다. 이를 통해 display 속성 변경과 transform 속성 변경 사이에 시간 간격을 두어 자연스러운 애니메이션 효과를 얻을 수 있다.주의사항setTimeout

JavaScript를 이용하여 웹사이트에 상품 수량에 따른 가격 변동 기능사용자가 상품의 수량을 선택하면 자동으로 가격이 계산되어 표시상품의 수량을 입력받고, 각 상품의 수량에 따른 가격을 계산하여 총 가격을 업데이트 한다. 수량이 늘어날수록 가격이 낮아지는 방식이다.

지난 번에 해결하겠다고 한 문제에 대해 해결을 했다.지속해서 소통을 했고 오해의 소지가 생기지 않게 특정인들에게는 대화를 통해 상황 전달을 하여 서로의 상황을 이해할 수 있게 하였다.서로를 이해하고 존중 할 수 있어 특정인들에게 직접적인 대화를 한 건 잘한 일 같았다.

맥 환경에서 터미널에 아래와 같은 에러가 발생했다. 스택오버플로우에서 해결했다. 이 문제를 해결하는 방법을 여전히 궁금해하는 사람을 위해 " Install Certificates.command" 을(를) 설치하여 문제 해결 업로드중.. Certificates.commad 위치 설치 해당 파일을 두 번 클릭하기만 하면 설치될 때까지 기다리면 준비 완료...

스마트폰에서 벨로그에 개발일지 생성하려고 했다가 체감상 이틀정도 Github 로그인 연동이 되지 않는 현상이 있었다.그래서 다음 날 pc에 접속해서 확인을 해보았는데도 같은 오류여서 벨로퍼트님 깃허브를 방문하게 되었다. 처음에는 velog 레포지토리에 이슈를 남겨야 하

Modal 열렸을 때 바디 스크롤 방지웹사이트에서 모달을 사용할 때, 모달이 열려 있는 동안에는 웹 페이지의 스크롤을 막아야 하는 경우가 있는데 스크롤이 움직이지 않도록 설정하면 사용자의 경험이 향상되며, 모달 창 외부의 웹 페이지를 덜 방해 받을 수 있다.아래 코드에

express 관리자 서버 코드를 확인 하던 중 알아보게 되었다.Grunt-contrib-watch 플러그인의 LiveReload 기능GruntJavaScript 기반의 자동화 도구로, 프론트엔드 및 웹 개발에서 반복적인 작업을 자동화하고 효율적으로 수행할 수 있도록

puppeteer.js프로젝트에서 Puppeteer 사용중이다. 좀 더 알아보기로 했다.Puppeteer.js는 웹사이트를 크롤링하거나 웹 페이지를 자동화하는 데 매우 유용한 Node.js 라이브러리이다.Puppeteer.js 설치Puppeteer.js를 사용하기 위해

문제 발생문제 원인resultLength가 아닌 resultLentgh로 오타로 인해 발생한 현상해결 방법resultLength -> resultLentgh로 수정느낀 점오타 조심;; 확인하고 또 확인하자!

친구들한테 덕담 받았다. [시무 7조] 감정이입 금지 배려하기 금지 생각하기 금지 자동공감 금지 자기반성 금지 남 챙기기 금지 워커홀릭 금지 숨도 쉬지 말라고 할 기세다. 마음대로 안되는 것들인데 노력은 해보겠다고 했다. 간만에 집에 있는데 연말약속으로 쌓여 있던 개발일지 작성하느라 죽을 맛이다ㅎㅎ 방학숙제도 방학식 하기 전에 다해놓던 사람인데 죽겠...

TypeError: data.result.globalData is undefined문제 발생

외부 홈페이지에서 클릭 좌표를 가져올 수 있는가?외부 홈페이지에서 클릭한 좌표의 값을 얻어 그 데이터의 값을 가져오는 방법을 테스트하게 되었다.결론은 불가능하다.왜?브라우저의 동일 출처 정책(Same-Origin Policy) 때문에 일반적으로 불가능하다. 브라우저는

git에서 와일드 카드특정 패턴이나 규칙을 가진 파일들을 선택할 때 사용하는 문자이다. 일반적으로 \* 가 사용되며, 파일명이나 확장자 등을 대체하여 다양한 파일을 한 번에 선택할 수 있게 한다.1\. 특정 확장자 파일 스테이징2\. 특정 패턴 이름 파일 스테이징3\.

Puppeteer를 활용한 로그인 자동화프로젝트 폴더 내에 Puppeteer 모듈 설치login.js 파일 생성 후 로그인 자동화 실행 코드 작성login.js 파일 실행터미널에서 위 명령어를 입력하면 브라우저가 실행된다.코드에 적힌 input 값을 입력하고 login

Puppeteer를 활용한 PDF 생성프로젝트 폴더 내에 모듈 설치pdf.js 파일 생성 후 코드 작성많이 사용하는 네이버로 테스트작성한 코드 실행코드가 실행이 되고 시간이 지나면 pdf파일이 생성이 된다.처음에 이미지가 없이 불러와진 상태로 저장이 되어서 위에 이미지

React에서 Storybook이란?사용자 인터페이스(UI) 컴포넌트를 개발하고 문서화하기 위한 오픈 소스 도구이다. 이를 통해 독립적으로 컴포넌트를 개발하고 테스트할 수 있고, 다양한 상태에서의 컴포넌트 모습을 별도로 볼 수 있다. Storybook은 컴포넌트 기반의

요즘 날씨가 우중충해서 우울하다. 새해를 맞아 작년부터 작성한 개발일지를 돌아보게 되었다. 벌써 이렇게 시간이 지났구나 하면서 많은 생각들이 들게 되었다. 유난히, 정보 게시글에 비해 개발 회고록에 대한 조회수가 있는데 이 글을 누가보는지 갑자기 부끄러웠다. 혹시 이 글 보시는 여러분 잘못된 방식을 참고하시면 안됩니다! 원래, 개발 회고록에 타인들이 들어간...

지난 번에 추천받은 GitHub Copilot을 프로젝트에서 제대로 사용해보고 싶어 IntelliJ에서 Next.js를 기반으로한 프로젝트에 Copilot을 사용해보았다. VS code에서도 사용가능하다.코드를 제안해주고 자동완성 기능이 편리하다. 작성해야 할 코드를

Extra attributes from the server 해결 방법문제 발생Next.js 프로젝트에서 'Extra attributes from the server' 경고 발생(크롬)문제 원인확장 프로그램으로 인해 발생되는 현상으로 파악해결 방법첫 번째 방법chrome

jenkins에 git이 없을 때configure - 소스 코드 관리에 git이 없고 none이 디폴트이다.이럴 경우 플러그인에서 git을 검색한 후 설정을 해주면 된다.참고 URLhttps&#x3A;//stackoverflow.com/questions/8639501/

React를 이용해 RSS Feed 불러오는 방법 RSS란? RSS는 사이트의 콘텐츠를 XML 형식으로 제공하는 웹 피드 포맷인데 이 포맷을 이용하면 사용자는 사이트를 직접 방문하지 않고도 콘텐츠 업데이트를 받아볼 수 있다. RSS Feed Component 작성 React에서 RSS 피드를 불러오기 위해 컴포넌트를 만든다. 먼저, useState, ...

webpack.config.js 파일이 없을 경우프로젝트 진행 중 webpack.config.js 파일이 없을 경우가 있어서 생성해보기로 했다.webpack.config.js이란?webpack은 웹 애플리케이션의 여러 개의 자바스크립트 파일과 의존 관계를 가진 모듈들을

Error: Event handlers cannot be passed to Client Component props.Next.js 프로젝트에서 버튼 이벤트 핸들러 작성시 에러 발생Next.js 프로젝트에서 클라이언트 컴포넌트에 이벤트 핸들러를 전달하려고 했기 때문에 발

요즘 매일 꿈을 너무 많이 꿔서 하루하루가 피곤하다. 악몽에도 자주 시달리는데 괴롭다. 주말에는 약속 시간 2시간 전에 일어나서 당황했다.연말부터 나를 위한 회복시간을 갖지를 못했는데 나를 돌아보는 시간을 가져야겠다.혼자만의 시간을 가져야 개발에도 집중할 수 있을 것

나에게 집중하는 시간을 갖고 있다. 컨디션이 좋지 않으니 자동차만 타면 멀미가 심해졌다. 취미활동을 해도 스트레스가 전혀 풀리지 않았다. 악몽에 시달리는게 두려워서 잠에 들지를 못하고 스트레스로 인한 불면증에 더 그런 것 같은데 주말에 잠을 보충했더니 집중력이 나아졌다. 자고 일어나서 그래도 작업을 해보려고 모순되지만 심장이 두근거려서 마시지 않던 에너지 ...

날씨가 많이 따뜻해져 봄이 오는 것을 느낄 수 있었다. 아침, 저녁으로는 춥지만 낮에는 코트가 더웠다. 지난 주에는 우중충했던 날씨가 설 연휴가 다가올 쯤부터 날씨가 맑아졌다. 이번 주는 중간에 날씨가 별로더니 그 이후로 화창했다. 일요일인 오늘은 비가 내리고 있다. Next.js를 활용한 개발이 진행중이다. 개발일지가 점점 변질되고 추상적으로 적고 있어...

완전히 무너져버렸다. 내 자신을 극복하지 못하고 자기 파괴적인 삶을 살고 있다. 좀 아픈게 아니라 사실 많이 아팠던 것 같다. 변화무쌍한 날씨에 점심시간에 걷다가 기분이 가라앉아 다시 실내로 복귀했다. 평소, 주로 리스너 입장인데 피곤한 탓에 리딩시 목소리가 갈라져 사람들에게 미안했다. 타인들과 옆에 밀착해서 키보드 하나로 번갈아가며 하는 코딩은 긴장되고...

기존 작업들을 마무리 짓고 다시 재정비를 시작한다.파이어베이스 콘솔에 새 기능이 있다고 해서 테스트하다가 캠프 때 같이 프로젝트를 진행했던 팀원들을 나도 모르는 사이에 모두 내보내서 당황스러웠다. 이런... 오해 없으시길 바라며... 4명이 내보내졌으니 어디 뒤적여보면

Next.js 프로젝트에서 yarn start로 실행 시 next/BUILD_ID 파일을 찾을 수 없다는 현상.익숙하게 yarn start로 프로젝트를 실행해 확인하려고 했는데 당연하게도 Next.js 프로젝트이기때문에 프로덕션 모드가 아닌 개발 환경이라 빌드가 되지

문제 원인 전역 상태 및 테마관리를 하는 파일인 _app.tsx파일에서 components/theme-provider가 없다고 하는 현상

문제 발생 select 박스 사용시 selected 속성을 option에 직접 적용해서 발생한 현상. 문제 원인 React에서 select 박스를 사용할 때, selected 속성을 option에 직접 적용하는 대신, select에 defaultValue 혹은 v

문제 발생 프로젝트 폴더 구조 설정 중 발생한 현상 문제 원인 src 폴더 내에 pages/index.tsx를 기본 페이지로 설정하려고 재구성 중에 발생한 것인데 src 폴더 내에 기존설치시 세팅되었던 app/pages.tsx 파일과 충돌되어 나타난 현상 문제 해

vercel 프로젝트 배포(24.03.08 기준) vercel 프로젝트 배포 화면이 바뀐 것 같다. 며칠 전에 테스트 배포할 때는 기존 화면이었던 것 같다. 바뀐 화면에 대해 기록을 남겨본다. https://vercel.com 에 접속을 하면 대시보드(오버뷰 페이지

데브캠프가 시작된 한 주 였다.월요일 오전 9시부터 시작한다고 해서 대기했더니 첫 공지가 왔다.정각 9시에 문자로 당일은 낮 12시에 시작한다고 와서 개인 일정들에 모두 차질이 생겼다.zep 링크를 줘서 입장했다.같은 기수 분들이 여럿 계시는데 소문난 에이스들만 계신다

며칠 전부터 ChatGPT가 말썽이다.브라우저에서 GPT 명령 입력이 안되는 현상이 발생했다.브라우저에서 GPT 명령 입력이 안되는 현상ChatGPT 화면 좌측 하단 계정 클릭 -> Settings -> Language(Alpha) English로 변경 -> 로그아웃

Module not found: Can't resolve 'child_process' 문제 발생 shadcn/ui를 설치하고 페이지를 연결해 화면을 구성하려던 중 발생한 현상 시도한 방법 패키지를 몇 번이고 재설치해보아도 같은 현상이 발생 해결 방법 packag

Hmm...something seems to have gone wrong.ChatGPT4에서 검색시 검색이 계속 되지 않는 현상. 재생성 버튼을 클릭해도 같은 현상.재부팅재로그인쿠키 및 캐시 삭제타 브라우저 사용모두 소용 없었다.임시로 이미지 파일을 업로드 하면 명령을

문제 원인 shadcn/ui의 컴포넌트 사용 중 value를 추가했을때 발생한 현상 해결 방법 1번 방법 : value를 defaultValue로 수정(비제어 컴포넌트) 2번 방법 : onChange 핸들러 추가(제어 컴포넌트) 느낀 점 제어, 비제어 컴포넌트의

문제 발생 해당 라이브러리를 import로 불러오는데 오류 메시지 발생 문제 원인 @hookform/resolvers/zod 패키지가 프로젝트에 설치되지 않아서 생긴 현상 React Hook Form에서 zod를 사용하여 폼의 유효성 검사를 수행시 필요 해결 방

데브캠프를 수료했다.현재 기준으로 데브캠프 과제는 gpt에게 의존하여 작업하는 것은 어렵다.공식문서와 필요한 참고자료들을 직접 검색하고 새로운 기술들을 적용할 줄 알아야 한다.결제페이지를 만들어 쿠폰과 포인트 로직을 작성했다.pg사 연결을 하여 사용할 클라이언트키를 e

설치하는 동안 오류가 발생했습니다. 설치에 실패했습니다. 설치 프로그램에서 오류가 발생하여 설치에 실패했습니다. 소프트웨어 제조업체에 지원을 문의하십시오. 문제 발생 맥에서 드라이버 설치 중에 설치되지 않는 문제 발생 시도한 방법 맥북 데스크탑(바탕화면)에 설치