210207 Side Project Diary 2일차

Side Project Diary 2일차

오늘은 어제 새로 kick-off한 ReactJS project로 시작을 할 계획이다. 새로 만든 GitHub 계정에서의 첫 번째 나의 Side Project이기 때문에 README 파일 작성, Commit, Pull Request, Issue, Branch 관리 등 전반적으로 제대로 구성해서 진행해 볼 것이다.
그래서 오늘은 Issue3(Organize the fundamental folder structure of project.)에 해당하는 작업과 추가적으로 Open API 관련 method를 작성하는 새로운 Issue6를 추가하여, Issue2와 Issue6를 같이 진행할 예정이다.

Open API에서 어떤 Data를 취득해서 화면에서 처리해야 하는지 구분하기 위해 우선적으로 Main page의 Wireframe을 손으로 그려보았다.

210207_reactjs_project_wireframe
Main page의 Wireframe(handwriting)

Read More

210207 Self Development TIL

Thought of the day

인생의 마법은 앞을 내다보는 것이지, 무엇이 잘못되었나 주위를 둘러보거나 과거에 대해 슬픔을 갖는 것이 아니다.
(The magic of life is about looking forward, Neither looking around and worrying what is about to go wrong nor having sorrows of the past.)
-DR.JOE G.VETHANAYAGAM


DAILY RECORD

오늘은 오전 10시 30분에 헬스장에 가서 운동하고 바로 11시 50분경에 집 앞에 있는 투썸 플레이스에 왔다.
오늘도 의미있는 하루가 되기 위해 노력하는 내가 되자.

TO DO LIST

  • TypeScript 공부 (Understanding TypeScript - 2021 Edition)

    • Section 1.8.Setting Up A Code Editor / IDE ~ (예정)
  • Side Project 시작

    • Side Project Diary 2일차 작성 (완료)
    • Python + Pandas, Plotly Library project 프로젝트
      • 프로젝트 진척
        • 프로젝트 Repository 생성하기 (예정)
        • 프로젝트 덩어리(Chunk) 단위로 Task category 분류하기 (예정)
        • 프로젝트 Chunk Task Category를 세부 Task 항목으로 분류하며 프로젝트 진행하기 (예정)

    Read More

210206 ReactJS의 개념과 기본사용

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 ReactJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.


  • ReactJS

NPM에서 React library를 살펴보면, 매주 400만건 이상의 유저가 React Library를 다운받고 있고, Facebook에 의해서 관리가 되고 있다. React를 가장 좋은 기술로 만들기 위해 Facebook에서 전적으로 자원과 커뮤니티, 서포트를 아끼지 않고 있다.

front_end_library_ranking front_end_library_usage_ranking

Front-end 개발의 생태계를 보면, 71.7%의 사용자가 이미 React를 이용했고, 다른 비슷한 프레임워크와 비교를 했을때 압도적으로 높은 수치의 사용자가 사용하고 있다.

Read More

210206 Side Project Diary 1일차

Side Project Diary 1일차

이전에 GitHub로 Repository를 생성해서 개인프로젝트를 하면서 조금 아쉬웠던 부분이 뭔가 내가 프로젝트를 진행했을 당시에 느꼈던 느낌과 생각이 시간이 지나면 잊혀진다는 것이었다. 물론 Repository에 commit된 내용과 README 파일의 내용을 보면 “아, 이때 이 기능을 넣었지”라고 생각은 할 수 있지만, 뭔가 그 사이 사이에 느꼈던 느낌까지 세세하게 채우는 것은 어렵다고 생각한다.
그래서 이번 Side Project를 시작하면서 새롭게 Side Project Diary를 작성하려고 한다.
매일 매일 일기로 기록을 남기면 자연스럽게 프로젝트의 진행에 대해 스스로 self feedback하는 시간도 갖을 수 있을 것 같다.

훗날 회사에 가서 일을 할때 참여하는 프로젝트도 보안상 세부적인 내용은 남길 수 없겠지만, 대략적인 내용으로 일기를 써볼 수 있을 것 같다. 그럼 내가 개발자로서 어떻게 성장을 해왔는지 다시 되돌아보며 더욱 성장해나갈 수 있는 발판이 될 수 있을 것 같다.

그럼 나의 첫번째 Side Project Diary를 시작해본다.

Read More

210206 What is difference between Framework and Library?

What is difference between Framework and Library?

이전에 개발을 하면서 내가 사용하고 있는 것이 프레임워크인지 라이브러리인지 헷갈렸던 경험이 있었기 때문에, 나같은 사람이 없을 수도 있겠지만, 혹시 나와 같은 의문을 가진 사람들을 위해 프레임워크와 라이브러리의 차이에 대해서 정리해보려고 한다.

우선 메인으로 첨부한 그림을 보면 대략적으로 알 수 있듯이 Framework는 내가 작성한 Application을 감싸안고 포함고 있는 개념이라면, Library는 내가 작성한 Application과 아래의 우주선과 같이 도킹(docking)되어 있는 것이라고 정의할 수 있겠다.
따지고 보면 국제 우주정거장 == Application이 되겠고, 크루드래곤 == Library 라고 생각하면 될 것이다.


위 사진은 작년에 2020년 5월 31일 스페이스 X의 크루드래곤이 국제 우주정거장에 도킹을 성공하는 실제 장면이다.

이제 프레임워크와 라이브러리의 기본적인 형태에 대해서 이해가 되었으니, 내부 동작에 있어서는 어떤 차이가 있는지 살펴보자.

Read More

210206 Self Development TIL

Thought of the day

뭔가를 위해 시도조차하려는 용기가 없다면 삶이 무슨 의미가 있을까?
(What would life be if we had no courage to attempt anything?)
-빈센트 반 고흐(Vincent Van Gogh)


DAILY RECORD

오늘은 오전 10시 20분에 집 앞 Black dock coffee에서 하루를 시작했다. 🌞
오늘도 의미있는 하루가 되기 위해 노력하는 내가 되자.

TO DO LIST

  • TypeScript 공부 (Understanding TypeScript - 2021 Edition)

    • Section 1.8.Setting Up A Code Editor / IDE ~
  • Side Project 시작

    • Python + Pandas, Plotly Library project 프로젝트
      • 프로젝트 진척
    • ReactJS project 프로젝트
      • 프로젝트 진척
        • Side Project Diary 1일차 작성 (완료)
        • 프로젝트 Repository 생성 (완료)
        • 프로젝트 덩어리(Chunk) 단위로 Task category 분류하기 (완료)
        • 프로젝트 Chunk Task Category를 세부 Task 항목으로 분류하며 프로젝트 진행하기 (완료 - 본격적으로 프로젝트 진행 kick-off!)
        • Issue1 (완료)

    Read More

210205 Book recommendation


개발 관련 책 추천

오늘은 평소에 내가 관심이 많이 있었던 Clean code, TypeScript 등 개발과 관련해서 강사님이 수업도중에 여러 책들을 추천해주셨다.

Clean code는 이전부터 관심이 있던 내용이고, TypeScript는 최근에 공부를 시작해서 관심이 있던 내용이라 추천해주셨을때 너무 좋았다. 요즘 무슨 책을 읽어볼까 고민하던 참이었는데, 온라인 북으로 구매해서 아이패드에 넣고 통학시간이나 주말, 머리식힐때 읽어봐야겠다.

읽은 내용에서 유익한 내용이 있으면, 블로그에 포스팅해봐야겠다.

추천해주신 책은 아래와 같다. 일단 내가 최근에 공부를 시작한 TypeScript와 Clean code 책을 구매해서 읽어 볼 생각이다. 생각에서 끝나지 않기 위해서 내일 오전에 공부 시작할때 당장 구매해서 읽어봐야 겠다.

Code 코드 파이썬을 이용한 클린 코드를 위한 테스트 주도 개발
TypeScript Programming Two Scoops of Django
Two Scoops of Django책에서 다루고 있는 장고의 버전이 낮기 때문에 google에서 Two Scoops of Django를 검색해서 two scoops-of-django-3.x github의 코드파일을 참고하는 것을 추천한다.

https://github.com/feldroy/two-scoops-of-django-3.x

Read More

210205 Python TIL - filter, reduce, isinstance, OOP, scope, class

Python

오늘 배운내용

  • Section1) filter, reduce
  • Section2) OOP, Class

filter, reduce

filter

filter의 기본 사용 format : filter([function], [iterable object])

1부터 10까지의 수 중에 짝수인 수로 구성된 리스트 만들기

1
2
3
4
5
6
7
8
9
def even_selector(x):
if x % 2 == 0:
return True
else:
return False
# 선언한 function을 인자로 넣기
list(filter(even_selector, range(1, 10+1)))
# lambda function로 별도의 함수 선언없이 함수처리
list(filter(lambda a:a%2==0, range(1, 10+1)))

Read More

Baekjoon Online Judge 1236번 성 지키기 문제

백준 저지 1236번 성 지키기 문제 Pseudo code + Python code

손 코딩에서 이중 for문 처리하는 부분에서 수정이 필요하다. 이중 for문에서 i,j를 이용해서 내부 반복처리를 해야하는데, 손 코딩할때 n과 m을 넣어 처리를 했다. 이 부분을 i와 j로 수정해서 넣어줘야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
n, m = map(int, input().split())
security_in_castle_list = []
for _ in range(n):
security_in_castle_list.append(input())
castle_row = [0]*n
castle_column = [0]*m
for i in range(n):
for j in range(m):
if security_in_castle_list[i][j] == 'X':
castle_row[i] += 1
castle_column[j] += 1
castle_zero_row = 0
for row in castle_row:
if row == 0:
castle_zero_row += 1
castle_zero_column = 0
for col in castle_column:
if col == 0:
castle_zero_column += 1
print(max(castle_zero_row, castle_zero_column))

Read More

210204 HTTP - Request/Response

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 NodeJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.


GET/POST 방식 비교표

GET 방식과 POST 방식은 위와같이 정보 전송방식과 보안적 측면, 전송할 수 있는 데이터의 길이, 전송데이터의 Caching 가능 유/무 등에서 차이점을 보인다.

HTTP의 동작방식에서 URL을 통해서 browser에 접속하게 되면, browser가 GET method 방식으로 Browser의 Page를 읽어온다.

로그인과 같이 중요한 정보를 전송할때에는 POST method로 browser에서 server로 정보를 전달하게 된다.

간단하게 browser상에서 /(root) 경로로 이동했을때의 처리를 작성해보자.

index.js

1
2
3
4
5
const handleHome = () => {
console.log('Hi from home!');
};

app.get('/', handleHome);

Read More