name https://images.velog.io/tags/React.png

# React

리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

2449개의 포스트
post-thumbnail

React Twitter Clone (15) - 수정과 삭제 - 1

우리는 이제 실시간으로 쓰고 지울 수 있지만 우리가 원할 때만 실시간으로 사용할 수는 없을까요.예를 들어 인스타그램 피드를 누군가가 추가시키고, 지우고, 수정한 댓글들을 실시간으로 보고 싶지 않을 수도 있습니다.이전 포스트까지 한 내용은 채팅에서는 매우 유용할겁니다.

약 8시간 전
·
0개의 댓글

React-native 질문입니다.

안녕하세요.저는 React 웹개발자인데, 이번에 회사에서 어플도 슬슬 준비하자고 해서react-native를 공부 해 볼 생각입니다.일단 저는 어플 개발 경험은 전혀 없습니다.React를 일단 알기 때문에 고민안하고 어플 개발은 react-native로 할려구 하는데

약 12시간 전
·
0개의 댓글
post-thumbnail

styled-component로 다크 모드 구현하기

styled-component를 활용하여 다크 모드를 구현해 보자

어제
·
0개의 댓글
post-thumbnail

React, DRF API를 이용한 velog 따라 만들어보기 5장

5장을 시작하기 앞서, 교육과정 중 jsp와 Spring에 대해서 조금 배울예정이기에 결과물을 올리는 텀이 좀 많이 길어질 듯 하다.그래서 지금껏 만든 결과물까지 일단 올리고, 시간을 가진뒤에 리팩토링과 나머지 기능구현을 추가해보도록 하겠다 !ps. 사실 댓글(댓글은

어제
·
0개의 댓글

JSX

2장 JSX

어제
·
0개의 댓글
post-thumbnail

TIL - 2020.09.21

오늘 급하게 작성한다 ㅠㅠ리액트 프로젝트 수정오늘은 슬라이더에 화살표를 추가했다. 처음에 원하는대로 안 되다가 검색한 결과 성공했다!저 부분을 해결한다고 많이 진행을 못 했다,,,! 얼른 정신 차리고 해야겠다.

어제
·
0개의 댓글
post-thumbnail

React Twitter Clone (13) - 트윗 받기

이제 작성한 트윗들을 어떻게 가져올 것인지를 생각해야 합니다.Home.js에 state를 하나 만들어 줍니다. 그리고 기본값은 비어있는 array로 합니다.그리고 useEffect를 사용하여 컴포넌트가 mount될 때 dbService를 가져옵니다. 그리고 collec

1일 전
·
0개의 댓글
post-thumbnail

React Twitter Clone (12) - Twitting

위의 Cloud FireStore의 database는 NoSQL database입니다.SQL 데이터베이스에는 많은 규칙과 관습들이 있습니다.다만 몇가지 제한사항이 존재합니다.NoSQL database의 한 가지 특징은 Collection을 가지고 있습니다.Collect

1일 전
·
0개의 댓글
post-thumbnail

[TIL]React의 핵심 개념 - props, state, life cycle, functional component VS class component

React의 핵심 개념인 props, state, life cycle 그리고 functional component와 class component에 대해 공부합니다.

1일 전
·
0개의 댓글

GraphQL Apollo

mern stack을 이용해 간단한 쇼핑몰을 제작해보면서 웹 제작의 전체적인 흐름을 이해하게 되었다. 원래는 frontend를 목표로 공부를 했지만 기능적인 부분을 만드는 것이 더 재미있고 UI요소를 개발하기 위해 많은 시간과 코드를 할애하는 것이 답답하게 느껴지는 것

2일 전
·
0개의 댓글
post-thumbnail

React 입문 第七番目 : JSX Children

지금까지는 children(자식) 을 가지고 있지 않은div, span과 같은 JSX요소들로만 작업했지만 이번엔 자식을 가지고 있는 요소로 해보겠습니다. 위의 코드처럼, React.createElement를 쓰게되면, 3번째 인자를 chidlren(자식)이라고 인식하게

2일 전
·
0개의 댓글
post-thumbnail

TIL - 2020.09.20

어쩌다보니 너무,,, 늦게 작성하는 TIL이다.리액트 프로젝트 수정슬라이더에 progress bar처럼 구현을 해야했는데 잘 안되서 검색을 해서 구현을 성공했다,,,!크롬이랑 파이어폭스에 지원하지 않는 속성이 있어서 overflow: hidden과 input의 rang

2일 전
·
0개의 댓글
post-thumbnail

객체지향 프로그래밍이 뭐가 문제인가요?

잘 쓰고 있는 객체지향형을 왜 함수형으로 바꿔야하나요? 객체지향에 문제라도 있나요?

2일 전
·
0개의 댓글
post-thumbnail

Webpack과 React, 그리고 Code Splitting

알고보면 쉬운 코드 스플리팅

2일 전
·
1개의 댓글
post-thumbnail

React Twitter Clone (11) - 양식 및 데이터베이스 설정

이제 폼을 만들어 보겠습니다. Home.js에 코드를 작성합니다.게시글 작성에 필요한 함수들도 미리 정의해둡니다.

2일 전
·
0개의 댓글
post-thumbnail

TIL. navigation, stack - 9/21

지금까지 저는 웹사이트에서 routes를 통해 컴포넌트들을 스위치 시키며 화면이 이동되는 것처럼 보이게 했습니다.그렇다면 앱에서는 어떻게 이런 기능을 만들 수 있을 까요?바로 navigation을 통해서 가능합니다.먼저 navigation/native를 install

2일 전
·
0개의 댓글
post-thumbnail

TIL. react-native? -9/21

리액트의 접근방법을 모바일로 확장한 Facebook의 오픈소스 프로젝트입니다.javascript로 코딩한 React의 컴포넌트는 React Native 플랫폼을 거쳐 IOS, Android Native 코드로 각각 변환됩니다.개발환경을 만들어 봅시다.Expo CLIRe

2일 전
·
0개의 댓글
post-thumbnail

React) 아토믹 디자인 패턴

레이아아웃의 요소들을 개별의 컴포넌트로 나누고, 조합하며 디자인해가는 과정이다.UI 재사용의 효율을 높인다.Atoms: 하나의 구성 요소. (ex. input, button 창 하나씩)Molecules: Atoms가 두개 이상 조합되었을 때, (ex. input 과 b

2일 전
·
0개의 댓글