어쩌다 보게 된 개발바닥 유튜브의 아래 두영상을 보고 쓰게 된 글이다. 시선 강탈하는 영상 썸네일에 이끌려 보게되었는데 생각해 본 것, 볼것들이 많아 정리해 봤다. (Q와 A모두 영상에 나오는 내용으로 개인적인 생각은 -> 표시 이후에 적었다. ) Q : 스타트업에서 인원을 채워나가면서 몸집을 불릴 때, 10-20명까지는 어떻게든 채용이되는데 50명 100명 200명은 어떻게 뽑나?? 이구간이 채용이 힘든 시기다. 20명 -> 100명으로 갈 때 채용 시 뭘 포기할 수 있는지? 개발실력은 포기하고 회사비전에만 동의하는사람 OR 개발실력은 좋으나 비전에는 관심이 크게 없는 사람 A : 비전을 포기한다. 진짜 초기일 때는 비전을 포기하면 동력이 안 생기지만 30명 정도까지 갔다면 좀 내려놔도 될 거 같다. ..
코드리뷰는 여러 측면에서 중요한 과정이다. 회사 입장에서는 개발자가 회사를 떠나도 코드는 유지되야 하고(지식경영(knowledge management) 측면), 개발자는 성장할 수 있는 기회를 가지게 되며 팀 입장에서는 팀워크와 코드쉐어링을 통한 장애에 대한 불안감을 감소시킬 수 있다. 도입 전 고려사항 코드 리뷰에 참여하는 구성원들의 인식이 같은 곳을 바라보는가? 문화로 받아들일 준비가 되어있는가? 어떤 코드가 좋은 코드에 대한 기준을 먼저 정하자. 전체적인 코드 컨벤션 확립과 코드 일관성을 유지하기 위한 도구 도입하자. 불필요하고 소모적인 리뷰로 인해 시간 낭비, 리소스 낭비를 예방해야 한다 코드리뷰에 대한 방법 및 리뷰 작성 시 고려사항들 1. 하나의 프로젝트는 일관성이 있어야 하고 클린코드를 지향..
You Don't Know JS : this와 객체 프로토타입, 비동기와 성능을 읽고 정리한 내용입니다. ==================================================================== 함수는 this로 자기 참조를 할 수 없다. function foo(num) { console.log("foo : " + num); this.count++; } foo.count = 0; let i; for(i=0; i5){ foo(i) } } // foo:6 // foo:7 // foo:8 // foo:9 console.log(foo.count); //0 foo.count =0을 하면 foo라는 함수객체에 count프로퍼티가 추가된다. 하지만 this.count에서 this는 ..
이 페이지는 계속 업데이트 될 예정입니다. =============================================== error Duplicate case label no-duplicate-case 원인 : switch문에서 case가 중복되는 경우 발생하는 에러. 해결 방안 : 중복된 케이스문을 하나만 남기고 지우면 해결됨 error img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text 원인 : img태그안에 alt속성이 없는 경우 발생하는 에러. 해결 방안 : alt 속성자체가 필수는 아니지만 이 경우 대체텍스트이므로 빈스트..
모바일 환경이 고려되지 않고 개발한 제품을 급하게 모바일 지원할 일이 생겼다. 개발과정에서 개발자 도구의 device mode를 활용하여 그때그때 확인하고 있었는데 기기를 선택해도 해당 기기와 배율이 맞지 않는 것처럼 느껴졌는데 역시나 적용이 안되고 있었다... Device Mode : 디바이스 모드는 모바일 뷰포트를 시뮬레이팅 해볼 수 있는 기능이다. 크롬 개발자도구를 켜면 좌측 상단 element 선택하는 아이콘 바로 옆에 위치하고 있다. Dimensions를 Responsive로 설정하면 자유롭게 뷰포트의 크기를 지정할 수 있고, 특정 기기를 선택한 경우 해당 디바이스에서 쓰는 뷰포트 사이즈로 고정되게 된다. 디바이스 선택후에도 뷰포트 사이즈에 따라 적용해둔 CSS가 적용되지 않는다면 아래 설정을 ..
Object.assign() 메서드는 원본 객체(sources)의 모든 열거 가능한 자체 속성을 복사해 대상 객체(target)에 붙여 넣는다. 그 후 대상 객체를 반환한다. Object.assign(target, ...sources) target : source의 속성을 복사해 반영한 후 반환할 객체 sources : target에 반영하고자 하는 속성들을 가지고 있는 객체 이때, target 의 속성 중 source와 동일한 키를 가지는 속성의 경우 그 속성 값은 source의 값으로 덮어 쓰인다. 즉, 키가 겹치는 경우 뒤쪽 객체의 속성 값이 앞쪽 객체의 속성값보다 우선시 된다. const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const..
https://www.npmjs.com/package/react-router-dom react-router-dom Declarative routing for React web applications. Latest version: 6.3.0, last published: 3 months ago. Start using react-router-dom in your project by running `npm i react-router-dom`. There are 14337 other projects in the npm registry using react-router-dom www.npmjs.com react-router-dom 라이브러리가 5버전에서 6버전으로 넘어가면서 가 로 변경되었다. 프로젝트의 pack..
ESLint와 Prettier 설정 후 아래와 같은 에러를 마주쳤다. 해결 방법을 찾다 보니 줄 바꿈과 관련된 변경된 prettier 설정이 원인이었다. pretttier공식문서를 찾아보았다. Windows에선 LF를 Mac OS와 Linux에서는 CRLF를 줄 바꿈 값으로 사용해서 서로 다른 OS를 사용하는 사용자들 간의 협업 시 줄 바꿈 값이 섞이게 되었고 이를 해결하기 위해 Prettier에서 LF로 강제한 것이다. LF로 통일시킨 이유는 모든 운영 체제의 모든 최신 텍스트 편집기가 \n(LF)를 사용하기 때문이라고한다. 때문에 Prettier 2.0.0 버전 이후부터 end of line값의 default를 auto에서 LF로 변경하였는데 VSCode에서도, 프로젝트 내에서도 여전히 CRLF를 쓰..
ref란? : 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법. reference의 줄임말 리액트 id를 사용하면 안되나? : id를 사용할 수는 있으나 JSX안에서 DOM에 id를 달면 해당 컴포넌트를 여러번 사용시 중복 id를 가진 DOM이 여러개 생기므로 사용을 권장하지 않는다. 반면 ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 발생하지 않는다. ref는 어떤 상황에서 사용해야하는가? : DOM을 꼭 직접적으로 건드려야 할때 - 특정 input에 포커스 주기 - 스크롤 박스 조작하기 - Canvas요소에 그림그리기 등 ref 사용 1) 콜백 함수를 통한 ref설정 : ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 된다. 이 콜백함..
서버 이중화 : 인프라 설계 및 운영시 서비스의 안정성을 위해 이중으로 구성하는 것. 서버 이중화는 물리적 또는 논리적인 서버 등을 구성하여 하나의 서비스에 장애 발생 시 다른 서버를 통해 서비스를 지속 가능하게 한다. 장애가 일어난 Active서버를 내리고 대기하고 있던 Stand by서버를 올리는 것을 fail over라고 하며 이를 보통 네트워크 장애 발생 시 노드 간 fail over가 실행되도록 설정했다고 말한다. fail over발생시 Active 서버에 할당된 가상 IP주소를 제거하고 Stand by서버에 해당 주소를 재할당하기 때문에 클라이언트는 동일한 IP주소로 그대로 접속이 가능하다. 서버 이중화의 목적 1) 장애 또는 재해시 빠른 서비스 재개를 위함 2) 원활한 서비스를 위함 서버 이..
