코딩 대장

CS 50 2019: Computational Thinking, Scratch

CS 377 Spring ‘14 Operating System

전체적인 Course의 Out line은 다음과 같다.

• Course Outline & Topics
  1. Process and Threads
  2. Memory Management
  3. Storage and File Systems
  4. Distributed Systems

Lecture 01. Introductions

Operating System의 정의

User와 Arichitecture 사이의 인터페이스 또는 Raw hardware보다 프로그래밍하기 쉬운 가상 머신

 즉, User와 Architecture 사이에서 architecture의 detail은 감추면서 동시에 보다 프로그래밍이 간편하게 만들어 주는 것이 Operating System이다.

Operating System의 특징

• Services: OS는 표준 서비스를 제공해야 한다.
  – Examples: the file system, virtual memory, networking, CPU scheduling, and time-sharing
• Coordination: OS는 여러 응용 프로그램과 사용자의 조절을 통해 공정성과 효율성을 갖춰야 한다.
  – Examples: concurrency, memory protection, networking, and security.
• Goal: 기계가 사용하기 편리하고 효율적이게 OS를 설계해야 한다.

Operating System의 역사

1. Sigle-User Computers : hardware의 가격은 비싸고, 인건비는 비교적 저렴했다. 컴퓨터는 한 번에 하나의 함수밖에 실행할 수 없었기 때문에 Overlap이 없었다. User는 Console에서만 Debugging을 할 수 있었다.
2. Batch Processing : 다양한 업무를 일괄적으로 처리하였다. (Scheduling은 당연히 인간이 해야했다.)
3. Overlap I/O and Computation : 비교적 새로운 방식이 적용되었다. Output 이전에 buffer 단계를 추가하였고, I/O event의 경우, interrupt를 통해 처리할 수 있게 만들었다. 그러나 여전히 한 번에 하나의 업무만 수행할 수 있었다.
4. Multiprogramming : 몇 개의 프로그램이 동시에 수행가능하게 되었다. 또한, scheduling이 OS에 의해 수행되었다.

점차 functionality와 complexity가 증가하였고, OS design에서 complexity를 다루는 것이 중요해졌다. 그리고 이 후, 70년대로 들어서면서 Renaissance를 맞이하게 된다.

• The Renaissance (1970's) : hardware의 가격이 저렴해지고, 인건비가 더 비싸졌다. User는 terminal을 통해 system을 공유하였다. 또한 대부분의 현대적인 OS의 원형이 된 UNIX가 출시되었다. Multics가 그 기원으로, Shell을 통해 사용자 인터페이스를 제공하였다. 그러나 response time과 thrashing(; 메모리 영역에 접근할 때, 메모리에 page fault가 높은 것) 문제가 있었다.
• Industrial Revolution (1980's) : hardware의 가격이 매우 저렴해졌다. PC의 사용이 늘어났다. (1981년 IBM PC, 1984년 Macintosh) DOS, MacOS 등 비교적 단순한 OS가 출현하였고, GUI가 추가되었다.
• The Modern Era (1990's - now) : 요구되는 processing이 더욱 증가하였고, 실질적인 OS가 개발되었다. 다양한 조건에 맞춘 OS가 출시되었다.

출력해주는 코드부터 바로 보여주자면 다음과 같다.

코드를 하나 하나 설명하자면 다음과 같다. 큰 컨테이너 안에 만약 load가 완료되었다면 Weather을 출력해준다. 그렇지 않다면 그렇지 않은 동안 로딩 화면 출력. 이 때 가져오는 온도 값이 켈빈 값이라서 도씨로 바꿔주었다. 만약 위치를 가져오는데서 에러가 났다면 로딩 화면 바닥에 왜 에러가 났는지, 에러 텍스트를 출력해주게 된다.

그렇다면 이제 날씨 정보와 온도를 가져왔으니 가져온 변수를 넣어줘야 한다!!

날씨 경우의 수는 다음과 같이 뒀다. Rain, Clear, Thunderstorm, clouds, snow, drizzle! 그리고 바꿔준 Weather function은 다음과 같다.

달라진 부분이라면 weathername과 temp로 변수를 가져온다는거?! 근데 거의 달라진 점없음!! 이렇게 하면 완전완전 끝난거다. 완성된 화면은.. 앞에서 보여줬던 화면과 다를바가 없다... ㅋㅋㅋㅋㅋㅋㅋ 여튼 또 하나 어플리케이션을 완성하였다 ㅎㅎ 뿌듯뿌듯!0!

우선 만들었던 weather 파일을 읽어오기 위해서는 import 해주는 것이 필요하다!

필요한 state는 다음과 같다.

위치 정보를 가져올 때, 에러는 없었는지. 날씨가 정상적으로 로드되었는지. 로드 되었다면 날씨는 무엇이고 (name), 온도는 몇 도 (temperature) 인지! 위치는 ios에서 그대로 받아올 수 있다.

사용한 오픈 API는 openweathermap인데, 사용 방법은 사이트에 더 자세하게 적혀있다. 로그인하고 구독하면 API 받아올 수 있음 ㅇㅇ! 저기 appid 부분이 키값이 된다. 주의사항 .. '쓰면 안되고 `써야한다! 주소 안에 변수를 넣어주기 때문에..!!

내보내는 부분은 그닥 달라진 점이 없다. load되면 state 받아오고 끝!! 다음 강의는 .. 이제 weather과 연결해주는 작업만 남았다! 클론 코딩이 진짜 좋은게 뚝딱뚝딱 진짜 만들어지는게 보이니까 흥미도 생기고 완성할 때 뿌듯하고 그렇다. 그리고 무엇보다 재밌음!! 강의 듣길 정말 정말 잘한 것 같다..

흐음... 사실 어플리케이션을 다 만들었는데, 포스팅을 미루다 보니 어디 부분을 어떻게 만들었었는지 조금 까먹었다ㅠㅠ

앞으로는 만들고 바로 바로 포스팅을 ...

아무튼 지난 시간에 로딩화면 만들기를 성공하였다! 이제 날씨 화면 만들기!!

우리가 만들 날씨 화면은 다음과 같다. 구성을 살펴보자. 아이콘 + 온도 + main title + subtitle로 이루어져 있다.

우선 새로운 파일을 추가해줘야 한다. 이름은 weather.js로 만들어 주었다.

디자인부터 먼저 해보자면, 다음과 같이 코드를 구성해주면 된다.

upper 부분이 아이콘과 온도가 들어갈 부분이 되고, lower 부분이 title이 들어갈 부분이 된다. 둘의 비율은 같게 해줄 것이므로 flex를 1로 준다. flex가 큰 부분이 더 큰 비율을 차지하게 된다고 생각하면 된다!

아이콘은 다음과 같은 라이브러리를 추가해주면 된다! 엑스포에서 제공하는 아이콘인데, 여기 있는 아이콘 이름을 넣어주면 아이콘을 바로 사용할 수 있다. 사이트는 여기다!

https://expo.github.io/vector-icons/

(linear gradient 사용하면 색깔 지정할 때, 그라데이션 줄 수 있다!)

자 이제 구성만 해주면 된다!

colors 부분은 저렇게 만들면 첫번째 색깔부터 두번째 색깔까지 자연스럽게 그라데이션이 된다. 같은 크기를 가지는 view를 두 개 주고, 첫 번째 view안에는 icon과 text를 넣어주었다. 이때 여기 오는 text가 온도를 나타내는 text가 된다!

두 번째 view에는 maintitle과 subtitle을 text로 줬다. 실행해보면 잘 동작하는 것을 확인할 수 있다!

영화 웹페이지를 만들 때처럼, 우선 우리에게 필요한 것은 기동 시 대기 시간 동안 출력되는 화면이다.

다음과 같이 state를 만들어 준다. 만약 load가 완료되었다면, 우리는 정상적인 날씨 화면을 출력할 것이다. 만약 load가 완료되지 않았다면?? => 로딩 화면을 띄워줌.

로딩 화면은 다음과 같다. 우선 state를 정해 주고, 만약 load가 되었다면? Getting the fucking weather 출력해준다. 출력해줄 텍스트와 화면을 모두 js 파일 내부에서 만들어 주는데 이 부분이 신기했다. css와 비슷한데 다른 느낌?!

그리고 나서 save해주면, 핸드폰과 내가 만들고 있는 코드가 터널로 연결되어 있다면 expo앱에서 다음과 같은 화면을 확인할 수 있다.!

진짜 재밌다.. 빨리 다 보고 다른 어플리케이션 만드는 것도 배워서 내가 만들고 싶은 어플리케이션을 만들 수 있게되면 좋겠다.. ㅠㅠ!!

하.. 일단 노마드코더 강의에서는 맥OS를 사용하는데 윈도우라서 너무 힘들었다ㅠㅠㅠ

어떻게 어떻게 nodejs랑 npm 업데이트하고 choco깔고 명령어 한 줄 치고 에러 수정하고.. 하다보니 결국 됐다!!

리액트 네이티브란 네이티브 웹앱을 만들기 위한 UI 라이브러리다. 리액트 네이티브를 이용해서 jsx, javaScript로 쓴 코드를 objective c나 java로 바꿔줄 수 있다. 인스타그램, 에어비앤비, 페이스북 등의 많은 글로벌 기업들이 리액트 네이티브를 사용해서 어플리케이션을 만들고 있다는 사실!! 웹사이트를 개발하는 것 처럼 쉽게 어플리케이션을 개발할 수 있기 때문에 많이 사용된다.

사실 나도 안드로이드 스튜디오 써봤는데 진짜 힘들었다. 에뮬레이터는 왤케 느리며.. 일단 코드 짜는건 그렇게 어렵진 않은데 너.무. 느리다.. 

시뮬레이터는 Expo.io를 이용해서 돌려본다. xcode나 안드로이드 스튜디오 없이 핸드폰만 연동시켜주면 코드를 수정할 때마다 바로 바로 빠르게 시뮬레이터를 사용할 수 있다. 컴퓨터에서 코드를 수정하면 자동으로 핸드폰에서 어플리케이션이 세이브되기 때문에 간편하다.

https://expo.io/

expo를 설치하는 방법은 다음과 같다. 우선 node js와 react native를 설치해주고 터미널 창에서

npm install expo-cli --global

expo init my-new-project
cd my-new-project
expo start

이렇게 쳐주기만 하면 된다! expo init my-new-project 이 단계에서 blank, tap이 있는데 나는 blank를 선택해 주었고, 만약 하단 네비가 필요하면 tap?을 선택하면 된다.

그러고 나서 vscode에서 내가 만든 프로젝트를 열어주고, expo start를 통해 터널이 열리면 qrcode가 뜰것이다. 아 맞다. 사용할 핸드폰에서 expo 어플리케이션도 설치해 줘야함ㅇㅇ. 그러고 나서 qrcode를 핸드폰에서 찍어주면 프로젝트가 핸드폰에서 자동으로 빌드된다!!

빌드된 화면.

만약, vscode에서 수정한다면?

이렇게 바로 수정됨. 개쩜..

여튼 앞으로 이걸 활용해서 날씨 앱을 만들어 보겠다ㅎㅎ 자세한 강의는 여기에서 들을 수 있따. 모두 리액트의 고수가 되는 그날까지.......

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C/dashboard

css에 대한 설명이 거의 없어서 따라치는 정도의 수준이었지만 안드로이드 스튜디오에서 xml로 디자인을 해본 경험이 있어서 왠만한건 이런거구나.. 하고 넘어갈 수 있어서 다행!!

(css 파일은 깃허브에서 nomadcoders/movie_app 참고해주세요!)

우선 ...으로 저 긴 문장들 줄이는 패키지가 계속 설치가 안되어서 일단은 그 부분은 생략하고 만들었다.ㅜㅠㅜㅠ 그리고 VSCode에서 지금까지 만들었던 것을 빌드하면 터미널 창에 어떻게 만들어야 하는지 자세하게 뜬다!

movie_app 루트 폴더에서 package.json은 다음과 같이 변경해주면 된다.

우선!

"homepage" : "http://jm1224k.github.io/movie_app",

얘를 먼저 적어주고 npm build를 터미널에서 입력한다. 그러면 지금까지 만든 파일이 최적화되고, 빌드된다!

(여기서 jm1224k / movie_app은 본인 아이디와 깃에서 생성한 레포 이름을 적어주시면 됩니다.)

그러면 터미널 창에서

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

이 두 줄을 script 안에 적으라고 뜬다. 그러면 적어주고 저장한 후 다시 빌드해주고, npm run deploy인가..? 아무튼 또 명령어를 입력하라고 나온다. 근데 난 잘 안되어가지구..

그냥 빌드된 폴더를 깃에 gh-pages라는 이름의 브랜치로 올렸다. 그래도 됨. ㅇㅇ.

그러면 이렇게 우리가 원하는 웹페이지가 나온다!!!

http://jm1224k.github.io/movie_app

올리는게 젤 오래걸림 ㅠㅠ