bloomCode

ES6부터 도입된 제네레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수! 제네레이터와 일반 함수의 차이점은? 제네레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도한다. 일반 함수는 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 함수 호출자는 함수를 호출한 이우 함수 실행은 제어할 수 없음! 하지만 제네레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 함수 시행을 일시 중지 시키거나 재개시킬 수 있으며 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도 yeild 할 수 있음! 제네레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 일반 함수는 매개변수를 통해 함수 외부에서 값을 주입받고 함수 코드를 실행하여 ..

Next 강의를 들으면서 Next를 잘 다루려면 Next를 본문을 많이 읽어봐야겠다는 생각이 들어 이번에 Next 본문을 읽으면서 React도 좀 더 자세하게 파헤쳐봐야겠다는 결론으로 Next를 쓰는 이유에 대해서 알아보았다. Next 공식 문서 링크 : https://nextjs.org/ Next.js by Vercel - The React Framework Next.js Boilerplate A Next.js app and a Serverless Function API. Image Gallery Starter An image gallery built on Next.js and Cloudinary. Next.js Commerce An all-in-one starter kit for high-perfor..

현재 next 13 버전으로 개인 프로젝트를 진행 중이다. postList 들 중 하나의 post를 누르면 post의 detail페이지로 이동하게끔 구현하는 도중 detail페이지에서 해당 data를 어떻게 가져올까 하다. postList에서 props를 통해 가져오는 방식으로 구현하기 위에 link태그 안에 props를 넣을 수 있을까 했는데 넣을 수 없다는 오류가 발생했다. 그래서 link 태그안에 quey속성을 이용해서 데이터를 전달하고 받는 쪽에서는 next/louter를 사용해서 받을 수 있다고 하여 시도해 보았지만 13 버전부터 next/louter가 next/navigation으로 업데이트가 된 것 같았다. (13버전에서는 next/router 가 사라지고? next/navigation을 사..

URL은 상대 URL과 절대 URL로 나뉜다. 절대 URL은 리소스에 접근하는데 필요한 모드정보를 가지고 있다. 상대 URL은 모든 정보를 담고 있지는 않으며 모든 정보를 얻기 위해서는 기저(base)라고 하는 다른 url을 사용해야 한다. 상대 URL에서는 스킴과 호스트 다른 컴포넌트들을 모두 입력하지 않아도 된다! ./hammers.html URL을 가리키는 하이퍼링크가 있다. 이 URL은 미완성이 아닌 올바른 문법의 URL이다. 이는 문서의 URL을 기준으로 상대경로로 해석될 수 있다. http://www.joes-hardware.com/tools.html 이 URL을 기저 URL로 사용하여, 상대URL에서는 기술하지 않은 정보를 추측할 수 있다. 필요한 리소스가./hammers.html이라는 것을..

scroll, resize, input , mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다고 한다. 그래서 이러한 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이 디바운스와 스로틀이다. 디바운스 사용자가 텍스트 입력 필드에 값을 입력할 때마다 연속해서 input 이벤트가 발생한다. 입력한 값을 서버에 보내는 Ajax 요청을 수행하게 되면 사용자가 입력을 하고 있는 와중에 서버로 전송될 수 있다. 사용자가 input에 텍스트를 일정시간 입력하지 않았다면 입력이 완료되었다는 것으로 간주하는 debounce함수이다 실제 text를 치다가 일정시간 입력하지 않으니 div태그로 내가 입력한 텍..

이미지를 저장하기 위해 클라이언트에서 formdata에 데이터들을 넣어주었다. 서버에서 formdata를 확인하고 postgreSQL 데이터베이스에 저장하기 위해 multer 라이브러리를 사용하였다. 공식 사이트 https://github.com/expressjs/multer/blob/master/doc/README-ko.md any속성을 사용하게 되면 아무런 제약 없이 모든 파일을 허용한다는 것인데 나중에 문제가 될 것 같았다;; (마치 나의 any스크립트처럼) multer라이브러리를 사용하였는데 이렇게 imageFile 하나와 여러 개의 string 데이터들은 어떻게 multer를 사용해서 구현해야 하는지 몰라서 몇 번의 시도 끝에 gpt의 도움으로 해결하였다. 이렇게 stroage와 destinat..

함수를 명시적으로 호출하면 함수가 즉시 실행된다. 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링 이라 부른다 자바스크립트는 타이머를 생성할 수 있는 함수 setTimeout과 setInterval 타이머를 제거할 수 있는 함수 clearTimeout 과 clearInterval을 제공한다. 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니라고 한다. ECMAScript란? JavaScript의 표준 사양을 정의하는 국제 표준화 기구인 Ecma International에서 관리하는 스크립트 언어 규격 브라우저 환경과 Node.js환경에서 모두 전역 객체의 메서드로서 타이머 함수를 제공한다. 즉, 타..

클라이언트에서 로그인한 후 쿠키에 token을 저장하고 token을 통해 서버에서 유저를 확인하기 위해 쿠키를 서버에 보내는 과정에서 서버에서 쿠키를 못 읽는 상황이 발생했다. 일단 쿠키를 안전하게 서버로 보내기 위해서는 axios에 withCredentials 설정을 true를 해줘야하며 서버에서도 설정을 해줘야 하는것으로 알고 있었다. 문제는 어떻게 하는지 모름 그러다가 문뜩 강의에서 서버쪽 쿠키설정을 했던게 생각이나서 찾아보니 cookie-parser 라이브러리를 통해 해결했던 문제였다. (정말 기억력 무지 막지하다);; express를 통해 cookieparser사용하겠다고 해주면 끝! 이제 잘들어오는 것 같다! cookie-parser 깃헙 주소 https://github.com/expressj..

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 브라우저에서는 마우스 이동 키보드 입력 클릭 등을 감지하여 특정 타입의 이벤트를 발생시킨다고 한다. 애플리케이션이 특정 타입 이벤트에 대해 어떤 동작을 하고 싶다면 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 부른다. 사용자가 브라우저에서 클릭을 언제 할지, 키보드 입력을 언제할지 모르기 때문에 개발자가 함수를 호출하는 것이 아닌 브라우저에게 함수 호출을 위임하는 것이다. 위 코드에는 btn, onClick이라는 프로퍼티에 함수를 할당했다. Window, Document.HT..

평소와 같이 코드에 수정내용 git add . 와 git commit을 시도했는데 다음과 같은 에러가 발생했다. fatal: cannot lock ref 'HEAD': unable to resolve reference 'refs/heads/main': reference broken 암튼 HEAD broken이라길래 머리에 문제가 생긴 것 같았다.;; git log 찍어보니 fatal: your current branch appears to be broken 해당 에러도 발생 검색을 통해 여러 방법을 시도해봤는데 해결되지 않았다.. https://burning-camp.tistory.com/20 https://www.reddit.com/r/git/comments/lgovpv/how_to_deal_with_..