<h1>#1. 리액트를 배우기 위한 사전 준비</h1><h3>#챕터 목차</h3><ol class="tight" data-tight="true"><li>JSX 구문</li><li>Imperative &amp; Declarative</li><li>v = f ( s )</li><li>ES5/ ES6 functions and literals</li></ol><h2>JSX 구문</h2>JSX 는 Javascript 와 XML 을 합성한 표현방식입니다.React 에서는 JSX 구문을 주로 사용하게 됩니다.<pre spellcheck="false"><code class="language-jsx">// JSX 의 예제 코드
const name = 'John Doe';
const element = &lt;h1&gt;Hello, {name}&lt;/h1&gt;;

// JS 의 예제 코드
const element = React.createElement(
 'h1',
 null,
 `Hello, ${name}`
);
</code></pre><pre spellcheck="false"><code class="language-jsx">// 함수형 컴포넌트 내에서의 사용예
 return(	
 {state === "loading" ? (
 "Loading"
 ) : (
 &lt;ul&gt;
 {todos.map((todo) =&gt; (
 &lt;TodoItem77 key={todo.id} {...todo} /&gt;
 ))}
 &lt;/ul&gt;
 )}
 )
</code></pre>JSX 심화 학습 Ref :<a target="_blank" rel="noopener noreferrer nofollow" href="https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html">https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://ko.legacy.reactjs.org/docs/jsx-in-depth.html">https://ko.legacy.reactjs.org/docs/jsx-in-depth.html</a><h2>Imperative vs. Declarative</h2>프로그래밍에서 해결해야 할 과제 “AAA” 가 있다고 가정하겠습니다.절차형/명령형 imperative 프로그래밍에서는 “AAA” 의 모든 속성과 과제 들을 데스크탑 위에 모두 풀어헤쳐 놓고 하나하나의 세부항목 태스크를 구성한 후, 각각의 태스크에 대한 코드들을 구성해준 뒤 전체 플로우를 연결해줍니다.<pre spellcheck="false"><code class="language-jsx">// Imperative
// 배열에서 짝수를 찾고 그 합을 계산한다.
const numbers = [1, 2, 3, 4, 5, 6];
let sum = 0;

for (let i = 0; i &lt; numbers.length; i++) {
 if (numbers[i] % 2 === 0) {
 sum += numbers[i];
 }
}

console.log(sum); // 12
// 모든 절차가 마치 익숙한 의식의 흐름처럼 진행되었습니다.
</code></pre>반면에 선언형 declarative 프로그래밍에서는, 추상화 된 처리 엔진(또는 규칙) 을 전제로 합니다.그리고 그 엔진이 watch/listen 하고있는 ‘개별 상태’ 를 변경 또는 관리의 목표로 설정해 줌으로서 태스크가 해결됩니다.<pre spellcheck="false"><code class="language-jsx">// Declarative
// 새로운 greet 객체를 출력에 반영시킨다.
const [activeGreet, setActiveGreet] = setState(null)
const newGreet = ['greetings', '안녕']
setActiveGreet(newGreet)
return (
	{
		activeGreet &amp;&amp; (
			activeGreet.map( (eachGreet, i) =&gt; {
	 &lt;Greet key={i} greet={eachGreet } /&gt;
			}	 
 )
	}
)
// 모든 코드의 중심과 목표는 'activeGreet' 라는 상태-state 에 집중되어 있습니다.
</code></pre><h2>v = f ( s )</h2>view = function ( state )선언형 프로그래밍에서는 처리해야 할 ‘상태’ 즉, state 에 집중하고, state 를 변화 시키면 화면의 출력 양태가 바뀌도록 프로그래밍 합니다.이 점이 가장 큰 변화이고 익숙해지기 어려운 문제인데요.. 기존의 절차형 프로그래밍으로부터의 패러다임 전환이기 때문에, 적응하기가 쉽지는 않습니다. 습관처럼 for 문을 적게 되기도 하죠. 언제나 그랬던 것 처럼, 직접 수 만 라인의 코드를 짜보는 것 외에는 왕도가 없는 것 같습니다.아무튼, 기억해두시기 바랍니다. 모든 것은 state 이고, 개발자는 state 에 집중해야 한다… 라는 것이 리액트의 가장 큰 지혜이자 중심 컨셉입니다.<h2>ES5/ES6 functions &amp; literals</h2>리액트 에서는 ECMA5/6 에서 도입된 펑션과 리터럴이 자주 사용됩니다. 거의 모든 리액트 컴포넌트에서 사용된다고도 말할 수 있겠습니다.ES5/6 펑션과 표현에 익숙해지셔야 합니다.<pre spellcheck="false"><code class="language-jsx">// ES5/ES6 펑션의 예 
 setAllTodos(allTodos.filter((eachTodo) =&gt; eachTodo.id !== targetTodoId));
 return(
 &lt;ul&gt;
 {todos.map((todo) =&gt; (
 &lt;TodoItem key={todo.id} {...todo} /&gt;
 ))}
 &lt;/ul&gt;
 )
</code></pre>가장 자주, 유용하게 사용되는 ES5/ES6 펑션들은 다음과 같습니다.<h3><a target="_blank" rel="noopener noreferrer nofollow" href="http://Array.map">Array.map</a></h3><pre spellcheck="false"><code class="language-jsx">var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
 return value * 2;
}
// arrow function ver.
const numbers2 = numbers1.map( (val) =&gt; val*2 );
</code></pre><h3>Array.filter</h3><pre spellcheck="false"><code class="language-jsx">var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
 return value &gt; 18;
}
// arrow function ver.
const numbers2 = numbers1.filter( (val) =&gt; val &gt; 18 );
</code></pre><h3>Array.reduce</h3><pre spellcheck="false"><code class="language-jsx">var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
 return total + value;
}
// arrow function ver.
const numbers2 = numbers1.reduce((total, value) =&gt; total + value, 0);
</code></pre><h3>Arrow function</h3><pre spellcheck="false"><code class="language-jsx">// ES5
var x = function(x, y) {
 return x * y;
}

// ES6
const x = (x, y) =&gt; x * y;
</code></pre><h3>Optional chaining</h3><pre spellcheck="false"><code class="language-jsx">const user = {
 name: 'John',
 greet: function() {
 return 'Hello!';
 }
};

// Optional chaining을 사용하지 않은 경우
const greet1 = user &amp;&amp; user.greet &amp;&amp; user.greet();
console.log(greet1); // 'Hello!'

// Optional chaining을 사용한 경우
const greet2 = user?.greet?.();
console.log(greet2); // 'Hello!'
</code></pre>ES5/ES6 Functions 심화학습 Ref :<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/js/js_es5.asp">https://www.w3schools.com/js/js_es5.asp</a><h3>Destructuring assignment : 구조 분해 할당</h3><pre spellcheck="false"><code class="language-jsx">// 기본 분해 할당
let a, b, rest;
[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // Array [30, 40, 50]

// 객체 구조 분해 할당
const person = {
 name: 'John Doe',
 age: 30,
 address: {
 city: 'New York',
 zip: '10001'
 }
};

// 객체에서 값을 분해하여 변수에 할당
const { name, age } = person;

console.log(name); // John Doe
console.log(age); // 30

// 중첩된 객체의 속성을 분해하여 할당
const { address: { city, zip } } = person;

console.log(city); // New York
console.log(zip); // 10001

</code></pre>Destructuring assignment 심화학습 Ref :<a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment</a><h3>Nullish Coalescing Operator 와 Logical OR Operator</h3><pre spellcheck="false"><code class="language-jsx">
let name = "";
let text = "default";
let result;

// Nullish coalising
result = name ?? text;
console.log(result); // ""

// Logical OR operator
result = name || text;
console.log(result); // "default"

// Falsy 값 처리: 
// ?? 연산자는 null이나 undefined만을 검사하고, 
// || 연산자는 모든 falsy 값을 검사합니다.

</code></pre>여기까지가 React 에서 주로 사용되는 구문과 펑션.. 등에 대한 사전 지식 점검 이었습니다.충분히 이해하셨다면, 다음 장에서 본격적으로 React App 을 생성하고, 코딩을 시작해 봅시다.

#1. 리액트를 배우기 위한 사전 준비

Apache Kafka

기타

brew install zsh-autosuggestionsbrew install zsh-syntax-highlighting하고 나서vi ~/.zshrc<pre spellcheck="false"><code class="language-null">source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
source /opt/homebrew/share/zsh-autosuggestions/zsh-autosuggestions.zsh</code></pre>하단에 위의 코드 추가할 것저장한 후source .zshrc실행해서 적용시켜주고 테스트 해보면 잘 됨.

brew install zsh-autosuggestionsbrew install zsh-syntax-highlighting하고 나서vi ~/.zshrcsource /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
source /opt/homebrew/share/zsh-autosu

[기타] iterm2 설정 할 때 zsh-syntax-highlighting 경로 잘~ 입력하기

<h3>0. 16.8버전 이전의 함수 컴포넌트</h3>0.14 버전에서 소개된 함수 컴포넌트는 staless functional component, 이른바 무상태 함수 컴포넌트였다. 별도의 상태 없이 단순히 어떠한 요소를 정적으로 렌더링하는 것이 목적이었다.즉, 함수 컴포넌트는 클래스 컴포넌트에서 별다른 생명주기 메서드나 상태가 필요없이 render만 하는 경우에만 제한적으로 사용됐다. 함수 컴포넌트가 각광받기 시장한 것은 16.8버전에서 hook이 등장한 이우였다.함수 컴포넌트에서 hook이 등장한 이후 함수 컴포넌트에서 상태나 생명주기 메서드 비슷한 작업을 흉내낼 수 있게되자 상대적으로 보일러플레이트가 복잡한 클래스 컴포넌트보다 함수 컴포넌트를 많이 쓰기 시작했다.<h1>1. 클래스 컴포넌트</h1>기본적으로 클래스 컴포넌트를 만들려면 클래스를 선언하고, extends로 만들고 싶은 컴포넌트를 extends해야한다.<ul class="tight" data-tight="true"><li>React.Component</li><li>React.PureComponent</li></ul><pre spellcheck="false"><code class="language-jsx">// Component 제네릭에 props, state를 순서로 넣어준다.
class SampleComponent extends React.Component&lt;SampleProps, SampleState&gt;
</code></pre><ul><li>constructor(): 컴포넌트가 초기화되는 시점에 호출된다. 컴포넌트의 state를 초기화해주는 역할을 한다.</li><li>super(): 컴포넌트를 만들면서 상속받은 상위 컴포넌트에 접근할 수 있게 도와준다.</li><li>props: 함수 인자에 넣는 것과 비슷하게 컴포넌트에 특정 속성을 전달하는 용도로 쓰인다.</li><li>state: 클래스 컴포넌트 내부에서 관리하는 값을 의미한다. 값은 항상 객체여야만 하고, 해당 값에 변화가 있을 때 리렌더링이 발생한다.</li><li>method: 렌더링 함수 내부에서 사용되는 함수이며, 보통 DOM에서 발생하는 이벤트와 함꼐 사용된다.<ul><li>constructor에서 this를 바인드 하는 방법: 생성된 함수에 bind를 활용해 강제로 this를 바인딩해야 한다. (일반적인 함수로 메서드를 만든다면 this가 undefined로 나온다. 생성자가 아닌 일반 함수로 호출하게 되면 this 전역 객체가 바인딩 되기 때문이다.<pre spellcheck="false"><code class="language-jsx">this.handleClick = this.handleClick.bind(this)
</code></pre></li><li>화살표 함수를 쓰는 방법: 실행 시점이 아닌 작성 시점에 this가 상위 스코프로 결정되는 화살표 함수를 사용한다면 굳이 바인딩을 하지 않아도 된다.<pre spellcheck="false"><code class="language-jsx">const sampleFunction = () =&gt; {}
</code></pre></li><li>렌더링 함수 내부에서 함수를 새롭게 만들어 전달하는 방법: 메서드 내부에서 새롭게 함수를 만들어서 전달하는 방법이다.<pre spellcheck="false"><code class="language-jsx">&lt;button onClick={()=&gt; this.handleClick()}&gt;증가&lt;/button&gt;
</code></pre>그러나 이 방법을 사용하게 되면 매번 렌더링이 일어날 때마다 새로운 함수를 생성해서 할당하게 되므로 최적화를 수행하기 매우 어려워진다.</li></ul></li></ul><h2>클래스 컴포넌트의 생명주기 메서드</h2>클래스 컴포넌트를 사용하면서 가장 많이 언급되는 것이 바로 생명주기이다. 클래스 컴포넌트는 많은 코드가 생명주기 메서드에 의존하고 있다.생명주기 메서드가 샐행되는 시점은 크게 3가지로 나눌 수 있다.<ul class="tight" data-tight="true"><li>마운트(mount): 컴포넌트가 마운트(생성)되는 시점<ul class="tight" data-tight="true"><li>가상 돔에 붙는 순간</li></ul></li><li>업데이트(update): 이미 생성된 컴포넌트 내용이 변경(업데이트)되는 시점<ul class="tight" data-tight="true"><li>상태나 UI가 변경이 될 때</li></ul></li><li>언마운트(unmount): 컴포넌트가 더이상 존재하지 않는 시점<ul class="tight" data-tight="true"><li>컴포넌트가 사라질 때, DOM 트리가 빠질 때</li></ul></li></ul><h3>render()</h3>리액트 클래스 컴포넌ㅌ의 유일한 필수 값으로 항상 쓰인다.목적: 컴포넌트 UI를 렌더링 하기 위해서 쓰인다.실행 시점: 마운트와 업데이트 과정에서 일어난다.💡 한가지 주의해야 할 점은 render() 함수는 항상 순수해야 하며 부수 효과가 없어야 한다.<blockquote>부수 효과가 있으면 return 값이 변경될 수 있기 때문에 화면에 나오는 부분을 예측할 수 있도록 순수해야 한다.</blockquote>같은 입력값(props 또는 state)이 들어가면 항상 같은 결과물을 반환해야 한다는 뜻이다. 따라서 render() 내부에서 state를 직접 업데이트하는 this.setState를 호출해서는 안된다.state를 변경하는 일은 클래스 컴포넌트의 메서드나 다른 생명주기 메서드 내부에서 발생해야 한다. 그러므로 이 함수는 항상 최대한 간결하고, 깔끔하게 작성하는 것이 좋다.<h3>componentDidMount()</h3>클래스 컴포넌트가 마운트되고 준비가 됐다면 그 다음으로 호출되는 메서드가 바로 componentDidMount()이다.목적: render와 다르게 내부에서, state 값을 변경할 수 있기 때문에 UI를 업데이트 하기 위해 쓰인다.실행 시점: 컴포넌트가 마운드되고 준비되는 즉시 실행된다.💡 componentDidMount는 만능이 아니며 성능 문제를 일으킬 수 있음에 주의하자.일반적으로 state를 다루는 것은 생성자(constructor)에서 하는 것이 좋다. componentDidMount에서 this.setState를 허용하는 것은 다음과 같다.<ol class="tight" data-tight="true"><li>생성자 함수에서 할 수 없는 것</li><li>API 호출 후 업데이트</li><li>DOM에 의존적인 작업</li></ol><h3>componentDidUpdate()</h3>목적: 일반적으로 state나 props의 변화에 따라 DOM을 업데이트하는 등에 쓰인다.실행 시점: 컴포넌트 업데이트가 일어난 이후에 바로 실행된다.💡 그러나 적절한 조건문으로 감싸지 않는다면 this.setState가 계속해서 호출되는 일이 발생할 수 있다.<h3>componentWillUnmount()</h3>목적: 메모리 누수나 불필요한 작동을 막기 위한 클린업 함수를 호출하기 위한 최적의 메소드다.실행 시점: 컴포넌트가 언마운트되거나 더 이상 사용되지 않기 직전에 호출된다.이 메서드 내에서는 this.setState를 호출할 수 없다, 다음과 같은 상황에서 주로 사용한다.<ol class="tight" data-tight="true"><li>이벤트 제거 (window.removeEventListener)</li><li>API 호출을 취소</li><li>setInterval, setTimeout으로 생성된 타이머 제거</li></ol><h3>shouldComponentUpdate()</h3>목적: state나 props 변경으로 리액트 컴포넌트가 다시 리렌더링되는 것을 막고 싶을 때 사용한다.실행 시점: this.setState가 호출되면 리렌더링을 일으킨다. 그러나 해당 생명주기 메서드는 컴포넌트에 영향을 받지 않는 변화에 대해 정의할 수 있다.💡 일반적으로 state 변화에 따라 컴포넌트가 리렌더링 되는 것은 굉장히 자연스러운 일이므로, 해당 메서드를 사용하는 것은 성능 최적화 상황에서만 고려해야 한다.앞서 클래스 컴포넌트에는 두가지 유형, 즉 Component와 PureComponent가 있다. 이 둘의 차이점이 바로 해당 생명주기를 다루는데 있다.Component의 경우 버튼을 누르는 대로 즉 state가 업데이트되는 대로 렌더링이 일어나지만, PureComponent는 state의 값이 업데이트되지 않아서 렌더링이 일어나지 않았다. PureComponent는 state 값에 대해 얕은 비교를 수행해 결과가 다를 때만 렌더링을 수행한다.PureComponent는 먼저 얕은 비교만 수행하기 때문에, state가 객체와 같이 복잡한 구조의 데이터 변경은 갑지하지 못하기 때문에 개발자가 생각한대로 제대로 작동하지 않는다. 또한 애플리케이션에서 대다수의 컴포넌트가 PureComponent로 구성돼있다면 오히려 성능에 역효과를 미칠 수 있다.<blockquote>PureComponent의 경우 객체의 참조값이 바뀌어야 업데이트 된다, hook의 경우는 객체의 참조값을 갈아치운다.</blockquote><h3>지금까지 언급한 생명주기 메서드 정리</h3>렌더단계: virtualDOM에서 그려지는 과정커밋단계: 실제 브라우저에 반영하는 단계<h3>static getDerivedStateFromProps()</h3>이제는 사라진 componentWillreceiveProps를 대체할 수 있는 메서드다.실행 시점: render()를 호출하기 직전에 호출된다.static으로 되어 있어 this에 접근할 수 없다. 여기서 반환하는 객체는 해당 객체의 내용이 모든 state로 들어가게 된다.💡 명심해야 할 점은 해당 메서드도 마찬가지로 모든 redner() 실행 시에 호출된다는 점이다.<h3>getSnapShotBeforeUpdate()</h3>최근에 도입된 메서드중 하나로, componentWillUpdate()를 대체할 수 있는 메서드다.실행 시점: DOM이 업데이트되기 직전에 호출된다.다음과 같은 상황에서 주로 사용한다.<ol class="tight" data-tight="true"><li>렌더링되기 전에 윈도우 크기를 조절</li><li>스크롤 위치 조정</li></ol><h3>⭐&nbsp;getDerivedStateFromError()</h3>목적: 자식 컴포넌트에서 에러가 발생했을 때 렌더링 하기 위해 사용한다.실행 시점: 자식 컴포넌트에서 에러가 발생했을 때 호출된다.getDerivedStateFromError(error)를 인수로 받는다. 여기서 error는 하위 컴포넌트에서 발생한 에러를 말한다.💡 getDerivedStateFromError는 반드시 state 값을 반환해야 하며, 부수효과를 발생해서는 안된다.그 이유는 getDerivedStateFromError의 실행시점 때문이다. 자식 컴포넌트에서 에러가 발생했을 때 어떻게 렌더링할 지 결정하는 용도로 제공되기 때문에 반드시 미리 정의해둔 state 값을 반환해야 한다.또한 여기서 말하는 부수효과란 에러에 따른 상태 state를 반환하는 것 외의 모든 작업을 의미한다. (ex. console.error)<h3>⭐&nbsp;componentDidCatch()</h3>해당 3가지 메서드 getSnapShotBeforeUpdate, getDerivedStateFromError, componentDidCatch는 아직 리액트 훅으로 구현돼 있지 않기 때문에 이 3가지 메서드가 필요하다면 반드기 플래스 컴포넌트를 사용해야 한다.목적: 자식 컴포넌트에서 에러가 발생했을 때 렌더링 하기 위해 사용한다.실행 시점: 자식 컴포넌트에서 에러가 발생했을 때 호출된다, getDerivedStateFromError에서 에러를 잡고 state를 결정한 이후에 실행된다.componentDidCatch(error, 어떤 컴포넌트가 에러를 발생시켰는지 해당 컴포넌트의 정보를 가지고 있는 info)를 인자로 받는다.💡 componentDidCatch는 getDerivedStateFromError에서 하지 못했던 부수 효과를 수행할 수 있다.getDerivedStateFromError는 렌더 단계에서 실행되지만, componentDidCatch는 커밋단계에서 실행디기 때문이다.일반적으로 앞의 두 메서드는 ErrorBoundary, 즉 에러 경계 컴포넌트를 만들기위해 많이 사용된다. 그러나 모든 에러를 잡아낼 수 있는 것은 아니다. ErrorBoundary 외부에 있는 에러는 잡을 수 없다.이를 반대로 생각하여 ErrorBoundary를 여러 개 선언해서 컴포넌트 별로 에러 처리를 다르게 적용할 수 있다. 이렇게 하면 에러가 발생한 컴포넌트 트리 영역만 별도로 처리해서 애플리케이션 전체에 에러가 전파되어 표시되는 것을 방지할 수 있다.<blockquote>해당 메서드는 주로 에러 로깅할 때 사용한다. (GA, Centry) → 특정 컴포넌트에서 어떠한 에러가 발생했는지 알 수 있기 때문</blockquote><h2>클래스 컴포넌트의 한계</h2><ul class="tight" data-tight="true"><li>데이터 흐름을 추적하기 어렵다.<ul class="tight" data-tight="true"><li>데이터를 바꿀 수 있는 위치가 너무 많다.(DidUpdate, DidMount…)</li></ul></li><li>애플리케이션 내부 로직의 재사용이 어렵다.<ul class="tight" data-tight="true"><li>로직을 재사용하려면 HOC를 통해 해결이 가능하지만, 고차 컴포넌트를 많이 감싸게 되면 래퍼 지옥에 빠져들 위험성이 커진다.</li></ul></li><li>기능이 많아질수록 컴포넌트의 크기가 커진다.</li><li>클래스는 함수에 비해 상대적으로 어렵다.</li><li>코드 크기를 최적화하기 어렵다.<ul class="tight" data-tight="true"><li>번들 크기를 줄이는 게 어렵다.</li></ul></li><li>핫 리로딩을 하는 데 상대적으로 불리하다.</li></ul><blockquote>트리 쉐이킹 → 나무를 흔든다 → 나무에 걸려있는게 떨어진다</blockquote>중복선언된 로직을 호이스팅 하여 미사용된 함수/변수를 지운다. (메모리 낭비이기 때문)변수명을 바꿔준다 → 변수 명을 길게 한 것을 최소화하기 위해<blockquote>핫 리로딩 → 변경사항이 일어나면, 앱을 다시 시작하지 않고서도 해당 변경된 코드만 업데이트하여 변경 사항을 빠르게 적용하는 기법</blockquote><h2>함수 컴포넌트</h2><ol class="tight" data-tight="true"><li>render 내부에 필요한 함수를 선언할 때 this 바인딩을 조심할 필요가 없음</li><li>state는 객체각 아닌 각각의 원시값으로 관리되어 훨씬 사용하기 편하다.</li><li>렌더링하는 코드인 return에서 굳이 this를 사용하지 않아도 props와 state에 접근할 수 있게 됐다.</li></ol>

0. 16.8버전 이전의 함수 컴포넌트0.14 버전에서 소개된 함수 컴포넌트는 staless functional component, 이른바 무상태 함수 컴포넌트였다. 별도의 상태 없이 단순히 어떠한 요소를 정적으로 렌더링하는 것이 목적이었다.즉, 함수 컴포넌트는 클래스 컴포넌트에서 별다른 생명주기 메서드나 상태가 필요없이 render만 하는 경우에만 제한적

2-3. 클래스 컴포넌트와 함수 컴포넌트

취미

<h3>HG x Minecraft Base 65 Keyboard - Grass Block 구매후기</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://higround.co/products/minecraft-x-hg-base-65-keyboard-grass-block">https://higround.co/products/minecraft-x-hg-base-65-keyboard-grass-block</a><hr>나는 몰랐다. 내가 마인크래프트 굿즈를 살줄... 근데 그게 키보드 일줄... 근데 그걸 직구를 할줄...나는 게임을 좋아하는데 마인크래프트랑 포켓몬을 좋아하는 편이다.하이그라운드에서는 둘다 판매를 한다. 키보드를 몇번 사봤다만, 화이트에 심플한 디자인만 사다가 애정하는 캐릭터들이 잔뜩 그려져 있는 키보드를 보니 눈이 돌아가는줄 알았다. 하이그라운드에는 그 외의 덕질하기 좋은 애니키보드도 많다.아주.. 뭔가 잘 아는 사람들인거같다... 음...어찌됐든 저찌됐든 7월 2일에 구매해서 7월 11일에 배송받앗다. 생각보다 빠르게 배송받았다.구매 과정에서 주문취소가 3번이나 되기도 했으며 영어로 메일을 보내기도 했고 그 과정을 좀 공유하려 한다.구매를 고민하는 분들 의사결정에 도움이 되길..<h1></h1><h1>결제금액</h1><img src="https://image.until.blog/dody/article/1720795464943" alt="until-819">패키지 보호? 저건 배송보험 인거같아서 소중히 제품을 받고 싶은 마음에 결제했다.키보드는 145달러 20만원 정도이고, 원래 쓰던 키보드들도 그정도 해서 크게 부담이 되진않았다.배송비는 5만원정도인데, 뭐 해외에서 오는 값 생각하면 비싸지만... 어쩔수 없다 생각...그렇게 25만원 정도로 구매를 했다.<h1>3번의 주문 취소</h1>나는 해외직구는 처음인데 결제정보를 제대로 입력했음에도 불구하고, 계속해서 취소되었다고 메일을 받았다. 주문하자마자 취소를 받았기 때문에.. 내가 잘못된 정보를 작성한건가? 싶어서 메일을 보냈다.<blockquote><h4>Why cancel my payment?</h4>I really want to buy it, but is there something I'm writing wrong? I'm curious what the problem is.</blockquote>딱 이렇게 본론만 적어 6월21일 메일을 보냈고, 아래 답장을 7월 2일에 받았다.한국의 고객센터와 같은 속도를 바라지 않았기 때문에 천천히 기다렸다. 그래도 친절하게 사유를 알려주셨고.. 자동플래그에서 나를 제외해서 결제하기에 문제가 없게 도와주셨다.내가 또 개발자이다 보니, 저러한 의사결정과 대응에 아주 만족하고 감사함을 느끼고 바로 주문을 다시 했고<img src="https://image.until.blog/dody/article/1720795636084" alt="until-820">드디어.. 결제가 성공했다7월 2일에 결제해서 7월 12일 퇴근하고 돌아오니 집앞에 택배가 와있었고, 바로 테스트 중이다.<h1>맥북과 호환</h1>아니 이것에 대해서는 고민조차 하지도 않았었다. 당연히 될줄 알았는데 window, alt, ctrl 키를 마주했을때는 조금 당황했을지도...처음에는 키가 완벽하게 작동하지 않아서 뭔가 잘못됐다 생각했는데,<a target="_blank" rel="noopener noreferrer nofollow" href="https://higround.co/blogs/hypegeek-update/how-to-connect-a-higround-keyboard-to-an-apple-macbook">https://higround.co/blogs/hypegeek-update/how-to-connect-a-higround-keyboard-to-an-apple-macbook</a>하이그라운드의 블로그 글을 참고해서 도움을 받았다.중간 부분에 Key Mapping 부분을 읽어보면 window는 command alt는 option의 역할을 하고 있다고 되어있어서, 두 위치를 바꿔주기만 하면 문제가 없다고 생각했다.system setting &gt; keyboard &gt; keyboard shortcuts 에서 수정이 가능하다.<img src="https://image.until.blog/dody/article/1720796773431" alt="until-821"><img src="https://image.until.blog/dody/article/1720796817271" alt="until-822">modifier keys &gt; select keyboard가 higround인걸 확인하고 option 과 command 키 위치를 바꿔주면 맥 호환은 완벽하게 된다.<h1>그래서 만족하는가?</h1>완전 대만족이다. 내가 구매한건 잔디블록의 키보드인데나는 식물을 좋아해서 식물의 갈색과 녹색을 좋아해서 나에게 이렇게 안성맞춤일수가 없다.<img src="https://image.until.blog/dody/article/1720795444318" alt="until-817">외관도 불투명 녹색? 못참지사실 박스를 오픈하면서도 감동을 받았는데 디테일이 좀 뛰어났음..<img src="https://image.until.blog/dody/article/1720796960599" alt="until-823"><img src="https://image.until.blog/dody/article/1720796970729" alt="until-824">ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ마인크래프트 화면 박스에 그려져 있는거 진짜 졸귀탱... 나도 다이아 검 가지고 싶어잉... &gt;0&lt;<img src="https://image.until.blog/dody/article/1720797000505" alt="until-825">키캡 제거나 하는 거나 usb to c케이블 들어있었다.이런 디테일이 예상치못한 감동을 만든다니까 정말..거기다가 키보드의 조명이 장난 아니다... 하이그라운드의 기술력인거같은데 되게 다양한 스타일의 조명을 제공해주는데, 나는 그냥 불빛만 전체적으로 나오는 키보드만 써봤지.. 이렇게 스타일리쉬한 조명이 나오는건 처음 봤는데 키보드 칠 맛이 난다.정말로 정말로 다양한 조명이 있다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://app.higround.co/">https://app.higround.co/</a>이곳에서는 조명 커스텀이 가능하다던데, find device에 내 기기가 뜨지 않아서 나는 안해봤다. 꼭 저걸 하지 않아도 키보드 단축키로 조명을 스위칭 할수 있기 때문에 앞으로 딱히 필요 없을듯하다.하여튼 오타쿠들 하이드라운드로 다 모여~~~~<h1>단점</h1><h3>1) 65키 괜춘?</h3>딱봐도 키가 65개에다가 콤팩트하기 때문에 손에 익지 않을사람은 안익을거같다. 나는 원래 텐키리스도 잘쓰던 사람이라 거의 바로 적응했다.흠... 오른쪽 쉬프트랑 방향키가 좀 킹받긴 하지만 뭐...할만하다.<h3>2) 백틱 위치 괜춘?</h3>물결이라던가 템플릿 리터럴 코드 쓸 때 좀 당황스럽다.백틱은 보통 esc 아래에 있는데, 이 키보드는 제일오른쪽상단에 위치한다.이게 당황스럽긴한데,왼손으로는 shift를 누르고 오른손으로는 백틱버튼을 누르면 생각보다 안정적이고 편하다... 백틱의 위치는 애초부터 이곳에 있는게 모두의 행복과 가까운게 아닐까 생각이 들 정도...<h1>결론</h1>그 외 단점은 없다.기계식 키보드의 스위치 종류에 빠삭하지는 못해서 자세히 평가를 내리진 못하겠지만,저소음적축만 사용하던 나였는데 그것보다는 경쾌하고 키압이 적은 편이다.히히 너무 만족스러운 소비였고 ~~ (이 물결 치면서도 백틱 위치 헷깔려서 삐끗함)마인크래프트 하러 가야겠다🪴🪴🪴

higround 마인크래프트 키보드를 산 사람이 있다? 

[취미]🌴 higround 마인크래프트 키보드 구매 후기 (맥북 호환)

Cloud Issue

<blockquote>Dawn입니다. 오늘은 업무를 하다 일어난 일을 정리하여 기록하려고 합니다. 부족한 제 글을 읽어주셔서 감사합니다. 😁</blockquote><h2>배경</h2>저희 회사는 멀티 클라우드(GCP, NCP) 기반 서비스를 운영하고 있습니다. 그 중 CDC 파이프라인은 대충 그리자면 아래와 같습니다. 따라서 사내 로그를 <code spellcheck="false">BigQuery</code>로 적재하기 위해서 적절한 <code spellcheck="false">Logging Sink</code>를 생성하는 것이 맞습니다. 그런데..아래와 같은 메일 내용이 전직원에게 전달되게 됩니다.(젠장..)<img src="https://image.until.blog/dawn-py/article/1727248513445.png" alt="until-1543">이 문제가 왜 발생했는지 원인을 파악하고 해결했던 방법에 대해서 작성해보도록 하겠습니다.(의외로 간단했다..)<h2>원인 파악</h2>이 오류의 원인은 <code spellcheck="false">gcloud</code> 로 싱크를 생성할 경우 <code spellcheck="false">BigQuery</code>내의 권한 부여(<code spellcheck="false">Data editor</code>)까지 자동으로 적용하지 않는 것이었습니다. 또한 Logging 서비스 에이전트(Logging Service Agent)와 밀접한 관련이 있는 오류였습니다. 그렇다면 Logging 서비스 에이전트가 뭘까요?<h3>Logging Service Agent</h3>정의하자면 GCP Logging을 포함한 Stack Driver API 내의 서비스를 참조 혹은 직접적으로 사용하게 될 경우 문제가 되지 않게 구글에서 자동으로 생성해주는 서비스 계정입니다.이전에는 Logging 싱크가 생성될 때마다 <code spellcheck="false">p{projectID}-{randomInt}@sa-googleapis.com</code> , 이런 형식으로 서비스 계정에 BigQuery 데이터 편집자 권한을 부여하고 싱크 프로젝트 단위로 생성해주었습니다.하지만 현재는 생성되는 싱크는 모두 <code spellcheck="false">service-{projectID}@sa-googleapis.com</code> , 형식의 공통의 서비스 계정을 참조하고 있고 이 계정을 Logging 서비스 에이전트라고 합니다. 아래는 Logging 싱크 생성 시 발생되는 상황을 시퀀스 다이어그램으로 정리한 그림입니다.<img src="https://image.until.blog/dawn-py/article/1727248529439.png" alt="until-1544">이 때 웹 콘솔과 <code spellcheck="false">gcloud</code>의 생크 생성 과정은 전혀 다른 로직을 타게 됩니다. 따라서 싱크를 생성했을 당시 CLI로 생성했기에 라우팅되는 로그를 실시간으로 적재하기 위해 Logging 서비스 에이전트의 서비스 계정을 찾아 최소 데이터셋에 대한 데이터 편집자 권한을 등록해야 했던 겁니다.<h2>오류 해결</h2><img src="https://image.until.blog/dawn-py/article/1727248585126.png" alt="until-1545"><blockquote>⚠️&nbsp;저희 팀은 GCP 관리자(Admin) 권한을 가지고 있기 때문에 IAM 관리 및 편집이 가능합니다. 만약 권한이 없다면 따로 요청을 해서 처리해야 할 것입니다. 이 점 참고바랍니다.</blockquote>IAM관리 탭에서 우리는 ‘Google 제공 역할 부여 포함’을 체크하게 되면 <code spellcheck="false">Logging 서비스 에이전트</code>에 등록된 서비스 계정을 확인할 수 있었고 해당 계정을 편집하여 BigQuery 데이터 편집자 역할까지 부여하게 되니 <code spellcheck="false">gcloud</code>로 생성 시 BigQuery 내에 테이블이 생성되는 것을 확인할 수 있었습니다.<blockquote>여기까지 부족한 글임에도 읽어주셔서 감사합니다. Dawn이었습니다. 😁</blockquote><hr><h2>참고 자료</h2><ul><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.google.com/logging/docs/routing/user-managed-service-accounts?hl=ko">사용자 관리형 서비스 계정으로 로그 싱크 구성 &nbsp;|&nbsp; Cloud Logging &nbsp;|&nbsp; Google Cloud</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://stackoverflow.com/questions/58899182/google-cloud-stackdriver-logging-log-export-to-bigquery-access-to-the-datase">Google Cloud Stackdriver Logging - Log Export to BigQuery - Access to the dataset was denied</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://stackoverflow.com/questions/61935273/google-cloud-creating-sink">Google Cloud - creating sink</a></li></ul>

GCP Logging Sink를 활용해 BigQuery에 로그를 적재하는 과정에서 발생한 권한 문제 해결 방안.

[GCP] Logging Sink 생성 시 오류 원인 파악

vscode

본인 환경에 따라 단축키가 다를 수 있다. <code spellcheck="false">command + p</code> 를 치고 <code spellcheck="false">&gt; open keyboard shortcuts</code> 으로 keyboard shortcut에 설정되어 있는 내용을 참고하자.<hr>코드 접기 (fold)<code spellcheck="false">option + command + [</code>코드 펼치기 (unfold)<code spellcheck="false">option + command + ]</code>

[vscode] VSCode 능률 높여주는 단축키 (모으는 중...)

🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716653810238" alt="until-223">나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.<h1>PowerToys?</h1>마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라면 꼭 설치하길 추천한다.이 아티클에서는 대표적으로 몇가지만 소개해보겠다.<h2>PowerToys Run</h2><code spellcheck="false">Alt</code> + <code spellcheck="false">Space</code> 를 통해 아래와 같은 검색창을 띄워준다. 맥하고 비슷하게 생겼다.<img src="https://image.until.blog/morethanmin/article/1716654162354" alt="until-225"><h2>Keyboard Manager</h2>키보드 키 및 단축키들을 쉽게 매핑해줄 수 있다. 우리는 이것을 사용해서 맥 단축키들을 적용시키면 된다.<img src="https://image.until.blog/morethanmin/article/1716654104729" alt="until-224"><h2>환경 변수</h2>환경변수를 GUI에서 쉽게 변경가능하다. 개꿀이다.<img src="https://image.until.blog/morethanmin/article/1716654251418" alt="until-226"><h2>호스트 파일 편집기</h2>호스트 파일을 GUI에서 변경이 가능하다.<img src="https://image.until.blog/morethanmin/article/1716654321543" alt="until-227"><h1>설치하기</h1>PowerShell에 아래 커맨드를 입력하면 된다.<pre spellcheck="false"><code>winget install Microsoft.PowerToys --source winget</code></pre><h1>적용</h1>사실 모든 단축키를 매핑할 순 없다보니, 적당한 수준에서 본인이 주로 사용하는 단축키를 설정해주면 된다.나는 아래와 같이 적용했다. 귀찮은 사람은 참고하면 좋을뜻<img src="https://image.until.blog/morethanmin/article/1716654467615" alt="until-228">

나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.PowerToys?마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라

윈도우에서 맥 단축키 적용하기(PowerToys)

MakeGame

안녕하세요! 오늘은 이전 <a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@sin0105/%ED%8D%BC%EC%A6%90-%EA%B2%8C%EC%9E%84-%EC%A0%9C%EC%9E%91">아티클</a>에 이어서 작업 포스팅을 남겨보려합니다! 이번 포스팅엔, 아래 두 개만 완성하고 최종 결과물까지 올려보겠습니다! 1. 인접 구슬 파괴 로직 구현 2. 위에 연결된 구슬이 없을 경우, 이하 아래 모든 구슬 파괴로직 구현 ( 중력 )<h3>인접 구슬 파괴 로직 구현</h3>사실 탐색 로직으로는 여러가지 방법으로 구현할 수 있다고 생각하고 있습니다. 이런 게임의 경우는 주변 탐색을 먼저 하는게 효율적이라고 생각해서 저는 BFS 를 선택하여 구현했고, 당연하지만 DFS도 가능할 거에요. 이런 구슬을 레일 태우는 형식이 아니라, 미리 게임보드를 만들어서 베이스를 만들어둔 구조라면, 아래로 뻗어나가는 구조로 부모를 찾아가는 탐색 방식인 BST 등이 가능할 것으로 보입니다.사실 제일 먼저 생각난 부분은 모두 부모와 2개의 자식을 연결하는 BST 형식으로 생각했는데, 구현하려는 내용이 트리로 매핑하면 너무 컨트롤하기 어려워서 게임보드 안만들고 BFS 형식으로 진행했어요.먼저 BFS 의 개념은 이전에 포스팅한 내용이 있는데, <a target="_blank" rel="noopener noreferrer nofollow" href="https://sjh0105.tistory.com/186">링크</a>를 들어가보시면 간단하게 설명해두었습니다. 플로우는 다음과 같습니다. 1. 각 구슬의 타입을 RED, YELLOW, BLUE 로 설정 2. 내가 선택한 구슬의 GameObject 값을 기준으로 탐색할 버블의 리스트를 가져온다. 3. 내 주변의 버블을 큐에 담아두고, 내 기준 Position 에서 지름(r = 0.55f) + 오차(0.2f)내에 있는 버블들 중 내가 선택한 컬러 타입과 같은 버블은 파괴 예정 리스트에 넣는다. 4. 이렇게 파괴 예정 리스트가 최소 폭발 갯수 (3개) 이상이라면 파괴를 확정하고 파괴 시킨다. <img src="https://image.until.blog/sin0105/article/1723821556125" alt="until-1239">여기서 1,2,3 기준으로 파괴 예정 리스트에 넣을 거에요. 1,2,3 으로 해도 상관없고 1,3,2 로 터져도 상관은 없습니다. 어차피 지름 내 같은 컬러는 다터져야해서 다 탐색을 하긴 해야해요. 결과는 아래와 같습니다.<img src="https://image.until.blog/sin0105/article/1723821674354" alt="until-1240">의도한대로, 3개를 클릭 했을 때 잘 터지고 있네요.<h3>위에 연결된 구슬이 없을 경우, 이하 아래 모든 구슬 파괴로직 구현 ( 중력 )</h3>사실 이 부분을 만들면서 엄청 많이 고민했습니다. 이 부분 때문에 게임 보드판을 만들어서 트리처럼 만들어서 확인을 해야하나 싶기도했고, 터진 기준으로 윗 부분에 가로형 레이를 쏴서 없다면 중력 적용을 해서 파괴를 할까 싶기도 했습니다.여러가지 방법들이 있을 것이지만, 제가 만드는 스테이지는 일반적인 퍼즐버블의 스테이지랑은 조금 거리가 있어서 스폰을 담당하는 스포너 기준으로 상위부터 쭉 탐색을 진행하고, 탐색한 리스트에 없으면 연결된 버블이 없는 것으로 판단, 즉 떨어져 있는 부분으로 판단하여 파괴하는 로직을 작성하여 중력을 적용하였습니다. 구상도는 아래와 같습니다.<img src="https://image.until.blog/sin0105/article/1723822978054" alt="until-1241">그림판이라 이해가 어려울 수도 있는데, 설명해보면, 아래 주황색 그룹이 버블이 3개가 탐색되어 터집니다. 이 버블은 중력 탐색 이전에 파괴하고 넘어가야 이상한 연산이 진행되지 않아, 확실히 파괴하고 없는 상태에서 스포너의 우측 기준 Start 버블로부터 시작하여 탐색을 시작합니다. 왼쪽은 똑같아서 생략했는데, 왼쪽도 같이 시작해줍니다. 계속 탐색하게되면 결국 Pop Group이 비어있는 관계로 BFS Group 만 탐색이 됩니다. 이후에, 탐색된 버블에 존재하지 않을 시, 중력을 적용하여 파괴하도록 합니다. 터진 부분을 기준으로 탐색하는 이런 방법도 가능은 한것 같다고는 생각해요.<img src="https://image.until.blog/sin0105/article/1723823713788" alt="until-1243">설명을 해보자면, 터진 기준으로 큰 원을 만들어서 주변에 내부에 들어오는 버블을 가져와서 있는지 탐색하는 것 입니다. 당연하게도 아래는 중력을 같이 받는 입장이니까 UP 벡터와 방향벡터의 각도를 구하면 굳이 ArcCos 의 0 ~ 180 각도로도 좌측으로 가던, 우측으로 가던, 90도 이상(정확히는 우상단 좌상단 체크이기 때문에 50도 정도면 된다고 생각) 은 모두 필터링 해버리면 되니까 내적으로만해서 구하면 쉽게 필터링 될것 같네요. 단, 이렇게 탈락한 친구들은 파괴 예정 리스트에 넣어서 파괴할 준비를 해야합니다. 이게 전체의 버블을 탐색하여 리스트를 만들고 O(N^2) 의 시간복잡도를 갖는것보다는 훨씬 합리적이라고 생각합니다. 현재 게임에 적용된건 1번이긴 하지만 차차 다듬어가면 되겠네요.<h3>핵심 로직 끝, 결과는?</h3>퍼즐 버블 스타일의 게임을 간단하게 3일도 안되는 시간으로 타이트하게 구현을 해보았습니다. 이펙트도 달고, 배경도 바꿨는데, 나름 부족한 부분도 있지만, 시간대비 게임의 형태는 나온것 같아 만족스럽습니다.<img src="https://image.until.blog/sin0105/article/1723825023212" alt="until-1244"><img src="https://image.until.blog/sin0105/article/1723825032685" alt="until-1245">이렇게 이번엔 퍼즐게임 만들어 보았고, 긴 글 읽어주셔서 감사합니다!

퍼즐 버블 스타일 게임 제작 - 2

퍼즐 게임 제작 - 2

<img src="https://image.until.blog/morethanmin/article/1716045513650" alt="until-71">항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.<h2>fnm이란?</h2>노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.<h2>winget으로 fnm 설치하기</h2>파워쉘에서 아래와 같이 입력하여 설치할 수 있다.<pre spellcheck="false"><code>winget install Schniz.fnm</code></pre><h3>0x8a15000f 오류가 발생하는 경우</h3>마이크로소프트 스토어에서 앱 설치 관리자를 업데이트 해주면 된다.<img src="https://image.until.blog/morethanmin/article/1716045690970" alt="until-72"><h2>fnm으로 node 설치하기</h2><h3>프로필 설정</h3>우선 <code spellcheck="false">PowerShell</code>프로필에 환경변수를 등록해야한다.<code spellcheck="false">~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1</code> 경로에 아래와같이 입력 해주면 된다.<pre spellcheck="false"><code>fnm env --use-on-cd | Out-String | Invoke-Expression</code></pre><h3>PowerShell 실행시 PSSecurityException 오류가 발생하는 경우</h3>기본적으로 스크립트 삽입하는 것이 막혀있기 때문에 설정을 바꿔줘야한다.관리자 권한으로 <code spellcheck="false">PowerShell</code> 을 실행해서 아래와 같이 입력한다.<pre spellcheck="false"><code>Set-ExecutionPolicy RemoteSigned</code></pre><h3>node 설치</h3>이제 <code spellcheck="false">PowerShell</code> 을 재부팅하고 아래와 같이 입력해 노드를 설치하면된다.<pre spellcheck="false"><code>fnm use --install-if-missing 20</code></pre><hr>그럼 이제 node를 사용할 수 있다! 근데 PowerShell도 그렇고 여러 이슈들도 그렇고 좀 귀찮은 것 같다. 좀 더 사용해보다가 정 안되면 wsl을 사용해야겠다.

항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn

윈도우에서 winget으로 fnm 설치하기 (Fast Node Manager)

⚛️ React

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/FiloSottile/mkcert">mkcert</a>를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://opentutorials.org/course/228/4894">해당 아티클</a>을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이다.<h1>mkcert?</h1>레포에서는 아래와 같이 설명하고 있다.<blockquote>A simple zero-config tool to make locally trusted development certificates with any names you'd like.</blockquote>해당 내용처럼 mkcert는 로컬 개발환경에서 사용할 수 있는 인증서를 별다른 설정없이 손쉽게 만들 수 있다.<h1>mkcert 설치</h1><h2>window</h2><code spellcheck="false">readme.md</code> 상으로는 choco나 scoop를 사용해서 설치하는 것을 권하지만, 내장되어있는 winget을 사용하면 별다른 프로그램 없이 바로 설치가 가능하다.아래 명령어를 입력해주자.<pre spellcheck="false"><code>winget install mkcert</code></pre><h2>mac</h2>homebrew로 설치해주면 된다.<pre spellcheck="false"><code>brew install mkcert</code></pre><hr>설치가 끝났다면 아래 커맨드를 통해 local ca를 설치해준다.<pre spellcheck="false"><code>mkcert -install</code></pre><h1>인증서 생성 및 적용</h1><h2>로컬 도메인 적용</h2>특정 도메인에 대해서 https를 적용해주어야하기 때문에 hosts 파일을 수정해주어야한다.본인의 로컬아이피로 접속했을 때 사용할 도메인을 hosts파일에 저장해주자. 윈도우는 기본적으로 <code spellcheck="false">c:\Windows\System32\drivers\etc</code>, mac은<code spellcheck="false">/private/etc/hosts</code> 에 위치하고 있으니 해당 파일을 수정해주면 될 것이다.나는 dev.until.blog를 적용했다.<pre spellcheck="false"><code># Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
localhost name resolution is handled within DNS itself.127.0.0.1 localhost::1 localhost127.0.0.1 dev.until.blog</code></pre><h2>next local server 연동</h2>이제 next.js 프로젝트에서 인증서를 적용해보자. 본인 next 프로젝트에서 아래 커멘드를 입력해 인증서와 pem 파일을 생성해주자. dev.until.blog에는 본인이 특정한 도메인을 입력하면 된다.<pre spellcheck="false"><code>mkcert dev.until.blog</code></pre><a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/building-your-application/configuring/custom-server">next custom server</a>를 통해 생성된 파일을 연결해주면된다.<pre spellcheck="false"><code class="language-javascript">// server.jsconst { parse } = require('url')
const next = require('next')const dev = process.env['NODE_ENV'] !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()const PORT = process.env['PORT'] || 3050app.prepare().then(() =&gt; {
const https = require('https')
const fs = require('fs')
const options = {
key: fs.readFileSync('./dev.until.blog-key.pem'),
cert: fs.readFileSync('./dev.until.blog.pem'),
}
https
.createServer(options, function (req, res) {
// Be sure to pass true as the second argument to url.parse.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
})
.listen(PORT, (err) =&gt; {
if (err) throw err
console.log(&amp;gt; Ready on https://dev.until.blog:${PORT})
})
})</code></pre>이제 package.json에 해당 <code spellcheck="false">dev:https</code>스크립트를 추가해주고 실행하면 끝.<pre spellcheck="false"><code> ....."scripts": {
"dev": "next dev -p 3050",
"dev:https": "node --inspect server.js ",
"build": "next build",
"start": "next start",
"lint": "next lint"
},.....</code></pre>

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이

next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)

<h2>DOM과 브라우저 렌더링 과정</h2>DOM은 웹 페이지에 대한 인터페이스로 브라우저가 웹 페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.<ol><li>HTML 파일 다운로드</li><li>브라우저 렌더링 엔진은 HTML을 파싱해 DOM노드로 구성된 트리를 만든다.</li><li>2번 과정에서 CSS 파일을 만나면 해당 CSS 파일도 다운로드한다.</li><li>브라우저 렌더링 엔진은 이 CSS도 파싱해 CSS 노드로 구성된 트리를 만든다.</li><li>2번에서 만든 DOM 노드를 순회하는데, 여기서 모든 노드를 방문하는 것이 아닌 사용자 눈에 보이는 노드만 방문한다. 즉, <code spellcheck="false">display:none;</code>과 같이 사용자 화면에 보이지 않는 요소는 방문하지 않는다.→ 트리를 분석하는 과정을 조금이라도 빠르게 하기 위해서</li><li>5번에서 제외된, 눈에 보이는 노드들 대상으로 CSS 스타일 정보를 노드에 적용한다.<ul class="tight" data-tight="true"><li>레이아웃: 각 노드가 브라우저 화면의 어느 좌표에 정확히 나타나야 하는지 계산하는 과정<ul class="tight" data-tight="true"><li>레이아웃 과정을 거치면 반드시 페인팅 과정도 거치게 됨</li></ul></li><li>페인팅: 레이아웃 단계를 거친 노드에 색과 같은 실제 유효한 모습을 그리는 과정</li></ul></li></ol><h3>reflow(layout)</h3><blockquote>뷰포트 내에서 렌더 트리상 노드의 정확한 위치와 크기를 계산하는 과정이다.</blockquote><ul class="tight" data-tight="true"><li>윈도우 리사이징</li><li>폰트 변화</li><li>스타일 추가 또는 제거</li><li>:hover와 같은 CSS Pseudo Class(의사 클래스)</li><li>JS를 통한 DOM 동작 변화</li><li>등등..</li></ul><h3>reflow 최적화</h3><ol><li>인라인 스타일 자제인라인 스타일은 HTML이 파싱될 때, 레이아웃에 영향을 미쳐 추가 리플로우를 발생시킨다.</li><li>js를 통해 스타일 변화를 주어야할 경우 가급적 한번에 처리해라.특정 요소에 여러 스타일 변화를 지정해야 할 경우 한번에 처리하면 중복된 reflow를 최소화할 수 있다.<pre spellcheck="false"><code class="language-jsx">var toChange = document.getElementById('elem');
toChange.style.background = '#333';
toChange.style.color = '#fff';
toChange.style.border = '1px solid #ccc';
</code></pre><pre spellcheck="false"><code class="language-jsx">/* CSS */
#elem { border:1px solid #000; color:#000; background:#ddd; }
.highlight { border-color:#00f; color:#fff; background:#333; }
/* js */
document.getElementById('elem').className = 'highlight';
</code></pre></li><li>하위 선택자를 최소화 한다.CSS 하위 선택자를 최소화 하는 것이 렌더링 성능에 더 좋다.CSS 하위 선택자가 많아지면 CSSOM 트리의 깊이(Depth)가 깊어지게 되고 결국 렌더 트리를 만드는 시간이 더 오래 걸리게 된다.<pre spellcheck="false"><code class="language-jsx">/* 잘못된 예 */
.reflow_box .reflow_list li .btn{
 display:block;
}
/* 올바른 예 */
.reflow_list .btn {
 display:block;
}
</code></pre></li><li>숨겨진 노드의 스타일을 변경한다.<code spellcheck="false">display: none</code> 으로 숨겨진 노드를 변경할 때는 reflow가 발생하지 않는다. 숨겨진 노드를 표시하기 전에 노드의 컨텐츠를 먼저 변경한 후 화면에 나타내면 reflow를 줄일 수 있다.</li></ol><h3>repaint</h3><blockquote>레이아웃에 영향을 미치지 않고 요소의 외관을 변경하는 과정이다</blockquote><ul class="tight" data-tight="true"><li>요소 색상 지정 (background-color, color)</li><li>visibility</li></ul><a target="_blank" rel="noopener noreferrer nofollow" href="https://devowen.com/463">Reflow와 Repaint에 대하여</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://csstriggers.com/">CSS Triggers List - What Kind of Changes You Can Make</a><h3>CLS (Cumulative Layout Shift) → 누적 레이아웃 시프트</h3><blockquote>Layout Shift란 페이지 콘텐츠가 예기치 않게 이동하는 현상이다.</blockquote>보통 리소스가 비동기 식으로 로드되거나 DOM 요소가 동적으로 추가되어 발생한다.<blockquote>CLS는 페이지 수명 동안 발생하는 모든&nbsp;<a target="_blank" rel="noopener noreferrer nofollow" href="https://web.dev/articles/cls?hl=ko#expected-unexpected-layout-shifts">예상치 못한</a>&nbsp;레이아웃 변경에 관한&nbsp;레이아웃 변경 점수의 가장 큰 버스트를 측정한 것입니다. → layout shift 현상을 측정한 것</blockquote>계산방법<blockquote>브라우저는 표시 영역 크기 및 렌더링된 두 프레임 간 표시 영역 내 불안정한 요소의 이동을 고려합니다.</blockquote>레이아웃 변경 점수는 이동의 두 가지 측정값, 즉&nbsp;영향 비율과&nbsp;거리 비율의 곱입니다. = 영향 비율 * 거리 비율<pre spellcheck="false"><code class="language-jsx">layout shift score = impact fraction * distance fraction
</code></pre>기존 영역 = 50%이동된 거리 비율 = 25%영향 비율 = 75%0.75 * 0.25 = 0.1875의 레이아웃 변경 점수 측정💡 좋은 CLS 점수는 0.1 이하여야 한다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://web.dev/articles/cls?hl=ko">Cumulative Layout Shift (CLS) &nbsp;|&nbsp; Articles &nbsp;|&nbsp; </a><a target="_blank" rel="noopener noreferrer nofollow" href="http://web.dev">web.dev</a><h2>Virtual DOM (가상 돔)</h2><h3>가상돔의 배경</h3>앞서 본것처럼 브라우저가 웹 페이지를 렌더링 하는 과정은 매우 복잡하고 많은 비용이 든다.MPA의 경우는 다른 페이지로 가서 처음부터 HTML을 새로 받아서 다시금 렌더링 과정을 시작한다. 하지만 SPA의 경우 계속해서 요소의 위치를 재계산하기 때문에 렌더링 이후 추가 렌더링 작업이 많아진다.SPA는 하나의 페이지로 페이지 이동 깜빡임 없이 자연스러운 탐색이 가능하지만, 그만큼 DOM을 관리하는 과정에서 부담해야 할 비용이 커진다.개발자 입장에서 생각해보면 개발자는 인터렉션에 모든 DOM의 변경보다는 결과적으로 만들어지는 DOM 결과물 하나만 알고 싶을 것이다. 이러한 문제점을 해결하기 위해 탄생한 것이 바로 가상 DOM이다.<h3>가상돔</h3><blockquote>가상 DOM은 실제 브라우저의 DOM이 아닌 리액트에서 관리하는 가상의 <s>DOM</s> 객체을 의미한다.</blockquote>가상 DOM은 웹페이지가 표시해야 할 DOM을 일단 메모리에 저장하고, 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저의 DOM에 반영한다.💡 리액트의 이러한 방식이 일반적인 DOM을 관리하는 브라우저보다 빠르다는 오해가 있다.가상 DOM 방식은 브라우저 DOM보다 무조건 빠른 것이 아니라 웬만한 애플리케이션을 만들 수 있을 정도로 충분히 빠르다는 것이다.<h2>리액트 파이버</h2>그렇다면 이러한 가상 DOM을 만드는 과정을 리액트에서 어떻게 처리하고 있을까?이러한 가상 DOM과 렌더링 과정 최적화를 가능하게 해주는 것이 바로 리액트 파이버다.<h3>리액트 파이버란?</h3><blockquote>리액트에서 관리하는 평범한 자바스크립트 객체다.<ul class="tight" data-tight="true"><li>파이버 재조정자에 의해 관리된다.</li><li>재조정이라는 용어는 가상 DOM과 실제 DOM을 비교하는 작업(알고리즘)이라고 이해하면 된다.</li></ul></blockquote><ul class="tight" data-tight="true"><li>가상 DOM과 실제 DOM을 비교하며 변경사항을 수집한다<ul class="tight" data-tight="true"><li>이 둘 사이에 차이가 있으면 변경에 관련된 정보를 가지고 있는 파이버를 기준으로 화면에 렌더링을 요청한다.</li></ul></li></ul><h3>파이버의 배경</h3>파이버는 다음과 같은 일을 할 수 있다.<ol class="tight" data-tight="true"><li>작업을 작은 단위로 분할하고 쪼갠 다음, 우선순위를 매긴다.</li><li>이러한 작업을 일시중지하고 나중에 다시 시작할 수 있다.</li><li>이전에 했던 작업을 다시 재사용하거나 필요하지 않은 경우에는 폐기할 수 있다.</li></ol>💡 여기서 중요한 것은 이러한 모든 과정이 비동기로 일어난다는 것이다.과거의 알고리즘이전에는 조정 알고리즘이 스택 알고리즘으로 이루어있었다.렌더링에 필요한 작업이 쌓이면 해당 스택이 빌 때 까지 동기적으로 작업이 이루어지게 된다.한계자바스크립트의 특징인 싱글 스레드라는 점으로 인해 동기 작업이 중단될 수 없고, 다른 우선순위가 높은 작업이 수행되고 싶어도 중단할 수 없어 리액트의 비효율성으로 이어졌다.이러한 기존 렌더링 스택의 비효율성을 해결하기 위해 파이버라는 개념이 탄생된 것이다.<h3>파이버의 동작 과정(리액트의 생명주기)</h3><ol class="tight" data-tight="true"><li>파이버는 일단 하나의 작업 단위로 구성되어 있다.</li><li>이러한 작업 단위를 하나씩 처리하고 <code spellcheck="false">finishedWork()</code> 라는 작업으로 마무리 한다.</li><li>이 작업을 커밋해 실제 브라우저 DOM에 가시적인 변경사항 만들어 낸다.</li></ol>이러한 단계는 다음 두 단계로 나눌 수 있다.<ul><li>렌더 단계랜더 단계에서 사용자에게 노출되지 않는 모든 비동기 작업을 수행한다. 앞서 말한 파이버의 작업, 우선순위 지정/중지/삭제 등의 작업이 일어난다.</li><li>커밋 단계DOM에 실제 변경 사항을 반영하기 위한 작업니다.<code spellcheck="false">commitWork()</code>가 동기적으로 실행되어 해당 과정은 중단될 수 없다.</li></ul>💡 파이버의 실제 구조를 보면 리액트의 요소와 유사하다고 느낄 수 있지만, 중요한 차이점은 리액트 요소는 렌더링이 발생할 때 마다 새롭게 생성되지만, 파이버는 가급적이면 재사용된다는 사실이다.파이버는 컴포넌트가 최초로 마운트되는 시점에 생성되어 이후에는 가급적이면 재사용된다.<ol class="tight" data-tight="true"><li>state가 변경</li><li>생명주기 메서드가 실행</li><li>DOM의 변경이 필요한 시점</li></ol>등에 실행된다.최적화<ul class="tight" data-tight="true"><li>작은 단위로 나눠서 처리</li><li>우선순위가 높은 작업은 가능한 한 바르게 처리</li><li>낮은 작업을 연기</li></ul>시키는 등 좀 더 유연하게 처리된다.<h3>리액트 파이버 트리</h3>파이버 트리는 리액트 내부에서 두 개가 존재한다.<ol class="tight" data-tight="true"><li>현재 모습을 담은 파이버 트리</li><li>작업 중인 상태를 나타내는 <code spellcheck="false">workInProgress</code> 트리</li></ol>리액트 파이버 작업이 끝나면 리액트는 단순히 <code spellcheck="false">workInProgress</code> 트리를 현재 트리로 변경한다.이러한 기술을 더블 버퍼링이라고 한다.그래픽 처리의 문제점그래픽을 통해 화면에 표시되는 것을 그리기 위해서 내부적으로 처리하던 중, 사용자에게 미처 다 그리지 못한 모습을 보는 경우가 발생하게 된다.(한번에 모든 작업을 마무리할 수 없기 때문)더블 버퍼링?그래서 이러한 상황을 방지하기 위해 보이지 않는 곳에서 그림을 미리 그린 다음, 해당 그림이 완성되면 현재 상태를 새로운 그림으로 바꾸는 기법을 의미한다.리액트에서도 마찬가지로 불완전한 트리를 노출시키지 않도록 더블 버퍼링 기법을 사용한다. 이러한 더블 버퍼링을 위해 두개의 트리가 존재하며, 더블 버퍼링은 커밋 단계에서 수행된다.즉, 먼저 현재 렌더링을 위해 존재하는 트리인 current를 기준으로 모든 작업이 시작된다.<ol class="tight" data-tight="true"><li>업데이트가 발생하면, 파이버는 리액트에서 새로 받은 데이터로 새로운 <code spellcheck="false">workInProgress</code> 트리 빌드</li><li><code spellcheck="false">workInProgress</code> 빌드가 완료되면, 다음 렌더링에 해당 트리를 사용한다.</li><li><code spellcheck="false">workInProgress</code> 트리가 UI에 최종적으로 렌더링이 반영되면</li><li>current가 <code spellcheck="false">workInProgress</code>로 변경된다.</li></ol><h3>파이버의 작업 순서</h3><ol class="tight" data-tight="true"><li>리액트는 <code spellcheck="false">beginWork()</code> 함수를 실행해 파이버 작업을 수행하는데, 더 이상 자식이 없는 파이버를 만날 때 까지 트리 형식으로 시작된다.</li><li>1번에서 작업이 긑난다면 그 다음 <code spellcheck="false">completeWork()</code> 함수를 실행해 파이버 작업을 완료한다.</li><li>형제가 있다면 형제로 넘어간다.</li><li>2, 3번이 끝났다면 return으로 돌아가 자신의 작업이 완료됐음을 알린다. → <code spellcheck="false">commitWork()</code>가 수행되어 변경사항이 DOM에 반영</li></ol>이제 여기서 setState 등으로 업데이트가 발생하면 어떻게 될까?<ol class="tight" data-tight="true"><li>앞서 만든 current 트리가 존재함</li><li>setState로 인한 업데이트 요청을 받아 <code spellcheck="false">workInprogress</code> 트리를 다시 빌드하기 시작한다.</li><li>최초 렌더링 시에는 모든 파이버를 새롭게 만들어야 했지만, 최초 렌더링 이후에는 파이버가 이미 존재하므로 되도록 새로 생성하지 않고 기존 파이버에서 업데이트된 props를 받아 파이버 내부에서 처리한다.</li></ol>💡 가급적 새로운 파이버를 생성하지 않는다.새롭게 파이버 자바스크립트 객체를 만드는 것은 리소스 낭비라고 볼 수 있다.<h2>마무리</h2>컴포넌트에 대한 정보를 1:1로 가지고 있는 것이 파이버이며, 이 파이버는 내부에서 비동기로 이루어진다.실제 브라우저 구조인 DOM에 반영하는 것은 동기적으로 일어난다.또 처리하는 작업이 많을 때 DOM 트리가 불완전할 수 있으므로, 메모리상에서 먼저 수행 후 최종적인 결과물만 실제 브라우저 DOM에 적용한다.💡 화면에 표시되는 자바스크립트의 문자열, 배열 등과 마찬가지로 값으로 관리하고 이러한 흐름을 효율적으로 관리하기 위한 메커니즘이 바로 리액트의 핵심이다. (값으로 UI를 표현하는 것)<h3>새로 알게 된 점</h3><ul class="tight" data-tight="true"><li>CLS의 계산 방법</li><li>reflow 최적화 방법</li><li>파이버의 두가지 동작 과정 (렌더/커밋 단계)</li><li>더블 버퍼링</li></ul>

2-2. 가상 DOM과 리액트 파이버

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/1427">1427.소트인사이트</a></li><li>사용언어 : C#</li><li>난이도 : 하</li><li>풀이시간 : 10m</li><li>유형 : 문자열, 정렬</li></ul><h2>문제</h2>배열을 정렬하는 것은 쉽다. 수가 주어지면, 그 수의 각 자리수를 내림차순으로 정렬해보자.<h2>입력</h2>첫째 줄에 정렬하려고 하는 수 N이 주어진다. N은 1,000,000,000보다 작거나 같은 자연수이다.<h2>출력</h2>첫째 줄에&nbsp;자리수를 내림차순으로 정렬한 수를 출력한다.<h2>예제 입력 1 </h2><pre spellcheck="false"><code>2143</code></pre><h2>예제 출력 1 </h2><pre spellcheck="false"><code>4321</code></pre><h2>예제 입력 2 </h2><pre spellcheck="false"><code>999998999</code></pre><h2>예제 출력 2 </h2><pre spellcheck="false"><code>999999998</code></pre><h2>예제 입력 3 복사</h2><pre spellcheck="false"><code>61423</code></pre><h2>예제 출력 3 복사</h2><pre spellcheck="false"><code>64321</code></pre><h2>예제 입력 4 복사</h2><pre spellcheck="false"><code>500613009</code></pre><h2>예제 출력 4 복사</h2><pre spellcheck="false"><code>965310000</code></pre><h3>문제 풀이 접근</h3>이 문제의 요구사항은 단순 내림차순 정렬하여 출력이 끝이다. 두가지 방법으로 풀어봤는데, 원리는 똑같은데 스텝을 넣느냐 안넣느냐 차이다. 0번, 1번은 동일한데, 0번은 최대한 숏코딩, 1번은 일반적으로 풀이한 것이다.방법론은 아래와같다.<ol><li>내림차순 조건자를 애초에 넣어서 정렬 기준을 잡아준다.</li><li>오름차순으로 정렬한 후 reverse 한다.</li></ol>되도록 조건자를 잡는방법을 안다면 1번이 한번에 정렬되어서 더 효율이 빠르다. 2번은 정렬하고 뒤집는 연산도 들어가기 때문에 비교적 느리다.<h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices;
using System.Security.AccessControl;
using System.Security.Authentication;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Xml.Linq;
using static CodingTestProj.Program;

/*
 * Difficulty : Easy
 * URL : https://www.acmicpc.net/submit/1427
 */


namespace CodingTestProj
{
 internal class Program
 {
 static void Main(string[] args)
 {
 //Case 0 _ Short
 char[] convertC = Console.ReadLine().ToCharArray();
 Array.Sort(convertC, (x, y) =&gt; { return y.CompareTo(x); });
 Console.WriteLine(convertC);

 //Case 1
 //string input = Console.ReadLine();
 //char[] convertC = input.ToCharArray();
 //Array.Sort(convertC,(x,y) =&gt; { return y.CompareTo(x); });
 //Console.WriteLine(convertC);

 //Case2
 //string input = Console.ReadLine();
 //char[] convertC = input.ToCharArray();
 //var revertC = convertC.Reverse();
 //foreach(var element in revertC)
 //{
 // Console.Write(element);
 //}
 }
 }
}
</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1726822311836.png" alt="until-1409">

혼자서 다시푸는 코딩테스트 준비 일지 - 24

코딩테스트 준비 - 소트인사이드

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></li><li>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/21736">21736.헌내기는 친구가 필요해</a></li><li>사용언어 : C#</li><li>난이도 : 중하</li><li>풀이시간 : 미측정</li><li>유형 : DFS, BFS, 그래프 이론</li></ul><h2>문제</h2>2020년에 입학한 헌내기 도연이가 있다. 도연이는 비대면 수업 때문에 학교에&nbsp;가지 못해 학교에 아는 친구가 없었다. 드디어 대면 수업을 하게 된 도연이는 어서 캠퍼스 내의 사람들과 친해지고 싶다.&nbsp;도연이가 다니는 대학의 캠퍼스는 N×M<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>N</mi><mo>×</mo><mi>M</mi></mrow><annotation encoding="application/x-tex">N \times M</annotation></semantics></math>N×M 크기이며&nbsp;캠퍼스에서 이동하는&nbsp;방법은 벽이 아닌 상하좌우로 이동하는 것이다. 예를 들어, 도연이가 (x<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi></mrow><annotation encoding="application/x-tex">x</annotation></semantics></math>x, y<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>y</mi></mrow><annotation encoding="application/x-tex">y</annotation></semantics></math>y)에 있다면 이동할 수 있는 곳은 (x+1<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow><annotation encoding="application/x-tex">x+1</annotation></semantics></math>x+1, y<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>y</mi></mrow><annotation encoding="application/x-tex">y</annotation></semantics></math>y), (x<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi></mrow><annotation encoding="application/x-tex">x</annotation></semantics></math>x, y+1<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>y</mi><mo>+</mo><mn>1</mn></mrow><annotation encoding="application/x-tex">y+1</annotation></semantics></math>y+1), (x−1<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi><mo>−</mo><mn>1</mn></mrow><annotation encoding="application/x-tex">x-1</annotation></semantics></math>x−1, y<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>y</mi></mrow><annotation encoding="application/x-tex">y</annotation></semantics></math>y), (x<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi></mrow><annotation encoding="application/x-tex">x</annotation></semantics></math>x, y−1<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>y</mi><mo>−</mo><mn>1</mn></mrow><annotation encoding="application/x-tex">y-1</annotation></semantics></math>y−1)이다. 단, 캠퍼스의 밖으로 이동할 수는 없다.불쌍한 도연이를 위하여 캠퍼스에서 도연이가 만날 수 있는 사람의 수를 출력하는 프로그램을 작성해보자.<h2>입력</h2>첫째 줄에는 캠퍼스의 크기를 나타내는 두 정수 N<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>N</mi></mrow><annotation encoding="application/x-tex">N</annotation></semantics></math>N (1≤N≤600$ 1 \leq N \leq 600<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">)</mo><mo separator="true">,</mo><mi>M</mi></mrow><annotation encoding="application/x-tex">), M</annotation></semantics></math>),MM$ (1≤M≤600$ 1 \leq M&nbsp;\leq 600$)이 주어진다.둘째 줄부터 N<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>N</mi></mrow><annotation encoding="application/x-tex">N</annotation></semantics></math>N개의 줄에는 캠퍼스의 정보들이 주어진다. <code spellcheck="false">O</code>는 빈 공간, <code spellcheck="false">X</code>는 벽, <code spellcheck="false">I</code>는 도연이, <code spellcheck="false">P</code>는 사람이다. <code spellcheck="false">I</code>가 한 번만 주어짐이 보장된다.<h2>출력</h2>첫째 줄에 도연이가 만날 수 있는 사람의 수를 출력한다. 단, 아무도 만나지 못한 경우 <code spellcheck="false">TT</code>를 출력한다.<h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>3 5
OOOPO
OIOOX
OOOXP</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>1</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>3 3
IOX
OXP
XPP</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>TT</code></pre><h3>문제 풀이 접근</h3>이 문제의 요구사항은 문제가 제시해준 칸을 구성하고, 제시해준 좌표에서 원하는 문자를 찾아서 카운팅을 할 수 있는가를 요구하는 문제였다. 크게 설명할 것은 없으니 플로우도 간단하다. 1. 주어진 값으로 맵을 만든다. 2. 주어진 좌표로 시작좌표를 설정한다. 3. DFS,BFS등 편한 방식으로 탐색하고 P를 발견했을 때, 변수를 하나 올려준다.이 문제는 최단거리도 아니니, DFS로 풀어도 될것 같았지만, 난 BFS로 풀었다.<h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices;
using System.Security.AccessControl;
using System.Security.Authentication;
using System.Security.Cryptography.X509Certificates;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Xml.Linq;
using static CodingTestProj.Program;

/*
 * Difficulty : Easy ~ 
 * URL : https://www.acmicpc.net/problem/21736
 */


namespace CodingTestProj
{
 internal class Program
 {
 static void Main(string[] args)
 {
 //Case 0 _ Short
 Solution solution = new Solution();
 solution.solve();
 }
 }

 public class Solution
 {
 public int n;
 public int m;

 public char[,] maps;
 public bool[,] visited;

 public int[] dx = new int[4] { 0, 0, -1, 1 };
 public int[] dy = new int[4] { 1, -1, 0, 0 };

 public int startPosX;
 public int startPosY;

 int ret;
 public void solve()
 {
 ret = 0;

 string[] inputs = Console.ReadLine().Split(' ');

 n = Int32.Parse(inputs[1]);
 m = Int32.Parse(inputs[0]);
 // 좌우 바꾸기

 maps = new char[m, n];
 visited = new bool[m, n];

 for (int i =0; i &lt; m;++i)
 {
 string inputLine = Console.ReadLine();

 for(int j = 0; j &lt; inputLine.Length; ++j)
 {
 char chr = inputLine[j];

 maps[i, j] = chr;

 if(chr == 'I')
 {
 startPosX = i;
 startPosY = j;
 }

 if (chr == 'X')
 {
 visited[i, j] = true;
 }
 }
 }

 BFS();

 Console.Write(ret == 0 ? "TT" : ret.ToString());
 }

 public void BFS()
 {
 var q = new Queue&lt;Tuple&lt;int, int&gt;&gt;();

 q.Enqueue(new Tuple&lt;int, int&gt;(startPosX, startPosY));

 while(q.Count &gt; 0)
 {
 var dequeue = q.Dequeue();

 var posX = dequeue.Item1;
 var posY = dequeue.Item2;

 if (visited[posX, posY] == true)
 continue;

 visited[posX, posY] = true;

 if (maps[posX, posY] == 'P')
 ++ret;

 for(int i = 0; i &lt; 4; ++i)
 {
 int newPosX = posX + dx[i];
 int newPosY = posY + dy[i];

 if (isCheckSafeArea(newPosX, newPosY) == false)
 continue;

 if (visited[newPosX, newPosY] == true)
 continue;

 q.Enqueue(new Tuple&lt;int,int&gt;(newPosX ,newPosY));
 }
 }
 }

 public bool isCheckSafeArea(int posX, int posY)
 {
 if (posX &lt; 0 || posX &gt; (m - 1) || posY &lt; 0 || posY &gt; (n - 1))
 return false;

 return true;
 }
 }
}
</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1727360445289.png" alt="until-1567">

혼자서 다시푸는 코딩테스트 준비 일지 - 26

코딩테스트 준비 - 헌내기는 친구가 필요해

<pre spellcheck="false"><code>"editor.codeActionsOnSave": {
 "source.organizeImports": "explicit"
 },</code></pre><code spellcheck="false">command + p</code> 로 파일 검색창 열고 <code spellcheck="false">&gt;</code> 를 입력한다.그러면 파일검색창에서 명령어팔렛트로 바뀌게 됩니다.settings.json 를 검색하면 아래 처럼 뜨는데<img src="https://image.until.blog/dody/article/1722219141216" alt="until-1153"><code spellcheck="false">Preferences: Open User Settings (JSON)</code> 을 누르면 json 파일을 열어, 맨 위에 적어놓은 코드를 추가하면 된다.

vscode 잘 써서 효율높이는 법 - import 자동 제거

[vscode] 사용하지 않는 import 자동 삭제 해줘

안녕하세요! 이런저런 게임을 구현해보기 위해 여러가지 연습해보고 있습니다. 만들어 볼 게임은 " 퍼즐 버블 " 스타일의 게임입니다.여러가지 로직이 생각나는데, 가장 중요한 핵심 로직들은 생각해보니 복잡하지 않았고, 몇가지 이론들만 알면 금방 뚝딱 만들어 낼 것 같아요.이와 비슷한 게임은 많은 것 같은데, 가장 대표적인건 역시 퍼즐 보블인 것 같습니다.<ul><li>장르 : 퍼즐, 전략, 슈팅</li><li>소요 시간 : 약 31시간<ol><li>1일차 8시간</li><li>2일차 12시간</li><li>3일차 11시간</li></ol></li><li>핵심 로직<ol><li>마우스,터치 포인터 각도로 발사</li><li>벽에 튕긴 후 궤적을 표현 ( 게임엔 1번 까지만 표현 )</li><li>구슬을 6각으로 구분하여 충돌 포인트 계산 ( 클론 생성 )</li><li>인접 구슬 파괴 로직 구현</li><li>위에 연결된 구슬이 없을 경우, 이하 아래 모든 구슬 파괴로직 구현 ( 중력 )</li></ol></li></ul>이 정도 5가지만 구현하면 될 것 같습니다. 1,2,3번은 금방 구할것 같고, 4번 로직이 BFS &amp; DFS, 그래프 이론 등으로 구할 수 있을 것 같네요. 5번은, 블럭단위로 섹션을 나눠서 구할 수 있는지 한번 체크해 봐야 할 것 같아요. 이번 아티클 에서는 1,2,3 까지 해볼 것 같습니다.<h3>마우스, 터치 포인터 각도로 발사</h3>마우스 클릭 지점을 기준 방향으로 구슬을 보내기 전 플로우를 설정했습니다. 1. 마우스 클릭 지점 중, 시작, 도착 지점을 자료구조로 가지고 있는다. 2. 방향벡터를 구해서 발사 한다.여기서 2가지로 구현 방식이 나뉜다고 생각합니다. 1. 구슬을 발사하여 충돌 시, Y 기준으로 반전하여 이동할 수 있게 버블에 기능을 준다. 2. 구슬이 이동할 라인을 모두 생성하고, 구슬을 정해진 라인으로 이동할 수 있게 한다.여기서 저는 버블은 단순히 날아가는 역할만 했으면 좋겠다고 생각해서, 2번으로 구현할 예정입니다. 그렇기 위해, IPointerDownHandler, IDragHandler,IPointerUpHandler 을 터치 패널에 모두 사용해서 구현할 것입니다. IPointerDownHandler : 입력의 시작점, 이때부터 라인은 계산 IDragHandler: 이미 입력은 되어 있지만 조금이라도 이동 시, 라인 갱신 IPointerUpHandler : 버블을 발사하는 입력, 터치 패널 클릭 ( 마우스 클릭 ) 을 떼면 호출됩니다.화면을 터치한 좌표를 월드행렬로 변환하여 Ray를 발사해서 TouchArea 에 맞은 지점을 계산 한 후, 버블의 시작점과 맞은 지점의 방향 벡터를 구해서 그 방향으로 발사해줍니다.<img src="https://image.until.blog/sin0105/article/1723749163115" alt="until-1230"><img src="https://image.until.blog/sin0105/article/1723749167959" alt="until-1231"><img src="https://image.until.blog/sin0105/article/1723750798991" alt="until-1234"><h3>벽에 튕긴 후 궤적을 표현</h3>벽에 튕긴 후 궤적을 표현하는 부분은 직선의 방정식으로 구할 수 있는데, ( Y = AX + B ) 사각형의 모든 직선의 방정식을 구하고, 설정한 방향 벡터로 나아가는 벡터의 직선의 방정식을 구합니다. 방향벡터 d = (dx,dy) 로 가정 (x,y) = (x0 + t*dx, y0 + t*dy) 로 설정합니다. t는 매개변수, t값이 증가할 수록 점이 벡터를 따라 변경.방향 벡터에 따른 직선의 방정식을 변의 직선 방정식으로 대입, t 산출 t 를 이용해 x,y 계산. 교점 좌표를 구합니다. 각 교점 좌표들이 사각형 위에 존재하는지, 끝점들 사이에 존재하는지 확인한 후 , t &gt; 0 인 좌표를 구한 후, 가장 작은 t 값을 가지는 교점을 선택, 이 값이 가장 마지막까지 사각형 위에 있는 점 ( 즉, 외부로 나가는 첫번째 좌표 ) 입니다.<img src="https://image.until.blog/sin0105/article/1723750851023" alt="until-1235"><h3>구슬을 6각으로 구분하여 충돌 포인트 계산 ( 클론 생성 )</h3>보통 이런 퍼즐 버블 스타일의 게임에선 구슬의 예상 도착 지점을 찍어줍니다. 그것을 구현하기 위해서는 대략적인 삼각함수 개념이 필요한데, 크게 어렵지는 않고, 저는 초기에 아래 그림처럼 생각해서 구현했습니다.<img src="https://image.until.blog/sin0105/article/1723751045475" alt="until-1236">좌측, 우측에 방향레이가 도달했을때는 각각 좌,우 만큼 띄운 뒤 클론 생성, 좌하, 우하 일때는 좌측 아래, 오른쪽 아래에 생성합니다. Right 벡터를 기준으로 -315 ~ 45 우측 45 ~ 135 위( 필터, 필요 X ) 135 ~ 225 (좌측) 225 ~ 270 (좌하) 270 ~ 315 (우하) 로 각도를 설정했습니다. 구하는 방법은 아래와 같습니다. 1. 발사대의 좌표와, 레이를 맞은 지점의 좌표의 방향 벡터를 구하고, 버블의 회전은 변경되지 않는다는 가정하에, Right 벡터를 기준으로 잡고 내적합니다. 2. 내적의 공식은 a · b = |a||b| Cosθ 입니다. |a||b|를 넘겨주면 아래와 같은 공식이 나옵니다. Cosθ = a · b / |a||b|, 여기에서 각도를 구하기 위해, ArcCosθ(cosTheta) 값을 넣으면 각도를 받습니다. 3. ArcCos의 값 표현 범위는 0 ~ 180 도 이기 때문에, 전체 360를 표현하기엔 무리가 있습니다. 그렇기 때문에, 외적을 사용하여, 플레이어 기준 좌우측을 판단하는 것 처럼 Vector3.Cross(Right,dir) 로 새롭게 생성되는 벡터가 Y 양수일지, Y 음수일지 체크하여 360 - Degree 를 할지 Degree를 볼지 결정하여 정확한 각도를 받을 수 있습니다. 4. 그렇게 각도를 결정하면 미리 지정해둔 크기와 위치좌표를 연산하여 클론의 자리를 잡아줍니다.<img src="https://image.until.blog/sin0105/article/1723752097842" alt="until-1237">나머지는 아티클 2부에서 작성하겠습니다. 1부 개념만 사용하는데에도 생각한것보단 상당수 수학적 개념이 들어가네요. 2부 개념은 수학적 개념보단 인접 구슬 파괴 로직 구현, 위에 연결된 구슬이 없을 경우, 이하 아래 모든 구슬 파괴로직 구현 ( 중력 ) 을 구현하기 때문에, 알고리즘적 요소를 많이 설명할 것 같습니다.

퍼즐 게임 제작

<blockquote>Dawn입니다. 사내에서 활용하고 있는 아파치 카프카에 대해서 더욱 알아가고자 공부를 하고 있습니다. 강의를 들으면서 내용을 제 생각과 섞어 정리한 부분이기 때문에 글 내용이 완전한 정답이라고는 할 수 없습니다. 더욱 나은 데이터 엔지니어가 되고자 노력하겠습니다. 감사합니다.</blockquote><h2>초기의 스타트업</h2><img src="https://image.until.blog/dawn-py/article/1727054642391.png" alt="until-1441">기업이 막 생겨나서 초기 서비스가 시작되었을 때는 대게 이렇게 소스데이터(예를 들어 데이터베이스)가 어떤 서비스 내 타켓 데이터로 흘러가는 형식입니다. 서비스가 막 생겨났기 때문에 시스템 규모가 작아 위와 같은 형식이 문제가 되지는 않습니다. 누군가가 코드를 작성하고 데이터를 받아 추출 후 변환하고 로딩하게 되는겁니다.<h2>기업이 확대</h2><img src="https://image.until.blog/dawn-py/article/1727054652308.png" alt="until-1442">점점 기업이 발전하게 되면 자연스럽게 많은 소스 시스템을 갖게 되는데 이때 동일하게 타깃 시스템도 많아지게 됩니다. 정보를 공유하기 위해서는 소스 시스템이 모든 타깃 시스템에 데이터를 전송해야 하기 때문에 데이터 통합 문제는 위와 같이 복잡한 형태를 이루게 됩니다.위와 같은 아키텍쳐는 예를 들어 4개의 소스 시스템이과 6개의 타깃 시스템이 있다면 서비스를 운영하기 위해서는 24개의 통합을 코드로 작성해서 소스데이터를 추출하고 변환하고 로딩해야 합니다. 여간 번거로운 일이 아니죠.또한 모든 소스데이터가 모두 동일한 통신 프로토콜로 전송받는다는 보장도 없습니다. 이제는 TCP, HTTP, REST, FTP, JDBC 등으로 여러 방식으로 데이터가 전송되기 때문입니다.그리고 이러한 데이터가 모두 같은 형식이라는 것도 보장할 수 없습니다. JSON이 될 수도 있고, CSV, Binary, Parquet 등등 다양한 형식으로 데이터가 구성되기때문입니다.이러한 문제를 주먹구구식으로 해결한다고 했을 때 관리의 문제와 비용의 증가가 가장 큰 문제점이라고 할 수 있습니다.지금은 대기업이 된 링크드인 또한 이와 동일한 문제가 있었습니다. 링크드인이 이러한 문제를 어떻게 풀었는지는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.google.com/url?sa=i&amp;url=https%3A%2F%2Fwww.linkedin.com%2Fpulse%2Flinkedin-apache-kafka-muhammad-waqas-dilawar&amp;psig=AOvVaw1OjL81dhH37D0ql7MA0vfO&amp;ust=1726248601132000&amp;source=images&amp;cd=vfe&amp;opi=89978449&amp;ved=0CBcQjhxqFwoTCPj08qb3vYgDFQAAAAAdAAAAABAS">해당 링크</a>를 통해 읽어보면 좋을 것 같습니다.<h2>카프카</h2><img src="https://image.until.blog/dawn-py/article/1727054661037.png" alt="until-1443">잠깐 언급했듯이 링크드인은 이러한 문제를 해결하고 이벤트 스트리밍 데이터를 한 곳에 모아서 관리하는 Kafka라는 시스템을 개발하게 됩니다. 카프카는 데이터 중개 플랫폼으로서 소스데이터가 생산(Producer)해내는 데이터를 스트림 형식으로 변환시키고 타깃 시스템이 데이터를 가져가거나 혹은 전달해주는 역할을 합니다. 중간 관리자 역할로 존재하고 분산되어 있던 데이터의 흐름을 연결해서 관리하기 때문에 링크드인은 더욱 확장성있는 이 시스템을 통해 다양한 서비스를 만들게 됩니다.오늘은 카프카가 무엇인지 왜 필요한지에 대해서 간략하게 설명해 보았습니다. 정리도 하면서 글을 써 내려가니 복잡하고 어렵지만 제 글을 읽으면서 도움이 되셨으면 하는 마음에 마무리 지었던 것 같습니다. 다음에는 더 나은 글로 인사드리겠습니다. 감사합니다.

왜 많은 기업은 카프카를 선택할까

[Kafka] 1. 카프카의 필요성

State of React 2023 Survey 결과가 발표되었습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://2023.stateofreact.com/en-US/">https://2023.stateofreact.com/en-US/</a>지난 달에 발표됐던 State of JS 를 진행한 기관과 같은 곳에서 진행하는 Survey 죠.형제 격인 Survey 들이 몇가지 있습니다. JS/ CSS/ HTML/ React/ ...React 개발자들이 이 조사 발표를 기다리는 건, 기술동향에 대한 궁금함도 있겠지만,"어떤" 기술을 사용할 것인지를 결정하는데 중요한 자료가 된다는 것이죠.러닝커브가 도사리고 있는 기술인데, 애써 배워놨더니 쓸모 없어지는 경험은 누구에게나 악몽이 될 수 있으니까요..그런 의미에서, 제 채널에서 진행하고 있는 강좌에서 선택한 기술들이 대체로 높은 스코어를 받고 있다는 건 흡족한 일이네요.개인적으로는 Zustand 가 급상승하기를 기대했지만 이번 결과에서는 그렇지 못했습니다. Zustand 가 관심을 받기 시작한 건 얼마 안됐으니까요.. 그리고 이 조사 발표는 정말 늦습니다.그리고 ' 가장 고통스러웠던 API' 설문에서는 forwardRef 와 memo 가 나란히 선두에 뽑혔군요.React 19 에서는 forwardRef 가 없어질 것이라는 이야기도 돌았죠. 컴파일러가 도입되면 memo 도 설 자리를 잃게 될 테고... 이제 HOC 는 서서히 소멸되어가는 기술이 될 것 같습니다.관심있는 분들에게는 매우 의미있는 시간이 될 것입니다.

State of React 2023 Survey 결과가 발표되었습니다.https://2023.stateofreact.com/en-US/지난 달에 발표됐던 State of JS 를 진행한 기관과 같은 곳에서 진행하는 Survey 죠.형제 격인 Survey 들이 몇가지 있습니다. JS/ CSS/ HTML/ React/ ...React 개발자들이 이 조사 발표를

State of React 2023 Survey 결과 발표

Experience

안녕하세요! 2024 충북 게임잼을 다녀왔습니다! 저번 Myme 게임잼 이후로 새로운 목표가 생겨서 어떤 게임잼을 참가할까 고민하던차에, 충북게임잼을 한다는 소식을 들어, 참여하게 되었습니다. 사실 게임잼을 신청할때는 하면 좋겠다.. 싶다가도 신청자분들이 너무 많은걸 알기에 실망하지 않으려고 안되겠지 하면서 기다리고 있었는데, 너무 감사하게도 이번에도 불러주셔서 다녀왔습니다! 이번에는 저번보다 조금 더 험난한 여정이었습니다.<h3>강원도 속초에서 충청북도 청주까지.. </h3><hr>이번에는 강원도에서 충청북도까지 가야했던 여정이었습니다. 본가에서 쉬고있었던 사이에 게임잼 참여자로 선발되어버려서.. 도저히 강원도 속초에서 오전에 출발해, 오후까지 시간을 맞출 수 없을거라 생각해서 전날에 서울 도착하고 버스로 청주까지 이동할 계획을 짰습니다..<img src="https://image.until.blog/sin0105/article/1725443662417.jpeg" alt="until-1309"><img src="https://image.until.blog/sin0105/article/1725443668047.jpeg" alt="until-1310">동부창고가 어딘줄 몰라서.. 동부창고가 창고 갯수가 너무 많아서.. 길찾다가 조금 늦긴했지만 어찌됐든 도착은 했다..<h3>게임잼 분위기는 어땠나?</h3><hr>이번에는 여러가지 이슈가 있어서 조금 늦게 도착했는데, 공지 사항이랑 행사 진행중이었습니다. 처음 본 분들 중 집중하셔서 보는 분들도 있고 다음이 기획 발표 세션이라 뭔가 준비하시는 분들도 꽤나 보였습니다! 뭔가 Myme 때는 미리 팀을 주최측에서 빌딩이 이뤄진 이후에 실제로 만난거라 어색함이 덜하긴 했었는데, 충북게임잼은 와서 팀을 빌딩하는 방식이어서 완전 어색했습니다.. 쉬는 시간에 이곳저곳 돌아다녔는데, 주제가 캠핑인 만큼 1인 1텐트에서 잘 수 있도록 준비해주셔서 너무 좋았습니다. 프라이빗한 공간에서 신경안쓰고 편하게 조금이라도 잘 수 있다는 점이 너무 좋았어요. 리프레쉬를 위해 스위치도 준비해주시고, 간식과 굿즈도 신경써서 준비해주셨다는게 느껴져서 이것또한 감사했습니다. 스티커는 발견하자마자 노트북에 하나붙였습니다.. 게임잼 참가할때마다 하나씩 붙여두려구요.. 아! 맞다. Myme에서 만난분들과 BIC에서 만난분들도 인사해주셔서 너무 감사했습니다. 덕분에 어색함이 조금 사라질 수 있었어요. 감사합니다!<img src="https://image.until.blog/sin0105/article/1725446734725.jpeg" alt="until-1311"><img src="https://image.until.blog/sin0105/article/1725446758182.jpeg" alt="until-1312"><img src="https://image.until.blog/sin0105/article/1725446762625.jpeg" alt="until-1313"><h3>현장 팀 빌딩 진행 방식과 소감은?</h3><hr>팀 빌딩이 이루어지기 전에 미리 기획 포지션 분들께서 발표를 하였고, 마음에 드는 기획에 따라 프로그램, 아트 포지션이 기획자분들께 어필하는 방식으로 진행 했습니다6개의 기획 중에 3개 기획이 저한테 맞을거라 생각했습니다. 이 팀들을 위주로 물어보러 다녔고, 팀 빌딩이 정말 치열하다는 것을 느꼈습니다. 노션을 정리해서 어필하는 분들도 있었고, 아트스테이션으로 작업물을 직접 보이면서 어필하는 분들도 있었습니다. 저는 물어보러 다니면서 간단하게 제 이력만 이야기하고 고민해보고 알려주세요~ 하고 돌아다니던 찰나에 같이하자는 제안을 받아, 경쟁은 있었지만, 비교적 덜 치열했었던 것 같습니다.소감은.. 어필하러 다니는게 쑥쓰러워서 조금 힘들었습니다.<h3>빌딩은 완료, 어떤 프로젝트였나? </h3><hr>제가 속한 프로젝트는 '청화' 라는 이름의 프로젝트였고, 도트 기반의 2D 탑뷰 형식이고, 맵에 스폰된 아이템(재료)을 미니게임을 통해 얻어, 요리를 하여 관측소에서 별을 보러가며 더 높은 단계 음식의 레시피를 해금하는 게임입니다. <h3>게임잼을 진행하면서 기억나는건?</h3><hr>이번에도 역시나, 게임잼 진행하면서 사이사이에 많은 이벤트를 진행해주셨습니다. 간단한 퀴즈, 사진 공모 이벤트, 스위치를 활용한 이벤트 등을 진행해주셨어요.저는 다른건 잘 못해도 마리오카트는 몇번 해본경험이 있어서 참여했는데, 1등해서 상품을 받아왔습니다! 귀멸의 칼날 만화책 전권이라.. 받을때는 정말 좋았는데 이게 집에 들고 오기가 너무 힘들었어요.그리고 다른건 하나더 기억나긴 하는데, 타임라인 상 맨 뒤에 적어야할 것 같네요..아! 기억나는거, 샤워실 수압 엄청 셉니다. 얼굴 뚫리는줄 알았어요.<h3>1일차.. 2일차.. 그리고 3일차.. 결과는?</h3><hr>이번에는 Myme 때 같은 퍼포먼스에 대한 걱정은 역시 경험을 해보니 안들긴 했습니다. 버그픽스를 직전까지 수행하긴 했지만, 멘토분들의 도움으로 버그 없이 안정화된 빌드로 나와서 제출할 수 있었습니다.이번엔 심사를 같이 참여한 분들, 그리고 심사위원 분들의 점수를 정해진 비율로 나눠서 순위를 매기는 방식이었습니다. 결과는 이번에는 3위를 받았습니다! 처음에 이 프로젝트의 기획을 들었을 때, 무난하게 만들어진다면 In 3 가능할 것이다. 라고 생각했는데, 딱 제가 생각한 순위권에 안착한 프로젝트여서 너무 좋았습니다. 조금더 욕심이 있다면 2위까지 하면 좋겠다! 라고 생각은 했는데, 아쉽게 3위에 머무르게 되었네요.그래도, 수상권 안에 들어서 제가 생각한 성과를 이뤄낸거 같아 힘들게 온보람이 있었습니다!<img src="https://image.until.blog/sin0105/article/1725448269180.jpeg" alt="until-1314"><h3>생각한 성과도 이뤘고, 아쉬운 점은? </h3><hr>이번엔 아쉬운 점은 뭔가 수상을 해서 배부른 아쉬움일 수는 있겠는데, 수상 이후 뭔가 상장 같은게 없다는게 조금 아쉬웠습니다! 그거 외에는 기초적인건 너무 잘 준비되어 있었고, 개발하면서 아쉬운점은 없었던 것 같아요.<h3>2024 충북게임잼 리뷰를 마치며 마지막으로 할말은?</h3><hr>이번에도 역시 3일을 압축해서 쓰려니 엄청난 분량을 가진 페이지가 완성이 되어버렸네요. 여기까지 읽어주셨다면, 이번에도 재미없고, 두서없는 글을 참고 읽어주셔서 너무 감사드립니다!2일 걸려서 이동일정을 잡고, 이번에는 전보다 2시간 적게잔 3일간 4시간 수면이라는 역경과 고난을 거쳐 수상하여 새로운 제 목표인 '게임잼 도장깨기'를 할 수 있었습니다. 아직 경남, 충북만 도장을 깨서 경기, 경북, 전남, 전북, 서울 등 있다면 지역별로 아직 많이 남아있네요. 목표가 있다는 것은 뭔가를 하기에 정말 좋은 것 같습니다. 행사를 주최하여 뜻깊은 경험을 하게 해주신 충북 글로벌 게임센터, 한국인디게임협회 관계자 분들 및 참여하신 멘토분들, 서포터 분들, 모든 유관부서 관계자 분들, 저희가 쾌적하게 개발에 몰두할 수 있도록 도와주신 여사님까지 감사드립니다. 마지막으로, 모든 참가자 분들도 고생많으셨습니다! 같은 팀으로 출전해서 고생한 Team PixelJam 동료들 고생많았습니다!<h3>.. Luck..y Draw...?</h3><hr><img src="https://image.until.blog/sin0105/article/1725449197044.jpeg" alt="until-1315">이번에는 박스에서 뽑아서 구두로 말하셔서 사진은 못찍었는데.. 소니헤드폰.. 29번 축하드려요.. 부럽다<hr>게임잼 후기 시리즈 1. <a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@sin0105/2024-myme-%EA%B2%8C%EC%9E%84%EC%9E%BC-%EC%B0%B8%EA%B0%80-%ED%9B%84%EA%B8%B0">2024 Myme 게임잼 후기</a><a target="_blank" rel="noopener noreferrer nofollow" href="https://zdnet.co.kr/view/?no=20240903092516">기사1</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.khgames.co.kr/news/articleView.html?idxno=231720">기사2</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://gamefocus.co.kr/detail.php?number=158967">기사3</a>

1달만에 참여한 두번째 게임잼!

2024 충북게임잼 참가 후기

.....이 주제는, Javascript 에 대한 사전 지식을 필요로 합니다......<h2>React 는, Javascript 프레임워크입니다.</h2>고도화 된 프레임웍 은 독립된 랭귀지 수준의 고유의 개발방식과 생태계를 갖게 되기도 하는데, 바로 리액트가 그러합니다.비슷한 시기에 태어난 Angular, Vue 등도 아직 건재합니다만, React 의 입지는 갈수록 탄탄해지고 있는 느낌이죠. 생태계의 규모도 워낙 압도적입니다.왜 React 인가.. 라는 질문은 이제 굳이 할 필요 없을 것 같습니다. 여기에서는, 어떻게 하면 React 를 빠르게 이해햘 수 있는가 라는 문제에 집중해 보려고 합니다...<h2>이 프로젝트는, 리액트 초급 용으로 기획되었습니다.</h2>이 프로젝트의 최종 단계에서 우리는,<ul class="tight" data-tight="true"><li>React-Router with dynamic Routing</li><li>React-Hook-Form and Zod Form Validation</li><li>Zustand 를 이용한 전역상태관리</li><li>Suspense</li></ul>까지 이해하는 것을 목표로 합니다. (NextJS 까지 다루지는 않습니다.) zustand 와 suspense 를 초급단계에서 핸들 되는 주제라고 말하기는 어렵겠지만, 본 프로젝트를 충실히 수행한 이후에는, ‘초급’ 이라는 수식어를 자신있게 떼어낼 수 있겠다는 의미로 받아들이시면 좋겠습니다...<h2>이 프로젝트는, 총 6 개의 연속 아티클로 기획되었습니다.</h2>#1. 리액트를 배우기 위한 사전 준비#2. npm create vite@latest &amp; first hooks#3. more hooks &amp; custom hooks#4. Form handling in React#5. React-Router-Dom#6. Suspense and Next..<h2>전체 목차</h2>,.<h1>#1. 리액트를 배우기 위한 사전 준비</h1><ol class="tight" data-tight="true"><li>JSX 구문</li><li>Imperative &amp; Declarative</li><li>v = f ( s )</li><li>ES5/ ES6 functions and literals</li></ol><h1>#2. npm create vite@latest &amp; first hooks</h1><ol class="tight" data-tight="true"><li>npm create vite@latest</li><li>Hello World React</li><li>basic hooks : useState</li><li>basic hooks : useEffect</li><li>Virtual DOM &amp; StrictMode</li><li>Components &amp; Props</li><li>React Dev-Tools</li><li>first project : your_name</li></ol><h1>#3. more hooks &amp; custom hooks</h1><ol class="tight" data-tight="true"><li>Workthrough for prev. project</li><li>useRef</li><li>useMemo, useCallback, useId</li><li>useReducer</li><li>useContext</li><li>zustand</li><li>Custom Hook #1. useLocalStorage</li><li>Custom Hook #2. useAxiosFetch</li><li>second project : not yet fixed</li></ol><h1>#4. Form handling in React</h1><ol class="tight" data-tight="true"><li>Workthrough for prev. project</li><li>Form Basics : Controlled Input &amp; UnControlled Input</li><li>React-Hook-Form</li><li>Zod + Resolver</li><li>fourth project : React-Hook-Form Project</li></ol><h1>#5. React-Router-Dom</h1><ol class="tight" data-tight="true"><li>Workthrough for prev. project</li><li>Routing in React</li><li>React-Router-Dom Basic</li><li>Nested Route</li><li>Dynamic Route</li><li>Error Handling and Fallback</li><li>Action handling</li><li>fifth project : not yet fixed</li></ol><h1>#6. Suspense and Next</h1><ol class="tight" data-tight="true"><li>Workthrough for prev. project</li><li>Portals</li><li>Suspense</li><li>Lazy</li><li>Async React Router</li><li>final project : not yet fixed</li></ol>

.....이 주제는, Javascript 에 대한 사전 지식을 필요로 합니다......React 는, Javascript 프레임워크입니다.고도화 된 프레임웍 은 독립된 랭귀지 수준의 고유의 개발방식과 생태계를 갖게 되기도 하는데, 바로 리액트가 그러합니다.비슷한 시기에 태어난 Angular, Vue 등도 아직 건재합니다만, React 의 입지는 갈수록 탄탄

React 는, Javascript 프레임워크입니다.

이 프로젝트는, 리액트 초급 용으로 기획되었습니다.

이 프로젝트는, 총 6 개의 연속 아티클로 기획되었습니다.

전체 목차

#1. 리액트를 배우기 위한 사전 준비

#2. npm create vite@latest & first hooks

#3. more hooks & custom hooks

#4. Form handling in React

#5. React-Router-Dom

#6. Suspense and Next