개발자의 협업
개발자의 협업에 관해 좁은 견해를 가지고 있던 나를 반성하며 최근 협업에 대해 얻었던 인사이트를 기록해 두려고 해요. 글을 읽어보면 어떤 분들은 당연한 이야기를 한다고 하시겠지만 아직 현업에 종사하지 않는 취업 준비생인 저한테는 굉장히 좁은 견해를 넓혀주는 계기가 되었어요. 부트캠프 메인 프로젝트를 진행할 때 멘토링 시간을 가졌었는데, 멘토님께서 일하시는 회사의 업무에 대해 잠깐 얘기해 주셨던 적이 있었어요. 정확히 어떤 이야기였는지 잘 기억은 나지 않지만, 대략적으로 웹앱을 개발하면서 안드로이드 개발 팀과의 의사소통 문제, RN에서 관리되는 상태를 어떻게 리액트에게 알려줄 것인가 이런 느낌의 이야기를 했던 것 같아요. 멘토님 말씀을 들어보니, 제가 너무 협업에 대해 디자이너, 백엔드와의 협업에만 생각한..
💫오늘의 깨달음 이번 리액트에 대해 복습하던 중 SPA에 대해 미처 알지 못했던 단점들과 JSX에 대해 기록해보고자 한다. SPA의 단점 1. 자바스크립트 파일의 크기가 크다. 애플리케이션의 규모가 커지면 초기에 로딩해야 하는 자바스크립트나 CSS 번들 파일의 용량이 증가한다. 번들 파일의 용량 증가는 애플리케이션의 초기 로딩 성능 저하의 원인이 된다. 이러한 단점을 보완하기 위해 `트리 쉐이킹`, `코드 스플리팅`과 같은 기법을 사용해 번들 파일 용량을 줄일 수 있다고 한다.나의 경우에는 리액트에서 css를 정의할 때 `styled-component`보다 `CSS in CSS` 방식인 `CSS module` 방식을 더 선호했다. 개인적으로 css는 css 파일에 정리되어 있어야 뭔가 마음이 편하고 가독..
💫오늘의 깨달음 1. 자바스크립트 sort() 자바스크립트의 sort() 메서드는 "퀵 정렬"로 구현되어 있는줄 알았는데, V8 엔진에서는 "삽입 정렬"과 "합병 정렬"을 결합하여 만든 정렬 알고리즘인 "Tim sort"로 구현되어 있다고 한다. 그리고 브라우저마다 sort() 구현의 알고리즘이 다르다고 한다. 파이어폭스의 경우 "합병 정렬"을 사용한다고 한다. sort() 메서드를 사용할 때 전달인자인 compareFunc()을 제공해도 되고 안해도 되는데, 비교함수를 제공하지 않을 경우 요소를 자동으로 ASCII 문자를 기준으로 오름차순 정렬한다. 즉, "[1, 4, 3, 10, 2, 5]"의 배열을 오름차순으로 정렬할 때 비교함수를 제공하지 않을 경우 "[1, 10, 2, 3, 4, 5]" 순으로 ..
💫오늘의 깨달음 1. 윈도우와 맥 협업하면서 생기는 문제 운영체제마다 에디터에서 개행을 할 때 들어가는 문자열이 다르다는 것을 알게 되었다. 이러한 문제 때문에 jest에서 테스트 케이스가 통과되지 않았다... 윈도우의 경우 text \r\\n carrage return과 line feed가 동시에 들어간다. (CRLF) 반면, 맥의 경우 text \\n line feed 하나만 들어간다.(LF) 이러한 차이점 때문에 jest에서의 테스트 환경 혹은 git에서 협업할 때 문제가 발생할 수 있다. [참고 사이트] https://velog.io/@yeonnex/git-%EC%9C%88%EB%8F%84%EC%9A%B0%EC%99%80-%EB%A7%A5%EC%9D%98-%EA%B0%9C%ED%96%89%EB%A..
💫오늘의 깨달음 1.addEventListener vs onclick 브라우저 호환성 addEventListener는 IE 6,7,8 에서는 호환되지 않는다. addEventListener 호환성 확인 버블링, 캡쳐링 설정 가능 여부 addEventListener는 3번 째 파라미터로 버블링, 캡쳐링 동작 여부를 설정할 수 있다. 3번째 파라미터 type을 true로 설정하면 버블링, false로 설정하면 캡쳐링 (default는 false) 이벤트 중첩 onclick 등과 같은 메서드의 경우 하나의 이벤트만 등록이 가능하다. 반대로 addEventListener의 경우 여러 이벤트를 등록 가능하다. 참고사이트 2. localStorage와 sessionStorage 웹 스토리지 객체 localStora..
💫오늘의 깨달음 오늘 git에 대해 몰랐던 부분이 있었다. 1. git remote add git remote add origin 을 사용하며 원격 레포지토리의 주소를 등록했다. origin이 무엇을 의미하는지 크게 신경쓰지 않고 그냥 외우듯 사용해 왔는데 여기서 origin은 을 대신할 이름을 뜻하는 거였다. 코드로 치면 alias 개념. 2. 최근 commit 1개만 취소 git reset HEAD^ 3. git remote -v 연결된 리모트의 주소 목록과 주소를 보여준다. 4. git pull / git fetch pull 명령어는 원격 저장소의 정보를 가져오면서 자동으로 로컬 브랜치에 병합(Merge)까지 수행해주는 명령어이다. 반대로 fetch는 원격 저장소의 메타 정보를 확인 후 변경된 내용..
💫오늘의 깨달음 div 엘리먼트를 생성하였지만 변수에 할당하지 않았을 때? HTML DOM을 다루는 부분에서 div 엘리먼트를 생성했지만 변수에 할당하지 않은 경우 append 하기 전 메모리에 저장되어 있다가 append 하는 순간 부모 요소의 자식 요소로 추가된다. append를 통해 DOM Tree 요소에 추가되지 않았다면 가비지 컬렉터에 의해 삭제된다. 내가 모르는 this this를 단지 실행하는 주체를 가리킨다고 생각해왔다. 코어 자바스크립트 책에서 this에 대해 생각보다 알지 못한 내용들이 많았다. 우선, 자바스크립트 엔진은 '전역변수를 선언하면 이를 전역객체의 프로퍼티로 할당한다'전역 공간에서는 var로 변수를 선언하는 대신 window의 프로퍼티에 직접 할당하더라도 결과적..
💫오늘의 깨달음 함수 선언 시 함수 표현식을 사용하자. 함수를 선언하는 방법에는 함수 선언문function declaration과 함수 표현식function expression이 있다. 둘 모두 함수를 새롭게 정의할 때 쓰는 방식이다. 함수 선언문 function a() {} 함수 표현식 const a = function () {} 결론부터 말하면 함수 선언문은 함수 호이스팅이 발생하므로 사용하는 것을 지양해야 한다. 간단한 예를 들어보자 개발자가 A가 100번째 줄에 인자 두 개를 받아 두 인자의 합을 반환하는 간단한 sum 함수를 선언했다. 그런데 어느날 새로 입사한 개발자 B가 5000번째 줄에 문자열로 "x + y = (x+y)"를 반환하는 sum함수를 새로 선언 후 별다른 테스트도 거치지 않은 ..
