전체 글
코딩 어린이 백과사전
-
웹 브라우저의 뜻 웹 브라우저란 : 사이트에 접속했을 때, HTML, CSS, Javascript 파일을 받아서 이를 번역하여 사용자가 볼 수 있도록 해주는 것. 정적(Static)인 웹페이지 : 서버에서 브라우저에 전송되는 그대로 표시되는 페이지 동적(Dynamic)인 웹페이지 : 서버로부터 데이터를 받아 화면이 실시간으로 내용을 변경하는 페이지 웹 브라우저 통신 방식 - 사용자가 웹 브라우저의 주소창에 URL을 입력한다. - 웹 브라우저는 입력받은 URL을 DNS 서버로 전달하여 해당 IP 주소를 찾게 된다. - DNS 서버는 도메인 이름을 IP 주소로 변환한다. - 웹 브라우저는 해당 IP 주소로 HTTP 요청을 전달한다. - IP 주소에 연결된 웹 서버는 요청(Request)을 받아 처리한다. -..
Node.js 기초 | 웹 브라우저 통신 방식과 원리 | 작동 예시웹 브라우저의 뜻 웹 브라우저란 : 사이트에 접속했을 때, HTML, CSS, Javascript 파일을 받아서 이를 번역하여 사용자가 볼 수 있도록 해주는 것. 정적(Static)인 웹페이지 : 서버에서 브라우저에 전송되는 그대로 표시되는 페이지 동적(Dynamic)인 웹페이지 : 서버로부터 데이터를 받아 화면이 실시간으로 내용을 변경하는 페이지 웹 브라우저 통신 방식 - 사용자가 웹 브라우저의 주소창에 URL을 입력한다. - 웹 브라우저는 입력받은 URL을 DNS 서버로 전달하여 해당 IP 주소를 찾게 된다. - DNS 서버는 도메인 이름을 IP 주소로 변환한다. - 웹 브라우저는 해당 IP 주소로 HTTP 요청을 전달한다. - IP 주소에 연결된 웹 서버는 요청(Request)을 받아 처리한다. -..
2023.08.25 -
사전 정보 빛의 삼원색 RGB : 세 가지 색을 조합해 우리가 보는 컴퓨터 화면의 색상을 만든다. 그렇게 표현된 세가지 색상은 우리의 뇌가 받아들여 색을 인식한다. 우리가 보는 화면은 픽셀로 이루어져 있다. 우리가 현재 보는 화면은 사실 여러 개의 점이 모여 하나의 화면을 이루고 있다. 컴퓨터는 사실 3차원으로 우리가 보는 화면을 구성한다. 우리의 퍼셉트론은 어떻게 이 사진을을 이해하는가. 하나의 화면을 여러개로 잘라 1차원 데이터로 바꾼다. 위 사진처럼 7이라는 모습도 결국 잘라서 1차원 데이터로 만든다. 그러면 손글씨를 인식하는 머신러닝 코드를 살펴보자. from tensorflow import keras # TensorFlow 라이브러리에서 Keras 모듈을 불러옵니다. import data_rea..
FNN으로 이미지를 인식해보자 (딥러닝 레벨원)사전 정보 빛의 삼원색 RGB : 세 가지 색을 조합해 우리가 보는 컴퓨터 화면의 색상을 만든다. 그렇게 표현된 세가지 색상은 우리의 뇌가 받아들여 색을 인식한다. 우리가 보는 화면은 픽셀로 이루어져 있다. 우리가 현재 보는 화면은 사실 여러 개의 점이 모여 하나의 화면을 이루고 있다. 컴퓨터는 사실 3차원으로 우리가 보는 화면을 구성한다. 우리의 퍼셉트론은 어떻게 이 사진을을 이해하는가. 하나의 화면을 여러개로 잘라 1차원 데이터로 바꾼다. 위 사진처럼 7이라는 모습도 결국 잘라서 1차원 데이터로 만든다. 그러면 손글씨를 인식하는 머신러닝 코드를 살펴보자. from tensorflow import keras # TensorFlow 라이브러리에서 Keras 모듈을 불러옵니다. import data_rea..
2023.08.25 -
오늘부터 하루에 100 페이지씩 공부한다. 해당 내용 중에 몰랐던 내용 복습해야 하는 내용을 정리해 나가도록 하겠다. ▣ 01장: 프로그래밍 1.3 구문과 의미 Colorless green ideas sleep furiously. Noam Chomsky '언어의 의미는 문맥에 있는 것이지 문법에 있는 것이 아니다.' 프로그래밍이란 결국 필요한 요구사항의 집합을 분석해서 자료구조와 함수의 집합으로 변환한 후 그 흐름을 제어하는 것. - 5p ▣ 02장: 자바스크립트란? ____2.3.1 Ajax 1999년도에 자바스크립트를 사용해 서버와 브라우저가 비동기(asynchronous) 방식으로 데이터를 주고 받을 수 있는 통신 기능인 Asychronous JavaScript and XML이 XMLHttpRequ..
모던 자바스크립트 Deep Dive 1~100p 배운내용 정리오늘부터 하루에 100 페이지씩 공부한다. 해당 내용 중에 몰랐던 내용 복습해야 하는 내용을 정리해 나가도록 하겠다. ▣ 01장: 프로그래밍 1.3 구문과 의미 Colorless green ideas sleep furiously. Noam Chomsky '언어의 의미는 문맥에 있는 것이지 문법에 있는 것이 아니다.' 프로그래밍이란 결국 필요한 요구사항의 집합을 분석해서 자료구조와 함수의 집합으로 변환한 후 그 흐름을 제어하는 것. - 5p ▣ 02장: 자바스크립트란? ____2.3.1 Ajax 1999년도에 자바스크립트를 사용해 서버와 브라우저가 비동기(asynchronous) 방식으로 데이터를 주고 받을 수 있는 통신 기능인 Asychronous JavaScript and XML이 XMLHttpRequ..
2023.08.22 -
이전에 기초적인 자바스크립트 메소드들이 없을때는 사설 메소드 패키지인 lowdash를 가져다 썼다고 한다. // _.take는 배열의 처음 n개의 element를 담은 새로운 배열을 리턴합니다. // n이 undefined이거나 음수인 경우, 빈 배열을 리턴합니다. // n이 배열의 길이를 벗어날 경우, 전체 배열을 shallow copy한 새로운 배열을 리턴합니다. _.take = (arr, n) => { // TODO: 여기에 코드를 작성합니다. // 두번째 매개변수가 없으면, 빈배열을 반환합니다. // 차례대로 n개의 요소를 가지는 배열 리턴 if (n === undefined || n === 0) { return []; } else { let temp_list = []; let _end = n; ..
Lodash 패키지를 직접 만들어보자~이전에 기초적인 자바스크립트 메소드들이 없을때는 사설 메소드 패키지인 lowdash를 가져다 썼다고 한다. // _.take는 배열의 처음 n개의 element를 담은 새로운 배열을 리턴합니다. // n이 undefined이거나 음수인 경우, 빈 배열을 리턴합니다. // n이 배열의 길이를 벗어날 경우, 전체 배열을 shallow copy한 새로운 배열을 리턴합니다. _.take = (arr, n) => { // TODO: 여기에 코드를 작성합니다. // 두번째 매개변수가 없으면, 빈배열을 반환합니다. // 차례대로 n개의 요소를 가지는 배열 리턴 if (n === undefined || n === 0) { return []; } else { let temp_list = []; let _end = n; ..
2023.08.22 -
1. 문자열은 불변하다 문자열의 위치를 인덱싱 하여 문자열을 바꿔주고 싶었는데 실패했다. 왜냐하면 문자열은 불변(immutable) 했기 때문이다. 왜그런지 살펴봤다. 만일 기존의 문자열을 직접 변경할 수 있다면 발생하는 문제점들이 있을것이다. 2. forEach 사용법을 익혔다. 함수 안에 배열 메소드중 하나인 forEach를 사용하여 문제를 풀었다. forEach는 배열의 각 요소에 대해 주어진 함수를 실행하는 메소드다. 괄호 안에 화살표 함수를 넣어서 위와 같이도 활용할 수 있었다. 현재 값, 인덱스, 배열(현재 호출된 배열) 세가지 인수를 받을 수 있다. 입력 예시 코드 (신기하게 콜백함수를 매개변수로 받는다. 나는 이를 화살표 함수로 했다) const numbers = [1, 2, 3, 4, 5..
알고리즘 문제를 풀며 배운 것 1(0819~0820)1. 문자열은 불변하다 문자열의 위치를 인덱싱 하여 문자열을 바꿔주고 싶었는데 실패했다. 왜냐하면 문자열은 불변(immutable) 했기 때문이다. 왜그런지 살펴봤다. 만일 기존의 문자열을 직접 변경할 수 있다면 발생하는 문제점들이 있을것이다. 2. forEach 사용법을 익혔다. 함수 안에 배열 메소드중 하나인 forEach를 사용하여 문제를 풀었다. forEach는 배열의 각 요소에 대해 주어진 함수를 실행하는 메소드다. 괄호 안에 화살표 함수를 넣어서 위와 같이도 활용할 수 있었다. 현재 값, 인덱스, 배열(현재 호출된 배열) 세가지 인수를 받을 수 있다. 입력 예시 코드 (신기하게 콜백함수를 매개변수로 받는다. 나는 이를 화살표 함수로 했다) const numbers = [1, 2, 3, 4, 5..
2023.08.21 -
이번에 웹 프로그래밍을 공부하며 처음으로 프로젝트를 진행했다. 청창사 중간평가 발표 일정이 겹쳐 바빴지만, 빠르게 집중해 회원가입, 로그인, 로그아웃 기능을 만들어 볼 수 있었다. 그러면 어떻게 진행했나 정리를 해보자. 1. 기획 과정 - 책 리뷰 사이트 항상 기획자의 역할을 해왔기 때문에, 이번에는 다른 관점을 배워보기 위해 아이디어가 있는 팀원을 적극 서포트 하려 노력했다. 와중에 책 리뷰 페이지를 만들고 싶다는 팀원분의 의견으로 책 리뷰 사이트를 만들기로 하였다. 추가적으로 크롤링 혹은 API로 외부 데이터를 조회하여 써보고 싶으시다는 팀원 분이 있으셔서 네이버 도서 API를 활용해 책 정보를 쉽게 작성할 수 있다는 사실을 알려드렸다. 1.1 와이어 프레임 설계 피그마 링크를 공유해드려 다 같이 와..
웹 미니 프로젝트 | 플라스크 | 회원가입, 로그인 구현 JWT 1편이번에 웹 프로그래밍을 공부하며 처음으로 프로젝트를 진행했다. 청창사 중간평가 발표 일정이 겹쳐 바빴지만, 빠르게 집중해 회원가입, 로그인, 로그아웃 기능을 만들어 볼 수 있었다. 그러면 어떻게 진행했나 정리를 해보자. 1. 기획 과정 - 책 리뷰 사이트 항상 기획자의 역할을 해왔기 때문에, 이번에는 다른 관점을 배워보기 위해 아이디어가 있는 팀원을 적극 서포트 하려 노력했다. 와중에 책 리뷰 페이지를 만들고 싶다는 팀원분의 의견으로 책 리뷰 사이트를 만들기로 하였다. 추가적으로 크롤링 혹은 API로 외부 데이터를 조회하여 써보고 싶으시다는 팀원 분이 있으셔서 네이버 도서 API를 활용해 책 정보를 쉽게 작성할 수 있다는 사실을 알려드렸다. 1.1 와이어 프레임 설계 피그마 링크를 공유해드려 다 같이 와..
2023.08.19