다람쥐줘라줘

에게해 스터디원들과 함께하는 CS 간단 발표 및 독후감🐈

[1일1로그 100일 완성 IT지식] 16번 '슈퍼컴퓨터부터 사물인터넷까지'

'컴퓨터' 라고 하면 노트북이나 데스크톱 컴퓨터가 떠오르는데, 생각보다 컴퓨터라고 부를만한 친구들이 많습니다. 

휴대전화와 태블릿pc라든지 네트워크로 연결된 가전제품 등 (이른바 사물인터넷) 슈퍼컴퓨터에 이르기까지 다양합니다.

가격, 크기, 생김새는 제각각 이지만, '컴퓨터'의 논리적 구조인 무슨일을 하는지 (무엇을 계산할 수 있는지)의 공통적 특성을 가지고있습니다.

다음은 저자가 이번 장에서 소개한 개념들을 짧게 알아봐요!

1.슈퍼컴퓨터

슈퍼컴퓨터는 과학기술연산을 비롯한 다양한 분야에 사용되는 고속/거대 용량 컴퓨터이다. 이 개념은 절대적 기준이 아닌 상대적인 것으로 일반적 목적의 컴퓨터에 비해 당대 최상급 처리 능력을 보유한 고성능 컴퓨터를 가리키는 말이며, 간혹 단순히 HPC라고 부르기도 한다. (출처-위키백과)

2.GPU

그래픽 처리 장치 또는 GPU는 컴퓨터 시스템에서, 그래픽 연산을 빠르게 처리하여 결과값을 모니터에 출력하는 연산 장치이다. VPU라고도 한다. (출처-위키백과)

 ->범용 CPU보다 그래픽 관련 계산을 훨씬 빠르게 수행하는 그래픽 전용 프로세서입니다.

3.분산 컴퓨팅

분산 컴퓨팅은 분산 시스템을 연구하는 컴퓨터 과학의 한 분야로, 인터넷에 연결된 여러 컴퓨터들의 처리 능력을 이용하여 메시지를 하나에서 다른 하나로 보냄으로써 거대한 계산 문제를 해결하려는 분산처리 모델이다. (출처-위키백과)

 ->네트워크로 연결되어 서로 독립적으로 작동하는 여러 대의 컴퓨터입니다. 검색 엔전, 온라인 쇼핑, SNS, 클라우드 컴퓨팅 같은 대규모 웹 서비스가 분산 컴퓨터 시스템으로 이루어져 있고, 하나의 문제를 해결하기 위해 네크워크에 연결된 여러개의(~수천개) 컴퓨터가 협력하는 것입니다.

에게해 스터디원들과 함께하는 CS 간단 발표 및 독후감🐤

[1일1로그 100일 완성 IT지식] 15번 '캐시가 뭔가요?' 

캐시 - 캐시는 컴퓨터 과학에서 데이터나 값을 미리 복사해 놓은 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다.

(출처- 위키백과)

일단 정의를 가지고왔는데 읽어봐도 느낌이 안온다..

쉽게 말하면 프로세서(CPU)는 정보를 엄~청나게 빨리 처리하는데 비해 메인메모리(RAM)가 상대적으로 느려서 사이에

캐시라는 빠른애를 이용하는겁니다.

'그럼 캐시를 잔뜩달면 메인 메모리 필요없는거 아닌가?' 싶지만 캐시는 용량이 적습니다. 가장 큰 캐시가 몇 MB정도 밖에 담을 수 없어서 대체는 힘들것 같네용.

캐시의 효과를 직접 보고싶으시면 크롬 프로그램을 실행한 후 로딩이 완료되고 사용할 준비가 끝날때 까지의 시간을 보시면 됩니다! 처음에 켰을때는 약~간 시간이 걸리겠지만 잠깐 껐다가 다시 켜보면 처음보다 훨씬 빨리 로딩이 완료되는 모습을 볼 수 있습니다. 

2번째에는 컴퓨터가 캐쉬에서 크롬 데이터를 가지고있다가 바로 꺼내서 건내주기 때문이죠! 

에게해 스터디원들과 함께하는 CS 간단 발표 및 독후감🏄‍♂️

[1일1로그 100일 완성 IT지식] 14번 '프로세서는 무조건 빠른 게 좋을까?' 

프로세서는 무슨 일을 했었지? 기억이 안나니까 잠깐 복습을 해보자면~

프로세서는 아래의 사이클을 계속 반복 수행합니다!

인출(Fetch): 메모리에서 다음 명령어를 가져온다.

해석(Decode): 명령어가 무슨 일을 하는지 알아낸다.

실행(Execute): 명령어를 실행한다. 

 ->인출 단계로 되돌아간다.

어제 자 CS독후감인 프로세서와 계산기의 다른 점에서 들었던 for문 예제로 설명을 드리자면

1부터 10까지 더하는 로직의 함수를 실행할때,

위에서부터 차례로 실행이 되니까,

sum 을 선언해주고 -> for문이 1부터 10까지 돌아가고 -> 1~10의 합이 sum에 담기고 -> 마지막에 sum을 return 해준다.

하나하나의 명령어들이 인출되고 해석(우리는 for문이지만 컴퓨터는 이진법으로 해석해 이해하는 과정을 거친다) 되고 실행하는 사이클이 돌아간다.

그럼 주제로 돌아와서,

오랜 기간 동안 프로세서는 데스크톱 컴퓨터에서 주로 사용되었습니다. 휴대폰이나 맥북처럼 휴대성을 고려하거나 본체 안의 팬으로 열을 분산 시킬 방법이 있었기 때문에, 프로세서의 기능은 빨리 작동하도록 하는게 목표로서 발전되었죠!

하지만 기술력의 발전으로 다들 들고다니는 휴대폰, 노트북, 각종 전자기기들이 하나의 컴퓨터라고 할 정도의 기능을 갖추게 되었고 cpu 또한 대부분 내재되어있습니다~

예전과 달리 프로세서는 기능은 더욱 빨리가 아닌 크기나 무게, 전력 제약등등의 문제를 고려해야 하기 때문에

소비자의 요구의 방향성에 맞추어 프로세서의 발전이 이루어질거라 생각됩니다. 이상! 

1. 프로젝트 명
   • 걸어 개발자야
2. 소개

• 산책하기 좋은 장소를 추천해주는 웹 페이지!

1. 와이어 프레임 (완성본으로 수정)

*메인 페이지

각각의 '구' 클릭시 해당 '구'에대한 공원을 알려줌.

상세보기 클릭 시 로그인 요구

회원가입 화면

로그인 후 다시 상세보기 클릭하면 해당 공원의 정보를 주는 페이지로 이동

네이버 좌표 API 사용했고  공원 Open API 사용하여 공원에 대한 지도와 내용을 가져옴.

아래 후기에 공원마다 후기 남길 수 있음

로그아웃 하면 다시 초기 페이지로 넘어감.

4. 개발해야 할 기능들

-사용한 오픈API (http://openapi.seoul.go.kr:8088/6a4c6750656c6a63363572677a7573/json/SearchParkInfoService/1/132)

5. public github repo 주소

https://github.com/chipmunkcol/project_03

6.Trouble shooting!

JWT 코드 사용시 오류

유틸페이지 구현의 어려움..

7.발표 후

시간이 있었으면 더 구현하고 싶었던 것 → 구현해보자.

SSR 이란?

Git Git Git….!!!!!!!

주특기 미리 공부를 해야된다 (이번에 겪어봤자네…)

UI & UX(가 진짜 중요하다고함) Loading spinner? 가 좋다는데?

DB에 num & done 값 주기(플라스크)

아니 이게 뭐라고 생각보다 어렵네..?

위에 처럼 글별로 체크 하는 기능은 좋아요라던지 여기저기 범용성이 좋은데 (대댓글 기능? 도 쓸라나) 이렇게 하려면 client 쪽에서도 몇번째 완료표시를 누르는 건지 몇번째 글에 반영을 하는지 정해줘야 하고 server 쪽에서도 애초에 만들때 number를 붙여줘야 가능하다.

따라서 post 입력시에 num 값을 따로 반영하고(나는 len으로 처음꺼부터 0~n-1로 num값을 주었다)

get은 db 저장돼있는 done 값에 따라 temp_html 붙여주고 완료 버튼에는 각각 이름을 붙여줌.

그리고 ‘완료’ 버튼 클릭 시에 done 값에 1을 주는식으로 db값을 변환시켜서 위에 else부분을 활성화 시킨다. client 쪽에서는 위에 get 생성시 check 값에 주었던 번호를 아래에 변수로 받아 db로 넘겨줌.

넘겨준 num_give 순서로 db에도 저장을 했기때문에 클릭한 완료의 순서대로 db에 저장된 done 값이 바뀜.

스크랩핑 + 토론방 추가

flex 로 영역을 구분한뒤 row 형식으로 배치 → 왼쪽에는 이미지 모음 오른쪽에는 토론방 배치

flex-row로 영역 구분한 것 까지는 좋았는데 div로 영역영역 나눠주는게 헷갈렸음.

그리고 모듈? 가져오기 등 import로 조각조각 만든 값들을 불러오는 기능을 빨리 익히는게 좋아보인다. 혼자 작업하니까 이정도지 규모가 조금만 커져도 작성한 코딩내용을 읽을 수 없을 거 같음.

네이버 영화 url입력하면 해당 사이트 og태그 스크랩핑 해와 띄우는 페이지 만듬.(bs4 + 플라스크)

og 태그로 title, img, desc 끌어오고 간단한 코멘트는 본인 이 작성해서 db에 저장 → 카드형식으로 보여줌.

bs4를 통해 스크래핑한 코딩을 그대로 파이썬 함수로 가져오는게 아주 좋았음

app.py에 전부 담으려고 하지말고, scracping.py 로 스크랩핑 python 따로 만들고 app.py로 불러오는 방식 사용할것. (조각조각 만들어서 붙여야 어디에서 오류가 나는지 정확히 알 수있음)

1. 간단한 블로그 만들기 (Flask)

-직접 코드를 고민하고 적용하면서 응용력이 많이 올라감. 수동적으로 강의 듣기 절대 금지!

대댓글 기능만 추가하는 정도로 해당 블로그는 종료해도될듯