본문 바로가기

분류 전체보기

(11)
[넘블] Next.js로 AI 단톡방 만들기 (with ChatGPT) 요즘 핫하다는 ChatGPT 관련 넘블 챌린지가 올라왔길래 겁도 없이 도전장을 내밀었다. 기다리고 기다리던 4월 3일이 왔지만 밤이 늦어도 챌린지 관련 안내문이 없었다. 최근에 내 번호도 바뀌고 넘블도 새롭게 단장해서 약간 예상 가능했던 위험요소였던지라 빠르게 넘블 측에 문의했고 저녁 8시가 넘는 시간인데도 불구하고 넘블 측에서 굉장히 빠르게 대답해줬다! (밤 늦게까지 응대해주는 열정의 넘블 팀 ㅠㅠ) 04.03 늦은 시각이라 디스코드와 노션에 올라온 가이드라인만 빠르게 살펴봤다. 'OpenAI 문서를 읽어가며 사용 가능한 AI 기술들을 파악하고, 사용자의 요청을 어떤 API로 보내고 받을지 방법에 대해 고민'해보는 챌린지라니! 챌린지 진행시 바라는 점에 내가 알아갈수있는 것들에 대해 적혀있어 좋은 것 ..
강의 들으면서 줍줍한 내용 메모 브라우저 내장형 fetch 함수는 프로미스라는 객체를 반환한다. http 요청의 경우 즉각적으로 이루어지는 작업이 아닌 비동기 작업이고 이 안에서 성공, 실패 또는 에러 등의 활동이 있고 시간 지연에 대한 가능성 또한 염두해두어야한다. -> fetch의 경우 then() 체인을 사용하게 되면서 코드가 길어지게 되는데, 이 fetch를 이용해 데이터를 가져오는것 외에 async await 라는 키워드 사용으로 더 깔끔/단순한/가독성 방식으로 가져올 수 있다.
[udemy] React 완벽 가이드 정리 React Behind the Scenes 리액트가 작동하는 방식 리액트의 핵심은 UI 구축을 컴포넌트를 만들어 제공하고, 업데이트 또한 컴포넌트를 통해 이루어지는 자바스크립트 라이브러리라는 점이다. 리액트는 '컴포넌트'에 대해서만 관리하며 변경된 부분에 재실행, 재평가하며 ReactDOM에 업데이트한다. 컴포넌트를 재평가 !== DOM 리랜더링 리액트에서 재평가의 경우 Props, State 또는 Context의 변화가 생겼을 때만 이루어진다. 그리고 이 변화는 함수의 실행을 통해 재평가가 이루어지면서 상태 변화를 확인하게 된다. 부모 컴포넌트에서 재평가가 일어나면, import된 모든 자식 컴포넌트도 함께 재평가가 된다. 자식 컴포넌트에 상태 변화가 있던 없던, 다 같이 재평가되는데, 변화는 없지만 ..
AWS elastic beanstalk 과금되었다. / Netilfy 배포 에러 오늘도 어김없이 우연히 새로 온 메일이 없는지 확인하다가 AWS에서 온 메일이 두개가 있길래 뭐지하고 봤더니 고지서가 날라와있었고, 2~3년전에 등록해두었던 카드가 이미 기한이 다된지라 아직 빠져나가지는 않았다. 첫가입시 1년간의 무료 티어는 끝난지 오래라 (...) 당연히 과금되는 서비스일텐데 넘블 챌린지할때 쉽고 새로운 배포 방법없나 찾다가 찾은게 Elastic beanstalk이었고 정말 아주 쉽고 빠르게 웹호스팅할 수있는 서비스이긴하나 이 작디 작은 앱이 한달 사용동안 오천원이 빠져나갔다니..! 5천원도 너무 소중한 나로써는 빨리 다른 배포처를 찾아 호스팅해야할 것같다. 지금 이 순간도 과금되고 있겠지? 흑흑.. USD 4.36이 이리도 비싸다니 오천원이면 싱싱한 배추와 숙주나물을 사서 찜쪄먹을 ..
[Numble 챌린지] VanillaJS 로 신년메시지 주고받는 SPA 사이트 만들기 Numble 챌린지 참여 후기 (회고록) 🎬 챌린지 참여 계기 평소 강의 컬렉터인 저는 개발, 디자인, 마케팅 가릴 것 없이 여러 강의 사이트들을 돌며 이리기웃 저리기웃하며 흥미있는 강의들을 많이 듣는 편인데요, 2022년을 뒤 돌아보니 input은 나름 열심히 하는데 무언가 남을 만한 output은 하지않고 있지않나하는 생각이 들었습니다. 물론 개발이나 디자인 관련 강의를 듣고 나면 해당 강의를 따라한 결과물은 남지만 처음부터 혼자 만들어낸 결과물은 아니라는 점이 아쉬웠습니다. 그때 Numble을 발견하고 그 달에 오픈되어있던 단 하나의 프로젝트였던 'VanilaJS로 신년 메시지를 주고 받는 SPA 사이트 만들기'에 참여하게 된 것입니다. 🎬 챌린지 주제 2023년 01-06(금) ~ 01-19(목)..
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. 자바스크립트로 SPA 만들기를 하다가 마주친 에러 메세지. React에서는 파일 타입을 생략해도 import할때 문제가 없었지만 순수 자바스크립트로 모듈을 import할때는 에러가 난다. 경로와 타입을 정직하게 적지않아서 에러를 해결하느라 꽤나 시간을 소모했다. // 에러가 난 코드 import constant from './js/constant'; // 해결..
새로 구매한 맥 m1에 homebrew를 뒤늦게 설치하며 삽질한 로그 맥 Homebrew를 설치하다 ※굉장히 사소함 주의 작디 작은 프로젝트를 위해 호기롭게 firebase를 설치해 serverless를 경험하고자 했으나 맥을 새로 구매후 개발을 위한 아무런 세팅도 하지않았음을 깨닳았다.. 뒤늦게 visual studio code랑 node를 설치하고 firebase 설치 명령어 npm install -g firebase-tools@9.12.1 를 입력해보았지만 진행중에 EACCES: permission denied, mkdir 블라블라..하며 firebase 설치에 실패했다. 아마 설치를 위한 폴더 생성 과정에서 접근권한이 없어 뜬 것일 텐데, 설치 안되는 이 문제를 해결하고자 구글에 이것저것 검색해보았지만 터미널에 sudo로 강제하는 명령어를 추천해주고 댓글에 그들끼리..
클린 코드 자바스크립트 (함수 다루기) Udemy 클린 코드 정리 // 함수 선언문 function func(){ return this; } // 객체의 메서드 const obj = { method(){ return this; } }; // 생성자 함수 (Class) function Func(){ return this; } /** 함수 1급 객체 - 변수나, 데이터에 담길 수 있다 - 매개변수로 전달 가능 (콜백 함수) - 함수가 함수를 반환 (고차 함수) */ func(); // 이 함수의 this는 전역 객체(global)를 의미한다. obj.method(); // 이 객체의 메서드의 this는 호출한 객체를 바라본다. const instance = new Func(); // 이 클래스의 this는 생성된 instance를 가르킨다. ar..
클린 코드 자바스크립트 (배열 다루기 / 객체 다루기) Udemy 클린 코드 정리 javascript의 배열은 객체다. array도 객체이기때문에 typeof로 객체는 검사하기에는 적절치않을수도있다.. 배열인지 구분하려면 Array 객체의 isArray 메서드를 사용해 판별할수있다. Array.isArray(파라미터); arrr.length는 배열의 길이보다는 배열의 마지막 인덱스에 가깝다. 배열의 길이 보장 X const arr = [1,2,3]; arr[3] = 4; console.log(arr.length) // 4 arr[9] = 10; console.log(arr) // [1,2,3,4, , , , , ,10] console.log(arr.length); // 10 배열 요소에 접근하기 // 아래와 같은 함수가 있다. 여기서 input 2개 중 0번..
클린 코드 자바스크립트 (분기 다루기) Udemy 클린 코드 정리 Memo) 값식문 고차함수 사용 권고 void 는 반환값이 없음을 뜻한다. React 예시 // 예시코드 function ReactComponent() { return( {(() => { // IIFE (즉시실행함수) const rows = []; for(let i = 0; i ( )) } ); } // 예시 function ReactComponent(){ return( {(() => { if (co..