Jacob's Development Blog

웹 개발을 처음 할 때 열심히 외웠던 페이지가 만들어지는 과정. 아무런 경험 없이 무작정 외우다 보니 휘발성 기억이 돼버렸다. 지금도 물론 배워나가는 단계지만, 이제는 암기가 아닌 이해를 해보려고 이 글을 작성한다. 다시 한번 보자. 참고로 사실 웹 브라우저가 어떻게 동작해야 한다는 표준은 없다. 이 글은 크롬을 기반으로 설명하며, 모든 브라우저에 대응되는 글은 아님을 꼭 인식하자. 렌더러 프로세스(Renderer Process) 렌더러 프로세스는 브라우저 탭 안에서 일어나는 모든 일들을 담당한다. 렌더러 프로세스 안에서는 메인 스레드가 우리가 구현한 대부분의 코드를 처리하게 된다. 렌더러 프로세스의 핵심 역할은 HTML, CSS, JS를 사용자가 인터렉션 할 수 있는 웹 페이지로 만드는 것이다. DOM..

앞쪽 내용은 기록용으로 조금 남들에겐 쓸데없는 소리가 글에 있으니, 제목에 해당되는 내용이 궁금하다면 바로 아래를 보자. 처음에 왜 enum을 왜 쓰게 되었는가. 사내에서 디자인 라이브러리를 만들다 보면, 사용자(개발자)의 생산성 향상에 많은 고민을 하게 된다. 각기 다른 컴포넌트에서 최대한 일관된 인터페이스를 제공해 주어 사용자가 새로운 컴포넌트가 추가되더라도 중요한 필드는 "예측 가능하도록" 만들고 싶었다. 물론 처음에는 enum 대신 union 타입을 사용했었다. 하지만 사용하다 보면 문제점이 있었다. Typo 관련 컴포넌트만 보더라도 수많은 크기들이 존재했고, union 타입으로 만들 시 위에서 보이는 많은 타입들을 아래와 같이 정의해 줘야 했다. type Props = { ... scale: "..

2021.03.12 - [Side-Project] - 얼떨결에 만들어본 CSS 사이드 프로젝트 얼떨결에 만들어본 CSS 사이드 프로젝트 세상에 뭐든 잘하는 괴물 같은 사람이 많다. 왜 난 아니지... 근데 처음부터 괴물이었을까. 늦게 시작했으면 부러워 말고 더 열심히 하자. 넋두리... 사실 이 프로젝트의 첫 시작은 프론트 개발 code-masterjung.tistory.com 위에 있는 첫 번째 사이드 프로젝트를 계속하고 있던 중 사실 몇 가지 마음에 들지 않는 것들이 있었다. 1. 처음에는 깃허브에만 올려두고 누가 보면 좋고 아니면 혼자 볼 것이다!라고 시작했지만, 글도 올리고 내 글에서 쓴 예제를 위 스토리북에서 구현하다 보니, 구조나 스토리북 관련 설정들이 마음에 들지 않았다. 뭐랄까... 스토리..

세상에 뭐든 잘하는 괴물 같은 사람이 많다. 왜 난 아니지... 근데 처음부터 괴물이었을까. 늦게 시작했으면 부러워 말고 더 열심히 하자. 넋두리... 사실 이 프로젝트의 첫 시작은 프론트 개발자로서 CSS가 부족하다고 느낄 때가 많았지만, 얼렁뚱땅(?) 화면만 만들고 끝내는 경우가 많았다. 뭐 지금까지는 큰 문제는 없었다. UI가 깨지면 밤을 새우면서 고쳤고 주변 개발자들한테 도움도 많이 요청했다. 그러던 중 지금 회사에서 사내에서 여러 프로젝트에 사용할 목적으로 디자인 라이브러리를 만들게 되었다. 처음에는 어려운건 "material-ui" 랩핑 해서 쓰고 쉬운 것만 직접 만들어서 사용하면 되겠지!"라는 생각으로 시작했다. 정말 오만하면서도 만만하게 생각했던 것이었다. 그리고 만들려고 해 보니 정말 일..

이 글에 들어가기 앞서, 혹시 화려한 애니메이션만 보고 흥미를 가졌다면, 한 가지를 더 생각하면 좋을 거 같다. 예상했겠지만 수학이다. 결국 3D 그래픽은 세 개의 좌표를 선으로 연결해서 입체적으로 보이게 하고, 다음 좌표를 계산하고 다시 렌더링 해서 움직이는 것처럼 보이게 한다. 물론 이 글을 쓰는 나 또한 수학을 잘하진 못한다. 많이 사용하는 삼각 함수는 잘 기억도 나지 않는게 현실이다(벌써 배운 지 10년이 넘었다). 하지만 잔잔한 일상 속에서 나를 더 성장시켜 줄 수 있을 거라는 근거 없는 확신이 든다. 일단 해보자. WebGL이란? WebGL은 Web Graphics Library의 약자로 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API이다. OpenGL E..

최근 three.js나 canvas, d3.js 등에 관심이 생겨 공부하다 보니, 기본적인 수학 개념들을 알아야 했다. 문과지만 수학을 싫어하지 않았기 때문에 "근방(?) 할 수 있겠지?" 하는 마음으로 한번 도전해 본다. 아래 글은 Javascript의 Math API를 기준으로 작성하였다. Math.sin(radians: number): number 이 함수는 숫자의 sin 값인 -1과 1 사이의 수를 반환한다. 여기서 말하는 숫자는 우리가 일반적으로 사용하는 각도가 아닌 라디안(radian or rad) 값인 것을 유의하자(각도를 구하고 싶다면 (radian * PI / 180) ). 라디안이란, 반지름과 호의 길이가 같을 때의 중심각의 크기를 말한다. cf) 라디안(radian) 수학에서 각도에 ..

너무 깊은 내용은 다루지 않는다. 사실 나도 모른다. 적어도 개발자가 svg를 다룰 때 알면 도움이 될만한 정도로 내용을 정리해 보려고 한다. 일반적으로 래스터 이미지의 크기를 변경하는 경우 어떻게 하면 될까? img 태그의 속성으로 width와 height를 지정해도 되고, css selector를 통해 스타일 값을 부여해줘도 된다. png 하지만 내가 다룰려는 요소가 svg라면 조금 다르게 결과가 나올 수도 있다. 왜냐하면 svg의 크기 조정은 단순 이미지의 크기 조정보다는 더 많은 크기 조절 옵션을 제공하기 때문에 조금 복잡하다. 위 이미지의 svg을 다운로드하여 width와 height값을 넣어줬다. 과연 제대로 동작할까? ... 거의 똑같이 나오는거 같다. 근데 실수로 height를 날려버렸다...

svg가 jpg나 png보다 좋다고 말하는 것을 많이 들어봤을 것이다. 그래서 왜 좋냐고 물어본다면 정확히 대답한 사람은 없었다. svg가 크기를 늘리거나 줄여도 안 깨져~ 물론 틀린 말은 아니지만, 더 알고 싶다...! SVG (Scalable Vector Graphics) 상호작용(interactivity)과 애니메이션(animation)을 지원하는 2차원 그래픽스를 위한 확장형 마크업 언어(XML) 기반 벡터 이미지 포맷이다. svg의 장점 백터 기반의 svg는 래스터 이미지(or 비트맵 이미지)와는 다르게 화면 크기가 달라져도 깨지지 않는다. 다만 화면 크기가 달라지면 svg는 "더 크게(혹은 작게) 다시 그려라"라고 명령하면 그만이기 때문이다. svg 이미지는 이미지 그 자체라기보다는 일련의 그..

2021/01/23 - [React] - React로 Threejs 예제 따라 구현하기 React로 Threejs 예제 따라 구현하기 css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 code-masterjung.tistory.com 2번째 구현이다. 처음 예제에서 광원을 줘서 조금 더 3D 다운 개체를 만들었다. 용어가 생소한 부분이 많아 일단 무작정 외울 작정이다. 용어의 이질감을 없애고 이해를 하자(발음도 안되는데 자꾸 이해를 하려고 하니 시간만 낭비했다..) // https://threejsfundamentals.org/threejs/les..

2021/01/28 - [go] - go lang 기본기 다지기1 - 패키지, 변수와 자료형, 포인터 go lang 기본기 다지기1 - 패키지, 변수와 자료형, 포인터 워크스페이스에 3개의 폴더를 생성했다. 소스코드를 저장하는 "src", 컴파일된 패키지를 저장하는 "pkg", go의 바이너리를 저장하는 "bin" 폴더이다. 패키지 패키지 이름은 모든 go 파일의 최상단에 code-masterjung.tistory.com 1편 글에 이어 단순 공부글이다. 함수와 클로저 // main 함수 func main() { // logic ... } // 매개 변수가 있는 경우 func add(a int, b int) { // logic } // 자료형이 같을 경우 한번에 가능 func add(a, b int) {..