Jun, Log

Open Source

mozilla/addons-server

- 오픈소스 생태계 이해와 망망대해 같은 오픈소스 세상에서 소스리딩 및 Bug Fix 가능

Book

1. HTML5 & CSS3백견불여일타 html5 & css3

19.08.26 ~ 08.29 (1독)

19.08.31 ~ 09.06 (2독)

- 기본적인 HTML / CSS 작성 및 읽는 것이 가능

- 다양한 예제와 책들을 보면서 더욱 익히도록 하자

2. 자바스크립트 프론트엔드 프로젝트 가이드

19.09.06 ~ 09.08 (1독)

19.09.09 ~ 09.19 (예제 프로젝트 재구성)

- HTML / CSS 학습이 한번 진행 되었기 때문에 학습이 수월

- 2개의 프로젝트는 JQuery로 구성 되었으며 이 프로젝트를 바닐라JS로 다시 구성 학습

- 이렇게 프로젝트를 반복, 반복, 반복 작성 해봐야 실력이 쑥쑥 는다.

- 프로젝트1 (패스트푸드 찾기)

* HTML, CSS, Vanilla Js

* API 호출, 데이터 화면 출력(HTML 템플릿 사용), 페이징, 단일페이지

- 프로젝트2 (트립 어드바이저)

* HTML, CSS, Vanilla Js, Flatpickr

* Datepicker 사용, 데이터 화면 출력(HTML 템플릿 사용)

3. 게임으로 익히는 코딩 알고리즘

19.09.06 ~ 09.27 (1독)

- 알고리즘, python

- Coding Game

4. 읽기 좋은 코드가 좋은 코드다

19.09.21 ~19.10.02 (1독)

- Clean Code

5. 리액트를 다루는 기술

19.10.9 ~

-  React JS

Lecture

1. JS, GraphQL, React, React Native

19.09.20 ~ 09.28 (Backend - GraphQL, Prisma)

19.09.29 ~ 10.07 (Frontend - React, Hooks)

19.10.08 ~ 10.31 (App - React Native)

- JS, GraphQL, React, React Native (Web Dev Full Stack)

- 신기술을 익히고 직접 만들어 보고 또 만들어 보자.

- Restful api를 넘어 더욱 심플하게 기능 개발에 집중이 가능

- CafeLife - Backend(GraphQL, Prisma)

- CafeLife  - Frontend(React JS, Apollo)

Project

Account Book

19.09.20 ~ 목표는 1차 09.30

- 가계부를 직접 만들어서 사용하자. (내가 만들어서 사용하는게 싸게 먹히겠다.)

To-Do

* 배운 내용 블로그에 정리

* 많은 소스들을 읽어 볼 것 (html / css 예제들 학습 必)

* 아주 작은 토이 프로젝트들도 진행하기 :)

* 직접 예제들을 만들어 가면서 눈으로 보면서 학습

오늘날 개발자들은 필요 이상으로 많지만, 좋은 개발자는 부족하다.

좋은 개발자가 될 수 있도록 이미 수 많은 경험과 실력을 쌓은 장인들의 방법들을 공부하고 직접 적용해보자.

잔을 비워두어라. 이미 가득 차 있는 잔에는 마실 것을 줄 수 없다. 무지를 드러내고 무지에 맞서며 지식을 습득해라. 이런 모습을 지켜보도록 하고 큰 일을 맡을 기회가 주어질 것이다. 이런 기회를 통해 깊은 쪽으로 뛰어든다면 수영을 하거나 바닥에 가라앉거나 둘 중 하나다. 경력을 쌓는 데는 이만한 시기는 없다. 혹시나 이 모든 것들이 압도적으로 온다면 한 발 물러나 숨을 고르자.

개발자의 시작

* 언어를 하나 선택하고 능숙해지자.

언어를 선택하였다면 능숙해지기 위해서 피드백 루프를 만들자. 피드백 루프라 함은 언어를 학습하고 실제 문제에 언어를 적용하는 것이다. 이렇게 학습은 현실에 기초하게 되고 피드백을 받는 루프를 만들게 된다.

언어를 선택 : 학습 -> 실제 문제에 적용 -> 피드백

* To-Do

- 언어를 선택: JS, Python

- 피드백 루프를 만들자: Open Source 개발

- 학습용도의 샌드박스 또는 IDE에 클래스 파일을 하나 띄어 기능을 갖고 놀아보자

- 테스트 프로그램을 만들자: 심플하게 한 단계 한 단계 진행

- 어떤 언어를 배우는 최상의 방법은, 그 언어에 정통한 사람과 함께 일 또는 프로젝트를 하는 것: Open Source 개발

- 자신이 선택한 언어의 명세를 찾아서 읽어 보라: 

JS:

https://developer.mozilla.org/ko/docs/Web/JavaScript

https://google.github.io/styleguide/jsguide.html

Python:

https://docs.python.org/3/

https://www.python.org/doc/

- 소스를 이용하라: Git, docs 샘플 소스 참고

(프로그래머의 길, 멘토에게 묻다 내용 참고 및 리마인드, 19.08.31)

node js 구동 중 SyntaxError: Unexpected identifier에러가 발생하였다.

구글 검색 해보면 정말 다양한 이유로 발생한 것으로 보인다. 이 다양한 이유가 해당하지 않아 가만히 코드를 보고 있다가 문뜩 깨달았다. Node Js를 구동하고 첫번째 줄에서 문제가 발생하였는데 문제가 발생한 코드다.

import app from "./app";

이 줄을 보면서 도대체 무슨 문제가 발생할 여지가 있을까? 위의 코드는 ES6 해당하는 코드다.

이전 버전인 경우는 다음과 같이 import를 해줘야 한다.

const express = require("express");

이것이 첫번째 해결방법이다.

두번째 해결방법은 babel를 설치하고 Node Js를 구동시켜주면 되겠다.

npm install --save-dev @babel/core @babel/node
npm install --save-dev @babel/preset-env

babel을 위한 자주 사용하는 패키지들이다.

설치를 해주고 package.json에 가서 scripts 부분을 수정해주자.

  "scripts": {
    "start": "node index.js"  		// node 대신에
    "start": "babel-node index.js"	// babel-node를 사용하여 구동시켜주자
  },
  

cf)

git을 이용하여 작업한 것들의 초기화 방법은 git reset --hard HEAD 명령어를 사용해서 초기화가 가능.

Ubuntu에서 포토샵을 사용하고 싶다면 대안중 하나는 GIMP입니다.

대안이라기보다는 리눅스에서는 포토샵 처럼 GIMP를 사용합니다.

GIMP 설치를 위해서는 패키지 툴인 Flatpak를 선행 설치 해주셔야 됩니다.

아래와 같이 설치를 따라 진행하면 손 쉽게 gimp를 설치하고 실행하실 수 있습니다.

Flatpak Install

sudo add-apt-repository ppa:alexlarsson/flatpak
sudo apt update
sudo apt install flatpak

Gimp Install

flatpak install https://flathub.org/repo/appstream/org.gimp.GIMP.flatpakref
flatpak run org.gimp.GIMP//stable

# 참고 링크

https://flatpak.org/setup/Ubuntu/

https://www.gimp.org/downloads/

2019.08.01 업무 중 느낀점

1. 업무 자동화

지금 하는 일에 대해서 "진작에 업무를 확 줄일 수 있지는 않았을까?" 라는 생각이든다. 업무를 무언가를 진행하는게 있다면, 한 스텝, 한 스텝 진행하는 업무가 있다면 고민을 해보자. 이것을 일괄 처리를 할 수는 없을까? 최초 업무가 생길 때는 하나씩 하나씩 생기기 때문에 하나씩 하나씩 하기 마련이다. 이런 업무들이 2개 3개 모이기 시작하면 고려 해보자. 이런 업무를 일괄처리 하고 조금 더 편하게 조금 더 시간을 쓰지 않고 업무를 진행 할 수 있겠다.

2. 실행계획

실행계획을 뜨고 지레짐작이 된다면 일단 입 밖에 말하지 말하지 말자. 의심되는 곳이 있다면 수정을 하고 테스트를 해보자. 의심 가는 곳에 대해서 조인 방법이라든지 인덱스를 변경해보고 고민해보자.

아무리 급하다고 한번 쓱 보고 서두르지 말자. 병목이 일어나는 곳이 있다면 유심히 살펴 본다면 왠만한 문제들은 쉽게 해결 할 수 있다. 어렵지 않게 해결 할 수 있는 일을 서두른다고 말 한마디에 망치지 말자.

3. 쉘스크립트

굳이 쉘스크립트로 작성할 필요가 있었는가?  파이썬이나 자바로 만들 수도 있었을텐데 쉘스크립트 가독성이 떨어지는 것이 문제가 있다. 다음 유지보수 하는 사람이 쉽지 않다. 어떤 쉘 스크립트였냐면 파일명별로 FTP서버에 파일을 쏙속 올려주는 프로그램이었다. 필요한 파일들을 불러와 이름을 변경해주고 FTP서버에 디렉토리를 만들어 올려준다. 쉘스크립트를 작성해보면 알겠지만 띄어쓰기 하나로도 에러가 생기는게 쉘스크립트다. 유닉스 / 리눅스에 따라 에러 유무가 달라지는게 쉘스크립트다. 고민해보자. 굳이 쉘스크립트를 안 써도 되는 환경이라면 조금 더 쉽게 그리고 가독성이 좋은 방법으로 프로램을 작성하자.

4. 인덱스 다시 한번 상기

인덱스를 생성한다고 반드시 인덱스를 타는건 아니다.

오라클은 코스트로 인덱스를 결정하기 때문에(힌트를 주지않은 경우) 데이터 양 / 컬럼 수가 적다면 그냥 블럭을 통째로 갖고오는게 더 빠르기때문이다.