# memo

suwith

1. The Var Keyword > 함수나 메소드 내부에 지역변수를 선언할 때는 var를 사용하고 class에서 변수나 property를 선언할 때는 명시적 타입을 사용한다. 당연한 말이지만 다른 타입의 변수는 서로 대입할 수 없다. var를 사용하는게 dart 스타일가이드의 권장 방식이다. 2. Dynamic Type > 변수를 선언할 때 dynamic을 쓰거나 값을 지정하지 않으면 dynamic타입이 된다. 이 데이터는 여러 타입을 가질 수 있기 때문에 정말 필요할 때만 사용해야 한다. 데이터 타입이 무엇인지 모를 때 주로 사용한다. 3. Nullable Variables > dart에서는 기본적으로 모든 변수가 non-nullable(null이 될 수 없는)이다

qmflf556

📚 서론 이번엔 React 에서 사용할 수 있는 다양한 CSS 기법들과 렌더링의 구조, 그리고 렌더링을 최적화할 수 있는 memo, useCallback, useMemo 훅에 대해 간략히 알아보자. 📘 CSS 📗 Inline Style 📕 직접 기술 📕 사전 정의 후 지정 > 주의 속성명은 카멜케이스 text-align => textAlign 값은 문자열 혹은 수치 color: 'red', margin: 0 코드가 복잡해질수 있으니 인라인 스타일 사용을 지양하자 📗 CSS Module .css 나 .scss 파일을 정의하는 방법이다. CSS Module 을 사용하면 스타일 중복 적용을 방지할 수 있다. > scss 설치 혹은 > - npm install node-sass node-sass 는 sass(scss) 파일을 css 로 변환하는 노드 node.js 기반 패키지이다

seeker2250

switch문 case에 따라 나뉜다는 것이 특징이다. java 14부터는 개선된 switch를 제공한다 > 위 코드는 예외처리가 제대로 적용되지 않은 코드다 왜냐하면 case 1과 2가 아닌 경우에 String을 return하지 못하기 때문이다. 이러한 경우를 막기 위해 default를 적용해주어야 한다. > 문제 1 1)switch 문에서 사용할 수 있는 variable type은 int 뿐만 아니라 double도 된다.(O, X)->X 2)variable x의 value가 1일 때, 다음 코드의 실행 결과는? >java public static int sum (int i1, int i2){ int sum = 0; for(int a = i1; a<= i2; a++) sum+=a; return sum; } 주의사항 1) Header의 return type과 Body에서 실제 return되는 value의 t

snoopn

상태관리 최신 상태의 데이터를 보여주도록 페이지 간 데이터를 주고받고 관리하는 행위 flutter_provider 패키지 설치 다음 명령어를 실행하여 flutter_provider 패키지를 설치한다 (터미널실행) Provider 란 ? Flutter에서는 크게 두 종류의 위젯이 존재한다. 하나는 상태를 가지지 않는 Stateless Widget과 상태를 가지고 있는 Stateful Widget. Statefule Widget은 한 위젯 안에서 상태(데이터)를 가지고 해당 상태의 변화에 따라 화면에 표시되는 UI를 변경한다. 만약, 다른 위젯에서 동일한 상태(데이터)가 필요한 경우에는? 상태를 공유하는 두 위젯의 공통 부모 위젯을 Stateful Widget으로 만들고, 자식 위젯을 생성할 때, 파라메터로 해당 상태를 전달하면, 두 위젯 사이에서 동일한 상태를 사용할 수 있다. ![](https://velog.velcdn.com/images/s

gojaeng

재렌더링 막기위해선 memo 컴포넌트가 재렌더링되면 그 안에 있는 자식컴포넌트는 항상 함께 재렌더링이 된다. 하지만 자식컴포넌트의 렌더링 시간이 1초나 걸리는 컴포넌트라면? 불상사가 발생할 수 있다. 그럴 때 쓰는 것이 memo이다. 이런식으로 Cart안에 Child 컴포넌트를 하나 만들었다. 그리고 버튼을 누를때 Cart이외에 Child 컴포넌트도 재렌더링 되게 만들었다. 하지만 Child컴포넌트가 엄청 느린 컴포넌트일때? 바로 "꼭 필요할 때만 컴포넌트 재렌더링해주세요" 이렇게 코드를 짜는 것이다. memo()로 컴포넌트 제렌더링 막기 memo()를 쓰기 위해선 react라이브러리에서 import해야한다. 이렇게 원하는 컴포넌트 정의부분을 감싸면 된다. useMemo useEffect와 비슷한 용도로 사용한다. 컴포넌트 로드시 1회만 실행하고 싶은 코드가 있을시 쓴다. 이렇게 사용을 한다. ※주의사항 memo로 감싼 컴포넌트는 헛된 재렌더링을 막

dia218

첫 글이다 벨로그 처음 써본다 테스트용 글...? 여튼 그러하다. (그림은 지인분이 그려주신 것)

greenbean

동기와 비동기는 무엇인가. 프론트엔드에서 비동기 작업 어쩌구.. 많이 듣고 사용하는데 동기와 비동기의 개념이 확실히 다져져 있지 않았다. 확실히 짚고 넘어가야하는 동기와 비동기의 개념 비동기 작업 애플리케이션이 동시에 여러 작업을 처리하거나, 작업의 완료를 기다리지 않고 다른 작업을 수행할 수 있는 프로그래밍 개념. 다른 작업을 수행하면서 비동기 작업이 백그라운드에서 동시에 실행된다. 시간이 오래걸리는 작업이 있어도 더욱 반응적이고 효율적으로 동작. 네트워크 요청 - 서버와의 데이터 통신, 데이터를 요청하고 응답을 기다리는 동안 애플리케이션이 다른 작업을 수행할 수 있다. 파일의 입출력 = 파일을 읽거나 쓰는 작업은 시간이 걸릴 수 있으므로, 비동기 방식으로 처리하여 다른 작업을 동시에 수행 타이머 / 이벤트 처리 - 특정 시간 간격으로 작업을 수행하거나 사용자 입력등의 이벤트를 비동기적으로 처리할 수 있다. setTimeout 같은 거.. setTimeout

greenbean

SPA 싱글 페이지 어플리케이션 한 페이지에서 필요한 부분만 받아와서 업데이트하는 형식. 여러개의 html파일로 이루어진 것이 아니라 하나의 html만이 존재하고 index.js에 여러가지 컴포넌트나 템플릿을 만들어불러오는 형식 구글 맵이 SPA으로 이루어져있다. 리액트, 뷰, 앵글러 SPA을 구현하며 SPA는 기본적으로 CSR이다. CSR 클라이언트 사이드 렌더링 브라우저 사용자(클라이언트) 측에서 렌더링 되는 것. 텅빈 에 필요한 부분들을 불러와서 채워넣는 방식이다. 리액트와 뷰가 이런 형식이다. 특징 다운받은 html안이 텅 비어있고 추후에 필요한 data들을 요청해서 넣어서 보여주는 방식이라 사용자가 화면을 보기까지의 시간이 걸린다. SEO가 용이하지 않다. 일단 받게 되는 html이 비어있기 떄문에 내용물이 어떤 것들이 들어있는지 검색엔진이 파악하기 어려워 검색엔진이 CSR로 작성된 웹페이지를 분석하는데 어려

greenbean

netflix clone 작업 사실 어제 끝날 줄 알았는데 Mongo DB에서 어려움을 겪어 해결 못함 상태이다. 강의는 MERN stack 이라서 mongo DB도 포함이 된다. 나는 mongo DB 쪽 지식이 전혀 없는 상태인데 강의에는 mongo DB쪽을 초보자를 위해 다루지 않았다.. 이미 몽고 DB를 사용할 줄 안다는 가정하에 진행되었음. 문제 mongo DB를 사용하는 방법을 검색해서 나온 유튜브나 블로그를 보며 따라해봤는데 compass를 사용하는데 connect를 하는 부분에서 자꾸 에러가 났다. 게다가 compass에 관한 내용도 별로 없었다. 대부분 다른 사람들은 저 에러를 윈도우 --> 작업관리자 --> 서비스 에서 MongoDB부분을 찾아서 사용중지를 풀어주어

dev_seongjoo

memo memo는 컴포넌트의 props가 변경되지 않았을 때 해당 컴포넌트의 다시 렌더링을 건너뛰게 해줍니다. Reference memo(Component, arePropsEqual?) 컴포넌트를 memo로 감싸서 해당 컴포넌트의 메모이즈된 버전을 얻을 수 있습니다. 부모 컴포넌트가 다시 렌더링되었을 때 해당 컴포넌트의 props가 변경되지 않았다면 일반적으로 해당 컴포넌트는 다시 렌더링되지 않을 것입니다. 그러나 React는 여전히 재렌더링을 수행할 수 있습니다. 메모이제이션은 성능 최적화를 위한 것이지, 보장되는 동작은 아닙니다. Parameters Component: 메모이제이션을 원하는 컴포넌트입니다. memo는 이 컴포넌트를 수정하지 않고, 대신 새로운 메모이즈된 컴포넌트를 반환합니다. 함수 및 forwardRef 컴포넌트를 포함한 모든 유효한 React 컴포넌트가 허용됩니다. optional `arePr

heee

props란 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다. 부모 컴포넌트인 App 컴포넌트에서 넣어준 속성들을 내가 만든 Btn 컴포넌트의 첫 번째 인자로 넣어주는데 이것이 바로 props이다. 리액트는 자동으로 이 모든 properties들을 오브젝트, 즉 props 안으로 집어 넣는다. 위에서 같은 Btn 컴포넌트를 사용하지만, 이 버튼들은 App 컴포넌트에 의해 설정되고 있다. 이렇게 하나의 버튼을 만들어서 props를 이용해 버튼의 스타일을 관리해 재사용할 수 있다. 중요한 것은 이렇게 props를 부모 컴포넌트로부터 내려받았을 때 이를 직접 return문 안에 넣어줘야 한다는 것이다. changeValue라는 함수를 전달받았으니 이 props의 이름을 버튼의 event handler로 직접 넣어줘야 한다. > React.memo() 위 예시에서 부모의 상태를 바꾸는 changeValue 함수는 자식 컴포넌트가 실행시킨

creyon0215

Index 성능최적화 - react developer tools memoization(useCallback,useMemo) map,memo(key-uuid?) CRP(Critical Rendering Path) Reflow, Repaint prefetch, preload 이미지 (input.target.files, readAsDataURL, onload) Promise, Promise.all, Promise.all() - map LazyLoad vs PreLoad ( Prefetch) Google PageSpeed Insights 이미지 Webp 확장자 이미지 라이브러리(React-lazy-load, React-dropzone, react-avatar-editor, antd, React-beautiful-dnd) Optimistic-UI Intro 자꾸 새로 만

greenbean

항상 개념이 모호했던 URL과 URI의 차이. URL과 URI 모두 인터넷 상의 리소스를 가리킨다. URI(Uniform Resource Identifier)는 인터넷 상의 어떤 리소스를 유일하게 식별하는 문자열로 URL 꼬리에 붙는 '/users'나 '/post'같이 유일하게 식별할 수 있는 문자열 URL(Uniform Resource Locator)은 인터넷 상의 리소스의 위치를 나타내는 문자열로 URL은 프로토콜, 호스트, 포트, 경로, 쿼리 문자열 등으로 구성된다. https://www.example.com은 URL이고 여기에 https://www.example.com/users가 붙으면 /users가 URI URL은 인터넷 상의 리소스를 가리키는 문자열이고, URI는 인터넷 상의 어떤 자원을 유일하게 식별하는 문자열로, URL 또한 URI의 한 종류입니다. 따라서, https://www.example.com/users는 URL이면서 URI입니다.

badassong

1. React.memo: 단순 UI 컴포넌트의 리렌더링 방지 (props가 들어가는 순간 리렌더링 된다) &nbsp; 2. useMemo: props로 전달받은 함수를 실행해서, 그 결과값을 보존 (deps=의존인자가 하나라도 변하면 함수를 다시 실행해서 그 결과값을 보존) &nbsp; 3. useCallback: props로 전달받은 함수를 보존 (deps가 하나라도 변하면 그에 맞는 새로운 함수를 리턴) 1번 React.memo로 전부 커버가 안되는 이유는 props=함수 또한 객체이기 때문에 부모 컴포넌트가 리렌더링 될때마다 얘도 같이 새로운 참조값(주소값)을 가지게 된다. 따라서 React.memo는 "아, 새로운 객체(함수)가 props로 들어왔구나" 라고 인식해서 리렌더링이 되어버린다. 2번 useMemo와 3번 useCallback은 사실 거의 비슷하지만, 굳이 차이점을 적어보자면 아래와 같다. 2번 useMemo의 경우에는 함수의

ksel0729

오늘은 Pwnable에 One_gadget에 관한 내용을 작성하고자 한다. > One_gadget은 하나의 가젯으로 Shell을 딸 수 있는 가젯이다. ✔ Installation One_gadget의 Github 주소는 아래에 적어두겠다. 👉 https://github.com/david942j/one_gadget 설치 방법은 엄청 간단하다! 미리 설치해서 사용하고 있었지만, 설치하는 cmder 모습을 캡처해봤다. 위와 같이 one_gadget 명령어를 입력했을 때 사용방법

judy_choi

요즘 LLaMA 가 핫하길래 순전히 내 궁금증 해소 차원에서 메모를 남긴다. 기술블로그 포스팅은 다른 사람이 정보를 이해하기 쉽도록 일목요연하게 쓰면 좋겠으나 그러려면 글을 쓰는 수고가 많이 들 테고, 나는 내 궁금증만 해결하면 되는데 너무 input 이 크다. (사실 라마는 남아메리카 안데스의 가축인지라 안데스 산맥이 뻗어 있는 국가의 언어인 스페인어로 읽으면 '야마' 지만 야마는 왠지 한국인에게는 어감이 별로니 남들처럼 라마라고 부르는 걸로 😅) LLaMA > Large Language Model Meta AI ChatGPT 가 몰고 온 생성 바람에 Meta 도 LLaMA 를 공개하며 맞섰는데 오픈소스 AI의 명가 Meta 답게 서비스가 아니라 LLM 을 공개한 점이 흥미롭다. 특징 OpenAI, Google 의 LLM 보다 적은 parameter -> 적은 컴퓨팅 파워로 큰 성능 비결 : 고품질 데이터로 train (train 에 사용하는 토큰 양을

hjnee1102

갑자기 왜? 여유롭게 저녁 식사를 끝낸 오후 8시, LG전자 서류결과 확인 문자가 왔다. 다행히 합격했고, 기쁘게 코딩테스트 안내메일을 확인했다. 그런데...그런데...!!!!! ??!?!?!?!?!?! C와 C++만...? 당장 15일에 코딩테스트인데? 매우 혼란스럽다. 나는 알고리즘 언어로는 Python만 사용할 줄 알고, C나 C++은 정보처리기사 준비하면서 잠깐 마주친게 전부다. 자기소개서에 내가 뭘 잘못 적었나? 아니다, 분명 지원서에도 Python을 사용한다고 적었다. > 혹시... 일부러...? 학습의지를 테스트해보기 위함인가...? 원래도 데이터분석/AI를 제외하고는 Java나 C/C++의 활용범위가 훨씬 넓다고 생각해 언젠가 도전해야겠다고 생각했다. 물론 실제로 익히는 건 빠른 시일

dorong36

😇 Reactjs Code Snippet VS Code에서 Reactjs Code Snippet 확장 프로그램을 설치했다면 컴포넌트 코드 쉽게 생성 가능 rsc + Enter : 함수형 컴포넌트 자동생성 rcc + Enter : 클래스형 컴포넌트 자동생성 생성된 뒤 커서는 컴포넌트 이름 변경에 가있음 Tab 누르면 선택 해제, 코드 내부로 커서 이동

aksqud113

memo는 컴포넌트가 렌더링을 할때 이전에 렌더링한 결과를 캐싱하는 매커니즘을 가진 함수이다. React Cache와 달리 props를 기준으로 메모이제이션을 판단한다. Memoizing Component 리액트의 제공 함수인 React.memo()를 이용하여 컴포넌트가 같은 props를 가진 경우 이전에 렌더링된 결과를 캐시하고, 같은 결과를 재사용할 수 있도록 한다. memo는 자신으로 감싼 컴포넌트가 렌더링될 때만 이전 props를 캐싱한다. memo는 두 개의 인수를 받는다. type : 메모이제이션할 컴포넌트 compare : 이전과 다음 props를 받아 컴포넌트를 리렌더링해야 할지의 여부를 반환하는 선택적 함수이다. memo 함수는 해당 컴포넌트를 마지막으로 렌더링할 때의 props 값을 저장하고 새로운 렌더링이 발생했을 때의 props 값을 비교한다.

ksel0729

오늘은 Memo용으로 Pwntools 설치 방법을 적어두려한다... > Pwntools는 CTF Framework이자, Exploit을 쉽게 작성할 수 있도록 도와주는 라이브러리이다. 설치방법은 Gihub 홈페이지에서 제공한다. 아래와 같다! Installation 공식 홈페이지 주소는 아래와 같다. [Error] Pwntools 설치 시, 아래와 같은 오류가 발생하면 해당 모듈을 설치해주면된다! 위의 모듈을 설치해주면 ... ![](h