개발기록

Main.java 파일을 생성해서 실행하기까지의 과정을 순서대로 따라가기 위해서 이해해야하는 개념 Main.java(소스코드) -> javac -> Main.class(바이트코드) -> java -> JVM이 실행 javac: 컴파일러 (Java Compiler).java 소스를 바이트코드(.class)로 컴파일하는 역할. 결과물이 기계어는 아님. 특정 CPU가 아닌, JVM이 읽을 수 있는 중간언어. 문법적 오류가 발생하면 컴파일이 실패하여 문법 오류를 잡을 수 있게 해줌. JVM: 자바 가상 머신(Java Virtual Machine)바이트코드를 실제로 실행하는 가상의 컴퓨터. 바이트 코드를 그 컴퓨터의 기계어로 바꿔서 작동시키고, 메모리 관리 및 GC(Garbage Collector) 역할도 담당한..

(1) Excalidraw clone commit(2) React 작동 원리 공부https://codingrecorder.tistory.com/entry/React-%EB%82%B4%EB%B6%80-%EC%9B%90%EB%A6%AC-%EA%B3%B5%EB%B6%80-01 React 내부 원리 공부 01JSX는 그냥 객체가 된다 위 코드가 컴파일 되면 React.createElement("canvas", { id: "canvas", width: 800 });// 결과는 평범한 JS 객체가 됨// { type: "canvas", props: { id: "canvas", width: 800 }, ... } 컴파일 결과는 단순한 Jcodingrecorder.tistory.com

JSX는 그냥 객체가 된다 위 코드가 컴파일 되면 React.createElement("canvas", { id: "canvas", width: 800 });// 결과는 평범한 JS 객체가 됨// { type: "canvas", props: { id: "canvas", width: 800 }, ... } 컴파일 결과는 단순한 JS 객체가되는 것이지, DOM이 아닙니다. 브라우저는 이 객체를 전혀 모르는 상태입니다. 이 객체는 작고, 가볍고, 만들고 버리는 비용이 0 이 됩니다(DOM 조작보다 훨씬 저렴함). 이걸 React Element라고 부릅니다. React를 쓰는 앱의 전체 그림가장 낮은 1층: React Element { typ: "canvas", props: {...} }매 렌더링마다 새로 ..

아프다First Commit 해설 적는중https://codingrecorder.tistory.com/entry/Excalidraw-%ED%81%B4%EB%A1%A0-%EC%BD%94%EB%94%A9-from-first-commit-01 Excalidraw 클론 코딩 from first commit [01]https://www.youtube.com/shorts/_gCH2SB2PkE Excalidraw의 가장 첫 커밋을 똑같이 따라쳐서 만들어봤습니다.코드는 따라쳐서 올려봤습니다 rough library를 도형 그리기에 사용한다 (Rough.js)손으로 그린듯한 느낌,codingrecorder.tistory.com

어제도 아픔 Excalidraw First commit부터 따라가면서 커밋 재현해보기https://github.com/zero0bean/excalidraw-clone/commit/61981aaf243f32c4b46cdb89063992eb08197472

https://www.youtube.com/shorts/_gCH2SB2PkE Excalidraw의 가장 첫 커밋을 똑같이 따라쳐서 만들어봤습니다.코드는 따라쳐서 올려봤습니다 rough library를 도형 그리기에 사용한다 (Rough.js)손으로 그린듯한 느낌, 삐뚤삐뚤하게 도형을 그려주는 라이브러리입니다. Excalidraw의 특유의 스케치 느낌을 주기 위해서 초기에 사용한 라이브러리로 보입니다. Canvas에서 그리게되면 선이 반듯하게 그려지는데 Rough.js는 선을 그리되 미세하게 흔들고 두번 겹쳐 긋고 사선을 그릴때는 사선 해칭으로 처리해서 펜으로 내부를 채운듯한 느낌을 줍니다. Rough.js는 렌더러는 아닙니다. 결국 Canvas API를 사용하니까요. 그럼 Rough는 뭘해주냐? ca..

꾸준함도 감기는 못 이긴다 GG

얕은 감기 -> 몸살로 진화. 주말 내내 잘 쉬었습니다. 왠지 내일도 아플것 같음 오늘한것 1. 리트코드 Easy 하나 푼거 ^~^https://codingrecorder.tistory.com/entry/LeetCodeAlgorithm-1260-Shift-2D-Grid [LeetCode/Algorithm] 1260. Shift 2D Grid행렬 grid(mxn) 이 주어질 때 k 칸 만큼 오른쪽으로 순환 right shift한 행렬을 return 하기 문제 해결 아이디어- Grid 배열을 flat() 으로 펼쳐서, slice로 _k 칸 밀어준다.- 그냥 k 갖다 썼다가 맞왜틀 당함. kcodingrecorder.tistory.com

행렬 grid(mxn) 이 주어질 때 k 칸 만큼 오른쪽으로 순환 right shift한 행렬을 return 하기 문제 해결 아이디어- Grid 배열을 flat() 으로 펼쳐서, slice로 _k 칸 밀어준다.- 그냥 k 갖다 썼다가 맞왜틀 당함. k가 전체 배열 m x n 값보다 큰 경우였음. const _k = k % mn 으로 예방한다 /** * @param {number[][]} grid * @param {number} k * @return {number[][]} */var shiftGrid = function(grid, k) { const m = grid.length; const n = grid[0].length; const mn = m * n; const flatt..