무우너의 먹물 기록

React Query란? React Application에서 서버의 상태를 불러오고, 캐싱, 동기화, 업데이트 하는 작업을 도와주는 라이브러리 Hook을 사용하여 React Component 내부에서 서버, 비동기적인 요청이 필요한 Source 데이터를 사용할 수 있는 방법을 제안 React Query를 사용하는 이유 1. 기존의 상태관리 라이브러리는 비동기, 서버 상태 작업에 부적합 -> 서버 상태*가 다르기 때문 2. 잠재적으로 대역폭을 절약하고 메모리 성능을 높이는데 도움 3. 간단한 로직으로 복잡한 코드 대체 가능 다음 블로그를 참고하여 작성한 글입니다! https://kyounghwan01.github.io/blog/React/react-query/basic/#usequeries react-qu..

네이버 로그인 중 직면한 문제 졸업 작품을 만들며 네이버 로그인을 구현하고 있는데 clientId를 그냥 변수로 노출시켜도 되나?? git에 올릴 예정인데 온라인 상에 노출시켜도 괜찮나? 라는 생각이 들어 React에서 환경변수 사용 방법을 알아보았다. React에서 환경변수 사용하기 1. 자바스크립트 이용하기 src 폴더 아래에 임의의 js 파일을 생성한다. ex. src/variables.js // varibales.js export const CALLBACK_URL ='localhost:3000'; export const CLIENT_ID = 'Ocotopus'; 컴포넌트에서 환경변수 불러와 사용하기 //Login.js import * as vars from './variables' const Lo..

TypeScript란? JavaScript + Type TypeScript를 쓰는 이유 1. Type이 엄격 JavaScript는 Dynamic Typing을 지원하기에 알아서 데이터 타입을 바꿔주며 오류가 발생하게 됨 -> 프로젝트가 커지면 문제가 발생할 확률 높아짐 2. 에러 메세지가 구체적 JavaScript의 경우 추상적인 에러가 많아 추적이 어려움 TypeScript는 오타, 타입 오류에 대해 에러를 반환함 TypeScript 설치 1. nodejs 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VS..

다음의 코드가 실행되며 출력되는 내용은? (Jason이 제작한 퀴즈를 들고 왔습니다..) https://jason-log.vercel.app/JavaScript/this%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80./ this란 무엇인가. 자바스크립트에서 가장 어려운 개념을 뽑으라고 한다면 저는 와 실행컨텍스트를 선택할 것같은데요. 이번 post에서는 의 개념에 대해 알아보도록 해요. 상황에 따라 달라지는 this 자바스크립트 jason-log.vercel.app var str = 'React'; function outer() { console.log(str) console.log(this) function inner(){ console.log(str) console..

클로저의 의미 및 원리 이해 클로저란? : 어떤 함수 A에서 선언한 변수 a를 참조하는 내부 함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상 // 외부 함수의 변수를 참조하는 내부 함수(1) var outer = functionl () { var a = 1; var inner = function() { //a 선언 X => 스코프 체이닝 // environmentRecord에서 값 못 찾음 => outerEnvironmentReference에 지정된 상위 컨텍스트 outer의 LE 접근 (a 찾음) console.log(++a); }; inner(); }; outer(); //함수 실행 종료 => LE 저장된 식별자(a, inner)에 대한 참조 지움 ..

콜백 함수 콜백 함수란? 다른 코드(함수 || 메서드)의 인자로 넘겨주는 함수 제어권도 함게 위임함 제어권 호출 시점 setInterval scope : Window 객체 || Worker의 인스턴스 브라우저 환경에서는 window를 생략해서 함수처럼 사용 가능 세번째 매개변수 선택적 func 함수를 실행할 때 매개변수로 전달할 인자 어떠한 값도 리턴하지 않음 고유한 ID값 반환 ⇒ clearInterval(중간 종료)를 위해 var count = 0; var cbFunc = function() { console.log(count); if(++count > 4) clearInterval(timer); }; var timer = setInterval(cbFunc, 300); //실행 결과 //0 (0.3초..

실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체 호이스팅 외부 환경 정보 구성 this값 설정 실행컨텍스트란? 스택 : LIFO(Last In First Out) 큐 : FIFO(First In First Out) 콜 스택 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트 구성해 쌓아 올림 (동일한 환경 : 전역 공간, eval() 함수, 함수) 가장 위에 쌓여 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서 보장 실행 컨텍스트 실행 순서(3) 전역 컨텍스트 > outer -inner 함수 내부 a변수에 3 할당 () 전역 컨텍스트 > outer a 값 출력(undefined) () 전역 컨텍스트 a 값 출력(1) (2) 전역 컨..

데이터 타입의 종류 기본형(primitive type) number(숫자) string(문자열) boolean(불리언) null undefined symbol Symbol() 함수로 생성(호출될 때마다 Symbol 값 생성 let mySymbol = Symbol(); console.log(mySymbol); //Symbol() console.log(typeof mySymbol); //symbol new 연산자 사용 X new Symbol(); //TypeError : Symbol is not a constructor Symbol()에는 문자열을인자로 전달 가능(설명용, 디버깅 용도로 사용됨) let symbolWithDesc = Symbol('chaz'); console.log(symbolWithDesc..

console 함수 : API(Node.js와 WebAPI에 인터페이스가 동일하게 존재) - WebAPI : 브라우저가 제공하는, 이해할 수 있는 함수 async와 defer의 사용 : html에 Javascript를 포함할 때 사용 Html에 JavaScript 포함하는 법 1) head + parsing HTML blocked parsing HTML - blocked 상태 fetching js executing js - 브라우저가 html 파일을 한줄 한줄 분석하며 CSS 요소와 병합하여 DOM 요소로 변환 - script 태그가 보이면 parsing을 멈추고, 필요한 자바스크립트 파일을 서버에서 다운받아 다시 parsing 단점) - js 파일 크기가 크고, 인터넷이 느린 경우 사용자가 웹사이트 보..

생활코딩 - 리액트 강의를 듣고 다시 자바스크립트 기초부터 다져야겠다고 다짐 완료 주변 지인분께 추천받은 드림코딩 by 엘리 - JavaScript 강의를 들어보기로 결심했다. 1강. JavaScript 역사 - 1993년 : UI 요소가 더해진 Mosaic Web Browser 출시 - Mosaic Web Browser 개발팀을 이끌던 Marc Andreessen은 Netscape사 설립 -> UI 요소가 더 추가된 Netscape Navigator 출시 - 당시 시장은 HTML과 CSS로 간단한 웹페이지 구현 가능 ->html의 링크로만 페이지 이동 가능 == 정적 웹사이트(80%) - 1994년 9월 : Netscape사 Mocha 탄생(내부적 이름) - LiveScript로 이름 변경(Netsca..