정원

three.js journey강의를 듣고 작성합니다. Three.js 구현하기위한 기본구성 5가지 import * as THREE from 'three';import gsap from 'gsap'const canvas = document.querySelector('canvas.webgl')//sceneconst scene = new THREE.Scene()//objectconst geometry = new THREE.BoxGeometry(1,1,1) //BoxGeometry(width, height, depth)const material = new THREE.MeshBasicMaterial({color:0xff0000})const mesh = new THREE.Mesh(geometry, material)..

이직을 한지 어언 5개월 참 좋은 회사였지만. . . 팀도 좋았지만 . . 내년 사업이 없다며 계약만료되었다. .😂이 프로젝트를 유지보수하게 될 남은 팀원들을 위해 인수인계서를 작성해보았어요  우선 목차를 잡고 디렉토리구조디렉토리 구조를 마크다운으로 작성하여 한눈에 파악하기 싶도록 작성하였다파일설명이 컴포넌트들의 역할이 무엇인지, 유의점 작성 데이터흐름차트 컴포넌트가 많기에 차트 데이터가 어떻게 흘러가는지에 대해 작성하였다.차트 레이아웃차트 레이아웃은 분석팀에서 원했던 구조가 꽤 까다로워서 이 형식을 벗어나지말라는 코멘트도 남겼다. 데이터 구조에는 두가지 방식이 있어서 어떤 경우에 해당 데이터구조로 들어와야하는지 여기서 생길수 있는 주의점을 적어두었다차트 종류가 다양하여 쓰고있는 타입명, 컴포넌트, 유..

넥스트를 공부하기로 한 나. . .어렴풋이 알고있던 SSR CSR SSG ISR 과 마주하다 이것 뭐예요 ?  CSR client side rendering 렌더링하는 주체자가 클라이언트(브라우저) 웹사이트에 접속시 서버에게 요청 보냄 -> 서버가 텅텅빈 html보내줌-> js 다 다운받아야 볼 수 있음 주로 리액트에 사용한다! 장점단점한번 로딩되면 빠른 ux 제공페이지 로딩시간(ttv)이 길다서버의 부하가 작음자바스크립트 활성화 필수 seo 최적화가 힘들고, 보안에 취약하다 CDN에 캐시가 안됨  SSG staric site generation 렌더링하는 주체자가 서버, 언제 렌더링 되나요? 빌드할때 됩니다!웹사이트 접속시 정적인 HTML 파일 받아옴(프리렌더링) -> 사용자 즉각 볼수 있음 -> 사용..

Class App extends Component { render() { return ( hi ); } } app이란 클래스를 만들고 리액트 컴포넌트클래스를 상속해서 새로운 클래스를 만드는 것 렌더라는 메소드를 가지고있다 props와 state Class App extends Component { constructor(props){ super(props); this.state= { subject:{title:'web', sub:'www'} } }//컴포넌트가 실행될때 렌더보다 먼저 실행되면서 초기화을 담당 render() { return (

action 정의한다 액션디렉토리에 액션 타입파일을 만들어서 액션이름을 상수형태로 만들고 다른파일에서 불러올수잇도록 만든다 대문자와_를 사용해서 만든다 export const PLUS = 'PLUS' 액션 생성자함수를 통해 정의한다 -> 왜? 액션을 그때그때 객체를 만들면 귀찮아서..? 액션 생성자는 미리 정의해둔 액션이름을 불러와서 카멜케이스로 작성함 payload가 있는경우에 인자로 넣어줌 import *as types from '액션타입정의한곳' export function plus(payload) { return { type: types.PLUS payload: } } 액션 객체 { type: 액션의 종류를 한번에 식별할 수 있는 문자열 또는 심볼 payload: 액션의 실행에 필요한 임의 데이터..

Redux란? 리덕스는 상태의 중앙관리를 위한 상태관리 도구입니다 전역상태를 생성하고 관리하기위한 라이브러리 Redux 왜 사용하나요? 리액트의 경우 단방향이라서 상태를 prpos로 전달받게 됩니다. 부모컴포넌트에서 최하위 자식 컴포넌트 전달한다고 했을때 두세개의 경우 가볍게 할 수 있지만 그 양이 일억개라고 생각해봅니다. 쉽게 말하자면 유선이라고 생각하면 됩니다. 리덕스의 경우 무선처럼 사용 할 수 있습니다 리덕스는 많아진 상태구성요소들을 보다 효율적으로 관리해줍니다 스토어를 사용하여 상태를 컴포넌트 구조 바깥에 두고 스토어를 통해 업데이트하거나 새로운 상태를 전달받아요 리덕스데브툴 사용시 시간여행 가능 그렇다면 리덕스 이전엔 어떻게 사용했나요? Context API등을 사용 전역상태관리측면에서는 차이..