본문 바로가기

Coding

(7)
[넘블] 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된 모든 자식 컴포넌트도 함께 재평가가 된다. 자식 컴포넌트에 상태 변화가 있던 없던, 다 같이 재평가되는데, 변화는 없지만 ..
클린 코드 자바스크립트 (함수 다루기) 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..
클린코드 자바스크립트 (1) ( 변수 편 ) 클린코드를 위한 자바스크립트 var를 지양하자 let, const -> ES2015스펙 핵심 var는 함수 스코프 let, const는 블록 스코프라는 점 블록 스코프는 Temporal Dead Zone 속성을 갖는다. let과 const의 사용이 왜 안전한 코드 작성이 가능한가? var의 경우는 이미 선언된 같은 이름의 변수에 재할당이 가능하기때문에 코드양이 많아질수록 본인이 어떤 이름으로 변수를 선언했는지 기억을 못할수도있다. 전역 변수를 사용하지말라....Why Ex) var global = '전역'; if(global === '전역'){ global = '지역' console.log(global); // 지역 } console.log(global) // 지역 var는 함수단위의 스코프를 갖는다...