전체 글

문제 설명 [소스코드] [프로그래머스 - 광물 캐기] 마인은 곡괭이로 광산에서 광석을 캐려고 합니다. 마인은 다이아몬드 곡괭이, 철 곡괭이, 돌 곡괭이를 각각 0개에서 5개까지 가지고 있으며, 곡괭이로 광물을 캘 때는 피로도가 소모됩니다. 각 곡괭이로 광물을 캘 때의 피로도는 아래 표와 같습니다. 예를 들어, 철 곡괭이는 다이아몬드를 캘 때 피로도 5가 소모되며, 철과 돌을 캘때는 피로도가 1씩 소모됩니다. 각 곡괭이는 종류에 상관없이 광물 5개를 캔 후에는 더 이상 사용할 수 없습니다. 마인은 다음과 같은 규칙을 지키면서 최소한의 피로도로 광물을 캐려고 합니다. 사용할 수 있는 곡괭이중 아무거나 하나를 선택해 광물을 캡니다. 한 번 사용하기 시작한 곡괭이는 사용할 수 없을 때까지 사용합니다. 광물은 주..

실행 컨텍스트의 동작 원리에 대해 간단히 알아봅시다. 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념입니다. 실행 컨텍스트를 이해하게 되면 다음 3가지에 대해 알 수 있게 됩니다. 호이스팅이 발생하는 이유 클로저 동작 방식. 스코프 비동기 처리 방식 실행 컨텍스트란? 실행 컨텍스트는 "실행할 코드에 대한 환경 정보들을 모아둔 객체"입니다. 즉, 함수가 실행되는 환경에 대한 정보를 갖고 있다고 생각하면 됩니다. 함수는 변수, 매개변수, 내장 함수, this에 대한 정보를 갖고 있죠? 이 정보를 갖고 있는 객체라고 생각하면 됩니다. 실행 컨텍스트 동작 방식 자바스크립트는 싱글 스레드로 되어 있으며, 해야 할 작업들을 하나의 스택에 쌓아 보관합니다. 이 스택을 자바스크립트에서는 콜 스택이라 ..

문제 설명 [프로그래머스 - 두 원 사이의 정수 쌍] x축과 y축으로 이루어진 2차원 직교 좌표계에 중심이 원점인 서로 다른 크기의 원이 두 개 주어집니다. 반지름을 나타내는 두 정수 r1, r2가 매개변수로 주어질 때, 두 원 사이의 공간에 x좌표와 y좌표가 모두 정수인 점의 개수를 return 하도록 solution 함수를 완성해 주세요. ※ 각 원 위의 점도 포함하여 셉니다. 문제 풀이 💡 힌트 원의 방정식 x^2 + y^2 = r^2 1 사분면만 계산 후 * 4 ◎ 도전 1 처음 생각한 방법은 아래와 같았습니다. x, y 축을 반복문을 돌면서 x^2 + y^2 이 r1^2 보다 같거나 크고 r2^2 보다 같거나 작으면 count 증가 function solution(r1, r2) { let c..

요즘 최대 관심사는 [성능]이다. 그래서 최근 Reflow와 Repaint 관련 글을 보다가 브라우저 렌더링으로 관심사가 넘어가게 되었고 더 나아가 리엑트 렌더링과 최적화 관련해 글을 보던 중 한 가지 궁금한 점을 발견했다. 내 궁금증은 [10분 테코톡] 앨버의 리액트 렌더링 최적화]로부터 시작되었다. 렌더링 최적화 하는 방법으로는 `useMemo`, `React.memo`, `useCallback`을 사용할 수 있다. 다만, 이 작업은 값비싼 비용이 발생하기 때문에 많이 사용하게되면 성능에 오히려 좋지 않다. Childrend Props를 이용해서 리렌더링을 최적화할 수 있다. 불필요한 렌더링이 발생하지 않도록 처음부터 코드를 잘 작성하자. 근본적인 코드를 개선하자. 그 중, 가장 궁금했던 내용은 ..

# 고민 나는 4번째 토이 프로젝트를 끝내고, 회고를 작성하면서 프로젝트에 대해 다시 생각해 보았다. "무엇을 잘했고 무엇을 못했을까?" 가장 먼저 생각난 것은 내 코드의 유지보수의 불편함이었다. 그만큼 내가 결과물에 집착해서 개발을 했다는 것이다. 토이 프로젝트는 나를 성장시키기 위한 도구일 뿐이다. 나는 현재 프론트 엔드 분야로 취업에 목말라 공장처럼 프로젝트를 찍어 내고 있었고, 그 결과 "좋은" 코드를 만드는 것보다 "구현"에만 집중한 코드를 만들고 있었다. 그렇게 내 코드는 똥💩이 되었다. ( 아... 이래서 지금, 모든 회사에서 서류 탈락하고 있구나? ㅋ ) 나는 "재사용 가능한", "유지보수가 편리한" 컴포넌트를 만들어야 한다는 것을 안다. 하지만 코딩을 할 때는 이 이론은 머릿속에서 점점..

이번에는 파일 드라이브라는 클라우드 웹을 만들었다. 지난 토이 프로젝트 회고때 말한 것 처럼 이번 토이 프로젝트는 스프링 부트를 이용해 백엔드 서버를 만들고 리액트로 프론트를 만들었다. "파일 드라이브" 라는 걸 만들기로 결심한 이유는, 여느때와 같이 유튜브를 보다가 Next.js로 FileDrive라는 웹 사이트를 만드는 영상을 보았다. 맨 앞에 완성된 프로젝트가 어떻게 돌아가는 지 조금 보다가 만들어보면 재밌겠다🤔 생각이 들었고, 바로 프로젝트 구상을 했다. 저분의 기능에 폴더 관리 기능을 추가하기로 했다. 그리고, 저 영상은, 다 보게 되면 왠지 저 분의 코드 구조를 따라하고 따라 칠 것만 같아서 영상은 더 이상 보지 않았다. 구성은 스프링 부트와 MySQL를 백엔드로 하고 업로드할 파일들은 파일..