[코드리뷰] 나쁜 리액트 코드를 고치자 - DRY원칙, URL객체
·
개발/코드리뷰
해당 유튜브를 보고 정리한 글입니다.https://www.youtube.com/watch?v=YgNm3pVnvN0 1. 반복되는 코드를 지양하자가볍게 읽고 넘어가주세요! 이유는 아래에 나옴이 코드는 `Route`가 반복된다. } /> } /> } /> } />공통적으로 반복되는 `Route`에서, 특징을 몇 개 뽑을 수 있다.모든 `Route`는 `path`를 갖는다.`element`에 해당 페이지에서 렌더링할 컴포넌트를 넣는다.컴포넌트는 `RequireAuth`컴포넌트로 감싸져 있거나, 혹은 감싸져있지 않다.이 세 가지 특징을 이용해, 라우터의 정보가 담긴 객체 배열을 만들고, 해당 배열을 매핑..
[git] 커밋 변경 이력 되돌리기 - git-revert에 대해 알아보자
·
개발/git
팀에서 v1.0.0 태그를 발행하고, 그 위로 다시 열심히 커밋들을 쌓고 있었다.그런데 다시 예전 버전(v1.0.0)으로 돌아가자는 의견이 나왔다.이 때, 기존의 commit log를 남겨두면서 그 위에 v1.0.0을 최신 커밋으로 쌓으려면 어떻게 해야할까?시간이 없으신 분들은 맨 아래 결론을 봐주세요우선 git-revert에 대해 알아보자.  git-revert의 정의https://git-scm.com/docs/git-revert.html Git - git-revert DocumentationWhile git creates a basic commit message automatically, it is strongly recommended to explain why the original commit i..
[코드리뷰] senior 개발자라면 어떻게 수정할까? - setTimeout, closure
·
개발/코드리뷰
해당 글을 읽고 정리한 내용입니다!https://rahuulmiishra.medium.com/interviewer-senior-developer-lets-see-how-you-handle-this-code-challenge-496d6de9358a  다음과 같은 코드가 있다.function init() { const channel = 'YouTube'; function greet(name) { console.log(`hey ${name}`); console.log(`from ${channel}`); } setTimeout(() => { greet('FrontendMaster'); }, 1000);}init();이 코드를 보고 코드리뷰를 한다면..
[gitlab] 깃랩의 커밋들을 깃허브로 옮기자 - 미러링, gitlab 이메일로 잔디심기
·
개발/git
gitlab에서 열심히 프로젝트를 진행한 당신! 이제 github로 스리슬쩍 옮겨보자. 1. 원본 저장소 clone $ git clone --mirror  git clone --mirror 명령어를 사용해 레포지토리를 클론받으면, bare저장소가 생성된다.   bare 저장소는 주로 중앙 저장소 역할을 하거나 백업용으로 사용된다. 직접 커밋을 만들거나 작업하는 용도가 아니다! bare 저장소의 특징은 작업 디렉토리가 없다는 것인데, 이는 파일의 실제 내용을 볼 수 없다는 뜻이다. 또한 bare 저장소의 내용은 .git 폴더의 내용과 같다.  2. 폴더 이동하기$ cd BARE:main은, 이 저장소가 bare 형식이며 작업 디렉토리 없이 Git 데이터만 포함하고 있음을 의미한다.3. push reposi..
vite는 왜 이렇게 빠를까? - 사전번들링과 Native ESM
·
개발/웹개발
Vite 비트바이트 아니다는 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다. 프랑스어로 "빠르다"를 의미하는데, 이름대로 Vite를 처음 실행해보면 CRA와 비교했을 때 엄청 빠른 것을 확인할 수 있다. 왜이렇게 vite의 실행속도가 빠른지 궁금하여 찾아본 내용을 정리해보았다. 번들링 개발을 하다보면, 컴포넌트를 생성하고 함수를 분리하는 등 기능 단위로 파일들을 쪼개며 모듈화하게 된다. 그런데, 브라우저에서 ESM(ES Module)을 지원하기 전(CommonJS, AMD, UMD..)까지는 JavaScript 모듈화를 네이티브 레벨에서 진행할 수가 없었다. JavaScript 프로그램을 필요에 따라 가져올 수 있는, 별도의 모듈로 분할하는 매커니즘을 브라우저가 지원하지 않았다는..
[git] 원격저장소 url이 바뀌었다...! - git remote set-url
·
개발/git
원격저장소 주소가 바뀌었을 때, 어떻게 수정할까? $ git remote -vorigin http://gitlab/old-repo.git (fetch)origin http://gitlab/old-repo.git (push)git remote -v를 실행하면, 원격저장소 이름, push url, fetch url을 조회할 수 있다.원격저장소 url을 변경하려면 다음 명령어를 치면 된다. (대괄호는 선택사항)git remote set-url [--push] []# 명령어 실행$ git remote set-url origin http://gitlab/new-repo.git# 결과 확인$ git remote -vorigin http://gitlab/new-repo.git (fetch)origin ht..
[프로그래머스] 혼자 놀기의 달인 (javascript)
·
개발/알고리즘
https://school.programmers.co.kr/learn/courses/30/lessons/131130 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr1. 문제를 읽으면서, 박스를 열어보고 박스 안의 숫자 index에 위치한 박스를 열어보고 박스 안의 숫자 index에 위치한 박스를 열어보고 박스 안의 숫자 index에 위치한 박스를 열어보고.... 를 보며 재귀구조라고 생각했다. n 값의 범위도 최대 100이길래 재귀로 푸는 문제임을 확신할 수 있었다.2. 박스를 계속 열다가, 박스 안 카드 숫자의 위치에 해당되는 박스가 열려있으면 박스 열기를 ..
[BOJ][Javascript] 백준에서 자바스크립트로 문제 풀기
·
개발/알고리즘
나름 코딩에 관심이 있는 사람들은 한 번쯤 들어봤을 백준, BOJ!자바스크립트 초심자들도 기웃기웃 했겠지만, 도대체 어떻게 사용하는지 몰라서 포기했던 적이 있지 않을까 싶다.이에 자바스크립트로 백준에서 문제를 입력받고 푸는 방법에 대해 말해보고자 한다. 0. 언어는?자바스크립트는 백준에서는 node.js를 선택하여 풀어야 한다. 내가 정말 자바스크립트만 공부하겠다, 하면 설정에서 언어모드를 'node.js'로 하는 것을 추천한다!그러면 다른 문제 풀이를 볼 때 node.js만 보여준다.만약 다른 언어도 병행한다면,,, 추천하지 않겠다.1. 입력은 어떻게 받는 거죠?입력을 받는 방법은, 백준의 가장 기본문제 1000번을 보면 알 수 있다.https://www.acmicpc.net/problem/1000 1..