전체 글

들어가기에 앞서,React Native Expo 가 아닌 React Native Cli 를 이용한 프로젝트 생성 방법에 대한 글 입니다.갑자기 앱 한번 만들어 보고 싶어서, React 를 할 줄 알기에 React Native 를 다짜고짜 시작했지만 프로젝트 생성하고 실행하는데 이렇게 다사다난할 줄 꿈에도 몰랐습니다. (3일 걸렸...🫥ㅋ) 전체적인 실행 방법은 React Native 공식 문서에 나와있습니다.React Native 환경 설정 방법 : https://reactnative.dev/docs/set-up-your-environmentReact Native Cli 실행 방법 : https://reactnative.dev/docs/getting-started-without-a-framework?p..

저는 LeetCode 알고리즘 문제를 풀 때 문제를 로컬에서 코드 작성 후 테스트 케이스를 통과하는 경우 LeetCode 사이트에 붙여 넣어 확인하곤 했습니다. BinaryTree 문제 같은 경우, 테스트 케이스는 리스트로 주어지지만 코드를 작성할 때는 TreeNode 인스턴스를 이용해서 해결을 해야합니다.리스트로 된 테스트 케이스[칼럼 1]를 TreeNode를 이용해서 [컬럼 2]처럼 인스턴스를 생성하고 [컬럼 3]처럼 되어야지 테스트가 가능합니다.테스트 케이스TreeNode 인스턴스 생성TreeNode 인스턴스 결과[2,1,3,null,null,0,1]const tree = new TreeNode(2);tree.left = new TreeNode(1);tree.left.left = null;tree...

문제 설명 [소스코드] [프로그래머스 - 광물 캐기] 마인은 곡괭이로 광산에서 광석을 캐려고 합니다. 마인은 다이아몬드 곡괭이, 철 곡괭이, 돌 곡괭이를 각각 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를 이용해서 리렌더링을 최적화할 수 있다. 불필요한 렌더링이 발생하지 않도록 처음부터 코드를 잘 작성하자. 근본적인 코드를 개선하자. 그 중, 가장 궁금했던 내용은 ..