느릿느릿 프로그래밍

결과부터 말하자면 상위 1% 점수를 받고 통과하였다! 야호~ 지난 8월에 2020 프로그래머스 데브매칭 프론트엔드 하반기에 참여하였다. 이력서를 제출한 모든 사람이 과제 테스트 대상이 되고, 과제를 통과하면 지원한 기업에 "서류 지원"이 되는 시스템이었다. (서류 검토는 기업이 하는거라 떨어질 수도 있다..) 코딩 테스트보다는 과제 테스트에 자신 있었던 나로서는 너무 좋은 기회라고 생각되어서 도전했었다. 테스트는 8월 22일에 쳤고 결과는 9월 9일에 나왔다. 다행히 결과는 과제 통과였다 휴.. 처음에 저 위의 "참여해주셔서 감사합니다"를 보고 탈락이구나~ 라고 생각했는데 메일 중간에 과제 통과됐다는 내용과 생각보다 높은 점수를 받은 걸 보고 깜짝 놀랐다. (아마 신입/경력 상관 없이 같은 과제 테스트를..

이번 여름에는 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을 겪을..