profile
without halt.

TIL56 l React - State 변환 (배열→오브젝트) +Computed property

About state가 배열이면, 배열 중 한 요소의 상태만 업데이트 하고 싶을 경우, 배열 안을 처음부터 끝까지 돌다가 동일한 id를 가진 상태를 업데이트 해야 한다. 그러나 이 방법은 배열의 길이가 길어질수록, map으로 배열 전체를 도는 속도가 늘어나게 된다.

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

TIL55 l React - form과 input 정리

form과 input form 안에 여러가지 요소가 들어있을 땐 name 속성을 부여해 각각을 구분할 수 있도록 한다. 이는 event.target.name으로 조회 가능하다. value 속성을 통해 값을 부여한 경우, 타이핑을 해도 업데이트 되지 않으므로 onCha

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

TIL54 l Firebase - Realtime Databse를 이용해 DB 구현하기 (Feat. React.js)

이번에는 Firebase로 실시간 데이터베이스를 구축해보겠습니다. (지난 게시물과 이어집니다.) 1. 데이터베이스 생성 먼저 데이터베이스를 테스트 모드로 빠르게 생성해준다. 저번에 만들어 준 firebase.js에 database를 연결한다. 📍 firebase

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

TIL53 l Firebase - Authentication을 이용해 손쉽게 로그인 기능 구현하기 (Feat. React.js)

설치 확인은 package.json에서 가능firebase>콘솔>프로젝트 생성>프로젝트>프로젝트 설정>하단의 Firebase SDK snippet에서 세번째 script 태그 안의 내용을 복사하기src폴더에 service폴더 생성후 이 안에서 비지니스 로직에 관련된 파

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

TIL52 l 리액트에서 미디어 쿼리 사용하기- window.matchMedia( )

matchMedia()는 자바스크립트에서 CSS 미디어쿼리처럼 작동하는 것으로, 아래와 같이 사용할 수 있다. (mql은 임의로 정한 것-mediaQueryList의 약자)mediaQueryString 부분에는 아래처럼 CSS 미디어 쿼리 문법이 들어간다. 위의 mql

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

TIL51 l 리액트 라우터(React Router) - URL Parameters, Query Parameters (+URLSearchParams)

1. URL Parameters (Feat. useParams) 간혹 우리는 localhost:3000/topics에서 토픽 전체에 대한 정보가 아니라, switch라는 특정 주제만 보여주고 싶은 경우가 있다. 그럴 때에는 localhost:3000/topics/sw

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

TIL50 l 리액트 라우터(React Router) - NavLink, Route, Hooks(useHistory, useLocation, useParams, useRouteMatch)

localhost:3000/user에서 유저 전체에 대한 정보가 아니라, merry라는 특정 유저의 세부 정보만 보여주고 싶을 경우, localhost:3000/user/merry 이런식으로, user라는 URL 뒤에 id를 넣어주면 된다. 이를 파라미터라고 하는데 흔

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

TIL49 l 리액트 라우터(React Router) - BrowserRouter, HashRouter, Route, Switch, Link (Feat. SPA)

리액트는 싱글 페이지 어플리케이션을 쉽게 만들 수 있도록 하는 라이브러리이다. 싱글페이지에는 아래와 같은 문제점이 있는데,각 페이지를 북마크 할 수 없음브라우저상에서 뒤로 가기, 앞으로 가기와 같은 내비게이션 사용 불가이를 보완하기 위해서는 화면들에 따라 주소를 각각

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

TIL48 l 싱글 페이지 애플리케이션(Single Page Application, SPA) 개념

싱글 페이지 애플리케이션은 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.SPA에서 HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나,

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

TIL47 l React - 환경변수 설정하기(유튜브 API 키 숨기기)

가장 상위 root에 .env파일을 생성한다.다음과 같이 숨길 데이터를 .env 파일 안에 저장한다.❗❗ 꼭 REACT_APP\_이라는 접두어를 붙여서 작성하고, 마지막에 ;는 쓰지 않는다.gitignore에서 .env를 추가해준다.환경변수를 쓸 때는 다음과 같이 pr

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

TIL46 l React - Netlify 배포하기(+배포 이후에 사이트 이름 변경하는 방법)

cmder에서 cd 경로 를 통해 작업중인 프로젝트 폴더로 들어간다. git add *, git commit -m "커밋 메시지"로 모든 커밋을 마친다. yarn build로 build 폴더를 생성한다. npm을 이용해서 Netlify 파일을 글로벌적으로 설치한다

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

TIL45 l React - 리액트 훅과 구조분해 할당

클래스 컴포넌트는 멤버변수가 클래스 생성 시 한번만 만들어지고, state나 props가 변경되야 render 함수가 호출되는 반면에, 함수 컴포넌트는 컴포넌트 내 코드블럭 전체가 계속 반복적으로 호출된다. 로컬변수, 콜백함수 등 매번 새로 생성하고 새로운 참조값을 전

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

TIL44 l React - Ref와 DOM

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 수 없으므로, 이번 포스팅에서는 클래스 컴포넌트만 다루겠다!포커스, 텍스트 선택영역,

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

TIL43 l React - 이벤트 다루기

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서의 방식과 유사하지만, 아래와 같은 차이점이 있다.React의 이벤트는 소문자 대신 캐멀 케이스(camelCase) 를 사용JSX를 사용해 문자열이 아닌 함수 로 이벤트 핸들러를 전달📍 예시🔍 HTM

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

TIL42 l React - List와 Key

key는 리스트(<li></li>) 요소를 만들 때 포함해야 하는 특수한 문자열 속성 으로, 요소에 안정적인 고유성을 부여하기 위해 배열 내부 요소에 지정 해야 한다. 이는 React가 어떤 항목을 변경, 추가, 삭제할 건지 식별하는 것을 돕는다. 📍 예시

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

TIL 41 l React - LifeCycle(생명주기) Methods

모든 컴포넌트는 생명주기 메서드를 가진다. 다음은 그 중 가장 자주 사용되어지는 메서드이다. componentDidMount() componentDidUpdate()componentWillUnmount()render()constructor()❗ 주의아래 함수들은 이제

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

TIL40 l React - Pure Component와 memo

리엑트에서는 state나 관련된 props가 변경되면 전체가 업데이트(render)된다.하지만 다음과 같은 문제점을 가지므로,동일한 props와 state에도 같은 결과를 불필요하게 렌더링 한다.→ 리엑트는 VDOM(Virtual DOM)을 써서 지금 업데이트 될 것과

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

TIL39 l React - State와 setState (+Spread Syntax)

리액트 동작 원리 데이터(State)가 변경이 되면 → 리액트가  render() 함수를 호출해서 UI가 업데이트 된다 리액트의 내부 처리 상황 setState 함수가 호출이 되면 리액트는 현재 컴포넌트가 가지고 있는 상태와 (this.state), 업데이트 해야

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

TIL38 l React - Component와 props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있고, 개념적으로 JavaScript 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React Element를 반환한다. 이는 함수 컴포넌트와 클

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

TIL37 l React - JSX

다음과 같은 것을 JSX라고 하며 JavaScript를 확장한 문법이다.이는 JavaScript의 모든 기능을 포함하고 있으며, React Element를 생성할 수 있다. React에서의 JSX 사용은 필수가 아니지만, 대부분 JavaScript 코드 안에서 UI 관

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