javascript

    [Three.js] Transform Objects

    4 properties to transform objects position scale rotation quaternion Object3D를 상속받는 모든 클래스들은 위의 4가지 속성을 가진다. 예컨데, 여기에는 PerspectiveCamera나 Mesh가 있다. 이러한 속성들은 행렬(matrix)으로 컴파일 된다. position objects position 속성은 다음과 같이 3차원에서 x,y,z 축을 의미 사용하는 단위 1은 단위로 인식하면 되고, 경우에 따라 다 다른 값을 가질 수 있다. (e.g. 1cm, 1m, 1km 등등) mesh.position.x = 0.7 mesh.position.y = -0.6 mesh.position.z = 1 mesh.position.x = 0.7 mesh.po..

    Next.js의 SSR, SSG, Dynamic Routing 알아보기

    Next.js 프레임워크는 Data Fetching 시에 SSR(Server-side Rendering), SSG(Static-site Generation), 그리고 Dynamic Routing 등의 세 가지 방법을 제공한다. 각각의 방법에 대해서 하나씩 깊게 알아보고 언제 어떻게 써야 하는지 사용법을 공부해 보고자 한다. SSR(Server-side Rendering) 만약 어떤 페이지에서 getServerSideProps 함수를 호출하면, Next.js는 getServerSideProps에서 데이터를 반환받을 때 마다 이 페이지를 pre-rendering 할 것 이다. export async function getServerSideProps(context) { return { props: {}, //..

    [FeBase S3] SVG, Canvas, viewport와 viewbox

    이번 포스팅에서는 SVG와 Canvas, viewport 그리고 viewbox에 대한 개념을 간단하게 정리해 보려고 한다. 1. SVG란? 바로 찾아볼 수 있는 레퍼런스 중 가장 공신력 있다고 판단되는 Mozilla Developer Network(MDN)에서 SVG에 대해서 다음과 같이 설명하고 있다. SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL 등 다른 웹 표준과도 잘 동작하도록 설계되었습니다. SVG는 달리 말하면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. SVG는..

    테스팅 라이브러리 (Testing Library) 란?

    현업에서 개발을 하면서 테스트 코드를 짤 때 여러가지 도구들을 리서치 하다가 테스팅 라이브러리에 대해서 알게 되었고, 개인적으로 공부도 필요하고 정리할 겸 포스팅을 하게 되었습니다. 기본적인 내용은 모두 공식 문서에 있으므로 더 자세한 내용을 알기 원하시면 참고해 주시면 감사하겠습니다. 시작하며 @testing-library는 UI 컴포넌트를 사용자 친화적으로 테스트할 수 있게 도와주는 패키지 묶음이다. 우리는 테스트의 목적 중 하나로 구현의 세부사항들을 포함시키지 않는 것을 가지고 있다. 그래서 리팩터링 시에 테스트를 깨트리지 않아야 하고 팀의 속도를 항상 유지시켜야 한다. 코어 라이브러리인 DOM Testing Library는 웹 페이지를 테스트 할 수 있는 경량 솔루션으로 쿼리와 (JSDOM/Jes..

    [테스트] How To Test #1. Unit Test (feat. jest)

    이번 포스팅에서는 테스트에 대한 이야기를 해보려고 한다. 첫 번째 주제는 단위 테스트이다. Jest 설치하기 유닛 테스트를 할 수 있는 라이브러리는 여러 가지가 있지만, 나는 jest가 지금 시점에서는 가장 좋은 옵션이라고 생각을 한다. 자바스크립트를 사용하는 프론트엔드, 백엔드 모두 활발하게 쓰이고 있으며, test runner와 test matcher, test mock 등을 별도의 여러 개의 라이브러리를 설치해 주지 않고 이 jest 프레임워크 안에서 한꺼번에 할 수 있기 때문이다. 그러면 jest 를 프로젝트에 설치하는 과정부터 하나씩 살펴보도록 하자. 먼저 jest 라이브러리를 설치한다. yarn add --dev jest 설치 후에는 package.json 파일에 다음과 같이 스크립트를 추가해..

    JS #17. 클로저(Closure) <The Final>

    이번 포스팅에서는 자바스크립트의 클로저에 대해서 정리를 해 보려고 한다. 그리고 이 포스팅을 마지막으로 카일 심슨 저

    JS #16. 함수, 블록 스코프와 호이스팅(Hoisting)

    이번 포스팅에서는 함수 vs 블록 스코프에 대한 비교와 호이스팅의 개념까지 정리를 해 보려고 한다. 함수 기반 스코프 스코프는 컨테이너나 바구니와 같은 구실을 하는 일련의 '버블'이고 변수나 함수 같은 확인자가 그 안에서 선언된다. 자바스크립트는 함수 기반 스코프를 사용하기 때문에 함수는 이러한 버블을 만든다. 많은 개발자들은 각각의 선언된 함수는 버블을 생성하지만, 다른 자료구조는 자체적인 스코프를 생성하지 않는다고 알고 있다. 위 예제 코드에서 foo()의 스코프 버블은 a,b,c와 bar를 포함한다. 따라서 foo() 바깥에서는 이들에게 접근할 수 없다.(접근 시 ReferenceError 발생) 하지만 foo() 안에서는 이 모든 확인자(a, b, c, foo, bar 등)에 접근이 가능하고, b..

    JS #15. 이벤트 루프 (Event Loop)

    자바스크립트의 이벤트 루프에 대해서 정리해 보고자 한다. 단일 스레드 언어 자바스크립트 자바스크립트는 '단일 스레드' 언어이다. 하지만 실제로 우리는 자바스크립트로 여러가지 작업을 동시에 처리할 수 있다. 예를 들면 Node.js 웹서버에서 동시에 여러 개의 HTTP 요청을 처리하는 식으로 말이다. 스레드가 하나인데 자바스크립트는 과연 어떻게 동시성을 지원하는 것일까? 정답은 이벤트 루프이다. 자바스크립트는 이벤트 루프를 이용해 비동기적으로 동시성을 지원한다. 정확하게 말하면 자바스크립트 엔진(V8)에서는 이벤트 루프가 존재하지 않으며 단일 콜 스택(Call Stack)을 사용하며, 브라우저나 Node.js 환경에서 비동기 처리를 담당한다. 예를 들면 브라우저에서 비동기 호출을 위해 사용하는 setTim..