아는만큼 보인다.

JavaScript에는 즉시 평가와 지연 평가라는 개념이 있습니다. 저는 즉시 평가와 지연 평가들에 대한 자료를 보고 "어떨 때 평가를 하는구나"정도만 알고 평가가 무엇인지 정확히는 몰랐습니다. 그래서 저는 즉시와 지연을 작성하기 전에 js에서 평가가 무엇인지 작성할테니 참고하고 보시면 좋을 것 같습니다.평가아래의 과정들을 포괄해 평가라고 부릅니다.코드 실행: JavaScript 엔진이 코드를 파싱하고 실행하는 과정값 도출: 표현식이나 문장으로부터 최종적인 값을 계산해내는 과정으로 연산자 적용, 함수 호출 결과 계산 등을 포함 타입 결정: 표현식의 결과가 어떤 데이터 타입인지 결정하는 과정변수 바인딩: 변수에 값을 할당하는 과정으로 이는 변수 선언과 초기화를 포함함수 실행: 함수 호출 시 인자를 평가하고..

RORO 패턴은 Recive an object, Return an object의 약자로 객체로 받고 객체로 반환한다는 뜻입니다. 명명된 인수RORO 디자인 패턴은 여러 장점이 있지만 보통 명명된 인수를 사용하고 싶을 때 많이 사용합니다.명명된 인수란 함수 호출 시 각 인수에 이름을 명시적으로 지정하는 것입니다. JS에는 없고 C#이나 Python에는 있는 기능이었지만 ES6의 구조 분해 할당이 나오면서 JS도명명된 인수를 사용할 수 있게 되었습니다. 코드로 보는 게 빠르겠죠? RORO 패턴 적용 전function printUserInfo(name, age, role) { const print = alert(`이름: ${name} 나이: ${age} 권한: ${role}`) return print;}c..

최근 SRP와 DI를 비롯한 객체 지향 원칙들을 프로젝트에 적용하며 리팩토링을 진행하고 있었습니다.그런데 컴포넌트를 기능별로 나누다보니 원래 한 컴포넌트에서 모든 기능이 모두 모여있던 것과 달리 props drilling 현상이 발생했습니다.3, 4개 정도까지는 괜찮다고 생각하는 편입니다. Props drilling그래도 리팩토링 내내 맘에 걸렸고 useQuery를 통해 가져오는 Server State라 기능 별로 나눈 컴포넌트 모두에서useQuery를 사용할 수는 없으니 그보다 높은 부모 컴포넌트에서 props를 내려주는 props drilling 방식을 선택하였습니다.export default function MemberSelect({ maxCapacity }: { maxCapacity: number..

오랜만에 글을 써보는 것 같습니다.오늘은 대강 추상적으로만 알았던 unknown과 any 타입의 차이에 대해서 알아보겠습니다. ❓any먼저 원래 쓰던 any에 대해서 알아보겠습니다. any는 아무거나라는 뜻입니다.말 그대로 어떤 타입에도 할당이 가능하고 어떤 타입이든 할당할 수 있습니다.let anyValue: any = '대충 문자열';let stringValue: string = anyValue;let numberValue: number = 0;anyValue = numberValue; 우리가 보던 코드입니다.보기에도 문제없고 동작도 아주 잘 할 겁니다. 하지만저는 차이에 관한 글을 보기 전에는 어딘가 문제가 있어 보인다고 생각을 안 해봤습니다. 그런데 anyValue가 string 타입이 아니라 n..

리액트에는 라이프 사이클이라는 개념이 존재합니다.저도 그렇고 많은 분들이 React의 개념인줄만 알고 있어서 정정하겠습니다.직역하면 생명 주기를 뜻하는데 컴포넌트 기반의 뷰(View)를 중심으로 하는 라이브러리나 프레임워크에서 사용되는 개념입니다! 리액트의 컴포넌트도 생명 주기라는 것을 가지며 이 생명 주기는 컴포넌트가 생성되고 수정되고 사라질 때까지의 과정입니다.말그대로 컴포넌트의 생명 주기입니다.컴포넌트가 생성, 수정, 삭제 될 때마다 호출되는 메서드를 라이프 사이클 이벤트라고 합니다. 라이프 사이클이 왜 있느냐할 수 있지만 컴포넌트의 생명 주기를 다루는 것은 매우 중요합니다.특정 컴포넌트의 동작을 제어할 수 있고 이로 인해 컴포넌트가 불필요한 렌더링을 하는 것을 방지할 수 있습니다.만약 외부 데이터..

동기 vs 비동기JS에서 작업을 처리하는 방법은 동기와 비동기로 크게 두 가지가 존재합니다.둘의 차이점은 작업을 직렬적으로 처리하느냐 병렬적으로 처리하느냐입니다.직렬적으로 처리하는 동기는 작업이 끝나지 않으면 다음 작업을 수행할 수 없는 방식을 말합니다.즉, 이전 처리가 끝나지 않는다면 다음 작업은 끝날 때가지 기다려야하는 것을 의미합니다.이렇게 말하면 안 좋아보일 수 있지만 작업의 흐름을 한 눈에 파악하기 쉽다는 장점을 가지고 있습니다. 반대로 병렬적으로 처리하는 비동기는 작업이 처리중이든 상관하지 않고 다음 작업을 처리합니다.코드가 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미합니다. 아래는 동기와 비동기의 이해를 돕기위한 자료입니다. callbackJS에서 비동기 처리..

이전 포스팅에서 Hydration을 짧게나마 설명했습니다.이번 글에서는 좀 더 자세히 다뤄보도록 하겠습니다. 수분 공급 Hydration 자체의 명사적 뜻은 수분 공급입니다.이 뜻만 보면 어떤 수분..

Next.js v13이 나온지 벌써 반년이 지났네요. v13의 기능인 app routing에 적응하고 잘 사용할 수 있는 개발자도 있겠지만 아직 적응하지 못 하고 낯선 개발자도 있다고 생각합니다. 이번 글에서는 크게 page routing과 app routing의 구조 특징들을 알아보겠습니다. ( app routing의 모든 기능을 설명하는 건 다른 포스트에서 작성하도록 하겠습니다! ) Page Routing Next.js에서는 파일 기반 라우팅을 제공합니다. 얼마나 유용하냐면 React.js에서는 react-router-dom을 설치하고 Route로 하나하나 경로를 설정하고 해당하는 컴포넌트를 작성하는데 반면 Next.js는 page 폴더 안에서 파일의 이름만으로 라우팅을 자동으로 구성해줍니다! pag..

this는 영어로 이것이라는 의미입니다. JavasScript에서 사용되는 this는 어떤 의미를 뜻할까요? thisthis는 실행 중인 코드에서 사용되는 객체를 참조하는데 사용되는 키워드입니다.this의 값은 함수의 호출 방식에 따라 변합니다. Global전역에서 this를 사용했을 때는 전역 객체를 가리킵니다. 브라우저상에서는 window가 전역 객체입니다.console.log(this); // window 만약 아무런 것으로도 감싸지 않고 전역에서 사용됐을 때 위 로그는 window를 찍습니다. 전역 객체인 window가 잘 감이 안 올 수 있는데 아래 예시를 봐보겠습니다.let globalValue = 10;console.log(this.globalValue); // 10..

이번 글에서는 무상태인 stateless와 상태유지 stateful을 알아보겠습니다.원래는 REST를 공부하다가 "REST는 stateless하다." 라는 말을 듣고 어렴풋이 이해했지만더 확실히 이해하고자 정리해보려 합니다. stateful이번 글에서 다루는 stateless와 stateful는 서버와 클라이언트 간의 통신에서의 개념을 말합니다.</p..