리액트 시작 과거 자바스크립트는 웹에서 간단한 연산을 사용하거나 시각적 효과를 주는 단순한 스크립트 언어였지만, 현재 웹 애플리케이션에서 핵심적인 역할을 하고 있습니다. 자신의 영역을 넘어서서 화면에 보여지는 프론트 뿐 아니라 서버도 자바스크립트로 만들 수 있고, 더 나아가서 현재 많은 사람들이 사용하고 있는 슬랙, VSCode와 같은 데스크탑 앱을 만드는데도 자바스크립트가 사용되고 있습니다. 자바스크립트 엔진이 발전하면서 자바스크립트로 큰 규모의 애플리케이션을 만들 수 있게 되었지만, 자바스크립트만 가지고 대규모 애플리케이션을 관리하기는 쉽지 않습니다. 애플리케이션 관리를 조금 더 쉽게 하기 위해 프레임워크가 생겨났고, 대표적인 프레임워크들로 Angular, Backbone.js, Vue.js 등이 있..
전체 글
Portal Slate.js 를 사용하면서 에디터의 기능을 수정할 때 Portal 을 사용해 메뉴를 생성하는 코드를 보게 되었고, Portal이 뭐지? 하는 궁금증이 생겼다. 이 궁금증을 해소하기 위해 찾아간 곳은 리액트 포탈 공식 문서였습니다. 리액트에서는 포탈을 아래와 같이 설명한다. Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 처음에는 이게 무슨 뜻인지 이해가 잘 되지 않았는데 Slate.js의 코드와 문서의 예제들을 보면서 이해하게 되었다. 일반적인 부모-자식 컴포넌트 구조 모든 컴포넌트는 독립적으로 존재할 수도 있고, 부모 또는 자식 컴포넌트를 가지고 있을 수도 있다. 여기서 파란색은 부모, 주황색은 파란색 컴포넌트의 자..
정말 바쁘게 1주차를 보냈다. 첫 주를 보내면서 너무 재밌다고 느꼈다. 이렇게 하루종일 코드를 어떻게 작성해야 될 지에 대해 고민했던 적이 그동안 없었고, 코드를 작성하는 것이 이렇게 재밌게 느껴진 적도 없었다. 아직 로그인이랑, 작은 에디터 프로토타입만 만들었는데, 다른 사람들에게 보여질 수도 있다는 생각이 드니까 "코드를 이렇게 쓰는게 맞을까?" 라는 고민이 더 해지는 것 같다. 그리고 조금 더 꼼꼼하게 코드를 확인하게 된다. 한 주간 가장 기억에 남는 것은 첫 째로 기획 단계를 간과하고 넘어간다는 것이었다. 나도 "당연히 노션 만드는 거겠지?" 라는 생각에 기획부분은 작성하지 않고, 어떻게 프론트와 백을 구성했는지에 대해서만 README에 적었었는데, 이후에는 이 부분을 개선해야겠다는 생각이 들었다..
Typescript를 사용해 nodejs - express 환경 구현하는 방법에 대해 알아보도록 하자. 1. Typescript 글로벌 설치 npm install -g typescript 타입 스크립트를 글로벌로 설치해주자. 2. 프로젝트 생성 npm init npm 프로젝트를 생성한다. 3. 필요 모듈 설치 npm install express --save npm install ts-node typescript nodemon @types/node @types/express --save-dev 4. tsconfig 설정 tsc --init 위의 명령어를 입력하면 tsconfig.json 파일이 생성되는데, 아래와 같이 수정해주면 된다. { "compilerOptions": { "lib": [ "es5", ..
2장. 이름에 정보 담기 프로그래밍하면서 가장 고민 되는 부분 중 하나가 이름을 짓는 것이다. 언제나 창작의 고통은 큰 것 같다. 하지만 잘 지은 이름은 이후에 뿌듯함만 주는 것이 아니라 코드를 쉽게 이해할 수 있도록 도움을 준다. 기존에 코드 컴플리트에서는 tmp, result 와 같은 변수를 사용하지 말라고 추천했었는데, 이 책에서는 조금 관대한 모습을 보여준다. 좁은 범위의 코드 내에서는 위처럼 보편적인 변수명을 사용해도 문제되지 않고, 오히려 좋을 것이라고 말해준다. 하지만 범위가 커지고, 개인의 귀차니즘(?) 때문에 지은 보편적인 이름들은 에러를 발생했을 때, 문제를 발견하기 더 어렵게 만든다고 말한다. 반복문에 사용하는 i, j, k 와 같은 변수명들도 누구나 이 것이 반복문에서 사용되는 인덱..
5월 초에 우아한 테크러닝 4기에 참가 신청을 하라는 메일을 받았다. 지원 동기 및 두 세가지 정도 질문이 있었고, 나의 리액트 및 타입 스크립트 사용 능력에 대한 설문이 있었다. 리액트는 개인적으로 공부해오긴 했는데, 실무에서 사용하지 않고, 따로 공부하다 보니 내가 작성한 코드가 동작은 하지만, 좋은 코드인지에 대한 확신이 없었고, 타입스크립트는 아직 사용해보지 않았다. 솔직하게 지원 동기에 이러한 내용과 더불어서, 현재 회사에서 AngularJS를 사용해 프로젝트를 진행하는데, 리액트를 사용하며 프로젝트를 하면 이 둘을 비교할 수 있을 것 같았고, 나중에 프로젝트를 진행하게 될 때, 둘의 장단점을 고려하여 프레임워크 또는 라이브러리를 선택할 수 있을 것 같아 지원했다는 내용을 작성해 제출했다. 경력..
1장. 코드는 이해하기 쉬워야 한다. 이번은 처음 시작하는 장으로 챕터가 1장 으로 표시된다. 다음 내용부터는 Part 1 의 형태로 파트 내부에 몇 개의 장으로 이루어진 형태로 표시될 예정이다. 가독성이 높은 코드가 소프트웨어의 효율성과 디자인 패턴에 주는 영향은 거의 없다. 이 책의 목표는 가독성이 높은 코드를 작성하는 것이다. return age >= 40 ? price * (1
8장. 실용주의 프로젝트 소제목 실용주의 팀 유비쿼터스 자동화 가차없는 테스트 결국은 모두 글쓰기 위대한 유산 오만과 편견 자동화 할 수 있는 모든 것들을 자동화하자. 그리고 그 시간에 새로운 코드(또는 버그)를 작성하는데 투자하자. 41. 실용주의 팀 실용주의 프로그래머가 실용주의 철학을 가진 팀에서 일하게 되면 생산력은 몇 배로 증가할 것이다. 코드의 품질을 중요시 여기는 문화를 장착하고, 그러한 정신을 갖추지 못한 개발자를 격려하는 문화를 만들자. 팀을 기능을 중심으로 조직하자. 팀을 만드는 것에도 직교성을 유지하도록 하여, 중복되는 일을 하지 않도록 하라. 42. 유비쿼터스 자동화 컴파일 하거나, 코드를 생성하는 일, 빌드 및 테스트를 자동화하는데 힘쓰라. 자동화 할 수 있는 모든 것들을 자동화하..
7장. 프로젝트 전에 소제목 요구사항의 구렁텅이 불가능한 퍼즐 풀기 준비가 되어야만 명세의 함정 동그라미와 화살표 프로젝트를 시작 하기 전에 정리해야 할 사항들에 대해 다룬다. 프로젝트 전에 무엇을 해야할까?? 일단 요구사항을 정리해야 한다. 그리고 어떻게 프로젝트를 진행할 것인지에 대한 계획을 세워야한다. 만약 이 두 가지의 작업이 선행되지 않는다면, 프로젝트가 시작하기도 전에 망할 것 같다는 의심이 들고, 이는 실제 결과로 이어질 가능성이 매우 크다. 36. 요구사항의 구렁텅이 요구사항을 수집하기 보다는 채굴할 줄 알아야 한다. 사용자가 말한 요구사항의 핵심이 무엇인지를 파악하고, 이를 구체화하자. 그렇게 하기 위해서는 사용자와 함께 일하면서 지속적인 요구사항 채굴 과정이 필요하다. 아래 두 개의 요..
만약 자신의 GitHub에 SSH 키 등록이 되어 있지 않다면 GitHub에 SSH 키 등록하기를 보고 키를 등록해주세요. 디렉터리 만들기 일단 repository 디렉터리를 만들어야 한다. mkdir test 로 만들면 되고, test 대신 자신이 사용하고 싶은 이름을 사용해도 된다. git 시작하기 cd test git init 위의 명령어를 실행하면 git으로 해당 디렉터리를 관리할 수 있게 된다. branch 만들기 git branch -M develop 여기서도 마찬가지로 develop 대신 다른 이름을 입력해도 된다. initial commit 하기 보통은 README 파일을 만들어서 initial commit을 진행한다. echo "# test" >> README.md git add READ..