jh.nrtv

Next.js와 typescript를 사용한 프로젝트를 진행하면서 만난 에러이다. Type error: 'result' is possibly 'null'. const result = await db.collection("community").findOne({ _id: new ObjectId(props.params.id) }); return ( ... 오늘의 노력을 간략하게 소개해주세요. 어떻게 성장할까요? ... 위 코드에서 result.title 와 result.constent 에서 result가 'null'인 것 같다는 에러를 뱉어내고 있다. 찾아보니 Typescript가 result가 비어있는 객체일 수도 있다고 판단하기 때문이라고 한다. 따라서 빈 객체인 result 안의 title이나 conte..

Nextjs 와 TS로 작업한 프로젝트 배포중 Module not found: Can't resolve 'perf_hooks' in '/vercel/path0/node_modules/typescript/lib' 라는 오류가 발생했다. perf_hooks라는 것은 내가 직접 import 하거나 사용한 hook이 아니기 때문에 해결하는 데에 애를 먹었다. 한참을 검색하던 중 아래의 링크 발견했다. 해결 Module not found: Can't resolve 'perf_hooks' ReactJS I'm working on reactjs (17.0.1) (node v15.11.0) with typescript and I'm getting this warning message, any idea how solve..

진행중인 Next.js 프로젝트에서 화면을 랜더링하면서 가장 먼저 kakaomap을 랜더링하도록 만들고 있다. 그런데 "TypeError: window.kakao.maps.LatLng is not a constructor" 라는 에러가 가끔 뜨면서 map 랜더링이 됐다 안됐다 하는 현상이 발생했다. 구글링 검색을 해보니 script가 완전히 로드되기 전에 map 관련 메소드를 실행시키려고 하기 때문에 생기는 에러라고 한다. kakao.js가 완전히 로드되기 전에 kakao.js 안에 있는 함수에 접근하려고 하니 에러를 뱉어내는 것이다. 해당 내용을 해결하기 위해서 map을 그리는 함수를 선언하고 useEffect 안에 넣어서 순차적으로 실행되도록 했고, 에러를 해결할 수 있었다. [Solved] kaka..

개인프로젝트를 하던 도중 깃허브에 push 를 하고자 터미널을 보다가 무언가 이상함을 발견했다. 터미널에 호스트가 '갤럭시 노트9'이라고 나와있었다. 내가 가지고 있는 주변기기는모두 애플 제품이고, 부모님의 스마트폰도 갤럭시의 다른시리즈였기에 적잖이 당황했다. 특히나 해킹에 대한 걱정이 들었다. 검색을 통해서는 설정 변경 방법에 대한 이야기만을 찾을 수 있었고 , 결국 GPT에게 물어봐서 답을 찾을 수 있었다. GPT의 답은 다음과 같다. 터미널 프롬프트에 표시되는 "name@maui-Galaxy-Note9 ~"은 터미널이 현재 사용자 이름을 "name"으로, 호스트 이름을 "maui-Galaxy-Note9"로 인식하고 있다는 의미입니다. 이는 터미널이 현재 작업 중인 컴퓨터를 "maui-Galaxy-..

📌 개요 깃허브를 사용하다보면 보안정보를 실수로 github에 push하는 경우가 있다. 나의 경우 개인프로젝트에서 mongoDB와 연결하기 위한 url을 아무 생각없이 push했다. 서둘러 환경변수에 해당 uri를 숨긴 이후에 push했지만, 여전히 git history에 남아있는 것을 확인할 수 있었다. 이러한 경우 레포지토리의 기록 자체를 삭제해야 보안정보의 노출을 막을 수 있다. 이러한 경우 레포지토리의 기록 자체를 삭제해야 보안정보의 노출을 막을 수 있다. 📌 방법 1. git log를 통해서 커밋 기록을 확인한다. git log 2. git reset Head~숫자 로 삭제할 커밋내역을 선택한다. 이 때 가장 최근 내역이 1번이고 그 이전이 2번이다. 나는 보안정보를 커밋한 2번째 기록까지 모..

프로그래머스 문제를 풀던 중 나는 보통 순수 array와 object의 형태로 푸는 경우가 많은데 중복이 허용되지 않는 배열 혹은 객체를 활용하는 어떤 문제에서 new Set()을 많은 사람이 사용하는 것을 확인했다. 코딩테스트를 비롯해 여러 방면에 활용도가 높다고 생각해서 정리하기로 했다. 📌 Set이란? >>mdn 참고 Set - JavaScript | MDN Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. developer.mozilla.org Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. Set 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있습니다. 하나의 Set 내 값은 한 번만 나타날 수 ..

✅ 들어가며 객체지향 프로그래밍을 공부한 적은 있고 나름대로 어렴풋이 알고는 있었으나,  제대로 알고 이해하는 것은 아니기에 해당 개념을 만날 때마다 찜찜했다.그러다가 좋은 자료( 생활코딩님의 영상 )를 찾은 김에 다시 공부하고 정리하게 되었다.    ✅ Procedural Programming (절차지향 프로그래밍)=> OOP와 대비돼서 이야기되는 방식 특징 1. 명령이 순차적으로 진행된다 -> 컴퓨터의 처리구조와 유사하기에 실행 속도가 빠르다.2. procedural (함수) 의 기능을 주요하게 사용해서 프로그래밍한다.   -> 이와 같이 언어에따라서 procedural은 다양하게 불리우는데 우리에게 가장 익숙한 것은 function이다 .   ✅ Procedural Programming VS Obj..

Big O notation? 알고리즘의 속도를 표현한다. 알고리즘의 속도를 어떻게 표현하는가 컴퓨터는 각자 성능에 따라서 속도가 다르다. 따라서 알고리즘의 속도는 완료까지 거치는 시간 자체가 아니라, 절차의 수로 표현함 선형검색 알고리즘은 -> 한개씩 검색 20개 자료 -> 20개 스탭 이 소요된다. input size =N 이면 N steps가 소요되는 것 이러한 경우 선형검색의 시간 복잡도 =O(N)라고 표현하며 ->'O of N'으로 발음한다. 그리고 O(N)의 형태로 표현하는 것이 그 유명한 'Big O notation'이다. Constant Time( 상수시간 ) -> N의 크기와 상관없이 steps가 정해진 알고리즘 let arr = [1,2,3,4] function printFirst(arr..

저의 가장 최근 프로젝트는 B2C 애완용품 쇼핑몰 ‘모두댕냥'입니다. 제가 구현했던 마이페이지에서는 ‘회원탈퇴'나 ‘상품삭제' 등과 같은 delete 통신에는 modal 을 만들어 고객의 의사를 재확인하는 절차를 거쳤습니다. 해당 모달이 여러 곳에서 쓰였기 때문에 재사용이 가능하도록 만드는 것이 목표였습니다. 모달이 사용되는 경우의 수는 크게 두 가지 입니다. 단일수준 json 형태의 데이터에서 data.userId 를 사용하는 경우와 , {data.map (element, index)=>{...}} 의 형태에서 element의 식별id를 전달해서 delete를 실행하는 경우입니다. 첫 번째 경우의 수에는 delete 통신을 하는 함수와 , 식별Id , 사용자에게 보일 키워드를 함께 props 로서 전달..

✅ CORS 정책 필요성 브라우저는 기본적으로 API를 요청 할 때에, 브라우저의 현재 주소와 API 의 주소의 도메인이 일치해야만 데이터를 접근 할 수 있게 되어 있습니다. 다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요하다. CORS 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 출처 웹 콘텐츠의 출처 (origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은..