발자취

가로/세로 배치 // Layout을 가로로 배치한다. EditorGUILayout.BeginHorizontal(); { .. 원하는 GUI 배치 내용물 입력 } EditorGUILayout.EndHorizontal(); // Layout을 세로로 배치한다. EditorGUILayout.BeginVertical(); { .. 원하는 GUI 배치 내용물 입력 } EditorGUILayout.EndVertical(); EditorGUILayout 클래스에 있는 Horizontal 함수를 사용하면 가로로 배치할 수 있다. 여기서 중요하게 봐야 할 점은 항상 가로로 배치할 GUI 내용물들을 Begin과 end 사이에 넣어야 한다는 것이다. EditorGUILayout.EndHorizontal();을 넘어가는 순간..

가변적인 텍스트에 따라서 UI의 크기를 맞추기위해 LayoutRebuilder.ForceRebuildLayoutImmediate를 사용하면된다. LayoutRebuilder.ForceRebuildLayoutImmediate(사용하고자하는 텍스트의 ReactTransform); https://docs.unity3d.com/2018.2/Documentation/ScriptReference/UI.LayoutRebuilder.ForceRebuildLayoutImmediate.html Unity - Scripting API: UI.LayoutRebuilder.ForceRebuildLayoutImmediate Normal use of the layout system should not use this method...

라우터 설치 dom뒤에 @6는 라우터의 버전을 의미한다. React route 참고서 https://reactrouter.com/en/main/start/tutorial#setup Tutorial v6.11.0 Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in th reactrouter.com BrowserRou..

prop drilling 이란 React 컴포넌트 트리의 일부로 데이터를 전달하기 위한 프로세스. props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 그 데이터가 필요하지 않음에도 자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정을 말한다. 이를 해결하기 위해 React에서는 Context를 사용한다. Context 생성 const MyContext = React.createContext(value); Context Provider를 통한 데이터 공급 { //context안에 위치할 자식 컴포넌트들 }

컴포넌트 내에서 함수가 많아지고 길어지는 방법은 복잡해지기 때문에 올바른 방법이라고 할 수 없다. useReducer은 컴포넌트의 상태변화 로직을 컴포넌트 밖으로 분리하여 사용할 수 있다. reducer const reducer = (state, action) => { switch (action.type) { case 1: return state +1; case 2: return state +2; case 3: return state +3; default: return state; } ); 형식 const reducer = (상태변화가 일어나기전 status, 어떤 상태변화를 일으킬 지의 action 객체) =>{ switch(action.type){ return 새로운 상태 값 } } dispatch ..

Reac.memo는 고차 컴포넌트이다. 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수입니다. Reac.memo은 똑같은 Prop을 전달받으면 리렌더링 하지 않는다. 문자열과 정수형에 memo 사용할 경우 import React, { useEffect, useState } from "react"; const Textview = React.memo(({ text }) => { useEffect(() => { console.log(`updatae :: text : ${text}`); }); return {text}; }); const CountView = ({ count }) => { useEffect(() => { console.log(`updatae :: count : ${count}`);..

useMemo는 상태가 변했는 지를 확인하여 상태가 변하지 않았으면 함수를 실행하지 않게 만드는 랜더링 최적화 방법이다. import { useMemo } from "react"; const getDiaryAnalysis = useMemo(() => { console.log("useMemo 시작"); const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount; const goodRatio = (goodCount / data.length) * 100; return { goodCount, badCount, goodRatio }; }, [data.length]); deps에 data...

Mount -> Update -> UnMount 화면에 생성 -> 변화 -> 화면에서 제거 useEffect Mont & Update import React, { useEffect, useState } from "react"; const Lifecycle = () => { const [count, setCount] = useState(0); const [text, setText] = useState(""); //Mount useEffect(() => { console.log("mount"); }, []); //Update useEffect(() => { console.log("update"); }); //Update당시 조건에 따른 예외처리 useEffect(() => { console.log(`coun..

포커스 이벤트 방법 import { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const hadleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; const handleSubmit = () => { if (state.author.length < 1) { authorInput.current.foc..

사용자 입력 import { useState } from "react"; const DiaryEditor = () => { const [state, setState] = useState({ author: "", content: "", }); return ( 오늘의 일기 { setState({ author: e.target.value, content: state.content }); }} /> { setState({ content: e.target.value, content: state.author }); }} /> ); }; export default DiaryEditor; ... 연산자 사용 방법 import { useState } from "react"; const DiaryEditor = () =>..

React 컴포넌트는 부모의 값이 변경되면 하위 컴포넌트도 다시 랜더링 되며 자신의 값이 변경되어도 동일하게 다시 랜더링 된다. 부모에서 자식 간 Props 전달 App.js import React from 'react'; import MyHeader from './MyHeader'; import Counter from './Count'; function App() { const number = 5; const counterProps ={ a:1, b:2, c:3, d:4, e:5, } return ( ); } export default App; 자식 컨포넌트인 Counter에게 ...연산자를 사용하여 객체 자체를 넘겨줄 수 있다. 이를 props라고 한다. Counter.js import React,{..

React에서는 상태(State) 변화를 확인할 수 있다. 먼저 import React,{useState} from 'react'; 를 선언하여 사용 한다. 콘솔을 확인하면 리엑트는 버튼 클릭이벤트로 2번의 counter을 호출하는 것 을 확인할 수 있다. 한 번은 연산을 수행하며 한번은 화면 렌더링을 수행한다. import React,{useState} from 'react'; const Counter = () =>{ console.log("counter 호출!"); const [count, setCount, ads] = useState(0); const onIcrease = ()=>{ setCount(count + 1); } const onDecrease = () =>{ setCount(count -..

React란? Node 기반의 Javascripts UI 라이브러리이다. React를 사용하기 위해서는 대표적인 2가지 라이브러리를 추가하여 사용하여야한다. 1. Webpack 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리 2. Babel JSX등의 쉽고 직관적인 자바스크립트 문버을 사용할 수 있도록 해주는 라이브러리 장점 1. react는 컴포넌트 방식으로 개발하기 때문에 산탄총 수술을 피할 수 있어 유지보수가 편리하다. 2. react는 선언형 프로그래밍으로 명령형 프로그래밍에 비해 절차를 하나하나 다 나열할 필요가 없어 가독성이 좋다. 대표적인 프로그래밍 - 명령형 프로그래밍(jQuery), 선언형 프로그래밍 (react) 3. Virtual dom을 사용한다. dom이란 ..

module.exports는 다른 파일의 함수등을 참조하기 위해사용 된다. module.exports로 등록을 한 후 참조하고자하는 다른 js파일에서 require에 경로를 입력하여 사용 할 수 있다.

업무 분업 구조(work-breakdown structure, WBS), 작업 분해 구조, 작업 분류 체계, 작업 분할 구조, 작업 분할 구도는 프로젝트 관리와 시스템 공학 분야에서 프로젝트의 더 작은 요소로 분해시킨 딜리버러블 지향 분업 구조이다. 업무 분업 구조는 팀의 작업을 관리 가능한 부분들로 조직화해놓은 주된 제품 딜리버러블이다. 프로젝트 관리 지식 체계 (PMBOK 5)는 업무 분업 구조를 "프로젝트 팀이 프로젝트 목표를 달성하고 필요한 딜리버러블을 만들기 위한 총 업무 범위의 계층적 분해"로 정의한다. 업무 분업 구조 요소는 상품, 데이터, 서비스, 또 이들 간의 어떠한 결합이 될 수 있다. WBS는 또한 스케줄 개발 및 통제를 위한 지침 제공과 더불어 세세한 비용 예측 및 통제에 필요한 프..

vsCode 확장에서 prettier 설치 검색창에(ctrl+shift+p) >open settings(UI) 검색 검색창에 Format on Save 검색 후 체크

json placeholder에 무료 API가 있다. fetch를 사용해서 api를 호출할 수 있다. fatch는 promise를 return 한다. async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); console.log(jsonResponse); } getData();

SetTimeout function taskA() { setTimeout(() => { console.log("A Task Eed"); }, 2000); } taskA(); console.log("코드 작업 끝"); SetTimeout을 사용하면 비동기적으로 행위를 처리할 수 있다. 앞에 인자 값엔 행위를 넣어주고 뒤에는 앞에 전달한 행위가 시작 기다림이다. SetTimeout은 실행이 되면 Call Stack에 쌓였다가 WebApis로 넘어가서 정해진 시간 동안 기다리다 시작하게 된다. 그렇기 때문에 아래코드가 먼저 실행될 수 있다. 콜백함수와 SetTimeout function taskA(a, b, cb) { setTimeout(() => { const res = a + b; cb(res); }, 3..

Spread연산자 사용방법. 객체에서 const cookie = { base: "cookie", madeIn: "Korea" }; const chocochipCookie = { base: "cookie", madeIn: "Korea", toping: "chocochip" }; const blueberryCookie = { base: "cookie", madeIn: "Korea", toping: "blueberry" }; console.log(cookie); console.log(chocochipCookie); console.log(blueberryCookie); 위에 3개의 쿠키들은 공통적인 프로퍼티를 갖는다 이를 객체마다 써주기에는 불필요하다. 이때 사용되는 게... spread연산자이다. 아래처럼....