반응형 Study34 [라이브러리] qs 모듈을 이해해 보자. (URL query string) [라이브러리] qs 모듈을 이해해 보자. (URL query string) qs 모듈이란? 보통 우리가 어떠한 조건값으로 데이터를 검색이나 필터링을 할 때, 혹은 API URL에 query string의 값을 전달하거나 히스토리를 관리 할 때 그 query string을 파싱(parsing)하거나, 스트링화 할 수 있는 라이브러리이다. qs 모듈 npm 공식 문서 링크 https://www.npmjs.com/package/qs query string(쿼리 스트링)이란? 쿼리 파라미터(querystring)을 URL endpoint 뒤에 붙여 추가적인 정보 조회를 서버 측에 요청 하는 것이다. 정해진 endpoint 주소 이후에 물음표(?)를 사용하여 쿼리 파라미터(쿼리스트링 혹은 key)의 시작점을 알린.. 2023. 6. 26. [VSCode] 글씨체를 멋지게 바꿔 보자.(Fira-Code) [VSCode] 글씨체를 멋지게 바꿔 보자.(Fira-Code) 1. 설정 방법 Fira-Code 공식문서 https://github.com/tonsky/FiraCode GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures Free monospaced font with programming ligatures. Contribute to tonsky/FiraCode development by creating an account on GitHub. github.com 위 링크로 이동하여 폰트를 다운로드 받은 뒤 폰트를 PC에 설치 후 VSCode setting.json 설정한 뒤 재부팅 할 것 settings.json "editor.. 2023. 5. 15. [JS] 모던 자바스크립트 Deep Dive 스터디 - 07장. 연산자(산술 연산자) 내맘대로 정리하고 공부하는 모던 자바스크립트 Deep Dive 스터디 [JS] 모던 자바스크립트 Deep Dive 스터디 - 07장. 연산자(산술 연산자) 07장. 연산자 // 산술 연산자 5 * 4 // 20 // 문자열 연결 연산자 'My name is ' + 'Lee' // 'My name is Lee' // 할당 연산자 color = 'red' // 'red' // 비교 연산자 3 > 5 // false // 논리 연산자 true && false // false // 타입 연산자 typeof 'Hi' // string 7.1 산술 연산자 산술 연산자는 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가할 경우, NaN을 반환한다. 7.1.1 이항 산술 연산자 2개의 피연산자를 산.. 2023. 5. 15. [JS] 모던 자바스크립트 Deep Dive 스터디 - 06장. 데이터 타입 내맘대로 정리하고 공부하는 모던 자바스크립트 Deep Dive 스터디 [JS] 모던 자바스크립트 Deep Dive 스터디 - 06장. 데이터 타입 06장. 데이터 타입 데이터 타입은 값의 종류를 말한다. JS의 모든 값은 데이터 타입을 갖는다. JS는 7개의 데이터 타입을 제공하며 원시타입과 객체타입으로 나뉜다. 원시타입 숫자(Number) : 숫자, 정수, 실수 구분 없이 하나의 숫자 타입 문자열(String) : 문자열 불리언(Boolan) : 논리적 true / false undefined null : 값이 없음을 의도적으로 명시할 때 Symbol 객체타입 객체, 함수, 배열 6.1 숫자 타입 JS는 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리 > 정수만을 표현하기 위한 데이터 타입이 별도.. 2023. 5. 10. [JS] 모던 자바스크립트 Deep Dive 스터디 - 05장. 표현식과 문 내맘대로 정리하고 공부하는 모던 자바스크립트 Deep Dive 스터디 [JS] 모던 자바스크립트 Deep Dive 스터디 - 05장. 표현식과 문 05장. 표현식과 문 5.1 값 값이란? 표현식이 평가되어 생선된 결과를 말하고 평가란 식을 해석하여 값을 생성하거나 참조하는 것. 모든 값은 데이터 타입을 가진다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석된다. 예) 메모리에 저장된 값 0100 0001은 숫자 타입은 65, 문자 타입에선 A로 해석 된다. 변수는 값을 저장하기 위해 확보한 메모리 공간 or 메모리 공간을 식별하기 위해 붙인 이름으로 변수에 할당되는 것은 값이다. // 10 + 20은 평가되어 숫자 값 30을 생성한다. 10 + 20 // 30 const sum = 10 + 20 .. 2023. 5. 9. [JS] 모던 자바스크립트 Deep Dive 스터디 - 04장. 변수 내맘대로 정리하고 공부하는 모던 자바스크립트 Deep Dive 스터디 (언젠가 완독하겠지 ㅎㅅㅎ..) [JS] 모던 자바스크립트 Deep Dive 스터디 - 04장. 변수 4.1 변수란 무엇인가? 왜 필요한가? 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는, 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 프로그래밍 언어에서의 변수는 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. //변수는 하나의 값을 저장하기 위한 수단 var userId = 1; var userName = 'Lee'; //📌 객체나 배열같은 자료구조를 사용하면 여러 개의 값을 그룹화하여 하나의 값처럼 사용할 수 있다. var user = { id: 1, name: 'Lee' };.. 2023. 5. 8. [Next] Next.js 외부 이미지 에러 (Error: Invalid src prop) Next.js 외부 이미지 에러 (Error: Invalid src prop) Next.js를 공부하던 중 강의 내용대로 따라 치고있는데 Error: Invalid src prop 블라블라~ 하고 에러가 떠 버렸다. 아무래도 아직 Next.js는 13버전 안정화 진행 중이다보니 구버전 코드를 볼 일이 많을 듯 하고 이러한 에러는 심심치않게 만날 듯 하여 기록하려고 한다. 해결 방법은 짱짱 쉬움 :D !! 해결방법 next.config.js 파일에 images domains를 설정 해주면 된다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, images: { domains: ["d3t32hsnjxo7q.. 2023. 3. 1. [React] React hooks 정리 part.2 useMemo(최적화) feat. React.memo [React] React hooks 정리 part.2 useMemo(최적화) feat. React.memo React Hooks 정리 중! 이번 파트에는 리액트 최적화를 위한 useMemo를 파헤쳐보자 :) 들어가기 전 다른 hooks들이 궁금하다면 하단으로 ㄱㄱ! useState https://heeeming.tistory.com/entry/React-Hook-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%9B%85%EC%9D%98-state-%EA%B4%80%EB%A6%AC-%ED%95%A8%EC%88%98-useState-%ED%95%A8%EC%88%98%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90 [React Hook] 리액트 훅의 .. 2023. 2. 28. [ESLint] ESLint - Function component is not a function declaration Error [ESLint] ESLint - Function component is not a function declaration Error .esLintrc.js 파일에서 에러 발생 error Function component is not a function declaration eslint (react/function-component-definition) 발생 사유 : 화살표 함수로 생성된 함수형 컴포넌트에 대한 오류 ... "react/function-component-definition": [, { // 기명 함수 옵션 "namedComponents": "function-declaration" | "function-expression" | "arrow-function" | Array, // 익명 함수 옵션.. 2023. 2. 27. 이전 1 2 3 4 다음 반응형
