모카 스터디/React 썸네일형 리스트형 만들고 비교하며 만드는 리액트 [인프런] https://jeonghwan-kim.github.io/series/2021/04/05/lecture-react-ready.html#%EC%88%9C%EC%88%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-1 [리액트 1부] 만들면서 학습하는 리액트: 준비편 … jeonghwan-kim.github.io 인프런의 김정환님의 만들고 비교하며 만드는 리액트 강의 자료를 이미 블로그로 잘 정리해 두어서 저 링크를 보고 참조하자.! 더보기 한입 크기로 잘라 먹는 리액트 -일기장 프로젝트 pages- [인프런] 페이지 라우팅 0 - React SPA & CSR ==> 어떠한 요청에 따라 어떠한 파일을 보내줄지 정하는것. 웹서버들이 처리를 한다. 하지만 리액트는 멀티페이지 어플리케이션이 아닌 싱글페이지 어플리케이션(SPA)이다. 리액트로 제작된 웹사이틀르 요청하게 되면 어떤 요청이던 index.html 을 보내주고 React APP을 통쨰로 던져준다. 다른 페이지로 이동하고 싶어 클릭을 했을 시 서버에게 다른 페이지를 달라는게 아니라 react app이 페이지를 업데이트 시킨다. 그래서 서버와의 통신을 안해서 페이지 전환 시간이 엄청 빨라지게 된다. 데이터가 필요한 경우에는 서버에서 데이터만 빠르게 가져온다. 이렇게 클라이언트 측에서 알아서 렌더링하는것을 CSR (Client SIde Rendering)이라고 한.. 더보기 한입 크기로 잘라 먹는 리액트 -일기장 프로젝트 one page-[인프런] React에서 사용자 입력 처리하기 DiaryEditor 컴포 넌트 만들기 className과 컴포넌트 이름을 동일하게 해서 css스타일링할 떄 직관적으로 한다. 사용자의 입력을 처리하기 위해서는 state를 사용해야한다. ==> uesState를 사용한다. onChange 사용 onClick 사용 스프레드 연산자 사용 공통된 State묶기 React에서 DOM 조작하기 - useRef 특정 길이 이상이 들어왔는지 확인 마우스 커서를 누르면 테두리가 진한 검정으로 바뀌나 커서가 깜박거린다. UseRef 사용 MutableRefObject는 hmtl 즉, DOM 요소를 접근 할 수 있게 한다. 레퍼런스객체(useRef)는 current 현재 가리키는 값을 가르켜 fouce 기능을 준다. React에서 배.. 더보기 한입 크기로 잘라 먹는 리액트 -Node.js 및 React.js 기초 - [인프런] Nods.js 기초 리액트가 자바스크립트의 라이브러리이기 때문이다. 자바스크립트가 어디에서 어떻게 동작하나 ? 우리는 브라우저에 내장된 자바스크립트 엔진을 사용해야 하기 때문에 자바스크립트는 원래 웹브라우저에서만 실행 될 수 있었다. 그리고 그 브라우저는 html 문서를 기반으로 동작을 하니 , 자바스크립트는 html 안에서 실행이 되는것이다. 즉, 이런 너무 좋은 언어를 브라우저 안에서만 사용하긴 아깝다 !! ==> 다른곳에서 사용해 보입시더~ V8엔진을 브라우저에서 똑 떼서 아무곳에서나 실행 시켜보자 !! ==> Node.js 즉 자바 스크립트가 가진 태생의 한계를 극복하고 다른 개발에도 사용이 가능 ! url은 웹서버의 주소 ! 웹서버는 도메인 주소를 받아 알맞은 웹파일을 던져준다 ! 리액트는 복잡.. 더보기 리액트 [생활코딩] 코스소개 위의 코드보다 훨씬 복잡한 코드의 경우 로직이 복잡해 지면 드는 생각이 태그를 간단하게 비슷한 부류끼리 묶는 다는 생각이 든다. 그리고 그걸 바로 리액트가 가능하게 해준다. 바로 아래와 같이 말이다. 리액트의 주요 기능은 사용자 정의 태그를 만드는 것이다. 사용자 정의 태그는 부품으로 사용된다. 리액트는 크게 클래스 방식과 함수 방식이 나눠지는데 최근은 함수 방식으로 주로 하기 때문에 함수 방식으로 공부를 해보자. 소스 코드 수정 방법 처음 리액트가 가동되면 index.js 파일을 찾고 거기서 부터 시작한다. app 태그는 ./App이라는 파일에서 부터 왔다. 왼쪽 코드가 오른쪽 페이지를 나타내고 있다. 또한 app.css에 관련 css문법이 적혀 있으면서 적용이 된다. index.js에서 랜더.. 더보기 Redux [생활코딩] 자바 스크립트 어플을 위한 예측 가능하게 하는 도구 ! 단 하나의 state(객체)를 가진다 ! 데이터를 수정할 때 함부로 못하고 특정한 함수를 통해서 데이터를 수정할 수 있다. 원본을 바로 수정하는게 아닌 복제복을 수정한뒤 그것을 원본으로 바꾸는 과정을 통해 undo와 redo가 쉽고 효율적이다. 현재의 상태와 과저의 상태까지 확인을 할 수 있어 디버깅을 쉽게 할 수 있다. Redux의 여행 지도 state라는 실제 정보에는 직접 수정할 수 없고 recduer(직접 코드작성)를 사용해야한다. render는 UI를 만들어주는 내가 짠 코드이다. dispactch, subscribe, getSate와 같은 은행에서의 직원과 같은 걸 거쳐야 reducer를 사용해 state를 수정할 수 있다. render.. 더보기 GraphQL로 영화 API 만들기 #1 [2022 UPDATE] INTRODUCTION #1.0 Welcome (01:20) 이번 수업에서는, GraphQL이 뭔지 배워볼거야. GraphQL이 왜 이렇게 멋진지 알아볼거고, GraphQL이 어떻게 동작하는지 알아볼거야. 그리고 우리는 GraphQL api를 어떻게 직접 만들 수 있는지 알아볼거야. 그리고 우리는 GraphQL의 어떤점이 특별한지를 이해해볼거야. 예를 들면, 깃헙 같은 기업들은 그들의 api를 만드는데 rest보다 GraphQL을 왜 선택했는지. 이 수업이 끝날 때 쯤엔, 우리는 GraphQL위에 구축된 혁신을 보게 될 거야. 우리는 예를들면 PostGraphile 같은 것들을 보게 될거야. 이건 아주아주 멋진 아이야. 얘는 GraphQL api를 얻을 수 있어. postg.. 더보기 GraphQL로 영화 웹 앱 만들기+React #1 [2022 UPDATE] INTRODUCTION #0.0 Welcome 안녕 모두들, 노마드의 graphql react 시작하기 수업에 온걸 환영해! 우리는 reactjs, graphql에서 어떻게 apollo client를 사용하는지 배울거야. apollo client는, 상태관리 라이브러리야. graphql api에서 데이터를 fetch해오는 것을 가능하게 해주고, 어플리케이션에서 로컬로 상태를 관리할 수 있게도 해주지. 같은 라이브러리로 우리는 두 가지 일을 할 수 있어. 서버에 있는 데이터를 가지고 오는 것과, 로컬에 있는 데이터를 관리하는 것. apollo client로 할 수 있는 가장 좋은 점은, 이 두 종류의 데이터를 동기화할 수 있어. 너가 로컬에 있는 상태를 관리하는데에 라이브러리.. 더보기 이전 1 2 3 4 5 다음
