profile
Developer's High
태그 목록
전체보기 (47)React(11)hook(5)TIL(3)노션클론코딩(3)이터레이터(3)함수형프로그래밍(3)제너레이터(3)this(2)scss(2)모듈(2)Sass(2)async(2)ES6(2)CSS(2)CSR(2)SSR(2)자료구조(2)트라이(2)알고리즘(2)spa(2)프론트엔드(2)React.memo(1)eventLoof(1)확장성(1)DOMTree(1)virtual DOM(1)회고(1)component(1)variable(1)클론코딩(1)package(1)추상화(1)githubpages(1)API(1)push(1)이벤트루프(1)스코프(1)flex box(1)bind(1)호이스팅(1)transform(1)prop-types(1)프로미스(1)event flow(1)낙관적 업데이트(1)코딩테스트(1)optimization(1)객체지향과프로토타입(1)함수형 프로그래밍(1)웹스토리(1)브라우저(1)vue(1)FetchAPI(1)open source(1)트리(1)throttle(1)debounce(1)Firebase(1)HistoryAPI(1)capturing(1)await(1)storybook(1)이진트리(1)useEffect(1)useState(1)ajax(1)ux(1)UI컴포넌트(1)network(1)Flex(1)JavaScript(1)UI(1)Debouncing(1)craco(1)frontend(1)layout(1)섹션스토리지(1)유니코드(1)프로미스 객체(1)XSS(1)cli(1)filter(1)Breadcrumb(1)commit(1)쿠키와세션(1)React.children(1)useMemo(1)DOM(1)Attachment(1)parser(1)로직분리(1)html(1)clone(1)구조분해할당(1)useCallback(1)그리디(1)script(1)렌더링(1)데브코스(1)로컬스토리지(1)painting(1)데이터타입(1)memory(1)CDN(1)custom hook(1)spread operator(1)Fetch(1)parse()(1)style(1)Vercel(1)aws(1)IntersectionObserver(1)RenderTree(1)이진탐색(1)JSX(1)지연평가(1)CSSOM(1)vanillajs(1)변수(1)rendering(1)의존성(1)토큰(1)Token(1)선언적 프로그래밍(1)중첩(1)columns(1)bubbling(1)grid(1)closure(1)캐치(1)emotion(1)add(1)netlify(1)노션(1)contextAPI(1)scope(1)apply(1)call(1)git(1)svelte(1)tag(1)crypto(1)정규표현식(1)
post-thumbnail

Context API

컴포넌트간의 데이터를 교환하기 위해서는 props를 이용해야 한다. 그런데 만약에 이런식으로 부모 컴포넌트가 아닌 부모의 부모 컴포넌트로 올라간다던지 자식의 자식 컴포넌트로 데이터를 전달할때에는 전달방법이 귀찮아진다.그림에서 보면 2번만 거치면 되지만 만약에 10번을

2021년 10월 17일
·
0개의 댓글
post-thumbnail

React.Children

여기서 Box컴포넌트가 Parent 컴포넌트에서 인자로 받고 있는 children이다. 컴포넌트 태그 의 자식 컴포넌트 혹은 태그로 들어오는 값을 받을 수 있다. 이런 코드를 작성했다고 했을때 Component가 인자로 받는 것은 다음과 같다.기본적을 children

2021년 10월 13일
·
0개의 댓글
post-thumbnail

Storybook

스토리 북은 UI컴포넌트를 데이터로 관리해주는 라이브러리이다. 이런 식으로 UI컴포넌트를 폴더 별로 모아서 따로따로 관리할수 있고 밑에 Control 부분에서 컴포넌트에 전달되는 props들을 변경해서 바로바로 데이터에 의한 UI변경을 즉각적으로 확인 할수 있다.사용하

2021년 10월 9일
·
0개의 댓글
post-thumbnail

TIL 이동

기존에 일자 별로 TIL을 작성했지만 추후에는 일자를 기준으로 하는것이 아닌 React,Vue 등 카테고리를 기준으로 작성하려고 한다.1\. 시간이 지날수록 처음과 다르게 의무적으로 쓴다는 생각이 들어서 기분 전환겸 2\. 카테고리를 세세하게 나누어서 참고할시 좀더 편

2021년 10월 8일
·
0개의 댓글
post-thumbnail

Custom Hook

Custom Hook은 기존의 다른 Hook들을 사용할수 있으면 정말 별거 없이 사용 할수 있다.여기서 겹치는 것들이 아주 많다. useState에서 뽑아온 상태가 useCallback에서 그대로 사용되었다. 이게 custom hook이다. 별거 없이 기존의 hook에

2021년 10월 8일
·
0개의 댓글
post-thumbnail

useCallback

useCallback은 콜백 함수를 기억해야 할때 쓰입니다.위에 코드를 간단하게 보면 App컴포넌트는 ChildComponent와 DummyComponent를 자식 컴포넌트로 가지고 있고 ChildComponent에게는 콜백함수 와 state를 전달해주고 DummyCo

2021년 10월 8일
·
0개의 댓글
post-thumbnail

useMemo && React.memo

자신의 상태가 변경될때부모로 부터 받은 props가 변경될때부모의 상태가 변경될때이런식으로 부모 컴포넌트가 자식 컴포넌트에게 연산이 큰 props와 변화가 잦은 props 두가지를 전달한다고 했을때 변화가 잦은 props가 변할때마다 자식 컴포넌트는 다시 렌더링이 된다

2021년 10월 8일
·
0개의 댓글
post-thumbnail

Style

css를 따로 스타일시트로 분리하지 않고 자동적으로 컴포넌트 내부에서 쓸수 있게 해주는 라이브러리 react 내부에서 동작하도록 만들어주는 라이브러리로 위에 코드 처럼 css를 각 컴포넌트마다 관리할수 있도록 스타일을 제공해준다. Vue에서 template 태그, sc

2021년 10월 8일
·
0개의 댓글
post-thumbnail

useRef

useRef의 기본적인 기능은 고유의 값을 저장하는 것이다. 만약 태그에 사용된다면 해당 엘리먼트를 참조할수 있다. 인자로 받는 값은 useState와 동일하게 초기값이다.useRef는 React내부에서 생성된 객체이며 해당 객체는 값을 저장하는 것이 아니라 특정 메모

2021년 10월 6일
·
0개의 댓글
post-thumbnail

useEffect 와 Hook

useState는 prop-types와 다르게 react에 독립된 모듈이 아니다.이를 증명하듯 GithubPage의 pakage.json 파일안에 dependencies에는 prop-types가 없다.위에 코드에 보면 useState가 있고 구조분해할당을 통해 use

2021년 10월 6일
·
0개의 댓글
post-thumbnail

useState

useState는 prop-types와 다르게 react에 독립된 모듈이 아니다.이를 증명하듯 GithubPage의 pakage.json 파일안에 dependencies에는 prop-types가 없다.위에 코드에 보면 useState가 있고 구조분해할당을 통해 use

2021년 10월 6일
·
0개의 댓글
post-thumbnail

prop-types

컴포넌트로 내려주는 정보를 prop이라고 한다.이때 prop의 타입을 체크해줄수 있는 라이브러리는 prop-types이다.React 15버전 이전에는 import React from 'react'를 통해서 거기에 포함된 prop-types를 가져올수 있었지만 지금은 p

2021년 10월 6일
·
0개의 댓글
post-thumbnail

JSX

JSX는 화면에 렌더링 될 요소들을 생성하는 것으로 html처럼 생겼다. 특징으로는 내부에 {}으로 감싸진 표현식을 작성할수 있다.{}으로 감싸진 표현식은 태그 내부의 컨텐츠와 속성으로도 사용할수 있다. 여기서 특이한 점은 class를 className으로 사용하는데

2021년 10월 6일
·
0개의 댓글
post-thumbnail

Day.33 Sass(SCSS)(2021.09.15)

sass문법은 정말 이상해보인다. 자바스크립트도 문법이 이상하다는 소리는 들었지만 직접적으로 이상하다는 느낌은 잘 들지 않았지만 sass문법은 정말 이상하게 느껴진다. 그래도 css문법을 그대로 쓸수 있고 특히 hover기능을 구현할때는 정말 편할것 같다.

2021년 9월 20일
·
0개의 댓글
post-thumbnail

call,apply,bind은 뭘까

call,apply,bind를 알아보기전에 우선 This에 대해 알아야합니다. this는 어떻게 호출되는가에 따라서 달라지는 자바스크립트의 중요한 개념중 하나입니다. someone이라는 객체가 있고 그 안에는 name과 this를 출력하는 메서드가 두개 들어있습니다.

2021년 9월 16일
·
0개의 댓글
post-thumbnail

Day.32 Sass(SCSS)(2021.09.14)

중괄호가 있고 없고 세미클론 등 세세한 문법적 차이 SCSS 쓰는 것을 추천 Sass의 결과를 CSS로 변환해주는 웹사이트중첩을 벗어나기 위해서는 @at-root상위 선택자 === &중첩된 속성$h : 200px !global; 전역변수로 사용$h : 300px !de

2021년 9월 16일
·
0개의 댓글
post-thumbnail

Day.32 CSS 심화(2021.09.14)

transform 변환 지속 속도를 설정 perspective : 원근감 거리를 정의 rotate : 요소를 회전시킴 transform-origin : x% y% 회전의 중심점을 지정 자식 요소의 원근감 거리를 정의부모요소의 원근감이 적용된 경우 원근감이 적용안되는데

2021년 9월 16일
·
0개의 댓글
post-thumbnail

Day.31 CSS grid(2021.09.13)

블록 그리드와 인라인 그리드로 디스플레이 변환명시적으로 그리드의 행과 열의 갯수와 너비를 정의ex) grid-template-rows : 100px 100px / repeat(2,100px)암시적으로 그리드의 행과 열의 갯수와 너비를 정의(명시적으로 정의한 부분을 벗어

2021년 9월 15일
·
0개의 댓글
post-thumbnail

Day.29브레드크럼 UI(2021.09.09)

브레드크럼의 유래는 헨젤과 그레텔에서 길을 잃지 않기 위해서 가는 길에 빵 부수러기로 표시를 해둔 것에 유래를 한다.노션에 들어있는 브레드 크럼 기능이다. 사용자가 어떤 경로를 통해서 접근했는지를 나타내 준다.브래드크럼 기능이 없어도 사용하는데는 아무 문제가 없다. 하

2021년 9월 11일
·
0개의 댓글
post-thumbnail

Day.28 무한스크롤UI(2021.09.08)

화면에 표시되는지에 대한 감시자 역할을 하는 객체이다.isIntersecting을 이용해서 화면에 보일경우 컨텐츠를 더 불러오는 식으로 할 경우 스크롤 이벤트보다 퍼포먼스가 향상된다.Throttle의 경우 이벤트가 반복적으로 발생할경우 처음 이벤트를 실행시키는 것이고

2021년 9월 8일
·
0개의 댓글