다람쥐줘라줘

에고 밀려서 쓰는.. WIL! ㅎㅎ

[주특기 입문] 주차였는데 뭔가 매니저님들이나 다른 분들이 엄~청 겁줘서 걱정반 기대반으로 시작했지만~ 

생각보다 별거 없었당

기존에 했던대로 팀과제 조금씩 하고 나머진 본인 공부시간! 

물론 개인과제인 버킷리스트 만들기가 있었는데, 코딩애플 코딩애플 (Coding apple) 선생님 강의를 미리 수강해놔서 수월하게 해결했다. 역시 이러니 저러니해도 공부는 본인이 하는거다. 같은 공부시간을 가지고 비슷한 조건으로 공부했지만 얻어가는건 저마다 차이가 있었고, 나도 다른거 제쳐두고 내 공부에 집중했던거 같다.

어렴풋이 눈치는 챘는데 이번주차에 확실히 느꼈던게 항해99에는 여타 함정이 존재한다..

우선, 시스템.  스파르타에서도 1~7기에 거쳐 여러가지 시도해보고 걔중에 더 많이 끌고 갈 수 있는 시스템을 선택했다고 생각한다. 당연히 그게 옳다.

하지만, 사람이 많으니 당연히 모두에게 맞춤이 될 수는 없다. 팀과제/ CS스터디/ 개인과제/ 개인학습자료/ 지급된 강의들/항해톡/종종 열리는 세션강의/매니저님의 순회 등등 일정이 적지 않은데, 항해의 시스템에 너무 많은 비중을 두고간다면  제 공부할 시간이 압도적으로 적어질거다. 모든것을 따라가기보다는 내게 도움이 되는 것을 취할 필요가 있다고 생각한다.

두번째, 강의. 첫번째 느낌과 비슷한데 사람마다 맞는 강사는 있다고 생각한다. '나도 누군가에겐 OOO 일 수도 있다'는 명언처럼.. 우선 지급되어 버린 강의에 눈을 뺏겨 다른 강의를 찾아볼 생각을 하지 못한다면 불필요한 시간이 더 들 수도 있다고 생각된다.

세번째, 우리 커여운 동기들. 사실 3가지 다 내용은 일관된다. 모두의 실력이 제각각이고 실력 증가의 폭도 제각각이다. 

남들의 화려한(?) 실력에 마음이 급해져 황새를 좇아간다면 그거야말로 시간이 뭉텅이로 날라간다고 생각한다.

뭐 이런거 다~ 감안하고도 항해99는 압도적으로 좋은 시스템이라고 생각한다. 우선 개인이 하기힘든(거의 할 수 없는..)

몰입을 99일이나 할 수 있다는점 하나만으로도 지인 10명이 물어보면 10명에게 추천할 수 있다.

몰입 뿐 아니라 함정이라고 쓰긴했지만 항해의 시스템은 굉장히 잘 굴러가있다. 내게 필요한 것을 취해서 항해 기간을 보낸다면 어느샌가 큰 보상으로 돌아올거라고 확신한다.

그리고 아직 경험해보진 못했지만 실전프로젝트, 3주차까지 지나고나니 더욱 엄청난 경험이 될 것이라는 생각이든다.

실제로 현업에서 하시던분들이 극찬하는 프로젝트니 더 말해 뭐하겠어..

뭐 적다보니 딱히 회고는 아닌거 같은데.. 모르겠고ㅎㅎ WIL 키워드 준거 적고 마치겠음!

State, Props, 리렌더링 발생 조건

대표적인 3가지 리렌더링 조건

1. Props 변경 (=> properties의 줄임말)
2. State 변경
3. 부모 컴포넌트 렌더링

1. Props 변경

Props 업데이트가 일어나면 리렌더링을 한다.

Props가 변경되는 건 부모 컴포넌트의 State도 변경이 일어난다는 의미이다.

부모 컴포넌트의 State 변경이 발생하면 Props도 업데이트되고,

모든 하위 컴포넌트에 대해 리렌더링이 발생한다.

2. State 변경

State 업데이트가 일어나면 리렌더링을 한다.

리액트에서 State 값이 변경되면 관련 컴포넌트들을 전부 리렌더링 한다.

리액트는 변화를 바로바로 감지하여 화면에 변경사항을 보여주기 때문이다.

3. 부모 컴포넌트 렌더링

부모 컴포넌트가 렌더링을 하면 그 자식 컴포넌트들은 모두 리렌더링 한다.

Props와 같은 원리이다.

결론

리렌더링 조건을 생각하며 로직을 최적화하자.

출처: https://tooo1.tistory.com/580 [개발자 퉁이리:티스토리]

에게해 스터디원들과 함께하는 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로 불러오는 방식 사용할것. (조각조각 만들어서 붙여야 어디에서 오류가 나는지 정확히 알 수있음)