전체 글

[LeetCode] 283번 문제 - Move Zeroes

문제 283. Move Zeroes 문제 설명 배열에서 0인 값을 오른쪽으로 이동시키는 문제 반복문을 뒤에서부터 돌아 0인 숫자는 splice하면서 push했다. 여기서 주의할 점은 반복문을 뒤에서 돌았다는 것이다. 반복문을 앞에서 돌면서 splice를 쓰게 되면 0이 연속해서 나온다면 0이 다 이동되지 않는 문제가 있다. 그래서 splice를 중복된 배열에서 사용할 때는 역순 반복을 해야 한다. 성공 코드 const moveZeroes = (nums) => { for (let i = nums.length - 1; i >= 0; i--) { if (nums[i] === 0) { nums.push(nums.splice(i, 1)) } }; return nums; };

5월 1주차 주간 회고

잘한 점 회고, 스크럼을 매일 썼다. 웹팩 빌드환경 설정을 직접 해봤다. 타입스크립트에 더 익숙해 지기 위해 타입스크립트를 적용했다. (이번주 삽질은 8할이 타입스크립트..) 하루에 정한 할당량은 거의 달성했다. 프로젝트 시작 후 매일 PR보냈다. 못한 점 진행하면서 요구사항을 이해해서 아직 뷰 구성 중이라 백엔드와 많은 소통/요구를 못 했다. typescript anti pattern(any type)을 자꾸 쓰게 돼 won이 대신 리팩토링을 해 줬다. 타입스크립트를 삽질한 만큼 잘 쓰지 못 하는 것 같다. (삽질을 잘 못하는듯) UI를 많이 신경쓰지 못했다. 이슈를 먼저 등록해놓지 않았더니 현재 전체 중 어느 정도를 했는지 인식이 잘 안됐다. 생활 패턴을 유지하려고 일찍 자버릇 했더니 절대 코딩 시간..

4월 4~5주차 주간 회고

잘한 점 공부한 키워드로 글쓰기(이번주에는 못했지만..) 컴퓨터를 잘못 사용하고 있다는 것을 알았다. 텐션을 주말까지 계속 일정하게 유지했다(밤에 늦게자는 일 없이 일정했다) 재미있게 할 수 있는 만큼 했다.(리액트 아직까지는 재밌다!) 못한 점 하루에 공부 시간을 정해 뒀었는데 초반 며칠을 제외하고는 공부를 못했다. 점점 정신이 없어졌다. 컴퓨터를 잘못 쓰고 있어서 라이브러리 하나 설치하다가 멘탈이 나가고 현타가 왔다. 리팩토링을 생각만 하고 코드 수정으로 결과는 안 나왔다. 스크럼을 빼먹은 날이 좀 있다. 처음에는 컴포넌트 나누는게 어려우면서 재미있었는데, 계속 하다 보니 비슷한 일의 반복이라고 느껴져 재미가 좀 떨어졌다. 공부한 내용 (포스팅한 것들) 📝 [React] props와 state의 차이..

[LeetCode] 66번 문제 - Plus One

문제 66. Plus One 문제 설명 배열을 하나의 숫자라고 생각하고, 숫자에 1이 더해졌을 때 결과배열을 반환하는 문제 처음에 9와 같이 경계선에 있는 값을 생각하고 무작정 배열을 숫자로 변환해 더했다. 자바스크립트의 숫자형이 감당할 수 없는 크기의 숫자가 배열로 나오면 Fail이 발생했다. 그것에 예외처리를 해 주기 위해 숫자를 중간부터 잘라서 더하는 일도 해 봤지만, 999999999999...와 같은 값은 계산이 불가능하다. 이 문제는 주어진 값이 배열인 점을 이용해서 반복해서 올림이 있는지 찾아내서 값을 바꿔 준다. 근데 digits.unshift(1);를 했을 때 아래 이미지처럼 자동으로 맨 앞자리가 0인 것과 아닌 것을 구분해 1을 붙여 줬다. 이에 대한 이유를 찾지 못했다. 성공 코드 실..

[LeetCode] 350번 문제 - Intersection of Two Arrays II

문제 350. Intersection of Two Arrays II 문제 설명 두 배열에서 중복되게 들어있는 값만 배열로 반환하는 문제 마땅한 더 좋은 방법이 생각이 나지 않아서 이중 반복문을 사용했다. 이중 반복문을 돌아 값을 하나씩 비교하면서 같으면 배열에 push하고 두 배열에서는 삭제하도록 했다. 삭제하지 않으면 [4,9,4,9]와 같은 중복되는 값이 걸러지지 않고 추가로 배열에 들어가 버린다. 성공 코드 const intersect = (nums1, nums2) => { let result = []; for (let i = nums1.length-1; i >= 0; i--) { for (let j = 0; j < nums2.length; j++) { if (nums1[i] === nums2[j]..

우분투에서 웹 프론트엔드 작업 파일 빌드하기

웹 작업은 node + webpack을 사용하고 서버 배포 작업은 우분투 등 리눅스 환경에서 분업하여 한다고 하자. 백엔드 측에서 빌드하고 그 파일을 사용하려면 어떻게 해야 하는지 알아보았다. node + yarn 을 사용했다. dotenv와 같이 gitignore에 올라가 있는 시크릿 파일이 있다면 따로 받아서 프로젝트 루트에 위치시키기 gitignore에 올라가 있는 파일은 보안 문제로 올라가지 않는 파일일 가능성이 있으므로 메일, 메신저 등을 이용해 따로 받는다. nodejs 설치하기 curl -sL https://deb.nodesource.com/setup_xx.xx | sudo -E bash - // xx.xx에 프론트 측 노드 버전 입력 sudo apt-get install -y nodejs ..

[LeetCode][Javascript] 217번 - Contains Duplicate

문제 217. Contains Duplicate 문제 설명 배열 안에 중복되는 값이 있으면 true, 없으면 false를 반환하는 문제 중복을 허용하지 않는 Set에 배열을 넣으면 간단히 해결된다. 만약 중복이 있다면 set의 크기와 원본 배열의 크기가 다를 것이다. 이를 이용해 boolean 값을 반환하도록 하면 된다. 성공 코드 const containsDuplicate = (nums) => { const set = new Set(nums); return set.size !== nums.length; };

[LeetCode][Javascript] 189번 - Rotate Array

문제 189. Rotate Array 문제 설명 1차원 배열이 전해진 숫자만큼 오른쪽으로 회전하도록 만드는 문제. 이 문제의 풀이에는 크게 두 가지가 있는 것 같다. 오른쪽에 주어진 개수만큼 분리해서 왼쪽에 붙여 회전된 결과를 만들기 하나씩 오른쪽에서 떼고 왼쪽에 붙여서 회전하기 이 중 나는 1번으로 풀었다. (2번은 생각을 못 했다) 일단, 오른쪽으로 도는 횟수인 k는 nums의 총 길이를 넘지 않도록 제어해 주어야 한다. nums의 길이를 넘어가면 undefined로 계산하게 될 것이다. (2번 방법으로 풀더라도 반복 계산을 줄이기 위해 길이에 관한 계산을 먼저 해 주는 게 좋을 것이다.) 나머지 값을 계산해 k에 다시 저장하고, 0번부터 k를 뺀 개수만큼 splice를 해 따로 배열에 저장한다. 배..

[LeetCode][javascript] 122번 - Best Time to Buy and Sell Stock II

문제 122번 - Best Time to Buy and Sell Stock II 문제 설명 가장 이익이 크게 거래 누적값을 계산하는 문제 내가 이해한 제약조건은 크게 두 가지이다. 사기 전에는 팔 수 없고, 팔기 전에는 살 수 없다. 사는 값이 바로 이후에 팔 값보다 작으면 산다. 하지만 문제의 예시와 풀이가 살짝 맞지 않는 것 같다. 내가 푼 풀이가 나중에 보니 솔루션 중 하나였지만, Example 2번은 (2-1) + (3-2) + (4-3) + (5-4) 방식으로 계산되어 답이 나온다. 어쨌든 위의 두 조건에 맞춰 반복문을 돌며 누적값을 계산해 나가도록 풀었다. 성공 코드 const maxProfit = (prices) => { let result = 0; for (let i = 0; i < pri..

[리뷰] 리팩터링 2판 - 리팩토링을 해야 하는 이유

리팩터링 2판은 전반적으로 점진적 개선에 초점을 두고 있다. 그 중 나는 1, 2장을 자세히 읽고 나머지 부분은 키워드 위주로 빠르게 읽고 리뷰를 작성한다. 먼저 책에 대해 설명을 하자면, 이 책의 예시 코드는 모두 자바스크립트로 이루어져 있다. 하지만 자바스크립트 언어의 특성인 함수가 일급 객체인 부분이나 고차함수, ES6의 문법은 사용되고 있지 않다. 주언어가 다른 개발자여도 이 책을 보기에 거부감이 들지 않을 것이다. 자바스크립트를 배우고 있는 나로써는 오히려 자바스크립트의 언어적 특성을 살린 리팩토링 책이 있으면 더 좋았을 것 같다는 생각도 들었다. 나는 현재 짧은 프로젝트를 연속해서 하고 있다. 코드 리뷰도 받으면서 진행하고 있는데, 리팩토링을 해야 하는 코드라는 것은 알고 있지만 한 번 작성한..

[Node] npm vs npx vs yarn

npm, npx, yarn, bower 등은 모두 Node 프로젝트에서 설치되는 패키지들을 관리해 주는 툴이라고 할 수 있다. 나는 평소 npm을 사용하고, 서버에서 배포할 때는 npx 명령어를 사용했다. npm으로 설치하는 것과 같은 결과물이 나오는 다른 명령어가 있다는 것을 알게 되어 의미를 정리해 보고자 포스팅한다. NPM 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 npm은 node package manager 라는 말 그대로 노드에서의 패키지 관리자이다. 자바스크립트 환경에서 프로젝트를 시작할 때 node와 함께 설치하라는 Getting Started가 많고, 사용빈도가 높다. NPX npx는 execute npm package binaries의 줄임말로, npm에 속해 있는 n..

[React + Emotion] 리액트에 글로벌 스타일 적용하기

Emotion 라이브러리를 사용해 reset.css를 적용할 수 있는 글로벌 스타일을 적용시키는 방법을 포스팅하려 한다. 1. [reset.jsx] html 기본 스타일을 없애주는 reset.css 스타일을 아래와 같이 넣고 저장한다. reset.css는 https://meyerweb.com/eric/tools/css/reset/ 를 참고해서 넣어주면 된다. 스크린샷에는 일부만 포함시켰다. 2. [App.js] 위의 리셋 스타일이 담긴 Reset.jsx를 import한다. emotion 에서 Global을 import한다. div 태그 안에 을 넣어 준다. Global 태그 아래로 다른 컴포넌트를 넣어주면 Global style이 적용된다.

[React] create-react-app(CRA)의 마법

리액트를 가장 빠르게 시작하는 방법 3가지 1. npx create-react-app my-app 2. npm init react-app my-app 3. yarn create react-app my-app 위의 세 가지 중 하나의 명령어를 입력하면 create-react-app이 설치가 시작돼 마법이 펼쳐진다. webpack, babel 등의 환경 설정을 따로 하지 않아도 바로 리액트로 개발을 시작할 수 있게 된다. 물론 서비스를 만드는 회사에서는 커스텀 환경을 더 많이 쓰겠지만, webpack, babel 등에 대해 완전한 이해가 없는 초보 개발자에게는 바로 개발을 시작할 수 있는 놀라운 환경을 제공해 주는 것이다. 직접 환경 설정을 하는 것도 중요하겠지만, 차근차근 해도 나쁘지 않을 것 같다. 나는..

[React] props와 state의 차이

리액트는 컴포넌트 단위로 나눠서 작업하기에 최적화되어 있다. 그래서 작은 컴포넌트 단위로 잘개 쪼개서 작업하고 또 합쳐서 큰 컴포넌트에 들어갈 수도 있다. 부모와 자식이 존재할 수 있다는 것이다. 이런 사전 지식을 알고 나서 props와 state를 인지하게 되면 둘의 차이를 보다 쉽게 알 수 있다. 참고: 본 블로그의 리액트 사용 예시는 모두 리액트 훅스(함수형)를 사용하고 있습니다. 틀린 내용이 있다면 댓글로 피드백 부탁드립니다 :) props란? 자식 컴포넌트에서 상속받아 쓰는 부모 컴포넌트의 상태 값 사용 예시 function Welcome(props) { // 자식 컴포넌트 return Hello, {props.name}; } function App() { // 부모 컴포넌트 return ( )..

4월 3주차 주간 회고

잘한 점 저번주보다 즐기면서 할 수 있었던 것 같다. 마지막까지 버그를 해결하려고 노력했다. 공부한 키워드를 정리했다. 이제 조금씩 정리하면서 해 보자 백엔드의 요구사항(로그인 기능)을 받아들여 만들었다. 잘 못한 점 문제 상황에 대해 빠르게 대처하지 못했다 (특히 마지막에) 리팩토링을 거의 못 했다. 매직넘버.. 윽.. 서버에서 프론트에서 잘못해서 생긴 버그까지 다 핸들링해 주셔서 너무 미안했다. 잘 이해하지 못한 것을 더 파고들어 질문하지 못했다. 더 적극적으로 나서야 겠다. 공부한 내용을 정리하려고 계획을 세웠지만 못 했다. 개발 하면서 해야겠다. 알게 된 내용 mouse event drag event offsetHeight, getBoundingClientRect webpack.config pro..