profile
두려움을 이겨내는, 호기심을 잃지 않는 개발자 되기

JSX 이해하기

컴파일 후jsx는 React.createElement를 호출하는 컴파일 되어서 import React from 'react';를 작성해야 합니다.import React from 'react';import CustomButton from './CustomButton';f

1일 전
·
0개의 댓글

다른 라이브러리와 통합하기

DOM 조작 플러그인과 통합하기 리액트는 DOM에서 일어나는 변화를 인식하지 못하므로, 리액트 컴포넌트가 업데이트 되지 않게 막아야 한다. 업데이트할 필요가 없는 `` 같은 요소를 렌더링 하자. jquery 플러그인은 DOM에 이벤트리스너를 등록하므로 componentWillUnmount메소드 내에서 리스너를 해제 해주어야 한다. 웬만하면 jquery...

1일 전
·
0개의 댓글

고차 컴포넌트

고차 컴포넌트는 컴포넌트를 매개변수로 받고 새 컴포넌트를 반환하는 함수이다 Redux의 connect와 Relay의 createFragmentContainer와 같은 서드 파티 React 라이브러리에서 흔하게 볼 수 있는 패턴이다. 횡단 관심사 (Cross-Cutt

7일 전
·
0개의 댓글

카카오 지도 api 리액트에 적용

카카오 map api 적용 순서 키발급 , javascript 키 개발환경의 로컬 주소를 카카오 api 페이지내의 플랫폼 => web 플랫폼 => 사이트 도메인에 등록 kakao 객체를 window 객체의 interface로 추가 주의사항 카카오 지도가 그려질 요소는 반드시 id가 map인 요소이어야 한다. script가 실행코드 보다 먼저 선언...

2022년 6월 21일
·
0개의 댓글

Fragments

Fragments를 사용하면 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다 동기 tr 요소의 자식으로 td요소들이 있어야 하는데, div로 감싸면 유효한 구조가 아니다. 따라서, div 요소 대신 fragments를 사용하자 key가 있는 F

2022년 6월 20일
·
0개의 댓글

Ref 전달하기

Ref 전달은, 특히 재사용 가능한 컴포넌트 라이브러리와 같은 어떤 컴포넌트에서는 유용할 수 있습니다. DOM 에 refs 전달하기 아래와 같이 FancyButton를 사용하는 상위 컴포넌트들은 button DOM 노드에 대한 참조를 가져올 수 있고 접근할 수 있습니다. Ref 전달은 DOM 컴포넌트에만 한정적이지 않습니다. 클래스 컴포넌트 인스턴스에...

2022년 6월 20일
·
0개의 댓글

에러 경계

Error boundaries Suspense를 미리 정의한 MyErrorBoundary 컴포넌트로 감싸면 lazy 컴포넌트에서 네트워크 장애가 발생 했을시 에러를 처리할 수 있다 특징 Error boundaries로 감싼 컴포넌트들의 에러만을 캐치한다 클래스 컴포넌트만이 에러 경계가 될 수 있다 try catch 구문과 비슷하지만, 컴포넌트에만...

2022년 6월 20일
·
0개의 댓글

접근성

WCAG Web Content Accessibility Guidelines => 접근성을 갖춘 웹사이트를 만드는데 필요한 지침 https://www.wuhcag.com/wcag-checklist/

2022년 6월 19일
·
0개의 댓글
post-thumbnail

코드분할

코드분할 왜 해야 하는가? 번들링은 필수이나 앱이 커지면 번들도 커지기 마련입니다. 특히, 용량이 큰 서드파티 라이브러리는 로드시간을 길게 만드는 주범이니 주의합시다. 아이러니하게도, 번들이 거대해질수록 번들을 나누어야 합니다. 이럴꺼면 왜 번들링한건데 ㅡ.ㅡ

2022년 6월 18일
·
0개의 댓글

6월 3주차

자바스크립트 알고리즘 스터디: 진행중과제 스터디: 진행중제로베이스 js인강 스터디: 진행중리액트 공식문서 정리 스터디: 진행중nextjs 블로그 만들기 스터지: 진행중강사님 vue 강의 코드 복습노마드코더 캐럿마켓, 타입스크립트 챌린지 대비 강의 수강중

2022년 6월 17일
·
0개의 댓글
post-thumbnail

탐색 알고리즘

Divide: 리스트를 두개의 서브 리스트로 나눈다.Conquer검색할 숫자(search) > 중간값이면, 뒷부분의 서브 리스트 에서 검색할 숫자를찾는다.검색할 숫자(search) < 중간값이면, 앞부분의 서브 리스트 에서 검색할 숫자를찾는다.재귀함수로 이진 탐색

2022년 6월 17일
·
0개의 댓글
post-thumbnail

Context

전역적인 상태관리가 필요할 때예를 들어 로그인한 유저 정보, 테마, language 등이 있다

2022년 6월 15일
·
0개의 댓글

6월 2주차 TIL

파이썬 알고리즘 스터디: 진행중자바스크립트 알고리즘 스터디: 진행중과제 스터디: 진행중제로베이스 js인강 스터디: 진행중강사님 vue 강의 코드 복습노마드코더 캐럿마켓, 타입스크립트 챌린지 대비 강의 수강중 todo 과제 바닐라로 제출

2022년 6월 12일
·
0개의 댓글

블로그 구상

다크모드검색기능카테고리별 컬러 설정, 예를들어 react 카테고리면 파란색이 primary color가 되고 마크다운의 강조 태그 및 레이아웃 디자인도 파란색이 된다. 좌측 내비메뉴반응형인강에서 배운 nextjs, tailwindcss 활용해보자ssg 개념을 확실히 익

2022년 6월 12일
·
0개의 댓글

노마드코더 타입스크립트 정리

Typescript 특징 에러가 발생할 코드를 감지하면, js로 컴파일 하지 않는다 컴파일 상에서 타입 에러를 미리 잡기 위한 목적이 크다 Type Implicit && Explicit aliases type 키워드로 선언하는 타입 optional ? 키워드로 선언하며 해당 타입이 undefined가 될수도 있다는 의미를 가진다 readonl...

2022년 6월 12일
·
0개의 댓글

6월 1주차 TIL

알고리즘 velog 정리 투포인터 알고리즘 슬라이딩 윈도우 스터디 파이썬 알고리즘 스터디: 진행중 자바스크립트 알고리즘 스터디: 진행중 과제 스터디: 진행중 제로베이스 js인강 스터디: 진행중 개인공부 강사님 vue 강의 코드 복습 30개 프로젝트로 배우는 프론트엔드 with React 5,6,7강 진행 노마드코더 캐럿마켓, 타입스크립트...

2022년 6월 3일
·
0개의 댓글

해시

해시는 Map으로 구현하자 해시는 보통 (key, value) 형태로 구성되며, js에서는 Object나 Map으로 구현합니다. Map은 Object를 사용하는 것에 비해 여러가지 장점이 있습니다. key값의 다양한 type Object의 key값은 string 이나 symbol 밖에 허용이 안됨. Map의 key값으로는 모든 type이 가능하다. ...

2022년 6월 3일
·
0개의 댓글

useStrict mode

https://m.blog.naver.com/on21life/221654555798

2022년 6월 3일
·
0개의 댓글

잡지식

객체를 const로 선언하는 이유 간단하다. const로 선언한 객체에 값을 재할당을 방지 하기 위함이다.

2022년 5월 31일
·
0개의 댓글

슬라이딩 윈도우

설명 >[1, 2, 3, 4, 5, 6, 7] 배열에서 세가지 수의 합이 가장 큰 수를 구하라 해당 알고리즘의 원리가 윈도우를 옆으로 쭉쭉 밀어나가면서 답을 구하는 느낌(?)이라서 슬라이딩 윈도우인 것 같다. 이 때, 주목할 점은 윈도우(선택된 배열)이 한칸씩 이동할 때마다, 윈도우의 맨 앞의 요소는 빼주고, 윈도우의 맨 뒤의 요소는 더해준다는 것이다....

2022년 5월 31일
·
0개의 댓글