느릿느릿 프로그래밍

이번 여름에는 2020 컨트리뷰톤 "ESLint"팀에 참여하여 오픈소스 기여 활동을 하고 있다. 2018년도에 "큐브리드"팀에 참여하였을 때는 Git도 잘 몰랐던 때라 아무것도 못했었는데 이번에는 처음으로! 오픈소스에 기여를 해보았다😎 (물론 멘토님의 도움이 컸다. 감사합니다😊😊) 기여는 아래와 같은 단계로 진행 했다. 1. 프로젝트 및 이슈 선정 2. 이슈 분석 3. 이슈 해결 4. PR 1. 프로젝트 및 이슈 선정 나는 최근 React와 Typescript를 주로 사용하고 있어서, 둘 중 고민하다가 typescript-eslint 프로젝트를 보기로 결정했다. 한참 Typescript와 친해지는 중이라서.. 이슈 해결하면서 rule도 보고, eslint가 어떻게 돌아가는지 공부하면 재밌을 것 같았다! ..

**사소한 주절주절.. 본문은 이 단락 바로 밑에 있다! 내가 맨 처음 시작한 웹은 jsp 였다. 그 후에 순수 html, css, javascript로 (서버 없이) 페이지 만들어보다가 React+nodejs로 제대로 된 웹 페이지들을 구현했었다. 그런데 jsp로 웹 공부를 할 때, 당시에는 학교 과제가 급급해 어떻게 만드는지만 공부했었지 이게 어떻게 돌아가고 브라우저에서 어떻게 렌더링 되는지 관심을 가지지 않았었다. 이후에 React를 공부하면서(이 때 쯤에 이것저것 하다가 웹이 제일 재밌네! 하고..) 이런 과정에 관심을 가지고 공부하기 시작했다. 그런데 이게 정리를 안하니까 자꾸 그때그때 찾아보게되어서 ㅠㅠ 시간 아까워서 정리하는 글!! 들어가기에 앞서.. 서버사이드 렌더링과 클라이언트 사이드 렌..

ESLint 및 그 외 도구들 eslint: javascript 문법 검사를 해준다. prettier: 코드를 자동으로 정리해줌. 코드 스타일 통일 할 때 많이 쓰인다. @typescript-eslint/eslint-plugin: typescript에 esline 적용하기 위함. 이걸 안하면 typescript interface 마다 no-used-vars 규칙이 걸린다. 설정은 공식 문서에서 안내하는대로 하면 된다. => 원래는 tslint가 따로 있었는데, 작년 중순쯤부터 업데이트가 중단되었다.(tslint의 성능이 eslint 보다 좋지도 않고 따로 설정하려니 번거롭다는? 이유로) 그래서 지금은 eslint에 이 플러그인을 적용하는 추세. ** eslint + prettier 설치 시, 요것들 설치..

|컴파일러, 인터프린터를 왜 쓰지? 왜냐면 컴퓨터는 이진수만 이해 할 수 있기 때문이다! 100010101과 같은 0과 1의 조합만을 이해한다. 여기서 0과 1을 이해한다는 말은, CPU에 전기가 들어 올 때의 전압의 강도를 의미한다. 전압이 크면 1, 작으면 0으로 보고 이 조합에 따라 다른 명령어를 실행한다는 의미. 이렇게 CPU가 이해 할 수 있는 명령어의 모음을 기계어 셋(instruction set)이라 한다. 요 기계어는 어디서 올까? CPU 회사에서 온다. CPU가 이해할 수 있는 명령어니까.. 그래서 회사나 버전 마다 이 기계어가 다를 수 있다. 그런데 우리는 프로그램을 만들 때 우리가 이해할 수 있는 언어로 작성한다. var name = "sudal"; 이런 식으로, 우리가 알아들을 수 ..

나는 코딩할 때 Intellij를 쓰고 있고, 그래서 Git 관리도 Intellij에서 한다. 그런데 아주 가끔 Intellij를 키고 프로젝트를 보면 분명 어제 다 커밋해 놓은 것인데 전부 add해야한다고 나와있을 때가 있다. add/commit이 다 깨져있는 것이다.. 정확한 이유는 모르겠지만 해결 방안은 찾았다. | 해결방법 1) 프로젝트폴더/.git/refs/heads 폴더로 이동 후, 해당 파일을 열어본다. 텅 비어있을 것이다. 원래 여기에 commit hash가 있어야한다. 2) 프로젝트폴더/.git/logs/HEAD 파일의 마지막 커밋 로그에서, 2번째 hash를 1)의 파일에 복붙해준다. 1)의 파일 내용을 싹 지우고(빈 공백으로 채워져있음) 복붙해주면 된다. 3) 1)의 파일을 저장 후 ..

| Hidden Class - 클래스 기반 언어가 아닌 JS를 클래스 기반 언어의 메모리 관리 처럼! 할 수 있게 해준다. 자바스크립트는 클래스가 아닌 프로토타입 개념의 언어이다. 다른 개념으로 얘기하자면, JS는 동적 타입 언어이다. 여기서 잠깐, 동적 타입 언어(Dynamically typed languages)란? Javascript, Python과 같이 타입을 써주지 않는 언어를 말한다. 그래서 런타임에 타입이 결정된다. 반대로 정적 타입 언어(Statically typed language)의 경우, 타입을 명시하고 코드를 작성하기 때문에 컴파일 때 변수의 타입이 결정된다. Java, C, C++ 등이 이에 해당한다. 정적 타입 언어들은 컴파일 때 어떤 변수의 메모리 위치를 특정할 수 있고 런타임..

* 이 내용은 React의 공식 문서를 보고 정리한 내용입니다. 자세한 내용은 여기를 확인하세요. React 16.8 버전에서 새롭게 추가된 Hook을 보았다. 함수형 컴포넌트에서도 state, 생명주기와 같은 기능을 사용할 수 있다는 내용인데.. 이미 Class형 컴포넌트에서 가능한 일을 왜 함수형 컴포넌트에서도 가능하게 만들었을까?하는 궁금증이 생겼다. 그래서 공식 문서를 보고 간단히 내용을 정리해보았다. 왜 Hook이 추가되었는가? | 기존 React에서는 컴포넌트 사이에서 상태와 관련된 로직 재사용이 어렵다. 그래서 우리는 context(provides, consumers), render props, HOC와 같은 패턴을 사용해왔다. 그러나 이러한 패턴들을 사용하면서 wrapper hell을 겪을..

(정보 업데이트 !!) ES6 부터는 JS에서도 Class를 쓸 수 있게 되었다! 이제 JS에서도 Class를 통해 상속이 가능하다! prototype : 원형 자바스크립트는 객체지향언어이지만, 클래스 개념이 없다. 대신 Prototype 이라는 것을 사용한다. 그래서 자바스크립트는 Prototype 기반 언어라고도 불린다. 1. 프로토타입이란? Javascript(이하 JS)에서 객체 생성은 함수를 통해 이루어진다. 그리고 JS에서 생성되는 객체는 전부 Object의 자식인 것이다! 객체 생성의 과정을 보기 전에 일단 JS에서 함수를 정의했을 때 일어나는 일을 살펴보자. 예로 Person 함수를 정의해보자. 우리가 Person 함수를 정의하면, JS에는 함수만 짠! 하고 생기지 않는다. Person 함..