reactjs React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest React 웹앱 구현하기 (생활코딩) 이는 로컬 컴퓨터에서 공간을 낭비하지 않고, 가장 최신의 프로그램을 사용할 수 있다는 장점이 있다. 맨 처음에 create-react-app을 통해서 리액트 프로젝트를 생성하게 되면 node_modules, public, src 폴더와 여러 json 파일들이 생성이 된다. 이 때 public 폴더에 index.html 파일이 있는 걸 볼 수 있을 것이다. 이 index.html 파일은 일종의... JavaScriptreactjs생활코딩CSSfrontendhtmlCSS [ReactJS] Immutability 불변성: 값이나 상태를 변경할 수 없는 값을 의미 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 한다. 리액트는 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 한다. 얕은 비교란 객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일 참조(동일한 메모리 값을 사용하는지)를 비교한다. 다음 시나리오를 보면서 왜... JavaScript불변성ImmerreactjsImmer React - JSX 알아보기 React library도 JSX 코드와 같은 scope 안에 있어야 한다. React는 JavaScript 코드에선 직접적으로 사용되지는 않지만 JSX 태그로 사용할 수 있기 위해 반드시 import 해야 한다. JSX 내에서도 점 표기법을 사용해서 React 컴포넌트를 참조한다. 이 방법은 하나의 모듈에서 복수의 React 컴포넌트들을 export 하는 경우에 편리하게 사용할 수 있다. ... reactjswebfrontendJSXJSX React가 처음인 당신 - Ep1. 탄생편 예를들어 Facebook의 뉴스피드의 좋아요 버튼을 생각해 볼 수 있습니다. 이 DOM이 Update 즉 변경된다는 뜻은 HTML요소에 변화가 발생했다는 뜻이 되며, 즉 웹사이트에 동적인 변화가 일어났다고 이해할 수 있습니다. 브라우저는 이 DOM이 변화하면 화면을 다시 그리게 되는데요 문제는 위에 명시한 하나하나의 변화마다 화면을 계속 새로 그리는 오버헤드가 일어나고 있다는 것 입니다. 이... reactjsreact.jsReactJavaScriptJavaScript [ReactJS] Basic of React HTML 작성 Script 작성 1) HTML 요소 가져오기 2) 이벤트 감지 3) HTML 업데이트 위와 같은 일련의 과정이 항상 필요하게 됨. module 설치 - react: interactive한 UI를 만들 수 있도록 하는 엔진 같은 역할 -> interactive power - react-dom: react element들을 HTML body에 둘 수 있도록 함 - 설치가 잘 된 ... reactjsreactjs Toy Project : Tetatube ▪️ 프로젝트 소개 Notion (프로젝트 기능 구현 계획과 일정 관리) Postman (API data 관리) ▪️ 구현한 기능 PostCSS를 이용한 효율적인 웹 디자인 구현 Youtube API와 Map method를 이용한 data render 검색 결과에 따른 data render 기능 구현 Axios 라이브러리와 Dependency Injection을 통한 효율적인 API 관리 각... React HookspostcssaxiosreactjshooksReact Hooks Poke Docs 만들기 - NextJS, react-query index.tsx 기본적으로 typescript, eslint, prettier 를 추가하였습니다. <- 문서에 나와있는데로 하면 쉽게 관련 파일과 typescript 를 설치할 수 있습니다. 먼저 pages/index.tsx 를 구성하였습니다. 위에 api 를 호출하면 포켓몬 리스트가 가져와지는것을 볼 수 있습니다. Next에 유용한점을 사용하기 위해 prefetch 를 이용하여 api 를... staletimenextjsreactqueryreactjsprefetchusequerynextjs react 권한 관리 및 페이지 동적 렌더링 트리 컨트롤 구현 react 권한 관리 백엔드 데이터 반환 예 로그인 후 모bx나redux에 데이터를 저장하고session을 통해 로컬 저장을 하며 index에 데이터를 주입하여 필요한 페이지에서 호출합니다 사용하기 전에 여러분은 먼저 mobx와redux를 어떻게 사용하는지 알아보세요 Mobx 상태 관리자에서 index.js 입구 파일 중 메뉴 구성 요소에서 호출을 하는데, 여기에 교체 사상을 사용하여 하위 ... reactjs [ReactJS] 리액트 시작하기 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것입니다. UI 재사용이 좋으며, 코드 가독성이 높다. 유지보수가 편해진다 (문제가 있는 컴포넌트를 빠르게 찾아낼 수 있음) React Native (모바일 어플리케이션 언어) 확장성. 한 가지의 기능을 수행하는 UI 단위. 컴포넌트 DOM t... 프론트엔드frontendreactjs리액트라이브러리ReactJavaScriptJavaScript react에서 간단한 동효 실현 react에서 어떻게 간단한 동효를 실현합니까 플러그인이 필요합니다.... reactjs
React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest React 웹앱 구현하기 (생활코딩) 이는 로컬 컴퓨터에서 공간을 낭비하지 않고, 가장 최신의 프로그램을 사용할 수 있다는 장점이 있다. 맨 처음에 create-react-app을 통해서 리액트 프로젝트를 생성하게 되면 node_modules, public, src 폴더와 여러 json 파일들이 생성이 된다. 이 때 public 폴더에 index.html 파일이 있는 걸 볼 수 있을 것이다. 이 index.html 파일은 일종의... JavaScriptreactjs생활코딩CSSfrontendhtmlCSS [ReactJS] Immutability 불변성: 값이나 상태를 변경할 수 없는 값을 의미 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 한다. 리액트는 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 한다. 얕은 비교란 객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일 참조(동일한 메모리 값을 사용하는지)를 비교한다. 다음 시나리오를 보면서 왜... JavaScript불변성ImmerreactjsImmer React - JSX 알아보기 React library도 JSX 코드와 같은 scope 안에 있어야 한다. React는 JavaScript 코드에선 직접적으로 사용되지는 않지만 JSX 태그로 사용할 수 있기 위해 반드시 import 해야 한다. JSX 내에서도 점 표기법을 사용해서 React 컴포넌트를 참조한다. 이 방법은 하나의 모듈에서 복수의 React 컴포넌트들을 export 하는 경우에 편리하게 사용할 수 있다. ... reactjswebfrontendJSXJSX React가 처음인 당신 - Ep1. 탄생편 예를들어 Facebook의 뉴스피드의 좋아요 버튼을 생각해 볼 수 있습니다. 이 DOM이 Update 즉 변경된다는 뜻은 HTML요소에 변화가 발생했다는 뜻이 되며, 즉 웹사이트에 동적인 변화가 일어났다고 이해할 수 있습니다. 브라우저는 이 DOM이 변화하면 화면을 다시 그리게 되는데요 문제는 위에 명시한 하나하나의 변화마다 화면을 계속 새로 그리는 오버헤드가 일어나고 있다는 것 입니다. 이... reactjsreact.jsReactJavaScriptJavaScript [ReactJS] Basic of React HTML 작성 Script 작성 1) HTML 요소 가져오기 2) 이벤트 감지 3) HTML 업데이트 위와 같은 일련의 과정이 항상 필요하게 됨. module 설치 - react: interactive한 UI를 만들 수 있도록 하는 엔진 같은 역할 -> interactive power - react-dom: react element들을 HTML body에 둘 수 있도록 함 - 설치가 잘 된 ... reactjsreactjs Toy Project : Tetatube ▪️ 프로젝트 소개 Notion (프로젝트 기능 구현 계획과 일정 관리) Postman (API data 관리) ▪️ 구현한 기능 PostCSS를 이용한 효율적인 웹 디자인 구현 Youtube API와 Map method를 이용한 data render 검색 결과에 따른 data render 기능 구현 Axios 라이브러리와 Dependency Injection을 통한 효율적인 API 관리 각... React HookspostcssaxiosreactjshooksReact Hooks Poke Docs 만들기 - NextJS, react-query index.tsx 기본적으로 typescript, eslint, prettier 를 추가하였습니다. <- 문서에 나와있는데로 하면 쉽게 관련 파일과 typescript 를 설치할 수 있습니다. 먼저 pages/index.tsx 를 구성하였습니다. 위에 api 를 호출하면 포켓몬 리스트가 가져와지는것을 볼 수 있습니다. Next에 유용한점을 사용하기 위해 prefetch 를 이용하여 api 를... staletimenextjsreactqueryreactjsprefetchusequerynextjs react 권한 관리 및 페이지 동적 렌더링 트리 컨트롤 구현 react 권한 관리 백엔드 데이터 반환 예 로그인 후 모bx나redux에 데이터를 저장하고session을 통해 로컬 저장을 하며 index에 데이터를 주입하여 필요한 페이지에서 호출합니다 사용하기 전에 여러분은 먼저 mobx와redux를 어떻게 사용하는지 알아보세요 Mobx 상태 관리자에서 index.js 입구 파일 중 메뉴 구성 요소에서 호출을 하는데, 여기에 교체 사상을 사용하여 하위 ... reactjs [ReactJS] 리액트 시작하기 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것입니다. UI 재사용이 좋으며, 코드 가독성이 높다. 유지보수가 편해진다 (문제가 있는 컴포넌트를 빠르게 찾아낼 수 있음) React Native (모바일 어플리케이션 언어) 확장성. 한 가지의 기능을 수행하는 UI 단위. 컴포넌트 DOM t... 프론트엔드frontendreactjs리액트라이브러리ReactJavaScriptJavaScript react에서 간단한 동효 실현 react에서 어떻게 간단한 동효를 실현합니까 플러그인이 필요합니다.... reactjs