Engineering (227) 썸네일형 리스트형 [react] 프로젝트 생성 후 내가 하는 것들 순서 yarn create react-app 이름 깃연동 src/components 만들어둠 src/pages만들어둠 src/resources만들어둠 Prettier-Code formatter 설정하기 (링크) 테스트 컴포넌트 만드록 yarn start 돌려보기 이후는 그냥 구현하면서 찾아보면서 코드 짜면서 배우면 됨. 라우터 설정 (링크) yarn add axios [react] JSX 문법 메모 JSX 일단기본적으로 리액트컴포넌트에서 JSX 문법을 리턴합니다. // error function App() { const name = undefined return name } // ok function App() { const name = undefined; return {name || "react"}; } 조건문 JSX 내부의 자바스크립트 표현식에서 if 문을 사용할수 없습니다. -> 삼항 연산자 사용해야합니다. import React from "react"; function App() { const name = "리액트"; return ( {name === "리액트" ? ( 리액트 입니다! ) : ( 리액트가 아닙니다 )} ); } export default App; 이렇게 하면 됩니다. 리액트가.. [react] 개념설명 리액트 데이터가 변경되면 뷰도 변경을 해줘야합니다. 예를들어 js 변수 age = 20 이면 , HTML에도 나이: 19 19를 20으로 변경을 해줘야했습니다. 페북개발팀에서는 데이터를 HTML에 데이터를 포함하기로 합니다. 그러면 age가 20이 되면 , HTML에도 나이: { age } 따로 변경할 필요가 없어집니다. 리액트개발팀은 데이터가 변할때 마다 전체 기존 뷰를 날려버리고 처음부터 새로 렌더링하는 방식을 사용하려 했지만, DOM 전체를 리렌더링하는것이 너무 느렸습니다.🤨 (만약 input값에 hello 를 입력한다면 h, e, l, l, o 총 5번 이나 전체 DOM이 리렌더링 되기때문) 하지만 리액트는 virtualDOM 을 사용해서 전체 DOM이 5번이나 리렌더링 되지 않고 필요한 부분만 .. [git] 처음 푸쉬하기 Github 푸쉬하기 깃허브에서 저장소를 생성하면, 몇가지 명령어들을 확인할 수 있습니다. git remote add origin https://github.com/githubid/repositoryname.git git branch -M main git push -u origin main 저는 create react-app 으로 프로젝트를 생성해서 git 이 자동으로 생성되어 git init 을 할 필요가 없었습니다. 위 명령어가 무슨 뜻인지 알아보겠습니다. origin 이라는 이름으로 내 원격저장소 주소를 설정합니다. 내 로컬 브랜치를 --move(-M) 을 이용해 main으로 변경합니다. (Default local branch: master) 근데 사실 이동하는 곳이없으니 이름이 변경됩니다. 원래는.. [GCP공부] Coursera: Google Cloud Platform Fundamentals: Core Infrastructure - Getting Started with Google Cloud Platform Introduction 프로젝트를 조직화하고 관리하기 위해서 Google Cloud Identity and Access Management 를 사용해야 합니다.(IAM, IM) The principle of least privilege is very important This principle says that each user should have only those privileges needed to do their jobs. In a least-privilege environment, people are protected from an entire class of errors. A coworker of mine once accidentally deleted a running production d.. [GCP공부] Coursera: Google Cloud Platform Fundamentals: Core Infrastructure - Introducing Google Cloud Platform Introducing Google Cloud Platform GCP offers four main kinds of services - compute - storage - big data - machine learning 근데 이 강좌에서는 compute 랑 storage 만 다룬다고 합니다. what is cloud : cloud computing is a way of using I.T. that has these five equally important traits - 필요하면 아무때나 (on demand = 필요하면 즉시) 자원을 사용하고 '셀프' 서비스로 사용하는것 인간의 개입없이 - 이러한 지원에 anywhere 언제든지 network을 통해 접근할수 있어야 하는 것 - provider 는 큰 자.. GCP 자격증이란? GCP 구글 클라우드 플랫폼 자격증이 있다고 합니다. 저는 초보니깐 Associate Cloud Engineer 에 도전 해보겠습니다. 😀 Associate Cloud Engineer (ACE) 시험시간: 2시간 등록비용: $125 (후..) 유효기간: 2년 시험에 나오는 주제,범위를 알아야합니다(중요!) [링크] 여러 모의고사들이 있습니다. [링크] 외부 강의들을 이용해 키워 실력을 키웁니다. (코세라, 큌랩 등) 시험을 봅니다. 어떻게 공부해야할까? 강의도 많고, 범위도 넓고.. 도대체 어떻게 공부해야할지 한번 알아봤더니 대부분 아래내용으로 공부하는걸 확인할수 있었습니다. 1. 학습 - Official Study Guide 책 [링크] - Coursera 강의 - Qwiklabs 강의 2. 연습문제풀.. 최적화 설정하기 (react-virtualized, immer) react-virtualized 2,500 개 컴포넌트 중 2,491 는 스크롤하기 전에는 보이지 않음에도 불구하고 렌더링이 이루어집니다. react-virtualized를 사용하면 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 할 수 있습니다. 만약 스크롤되면 해당 스크롤 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킵니다. yarn add react-virualized import React, { useCallback } from 'react'; import { List } from 'react-virtualized'; import TodoListItem from './TodoListItem'; import './TodoList.scss'; c.. 이전 1 ··· 24 25 26 27 28 29 다음
