TIL

현재 selector 중

useRef의 특징.state와 비슷하게 저장공간으로 사용된다.1\. ref에 넣으면 state처럼 매번 randering이 되지 않아 불필요한 randering을 줄일 수 있다.2\. state가 변경이 되어 randering이 되더라도 ref의 값은 변하지 않는다.

오늘 새로 배운 것

비관계형 데이터베이스는 다음과 같은 경우에 많이 사용합니다.1\. 비구조적인 대용량의 데이터를 저장하는 경우NoSQL 데이터베이스는 관계에 중점을 둔 SQL 데이터베이스보다 자유로운 형태로 데이터를 저장할 수 있으므로 필요에 따라서 새로운 데이터 유형을 추가할 수 있습

모든 MongoDB 도큐먼트는 모든 도큐먼트가 \_id 필드를 기본값으로 반드시 가지고 있어야 한다는 공통점이 있습니다. 이 \_id 필드의 값은 각 도큐먼트를 구별하는 역할을 합니다.도큐먼트를 추가할 때 \_id 필드와 값을 특정하지 않았다면, 자동적으로 \_id 필

참조 : https://themarketer.tistory.com/73공부하기

MVC(Model-View-Controller) 서로 상호작용하면서 특정 역할을 하는 것 DATA의 정보를 갖고 있다. 자신이나 DATABASE와 연결이 되서 data를 가지고 올 수 있다. Model은 controller와 가지고 온 data를 가지고 이야기를 한다

jwt verify = 검증 및 해석jsonwebtoken 라이브러리를 사용해 토큰을 verify(해독, 검증) 하는 방법은 아래와 같습니다.jwt sign = 생성jsonwebtoken 라이브러리를 사용해 토큰을 생성하는 방법은 아래와 같습니다.findOne, fin

각 폴더 및 파일에 권한 주기.명령어 chmod 폴더나 파일의 읽기, 쓰기, 실행 권한을 변경할 수 있습니다. OS에 로그인한 사용자와, 폴더나 파일의 소유자가 같을 경우에 명령어 chmod 로 폴더나 파일의 권한을 변경할 수 있습니다. 만약 OS에 로그인한 사용자와,

오늘 배운 것 arr.reverse() 배열을 뒤집는다. const a = [1, 2, 3]; console.log(a); // [1, 2, 3] a.reverse(); console.log(a); // [3, 2, 1] str.split() String 객체를

유니코드가 탄생하기 이전에는 같은 한글이 적힌 텍스트 파일이라도 표현하는 방식이 제각각이었기 때문에, 어떤 파일이 지원하지 않는 다른 인코딩 형식으로 저장되어있는 경우에는 파일을 제대로 불러올 수 없었다.그렇기 때문에 문자 인코딩 방법을 모두 유니코드로 교체하기 시작하

OAuth2.0은 인증을 위한 표준 프로토콜의 한 종류보안 된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공(Authorization)하는 프로세스를 단순화하는 프로토콜 중 한 방법입니다.유저 입장에서 생각해 보자면, 우리는 웹상에서 굉장히 많은 서비스를 이용하고

HTTP 메시지는 헤더와 바디로 구분할 수 있습니다. HTTP 바디에서는 데이터 메시지 본문(Message body)을 통해서 표현(Representation) 데이터를 전달합니다. 여기서 데이터를 실어 나르는 부분을 페이로드(Payload)라 합니다.표현은 요청이나

IP와 IP Packet IP(인터넷 프로토콜) 주소를 컴퓨터에 부여하여 이를 이용해 통신한다. IP는 지정한 IP 주소(IP Address)에 패킷(Packet)이라는 통신 단위로 데이터 전달을 합니다. IP 패킷에서 패킷은 pack과 bucket이 합쳐진 단어

클라이언트가 logo.jpg 이미지에 대한 요청을 보내고 서버가 해당 이미지에 대한 응답을 줄 때, HTTP 헤더가 0.1M, 바디가 1.0M로 총 1.1M로 가정해 보겠습니다.같은 이미지를 다시 요청하더라도 첫 번째처럼 똑같이 1.1M의 응답을 보냅니다. 이 경우 l

현재 시간을 불러온다둘 다 비슷한 함수이나, setInterval은 지속적으로 반복, setTimeout은 한 번만 실행된다.둘이 쓰는 법은 똑같으나, 앞에 붙느냐 뒤에 붙느냐 차이다.앞에 String type을 받는다.string.padStart(앞에 string의

Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체를 가리킵니다.이벤트가 발생한 대상 객체의 부모를 가리킵니다.만약에 이런식으로 내가 함수를 만들었다면, li tag에 id가 그냥 추가가 된다.. 몰랐다....이런식이면 다양하게 활용이 가능할 것 같다

JSX는 자바스크립트의 확장 문법이다.XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트 형태의 코드로 변환된다.바벨은 변환한 값이 보이지는 않지만 head에 담겨있다.경고JS

onchange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줍니다.예를 들어 그래서 보통 만약 input type을 text or number 형식으로 만들면 글을 쓸 때마다, 아니면 숫자를 클릭하여 올릴 때마다 값을 바뀌는 것을 줘야하는

jwt.verify() 함수에 들어가는 매개변수 3개token: client에게서 받은 tokensecretkey : token 생성 시 사용했던 secretKey3번째 인자로 들어간 익명함수 : 유효성 검사 결과를 처리할 callback 함수예시)

만약에 key와 value가 같은 동일한 이름이라면 생략이 가능하다.

간단하게 말하자면 PureComponent로 구현을 하면 직접적으로 props를 주는 상위 컴포넌트나 자기 컴포넌트가 업데이트가 되는 것이 아니라면 re-randering이 일어나지 않게 하는 것이다.두개의 변수(states)가 동일한 오브젝트를 가리키고 있는 경우:

React 함수형에서 쓰는 Ref원하는 곳에 접근하여 사용할 수 있다.state나 props가 변경될 때마다 다시 불러온다.하지만 두번째 인자에 \[]을 넣어주면 처음에만 불러온다.\[]에 원하는 데이터가 바뀔 때만 변경을 원하면 두 번째 인자에 count 이런 식으로

변수에 object를 할당하면 데이터 자체가 할당이 되는 것이 아니라 주소값이 할당이 된다.즉, x = 2라면 x에 2가 할당이 되지만 x = {y:2} 라는 object가 할당이 되면, 주소값(예를 들면 x123 이런 식으로) 주소값이 할당이 되는 것이다.그래서 co

일단 사용할 곳에서 import를 한다styled component는 css와 문법이 같지만, 만들 때 랜덤한 tag를 만들어주기 때문에 중복이 되지 않아서 좋다.사용하는 곳에서는 이런 식으로 사용해주면 된다.일단 쓰려고 하는 styled component를 impor

import { useParams } from "react-router-dom";<Route path="/day/:day" element={} /> // 콜론(:)이 중요하다.const day = useParams();//day에 {day:'2'} object가

Store는 data를 저장하는 곳createStore는 Store(저장소)를 만든다.createStore는 reducer를 요구한다.reducer는 함수여야 한다.reducer는 data를 modify 해주는 함수로 reducer가 return하는 것은 applica

설치npm install react-reduxyarn add react-reduximport { createStore } from "redux" 로 불러온다.그리고 무조건 const store = createStre(reducer)를 만들어야 한다.바로 저장소를 만드는

설치npm install typescriptyarn add typescriptnpx tsc 파일명(명령어, 컴파일러, typescript 파일을 js파일로 만들어줌.)typescript는 브라우저에서 사용할 수 없다.그래서 컴파일링을 통해 js로 바꿔서 사용을 해야한다

함수형 컴포넌트에서 부모한테 props를 받을 때는 React.FC를 넣는다.여기에서 FC는 functional component를 의미하는 것으로 함수형 컴포넌트에서는 이것을 넣어주어야 한다.이때 컴포넌트에서는 React.FC를 쓰는 순간 children prop을

interface redux에서 type과 같은 역할이라고 생각하면 된다. 보통 두 개 중에 하나만 쓰는 것이 좋은데, 나같은 경우는 type을 주로 사용한다고 가정할 때 이런 식으로 활용이 가능하다.

리렌더링이라는 것은 렌더링이 다시 발생하는 것이다. 렌더링이라는 것은 화면상에 뷰(내용)를 보여주는 것이다. 리액트에서 리렌더링은 상태가 변화할 때 발생하는데 Virtual DOM에서 변경된 혹은 업데이트된 내용을 이전 값과 비교하여 변경된 값에 대해 렌더링을 해주는

HTTP는 Hyper Text Transfer Protocol의 약자로,HTTP는 인터넷에서 하이퍼텍스트를 교환하기 위한 통신 규약으로, 80번 포트를 사용하고 있다.HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다.HTTPS는 HTTP와 다르게 443번 포트

https://ko.javascript.info/map-set자세하게 나와있으니 이거 보면서 다시 정독

일일이 하나씩 테그 넣고 클래스 넣고 ID 넣고 이런 식으로 말고 작성이 가능하다.Tag.클래스명Tag.ID

눈에 보여지는 수치.HTMLElement.offset은 원초적인 사이즈라고 이해하면 된다.문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환수평은 window.scrollX 사용HTML에서 data-\*\*\*\*(넣고 싶은 이름)로 사용할 수 있다.어느 엘리멘트에나

setTimeout은 비동기 함수로 다른 함수 호출을 막지 않는다.setTimeout은 함수이기 때문에 기본적으로 함수 구조를 갖는다.setTimeout(() => {}) 하지만 여기에서 중요한 건 두 번째 인자로 count가 들어가는데, 그 카운트 이후에 함수를 실행

Canvas API는 JavaScript와 HTML canvas 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공한다. HTMLjavascript무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다.실제 그리기는 Canv

보통 우리가 이런 식의 코드가 있었다고 해보자.a 태그는 li, ul의 두 개의 부모 태그가 있다.사용자가 a 태그를 클릭한다면 a 태그만 실행이 되는 것이 아니라 li, ul태그로 순차적으로 전달이 된다.즉, a 태그의 onclick -> li 태그의 onClick

let t = new Date(new Date().setHours(0, 0, 0, 0));//이전 자정(즉, 당일)//let t = new Date(new Date().setHours(24, 0, 0, 0)); 이후 자정//let t = new Date(new Date

Object.keys() Object.values() Object.entries()

JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환한다. 나같은 경우는 배열 안에 문자들을 비교하기 위해 사용하였다.

Three.js tutorial Three.js는 웹페이지에서 3D 콘텐츠를 최개한 쉽게 얻을 수 있도록 하는 3D 라이브러리이다. 위 구조를 Renderer라고 한다. 이 구조는 three.js의 main object라고 생각하면 된다. 간단하게 설명하면 Sce

프로젝트를 하던 도중 setState를 modal component에 전달을 하였으나 setState is not a function이라는 오류가 발견.이유를 한참 해메던 중 관련이 있는 component에서 랜더링이 일어날 경우 오류가 난다.무슨 이야기냐 하면 con

객체에서 못 읽는 경우는 . 대신 \[]를 사용.

만약 props가 없을 때 기본값을 정할 수 있다.

객체 안에서 key를 로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용된다.

참조 : https://blog.pumpkin-raccoon.com/80

프로젝트 진행 중 useRef의 변화가 한 박자 늦게 변화가 감지되어 실시간으로 변화가 일어나지 않아 useRef를 실시간으로 확인할 수 있는 방법을 찾아보았다.즉, 설정한 해당 Element의 크기 변화를 관찰하는 것.해당 element의 크기가 변화가 생기는 순간을

stable diffusion이란 줄여서 SD, Stability.AI라는 회사의 모든 코드와 기능을 오픈소스 코드로 내놓은 것이다.https://github.com/AUTOMATIC1111/stable-diffusion-webui 접속Installation

큰 React 어플리캐이션은 많은 구성 요소, 유틸리티 및 라이브러리로 구성이 되어있다.만약, 필요할 때만 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드할 시 Javascript 번들이 사용자에게 전송이 되는데, 이는 페이지 성능에 상당한 영향을 줄

설치 일단 node가 설치가 되어있어야 한다. 그렇다면 위와 같이 명령어를 하면 되는데, @latest는 최신 버전을 사용한다는 뜻이고 .은 현재 폴더에 만든다는 뜻이다. 그 뒤 여러가지 질문들이 나오는데, 나는 일단 생코를 보면서 연습해 볼 것이기 때문에 아래와 같

client side rendering을 줄여서 말한 것으로 rendering을 하는 주체자가 client라는 것이다.나는 react로 web을 개발하기 때문에 여기서는 Browser라고 표현하면 되겠다.csr은 사용자가 브라우저에 접속을 하게되면 browser에서 s

lodash는 js의 라이브러리 중 하나다.보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게 사용한다.JavaScript에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생

web application이란? 다운로드 받지 않고 인터넷이나 인트라넷을 통해 웹브라우저 위에서 이용할 수 있는 응용 소프트웨어(app)이다. 장점 소프트웨어를 설치하지 않아도 web application을 유지, 관리할 수 있다. 메일, 전자상거래, 블로그,