profile
호잇호잇
post-thumbnail

Browser

DOMdocument object modelBOMbrowser object model

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

Redux

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.리덕스 공식 사이트에서는 위와 같이 리덕스를 정의 하고 있습니다. 자바스크립트 앱을 위한 이라는 것을 보면 리액트만을 위한 라이브러리는 아닌것을 알 수 있습니다.action에 반응하여 상태를 변경하기

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

useMemo

useMemo는 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 함수에 입니다.memo를 사용하여 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정해 줄 수 있습니다.Memo 는 "memoiz

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

Ant Design

ant design은 컴포넌트를 가져다 쓸 수 있는 ui tool 입니다.과거 BootStrap으로 대변되던 프론트 엔드 ui tool이 최근 몇년 사이에는 다양하게 등장하여 선택지가 굉장히 많아 졌습니다. 그중에 Ant Design은 리액트에 친화적으로 개발되어 있

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

fowardRef

다른 컴포넌트에 ref prop을 넘겨 그 내부에 있는 HTML 엘리먼트에 접근을 하게 해주는 함수 입니다.위의 코드를 보면 useRef를 App 컴포넌트에서 Input컴포넌트로 ref를 props를 넘겨줘 ref를 사용할 수 있을것 처럼 보이지만 실행해보면 다음과 같

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

useState VS useRef

둘 다 렌더 주기 및 UI 업데이트 동안 데이터를 보존하지만 업데이트 기능이 있는 useState Hook만 재렌더링을 유발합니다. useRef는 실제 값을 보유하는 현재 속성이 있는 객체를 반환합니다. 대조적으로 useState는 두 개의 요소가 있는 배열을 반환합

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

Base64

인코딩(encoding)은 파일에 저장된 정보의 형태나 형식을 데이터 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태로 변환하는 처리 혹은 그 처리 방식을 말합니다. 이메일 등의 전송, 동영상이나 이미지 영역에서 많이 사용되며, 반대말은 디코딩

2021년 8월 22일
·
1개의 댓글
·

구조분해 할당 - 함수

구조분해 할당 위의 코드 같이 변수를 구조분해 하여 사용한다. 그리고! 변수 뿐만 아니라 함수에도 사용 할 수 있다!!🥳🥳 inputBox를 map으로 돌면서 element를 통해 속성값을 참조하지 않고 변수를 구조 분해 할 때 처럼 바로 element의 속성값

2021년 8월 16일
·
1개의 댓글
·

이진탐색(Binary Search)

이진탐색(Binary Search) 찾아야할 값보다 크면 왼쪽의 중간에서 다시 비교합니다. 다시

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

치킨푸드 프로젝트 - 2(스킨푸드 클론)

치킨푸드 메인페이지프로젝트가 잘 풀렸었던 1주 차가 끝나고 2주 차가 시작되었다.혹시나 이번 주차부터는 이슈가 많이 생겨 힘든 상황이 나타날 수도 있나라고 생각도 해봤지만 아무래도 그냥 쓸데없는 걱정이었나 보다 1주 차 때처럼 아무 문제 없이 우리의 프로젝트는 잘 진행

2021년 8월 15일
·
2개의 댓글
·
post-thumbnail

Hook - useState

useState는 state를 함수 컴포넌트 안에서 사용할 수 있게 해줍니다.useState는 값의 상태를 관리를 합ㄴ디ㅏ..초기값을 통해서 특정 값을 정의해주는 함수를 만들어 줄 수 있습니다.useState는 위와 같이 선언 하고 사용 합니다.파라미터는 각각 gett

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

React Hook - 1

1차 프로젝트가 끝나고 바로 2차프로젝트를 시작하게 되는데 이때 부터는 Hook을 사용 할 수있다.이번 포스팅에서는 16.8버전 부터 적용된 Hook에 대해 포스팅 하려고 합니다.리액트의 공식문서에는 Hook에 대해 다음과 같이 설명 하고 있습니다.컴포넌트 사이에서 상

2021년 8월 14일
·
2개의 댓글
·
post-thumbnail

치킨푸드 프로젝트 - 1(스킨푸드 클론)

위코드에서의 1차 프로젝트가 시작되었다. 그전에도 팀프로젝트는 있었지만 같은 기능을 구현하면서 코드 리뷰를 하고 각자의 생각을 공유하는 정도 였다.이번 프로젝트는 프론트엔드와 백엔드가 한팀이 되어 기존의 존재하는 커머스 사이트중 하나를 클론 해보는 것이다.우리팀은 스킨

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

React 동적 라우팅

SPA웹은 라우팅이 필수 적입니다 리액트의 경우 Facebook에서 라우팅에 대한 공식 라이브러리를 제공하지 않기 때문에 서드파티 라이브러리인react-route-dom을 사용하여 라우팅을 합니다.리액트 역시 처음에는 정적 라우팅을 사용했지만 정적 라우팅의 제한적인

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

React ShouldComponentUpdate

React가 렌더링이 되는 과정은 다른 포스팅에서도 했지만 다시 한번 체크 하고 가도록 하겠습니다.React 컴포넌트가 렌더링이 되는 시점은 다음과 같습니다.1\. Props가 변경되었을 때2\. State가 변경되었을 때3\. 부모 컴포넌트가 렌더링되었을 때위의 과정

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

React Design Pattern 1

디자인 패턴이란 기존 환경 내에서 반복적으로 일어나는 문제들을 어떻게 풀어나갈 것인가에 대한 일종의 솔루션이다. 디자인 패턴 계의 교과서로 불리는 \[GoF의 디자인패턴]에서는 객체지향적 디자인 패턴의 카테고리를 "생성 패턴(Creational Pattern)", "구

2021년 8월 1일
·
1개의 댓글
·

React immutable

리액트의 state는 immutability(불변성)한 값이다. 양방향 바인딩이 아니기 때문에 this.state.[value] = _value로 state값을 변경하면 렌더링이 되지 않는다. 때문에 setState를 할 때에도 직접 this.state.[value]값

2021년 7월 29일
·
2개의 댓글
·

React 디버깅

React 디버깅 리액트의 props와 state를 사용하면서 데이터 처리를 하는데 헷갈려서 console.log를 굉장히 많이 찍게 되었는데 이 작업이 너무너무 귀찮다..... 그래서 조금이라도 더 쉬운 방법을 찾다가 리액트 디버깅하는 방법을 찾았다. Visual

2021년 7월 27일
·
1개의 댓글
·
post-thumbnail

React 리스트 렌더링시 key값이 필요한 이유

리액트 뿐만 아니라 모든 개발에서는 배열이나 리스트를 순회하며 데이터 처리를 하는 경우가 매우 빈번하다.위의 코드와 같이 Content 컴포넌트를 map을 사용하여 배열의 길이만큼 li 태그를 생성 해줄때 키값을 주지 않고 실행을 시키면 다음과 같은 문구를 보게 된다.

2021년 7월 26일
·
0개의 댓글
·

React Westagram Clone-2

로그인 페이지를 구현한 후 메인페이지의 댓글 기능을 구현 했다.댓글 컴포넌트를 만들어서 메인페이지에서 불러 오게했다.댓글 컴포넌트는 댓글의 정보를 메인페이지로 부터 props로 받게했다. 유저이름과 댓글 내용을 받는다.state에 유저이름과, 댓글들은 배열로 저장을 하

2021년 7월 25일
·
0개의 댓글
·