밴쿠버에서 테니스치는 한량나부랭이

비전공자로서 컴퓨터의 본질에 대해 다가가기: "컴퓨터 시스템 딥 다이브" 비전공 프론트엔드 개발자로서 컴퓨터시스템에 대한 지식이 많이 부족하다보니, 여러책을 찾아보던 중 "컴퓨터 시스템 딥 다이브" 를 발견했다. 컴퓨터의 본질에 대한 깊은 이해를 쌓을 수 있는 이 책은, C뿐만 아니라 python의 예제도 제공하고 있어 c언어를 모르는 독자여도 따라하면서 이해할 수 있다고 생각했다. https://www.yes24.com/Product/Goods/124301248 컴퓨터 시스템 딥 다이브 - 예스24 코드 아래 숨겨진 아름답고 놀라운 컴퓨터 아키텍처 대탐험컴퓨터 시스템은 바다와 비슷합니다. 현대 생명의 기원이 원시 바다 깊은 곳에서 시작됐다고 여겨지듯, 현대의 프로그래밍도 초기 컴 www.yes24.co..

REST 란 ? HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)를 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH)등을 통해 해당자원에 대한 CRUD Operation을 적용하는 것. CRUD Operation이란? Create, Read, Update, Delete 를 일컫는 말이며, 구성요소는 아래와 같다. Server-Client(서버 - 클라이언트) Stateless(무상태) Cacheable(캐시처리기능) Layered System(계층화) Uniform Interface(인터페이스 일관성) REST가 필요한 이유? - 애플리케이션 분리 및 통합 - 다양한 클라이언트의 등장 - 서버 프로그램은 다양한 브라우저..

중앙처리장치(CPU) - 메인보드에 가장 먼저 연결하는 장치 중 하나 - 인간의 뇌와 같은 역할 - 연산과 제어를 담당 - 3가지 모듈 => 산술/논리장치 (Arithmetic Logic Unit, ALU), 제어장치(Control Unit), 레지스터 (Register) 레지스터(Register) - 기본적으로 프로세스는 메인 메모리에 적재된다. - 실제 연산은 CPU내부에서 수행되므로, 데이터를 CPU로 가져와 처리해야한다. => 데이터를 일시적으로 CPU내부에 저장할 공간이 Register => 레지스터는 CPU의 현재 상태를 저장할 공간으로 사용되기도 한다. 산술/논리 연산 장치 (ALU) - CPU가 실질적으로 연산을 처리할 수 있도록 한다. - 산술 연산(+,-,*,/ 등) 및 논리 연산(AN..

일반적인 구조 - 하드웨어 : 컴퓨터가 동작하도록 해주는 내부 물리적인 장치들 - 소프트웨어 : 컴퓨터가 어떻게 동작해야하는지 명시되어있는 명령어 집합 일반적인 하드웨어 구성요소 소프트웨어 - 시스템 소프트웨어 : 하드웨어 자원에 대한 접근이 용이하며, 대개 저수준 언어로 작성된다. => 펌웨어, 운영체제, 컴파일러, 장치드라이버 - 응용 소프트웨어 : 컴퓨터 자원에 대한 직접적인 접근이 제한되며, 대개 고수준언어로 작성된다. 시스템 소프트웨어에 비해 접근하기 쉽고, 친화적이라는 장점이 있다. =>게임, 웹 브라우저

메인보드(Motherboard) - 다양한 물리적인 장치를 장착할 수 있는 인쇄회로기판(PCB) - 컴퓨터의 CPU, 메인 메모리, 하드디스크(보조기억장치) 등을 장착한다. - 다양한 컴퓨터 부품을 연결할 수 있는 인터페이스 제공 - Motherboard라고도 불림 GPU(Graphics Processing Unit) - GPU는 그래픽 관련 연산을 빠르게 처리하는 답을 도출하는 연산 장치 - 인공지능(딥러닝), 고화질 게임, 무인 자동차등에서 많이 쓰인다. - 컴퓨터 그래픽 / 영상처리에 유용하게 활용 - 대규모 행렬 및 벡터연산을 처리하는데에 뛰어난 성능을 발휘 보조기억장치( 하드디스크, SSD ) [Pros] 전원이 차단되어도 내용이 유지되고, 저장 용량이 크다는 장점 [Cons] 보조기억장치는 메..

JSON - JSON(JavaScript Object Notation) 은 데이터를 주고 받기 위해 사용하는 경량의 데이터 형식 중 하나 - JSON 형식에서는 KEY - VALUE 쌍으로 이루어진 데이터 객체를 사용 Session - 서버에서 가지고 있는 객체로, 특정 사용자의 로그인정보를 유지하기 위해 사용 [Pros] - 클라이언트에게는 세션 ID(회원식별목적)를 제공하고, 회원에 대한 중요한 정보를 서버가 가진다. - 민감한 데이터를 클라이언트에 직접적으로 보내지 않는다. - 클라이언트 브라우저가 가지고 있는 세션ID 자체에는 개인정보를 포함하고 있지 않다. [Cons] - 악의적인 공격자가 세션 ID를 탈취하여 사용자인 척 위장할 수 있다. =>세션 ID를 탈취당하는 경우, 사용자의 많은 권한 ..

OAuth - OAuth란, Google 로그인 기능과 같다. - 웹 서버에 Google 비밀번호를 제공하지 않고도, Google계정의 일부 접근 권한을 부여할 수 있다. - 실제로 많은 애플리케이션에서는 SNS 간편 로그인 기능을 제공한다. Unsafe 인증 방식( 계정정보를 알려주는) Safe 인증방식 - 사용자가 설정한 권한에 대해서만 Google 정보에 접근 할 수 있도록한다. - 바로 Access Token을 이용하는 것. OAuth 2.0 구성요소 설명 Resource Owner 사용자, 개인정보의 소유자 Client 개인 혹은 회사가 만든 서비스 일반적인 웹/앱 서버를 의미하지만 Client라 부른다. Resource Server(Google, Facebook등) 등의 입장에서는 Client..

REST 등장배경(Representational State Transfer) - HTTP는 다양한 HTTP 메서드(GET, POST, PUT, DELETE 등) 를 지원한다. - 실제로는 서버가 HTTP 메서드를 기존 설명에 맞게 사용하지 않더라도, 프로그램 개발은 가능하다. 하지만 각 서비스가 서로 다른 방식으로 개발한다면, 개발자 사이의 소통에 문제가 발생할 수 있다. - 따라서 기준이 되는 아키텍처로 REST를 채택할 수 있다. REST의 구성요소 - 특정한 자원에 대하여, 자원의 상태에 대한 정보를 주고받는 개발 방식이다. 자원(Resource) URI 이용 행위(Verb) HTTP 메서드 이용 표현(Representation) 페이로드(Payload) 이용 REST 예제( 회원가입 ) ID : ..

HTTP - 웹상에서 데이터를 주고받기 위한 프로토콜이다. - 웹 문서를 주고 받기 위해 사용한다. - 웹뿐만 아니라 모바일앱, 게임 개발에서도 다양한 목적으로 사용되곤 한다. HTTP Method METHOD 설명 예시 GET 데이터 조회 요청 특정 페이지 접속, 정보 검색 POST 데이터 생성 요청 회원가입, 글쓰기 PUT 데이터 수정 요청 회원 정보 수정 DELETE 데이터 삭제 요청 회원 정보 삭제 HTTP 상태 관리와 세션 - HTTP는 상태를 저장하지 않는다.(Stateless) - 클라이언트는 HTTP로 서버에 연결한 뒤에, 응답을 받으면 연결을 끊어버린다. => 서버입장에서 접속 유지에 대한 요구가 적어, 불특정 다수를 대상으로 하는 서비스에 적합하다. 예시로, 상품확인 -> 장바구니 ->..

쿠키(Cookie)와 세션(Session) - 쿠키와 세션은 웹브라우저와 웹서버가 통신하는 과정에서 많이 사용되므로 자주 언급된다. 쿠키 (Cookie) - 사용자가 특정한 웹 사이트에 방문할 때, 사용자 컴퓨터에 저장하는 기록 파일 - 서버의 자원을 전혀 사용하지 않는다. - ex ) "아이디와 비밀번호를 저장하시겠습니까?" - Chrome과 같이 웹브라우저에서 저장하는 것은 별개 세션 (Session) - 한 명의 사용자(브라우저)의 상태를 유지하는 기술이다. - 서버가 클라이언트에게 고유한 Session ID를 부여하면, 클라이언트는 접속할 때마다 Session ID와 함께 요청한다. - ex ) 웹사이트에 한번 로그인했을 경우, 다른 페이지로 이동해도 계속 접속 상태가 유지된다. - 만약 Sess..

다양한 웹 브라우저 - 웹사이트 접속시 웹 브라우저 프로그램을 사용한다. 예를 들면, Chrome, Firefox, Safari => 웹 페이지를 서버에 요청(request)하여 서버의 응답(response)을 웹 문서형태로 받는다. => 받은 웹 문서(HTML, CSS 등)을 렌더링하여 모니터 화면에 웹 페이지를 표시한다. 서버(Server)와 클라이언트(Client) - 클라이언트가 요청(request)를 보내면, 서버(server)가 응답(response)한다. - 서버와 클라이언트 구조를 따르는 대표적인 예시로는 웹 서비스가 있다. - 클라이언트는 일종의 고객으로 이해할 수 있다. - 서버로 요청을 보낸 뒤에 응답이 도착할 때까지 기다린다. - 서버로부터 응답을 받으면, 서버의 응답을 처리하여 화..

타입스크린트란? 타입스크립트는 ‘JS+타입’이라고 생각하면 쉽다. 자바스크립트의 확장된 언어지만 자바스크립트와 다르게 브라우저에서 실행하고자한다면 파일을 변환해주어 컴퓨터가 코드를 읽을 수 있게 ‘컴파일’과정을 거쳐야한다. 타입스크립트를 쓰는 이유? 가장 큰 이유로는 ‘에러의 사전방지’를 위함이다. 타입스크립트는 에러를 사전에 방지할 수 있다. function sum(a, b) { return a + b } function sum(a: number, b:number){ return a+b } 첫번째는 자바스크립트, 두번째는 타입스크립트로 작성된 숫자의 합을 구하는 함수코드다. 첫번째는 30이란 결과가 나오겠지만 두번째는 1020이란 결과가 나온다. 이 코드를 vsCode에서 확인하면 아래와 같은 오류를 ..

개발환경마다 요구하는 node의 버전이 다르므로, 본인이 사용해야하는 node버전을 편리하게 관리하기 위해 만들어진 node version manager 를 설치해보자. 1. NVM이란? Node Version Manager의 약자이며, 다양한 버전의 node를 관리하는 스크립트 nvm 명령어로 빠르게 여러버전의 노드를 설치하고 변경 할 수 있다. 2. 사용법 Homebrew 를 이용한 방법 터미널 / iterm을 열고 homebrew 설치 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" nvm 설치 및 환경변수 추가 brew install nvm vi ~/.zshrc 환경변수 추가..

이전에 결제해놓고 엄마일 도와주면서 수업을 못들었다. 이제 좀 적응도 했고, 테니스치다가 다리도 다치는 바람에 테니스관련 사이트만들어 볼 생각으로 구매해놓은 노마드코더 캐럿마켓을 듣기로 했다. 챌린지도 마침하길래 미리 신청해놓고 오늘부터 Day 1 이 시작된다. 4주동안 진행하며, 총 신청자는 199명. 동료가 199명인 것 같은 느낌!! Day 1인 오늘 캐럿마켓 시작 전 NEXT.JS 강의 3개 듣기가 챌린지이다. Framework와 Library의 차이 다들 Framework와 Library를 비슷해서 같은거라고 말한다. 구글링을 4-5군데 해보면 나오는 결과는 ▶ Framework란? - 프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술 - 소프트웨어의 특정 문제를 ..

안녕하세요. 작년 2021년 정보처리기사 2회차 필기 합격률 30%일때 합격한 공부방법 그리고 독학후기를 적어보려고 합니다. 이미 1년이 되어서 합격정보 조회는 안되지만 면제정보조회 가능! ● 정보처리기사 자격증 따는 이유 ? 무역학과 문과생에 국비학원을 다니면서 IT업계쪽으로 취업하기위해서는 정보처리기사가 거의 필수였고, 공기업이나 SI쪽도 기사자격증 우대 또는 있는 사람을 뽑는게 다반사. 비전공자가 전공자를 이기기에는 여전히 갈길이 멀지만 다시 수능공부를 해서 대학에 가기엔 시간/돈낭비라는 생각에 기사 자격증으로 대체하려고 함. ● 필기만 딴 이유? 필기시험을 보고 나서 바빠진 일과 야근으로 실기를 할 시간이 없었고, 퇴사한 지금 기회가 된다면 더 좋은 기회를 위해 실기 접수를 오늘 할 예정 ● 정보..

리액트에서 Key값이 필요한 이유 배열 map함수 사용시, key값을 넣지 않으면 콘솔에서 아래와 같은 문구를 발견할 수 있다. 렌더링엔 전혀 문제가 없지만, 비효율적이라고 말한다. 그런데 내가 듣는 인강에선 아무도 왜 비효율적인지 자세히 설명해주지 않았다. React 공식문서상, Key는 어떤항목이 변경, 추가 그리고 삭제 될 경우 리액트가 식별하는 것을 돕고, 배열 내 element에 안정적인 고유성을 주기위해 지정되야 한다. 고유성 부여를 위해 key값은, 배열의 각 항목 간 서로를 식별 할 수 있는 문자열을 사용하는 것이 좋으며, 불가능할 경우 index를 사용한다. 하지만 index는 좋은 방법은 아니라고 한다.(배열의 처음이나 중간에 새로 데이터가 삽입, 수정, 삭제될 경우 그 부분만을 캐치할..

컴파일러와 인터프리터는 고급언어(ex. 사람의 언어)로 작성된 원시프로그램을 목적프로그램으로 번역하는 번역 프로그램이며, 프로그램 번역 방식에 따라 나뉘어진다. 컴파일러란? 1. 고급언어로 작성된 프로그램 전체를 목적 프로그램으로 번역 한 후 링킹작업을 통해 컴퓨터에서 실행가능한 실행 프로그램을 생성 2. 번역 실행 과정을 거쳐야하기때문에 번역과정이 번거롭고 시간이 오래걸리지만, 번역 후에는 다시 번역하지 않으므로 실행 속도가 빠름 3. C언어, JAVA가 대표적인 예 인터프리터란? 1. 고급언어로 작성된 프로그램을 한 줄 단위로 번역하고, 번역과 동시에 실행을 시키는 프로그램 2. 프로그램이 직접 실행되므로 목적 프로그램은 생성되지 않음 3. 줄 단위로 번역, 실행되기 때문에 시분할 시스템에 유용, 원..

DAY 5 범위 : 3장. 함수 ▶ 책에서 기억하고 싶은 내용 ** 포트란 : 1950년대 말에 IBM의 존 배커스(John Backus) 외 6명의 전문가가 완성한 최초의 고급프로그래밍 언어 중 하나, 알골과 함께 과학계산용으로 주로 사용되며 매우 간결하고 엄격한 구문형식을 가지고 있다. https://namu.wiki/w/%ED%8F%AC%ED%8A%B8%EB%9E%80 ** PL/1 : Programming Language One의 약어 프로그래밍 초창기에는 시스템을 루틴과 하위 루틴으로 나눴고, 포트란과 PL/1 시절에는 시스템을 프로그램, 하위프로그램, 함수로 나눔. 현재는 함수만 남았으며, 어떤 프로그램이든 함수가 기본이다. 이 장에서는 함수를 만드는 규칙에 대해 설명하고 있다. ▶ 작게 만들..

DAY 4 ▶ 최애 북틸 3명 1. 나랑 비슷한 느낀점을 적었다. 나 또한 코드 다시 보다보면 그런생각을 많이하고 동질감을 느꼈다..ㅠㅠ 's Profile – 노마드 코더 Nomad Coders See 's Profile in Nomad Coders nomadcoders.co 2. 소감 세줄 요약부분이 눈에 띈다. 설명할 수 없는 개념을 따로 정리해두었다. https://github.com/myBabyGrand/book_CleanCode/blob/main/TIL/20220220_03_Chapter2_MeaningfulNames.md GitHub - myBabyGrand/book_CleanCode Contribute to myBabyGrand/book_CleanCode development by crea..

DAY 3 범위 : 2장. 의미있는 코드 ▶ 책에서 기억하고 싶은 내용 [ 변수, 함수, 클래스명 작성시 의미있는 이름으로 명명하라 ] ◎ 의도를 분명히 밝혀라 ◎ 그릇된 정보를 피하라 ◎ 의미 있게 구분하라 ◎ 발음하기 쉬운 이름을 사용하라 ◎ 검색하기 쉬운 이름을 사용하라 ◎ 인코딩을 피하라 ◎ 자신의 기억력을 자랑하지마라 ◎ 한 개념에 한 단어를 사용하라 ◎ 말장난을 하지마라 ◎ 해법 영역에서 가져온 이름을 사용하라 ◎ 문제 영역에서 가져온 이름을 사용하라 ◎ 의미 있는 맥락을 추가하라 ◎ 불필요한 맥락을 없애라 ▶ 오늘 읽은 소감은? 떠오르는 생각 요즘엔 변수명 지어주는 사이트가 있다보니 영문으로 변수명작성은 너무 쉬운일이 되어버려서 변수명을 어떤 이름으로 지을지 생각을 하지 않는다. 물론 사이트..