홍장군의 기록

1줄 결론: meta http-equiv='Content-Security-Policy" ... 이 설정 빼세요. ----next js 프론트엔드 프로젝트 폴더에서 .env 파일에 NEXT_PUBLIC_SERVER_ADDRESS = 'http://192.111.3.11:3000/' 이렇게 주소를 정하고 api 통신을 하는데 자꾸 https://192... 로 통신이 날아가는 문제가 생겼다. 이전에 상용서버(https:// ,,, ) 로 쿼리 날리던 게 캐싱돼서 덮어쓰이는 건가 싶었지만, 그건 아녔다. 그냥 진짜 내 환경변수의 http가 https로 변경되는 것이었다. 챗지피티한테 왜 그런지 물어봤더니... 아하!! 보안 문제때문에 https로 자동으로 바꿔준단 거군 -> 근데 30분동안 끙끙대며 다 해봤는..

1줄 요약: isLoading 말고 isPending 쓰세요리액트쿼리 5.8.1 버전 이하? 이상? 하여간 특정 버전에선 isLoading 말고 isPending이란 이름으로 지정되어있습니당.

prettier을 vscode 익스텐션으로 설치도 해보고 npm install도 해봤고 preferences 탭 가서 formattingOnSave 체크도 되어있고 프로젝트 폴더 안에 .prettierrc .eslintrc.json 도 있는데 저장해도 전혀 프리티어랑 린트 적용 안되시는 분들 계시죠?나도 그래서... 한 5번쯤 똑같은 문제 겪으니 개빡치더라구여 그래서 나도 기억할겸 블로그에다 적어둠. 1. vs code키고2. f1 누르면 vscode 창 위쪽 검색바가 켜짐. 거기다가 settings.json 을 검색하세요3. 그럼 이렇게 한 3개 정도가 뜸. 한글버전 vscode라면 기본세팅, 작업공간세팅, 세팅 이렇게 3개 뜰 거임.4. 여기서 우리는 맨 위에 있는 User Settings로 들어가야..

0. 문제 발생 🍉 잘 먹히던 프리티어가 갑자기 에러가 떴다. 가장 흔한 에러 해결 방법은 "format on save" 나 "npm install 새로 하기" 지만, 하나도 먹히지 않았다. 그래서 에러를 띄우는 terminal 창을 자세히 보니, 아주 중요한 정보를 알게 되었다. 일부 file에선 prettier가 정상 작동하지만, 특정 파일에서만 prettier가 작동하지 않고 빨간 에러가 뜬다는 사실이었다. (코드 내부에선 전혀 에러 메세지가 뜨지 않고 terminal에서만 에러 메세지가 보였음.) 즉, 프리티어 자체의 문제보단 내 파일 특정 부분의 문제라는 것!!!!! 1. 문제 원인 🍉 terminal의 에러 메세지는 다음과 같다, ["INFO" - 6:05:13 PM] Formatting fi..

웹 개발의 꽃 promise... 제대로 공부해보자. 단순히 감으로 axios 쓰면서 땜빵했는데, 제대로 공부할 필요성을 느꼈다. 코드잇 인강을 듣고 fetch 함수와 promise 객체에 대해 공부한 것을 기록한 글이다. 주요 키워드는 JSON, promise, fetch, async, await 이다!! 1. 목차 2. 배운 것 1. fetch 함수 fetch 함수는 서버로 request를 보내고 response를 받아오는 함수이다. fetch는 기본적으로 js 내장 메소드지만, 외부 라이브러리인 axios에 비해 기능이 좀 빈약하다. 그래서 보통 실무에선 axios 라이브러리를 많이 사용하는 모양이다. 어쨌거나 fetch 자체는 웹 통신의 기본 함수라는 것. fetch("https://www.goo..

코드잇 인강을 들으면서 개인적으로 정리한 글입니다. 모던 자바스크립트 기본 문법 정리. 0. 목차 모던자바스크립트란 데이터 타입 AND, OR 연산 null 병합 연산자 변수와 스코프 함수 문장식과 표현식 spread 옵셔널 체이닝 구조분해 모듈 1. 정리 1. 모던 자바스크립트? js 를 공부하다보면 ECMAScript 에크마 스크립트라는 용어를 보게 된다. ECMAScript: 자바스크립트 표준 명세서, 즉 js 언어의 표준이라 이해하면 됨. js가 점점 발전되고 여러 기능이 추가되면서, ECMA라는 국제 표준화 기구가 표준 룰을 관리하게 되는데 그 때 이 룰을 ECMA-262 라는 이름의 문서로 관리함. 이 문서의 내용이 바로 ECMAScript 인 것이다!! 시간에 따라 표준 룰도 바뀌고 js의 ..

0. 문제 상황 지금 만들고 있는 프로젝트에선 모달 종류가 굉장히 많다. 간단히 말하자면, 웹사이트 링크를 모아서 북마크하고 모아두는 웹 사이트인데, (그냥 즐겨찾기의 시각화.. 정도임.) 폴더를 생성, 삭제, 수정하는 모달, link를 각 폴더에 추가, 삭제, 수정하는 모달 등, 큼직한 모달창이 6개씩이나 있다. 이걸 각 컴포넌트에서 각자 관리하려니 코드가 너무 복잡해지고, 관리하기 힘들어지는 느낌이었다. 그래서 이번에는 전역적으로 모달을 관리하는 코드를 짜보려 한다. 미리 만든 모달 디자인. ㅎㅎ 이쁘다. 1. 과정 전역적으로 모달을 관리하기 위해서는, useContext 를 활용해 전역 상태 관리. client side 상태 관리 라이브러리를 활용하기. (예를 들면 zustand) 간단한 코드라 u..

0. 오늘의 배울 것. 리액트 훅의 종류에 대해 알아보자. 사실 나는 강의에서 배운 useState, useEffect, useCallback, useMemo 정도만 알고 있었는데 생각보다 다양하더라. 여러 가지 알아보고 써먹어보자. 참고로 custom hook 말고 리액트에 내장된 훅만 써보았다. 커스텀 훅은 나중에! 1. 목차 useState useEffect useReducer useImperativeHandle useLayoutEffect 2. 훅의 종류 useState 값이 바뀔 때마다 화면을 리렌더링하게 하려면 값을 state로 만들어 관리해야 한다. useState의 인자: state의 초기값. useState가 리턴하는 값: state변수와 변수를 갱신하게 해주는 함수를 배열에 담아 반환함..

참고로 본인 컴퓨터는 window 11 mysql installer은 1.6 mysql server 8.0.35 오늘 날짜는 2024년 1월 10일이다. 0. 이전에 깔려있던 MySQL 프로그램들 삭제하기. 개조빡쳐서 글로 적는다. 일단 본인은 2021년도에 학교에서 mysql 실습한다고 노트북에 mysql을 한 번 설치한 적이 있다. 그래서 컴퓨터에 "MySQL for Visual Studio" 라는 프로그램이 깔려있는 상태였다. 그리고 이제 2024년 1월 오늘 mysql을 새로 공부하면서 프로그램을 설치하려 하는데, 자꾸 MySQL 설치 에러가 나는 것이다. 처음부터 다시 설치하기 위해 MySQL 관련 모든 파일들을 삭제하려 했는데, 제어판에 들어가 MySQL for Visual Studio를 삭제..

문제 상황 팝업창을 열고 닫을 수 있는 커스텀 훅을 만들고, boolean형 isOpen과 함수 handleOpen, 함수 handleClose 를 배열에 담아 리턴하게끔 했다. 그리고 배열 리턴값을 받아서 쓰려 했더니... 아래와 같은 에러가 났다! 예를 들어 설명하자면, // 이 코드를 실행하면, myString 에는 string형만 들어가야 하는데 string | number | null 형이 들어간다고 에러가 뜬다..ㅠㅠ const arr = ["a", 1, null]; const [myString, myNum, myNull] = arr; 문제 원인 위의 문제는 타입스크립트는 객체나 배열은 내부 값들이 변할 수 있다고 가정하여 타입을 추론하기 때문에 발생한다. 즉, 배열 구조분해를 할 땐 배열 속..