React

개념 > [ 호스팅 ] : 정보의 집약체인 서버의 전체 혹은 일부를 이용할 수 있도록 임대해 주는 서비스    (24시간 안정적으로 전기를 공급 / 빠른 회선 / 보안 시스템 등을 대신 해준다) > 1) 웹 호스팅

FaceBook 개발, Componet에 집중한 JavaScript 프론트엔드 '라이브러리'단순히 보여지는 'View' 만 초점을 둔 라이브러리      \--> View를 제외한 기능(라우터 등)은                      Third-party L

                                            (그림 출처 : https://www.techdiagonal.com/)Facebook에서 만든 react 웹 개발용 Boilerplate ModuleWebpack, Babel 등의

JavaScript의 확장(extend) 문법으로 XML과 매우 유사React 메서드를 위한 문법적 개선JSX는 JS 문법이 아니기 때문에 Babel을 사용하여 일반 JS코드로 변환가독성과 사용성이 좋다. (개발자 경험 개선)JS와 유사하여 배우기가 쉽다.문법 오류와

(본 글은 Velopert님의 https://react.vlpt.us/ 를 정리한 내용입니다.)기존 자바스크립트를 사용해서 동적인 처리를 하기 위해서는 DOM을 직접 건드려야 했다. (이러한 방식은 규모가 커지면 관리하기 힘들어짐)그래서 AngularJS와 같

(본 글은 Velopert님의 https://react.vlpt.us/ 를 정리한 내용입니다.): class형 컴포넌트에서 componentDidMount, componentDidUpdate와 같은    lifeCycle을 hooks에서는 useEffect로

: 순수 CSS로 스타일링 하는 문제점을 개선하기 위한 방법 중 하나로   JS 안에 CSS를 작성하는 여러 라이브러리 중 인기가 가장 많다(자세한 설명 : https://blog.nerdfactory.ai/2019/10/25/react-styled-compo

사용 개념 styled-components를 통한 컴포넌트 스타일링 Context API를 사용한 전역 상태 관리 배열 상태 다루기 결과물 미리 보기 필요 컴포넌트 TodoTemplate TodoHead TodoList TodoItem TodoCreate

사용 개념 > styled-components를 통한 컴포넌트 스타일링 (이전 게시글) Context API를 사용한 전역 상태 관리 (이번 게시글!) Context API >* [ 이전 Stae 관리 ] : 상위 컴포넌트에서 하위 컴포넌트로 State를 전달하기

공통점 : 상태를 전역적으로 관리할 수 있는 도구Redux 의 차이점1) 미들웨어 : 미들웨어를 사용할 수 있어서 리듀서(reducer)에 의해 처리되기 전에 특정 동작 수행 가능2) 유용한 함수와, Hooks : Context API를 쓸 때에는 Context와 Pr

: Store에 여러개 Middleware 등록 가능1) action을 dispatch2) store에 등록된 Middleware 호출3) 미들웨어가 끝나면 Reducer 호출  (두 번째 미들웨어가 있다면 next(action)으로 다음 미들웨어로 action을 넘겨

CORS(Cross-Origin Resource Sharing) > '교차 출처 리소스 공유' 라는 뜻을 가지는 해당 정책은 서로 다른 서버에 request를 할 때 보안상의 이유로 교차 출처 HTTP 요청을 제한하는 것이다 > 현재 개발하는 단계에서 볼 때 reac

: github의 api를 이용해서 정보를 가져오는 Finder 만들기react의 다양한 미들웨어를 사용해보기 !1) redux2) redux-saga3) redux-actions등등프로젝트 구조화 해보기 !/src    \-components : 컴포넌트    \-

1) /modules/input.js 작성    : input 리듀서를 만들고 그 안에 username이라는 state 생성2) rootReducer에 추가3) InputContainer.js 에서 사용    : input 리듀서에 포함된 username이라는 stat

React를 이용해서 Tublbug Page를 제작할 계획1단계 ) Navigation + Image Slider - 오늘 구현2단계 ) Grid 퍼블리싱이 목적이기 때문에 틀만 제작구조는 아래와 같다(Navbar.js): 내비게이션을 왼쪽메뉴 / 로고 / 오른쪽메뉴

tublbug Page (2) > React를 이용해서 Tublbug Page를 제작할 계획 1단계 ) Navigation + Image Slider 2단계 ) Grid + 반응형 - 오늘 구현 Grid + 반응형(media query) > [ 결과물 ] > [

: SOPT동아리에서 진행되는 1박2일 해커톤약 90명의 참가자기획 / 디자인 / Android / IOS / WEB / Server 6개 파트가 참여총 12개의 팀이 구성됨본인은 WEB파트로 10조로 참여밈 짤을 통해 사용자의 밈 중독을 테스트하는 재밌는 아이디어La

: 모든 질문 페이지는 동등한 구조( 싸이월드 이미지 / Text2개 / Image1개 / Button4개 )질문의 idx마다 배경 이미지가 바뀌어야 한다 App.js에 배열 State를 생성한 뒤 사용자가 입력할 때마다 해당 배열에 값을 넣어준다마지막 질문을 대답하

: SOPT 27th WEB 파트의 파트원 소개 페이지를 만들어 보기1) / , /members, /members/:id 페이지 라우팅 설정2) Grid를 이용한 Card배치3) 데이터 로딩중 설정4) 게시글 CRUD(Create / Read / Update / Del

1) / , /members, /members/:id 페이지 라우팅 설정2) Grid를 이용한 Card배치3) 데이터 로딩중 설정4) 게시글 CRUD(Create / Read / Update / Delete): 내용이 비어있는 Card를 추가하는 기능(MemberLis

: 사용자가 파일을 선택했을 때, 선택된 이미지를 미리보는 기능을 구현(Create.js - 전체 코드)1) type이 file인 input 태그 / img태그 이렇게 두가지 태그가 필요2) img태그의 src에 사용하는 imgSrc라는 State 생성3) input태

refs :https://velog.io/@juno7803/Recoil-Recoil-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0React와 MVC 패턴초기에는 MVC 디자인 패턴을 통해 주로 개발이 이루어졌다React에서 MVC의