Travel to Frontend (372) 썸네일형 리스트형 [Nextjs13 에러] Uncaught SyntaxError: "undefined" is not valid JSON Nextjs 13버전에서 contextAPI를 사용하려하니 json에러가났다. use client를 상단에 쓰면서 랜더링하는도중에 에러가 생긴듯하였다. 버전을 수정하니 해결되었다. "next": "13.3.0", "next": "13.3.1", npm i next-auth --legacy-peer-deps web3 타입스크립트 에러 Uncaught TypeError: Class extends value undefined is not a constructor or null 타입스크립트에서 에러가나서 화면이 안뜨는 현상이 발생했다. Uncaught TypeError: Class extends value undefined is not a constructor or null 열심히 구글검색을 해봤다. 1. web3라이브러리가 4버전부터 타입스크립트를 지원하는듯하여 최신버전으로 다시설치한다. 2. events라이브러리를 설치해보자. npm i events 또는 yarn add events https://github.com/web3/web3.js/issues/6371 useCallback한 함수를 다시 useCallback으로 깜싸는이유 useCallback을 하는이유 첨부한 움짤은 증가 버튼을 누르기만하였는데 App컴포넌트 자체가 랜더링되버리는 예시이다. (파란색 선이 App컴포넌트를 의미함) 만약에 자식 컴포넌트들이 여러개있고 이들이 모두 increment함수를 자식 컴포넌트에 전달하게된다면 App컴포넌트뿐만 아니라 자식 컴포넌트들까지도 불필요하게 랜더링이 되버린다. 이를 해결하는 방법중의 하나가 useCallback이다. useCallback이란 함수를 자식컴포넌트에 전달할때 불필요한 렌더링이 발생하지않게하는 함수를 메모이제이션하는 최적화 방법으로 메모이제이션은 쉽게말해서 함수를 캐시한다고생각하면된다. 아래는 useCallback 예시이다. import React, { useState, useCallback } from 'react.. vite, typescript, react env 설정 알게된것 * NODE_ENV는 환경변수로 노드환경에서 자동으로 만들어져서 개발에는 development, 빌드한것에는 production으로 이루어짐 * 정적파일 특히 이미지파일들은 public폴더내에서 인식된다. 때문에 필요하다면 publicDir이라는것을 강제로 변경해줘야한다.(최근에 assetsDir로 바뀐듯함) * package.json script에서 맥/리눅스용 윈도우용 명령어가 따로있다. * .env들은 src경로안에서 VITE_로 시작해야 vite가 인식해서 리엑트내에서도 사용가능 .env VITE_REACT_APP_URL=http://localhost:5002/ blabla.tsx console.log('mode',process.env.NODE_ENV) if(import.meta.env).. [실무] 자주쓰는 git 명령어 모음 # 원격 저장소 연결 git clone ~ # dev브랜치가 안보일경우 브랜치접근을 위한 remote 갱신 git remote update # branch list git branch -r # branch이동 git checkout origin/dev # 모든브렌치중 내가 속한 브랜치 git branch # 모든브랜치중 내가 속한 브랜치(origin 포함) git branch -a # 최근수정기록(충돌혹은 에러 원인 파악) git diff # 이전 커밋으로 돌아가기 git reset --hard # 실제로 서버에 커밋푸시 반영됬는지 확인할때 유용 git log 이벤트 객체 모방하기 {target : e} const checkboxes = document.querySelectorAll(".comp-inventory-product input[name=chk]:checked"); checkboxes.forEach(e => { const event = { target: e }; changeCheckBoxCnt(event) }) 배열객체인 메소드 forEach()가 동작하면서 배열을 돌면서 콜백함수를 실행한다. 콜백함수안에는 개별 요소(element)인 e가 현재 들어있다. e를 찍어보면 다음과 같다. forEach()안에서는 만약에 id값과 type의 값을 찾고싶으면 e.id와 e.type을 사용하면되지만 만약 외부함수에서 파라미터로 값이아니라 이벤트객체를 넘겨줘야하는 상황이라면 위와 같은 방법을 사용할 수 있.. [nodejs] 미들웨어(Middleware) 사용법 노드js에서 미들웨어란 웹 애플리케이션에서 요청과 응답사이에 위치하여 클라이언트의 요청을 처리하고 필요한 작업을 수행하도록 도와준다. 클라이언트로부터 들어오는 HTTP요청과 서버로부터 클라이언트로 보내는 HTTP 응답에 영향을 주는 중간 소프트웨어 구성 요소로 req, res객체 그리고 라우터 함수 사이에 존재한다. 장점 코드의 모듈성과 재사용성을 높이며 코드를 보다 구조적으로 유지하고 유지보수를 용이하게 만들어준다. 사용방법 app.use() 또는 router.use()를 통해 등록하고 next()함수를 호출하여 다음 미들웨어로 제어를 넘길 수 있다. index.js const app = express(); app.use((req, res, next) => { req.country = 'KR' next.. [프로그래머스] lv1 달리기경주 시간초과 이중for문에서 시간초과에러남 function solution(players, callings) { let copyArr = players function updatedArr(name){//'kai' for(let j = 0; j{ if(j === e){ let snapshot = copyArr[idx-1] copyArr[idx-1] = e copyArr[idx] = snapshot } }) }) return copyArr; } 오브젝트를 활용해보기로함 function solution(players, callings) { let obj = {} players.map((e,idx) => { obj[idx] = e }) callings.forEach(e =>{ let num = Object.values(ob.. 이전 1 2 3 4 5 6 ··· 47 다음 목록 더보기
