* 문제 발견 이미지 파일 업로드 기능을 구현하다가 문제를 발견했다. 특정 용량 이상의 이미지들이 업로드가 되지 않는 것이었다. 로컬에서 테스트할 때는 분명히 용량 문제같은건 없었는데, 테스트로 배포하고 나니 저용량 이미지가 아니면 업로드가 되지 않는다. 문제를 파악하기 위해 콘솔창을 확인해보았다. 콘솔에서는 CORS 에러를 반환하고 있었다. 조금 당황스러웠다. 이전까지 CORS 에러는 발생하지 않았기 때문이었다. 한참을 구글링하다가 다음과 같은 글을 발견했다. forum.adonisjs.com/t/cors-error-with-big-file-upload/6538 Cors error with big file upload Hi guys, I’m having a error Access to XMLHttpRe..
어제 연결 리스트에 대한 포스팅을 올렸으니, 리트코드에서도 연결 리스트와 관련한 문제를 풀어보는 게 좋겠다고 생각했다. 선택한 문제는 다음과 같다. 83. Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that each element appear only once. 정렬된 연결 리스트가 주어졌을 때, 중복되는 값을 가진 요소를 삭제하여 각 요소가 한 번씩만 나오도록 하는 문제다. 예를 들어 연결 리스트의 값이 1-1-2-3으로 주어진다면 이를 1-2-3 으로 수정해주면 된다. 어제 포스팅에서도 잠시 언급했지만, 연결 리스트의 특징은 각 노드는 다음 노드의 주소값을 가지고 있다는 것이다. 그렇..
* 연결 리스트(Linked List) 연결 리스트는 일렬로 연결된 데이터를 저장할 때 사용하는 자료구조. 한 노드에는 다음 노드의 주소 정보가 담겨져 있다. 배열과 연결 리스트는 흔히 비교되는 자료구조 형태다. 배열의 경우에는 배열 각 칸들이 물리적으로 한 곳에 모여 있으므로, 크기를 한 번 정하면 늘리거나 줄일 수 없다. 반면, 연결 리스트의 경우 데이터를 중간에 삽입을 하는 것이 용이하다. 가령, A노드와 C 노드 사이에 B 노드를 추가하려는 경우, B 노드의 다음 주소를 C노드로 연결하고, A노드의 다음 주소를 B노드로 연결하면 된다. (관련 알고리즘 문제풀이) 연결 리스트는 주소를 일일이 찾아다녀야 하기 때문에 배열보다 검색 속도가 느릴 수 있다. 반면 위에서 본 것 처럼 데이터를 중간에 추가하..
* Case 리트코드에서 다음과 같은 알고리즘 문제를 풀게 되었다. 35. Search Insert Position Given a sorted array and a target value, return the index if the target is found. If not, return the index where it would be if it were inserted in order. 오름차순으로 정렬된 배열과 타겟값이 주어진다. 배열 내에서 타겟값과 동일한 요소의 인덱스를 찾아야 한다. 타겟값과 일치하는 요소가 없는 경우에는 정렬 순서에 맞추어 타겟값을 배열 안에 넣을 때, 타겟값의 인덱스를 구하는 문제다. 단순하게 생각해본다면 배열에 반복문을 사용해 앞에서부터 값을 타겟과 비교해보면 될 것이다...
리액트를 사용해서 프로젝트를 만들었는데 생각해보니 모바일 앱으로도 만들면 좋겠다는 생각이 들었다. 아, 그럼 리액트 네이티브를 사용해서 만들면 되겠네 하고 리액트 네이티브 프로젝트를 시작한다. 음? 그런데 생각해보니 어차피 거의 동일한 서비스를 각각 리액트와 리액트 네이티브를 사용해서 만드는 건데, 중복되는 코드가 되게 많지 않을까? 이걸 굳이 각각 따로 짜야 하는 건가 의구심이 든다. 뭔가 방법이 없을까? * 서브모듈(submodule) 위 케이스의 리액트-리액트 네이티브와 같이 복수의 프로젝트지만 공통으로 사용되는 부분이 있을 수 있다. 이 공통된 부분을 마치 모듈처럼 사용할 수 있다. 깃의 서브모듈(submodule)은 복수의 프로젝트 사이에서 모듈을 공유해 사용하는 것이 가능해진다. 서브모듈은 기..
* 정규식 (Regular Expression) 프로그래머스에서 알고리즘 문제를 풀고 나면, 다른 사람들의 풀이를 볼 수 있다. 그 중에 신기한 것을 보게 되었는데 그건 바로 정규식(Regular Expression)이었다. MDN 에서는 정규식을 아래와 같이 설명하고 있다. 정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 ,그리고 String의 match메소드 , replace메소드 , search메소드 , split 메소드와 함께 쓰입니다 . * 정규식 패턴 설정하기 (Compile) 말하자면 문자열에서 1. 패턴을 설정(compile)한 후 2. 이를 실..
*환경변수 프로젝트를 진행하다 보면 간혹 민감한 정보들이 변수 내 사용되는 경우가 있다. 예를 들어, 포트번호라던가 API라던가 하는 부분들은 때로는 공개되지 않아야 하는 경우가 있다. 실수로 깃에 업로드라도 되었다가는...상상만 해도 끔찍하다. 이러한 경우를 대비해 널리 쓰이는 것이 환경변수다. 공개되지 않아야 하는 정보들은 직접 입력하지 않고 환경변수에 담아 프로젝트 내애서 활용하는 것이다. Node.js에서 환경변수를 사용하기 위해 가장 많이 사용하는 모듈 중 하나가 바로 dotenv 모듈이다. * dotenv module dotenv 모듈을 사용하는 방법은 다음과 같다. 먼저 npm 혹은 yarn을 이용해 설치해준다. # with npm npm install dotenv # or with Yarn..
솔로 프로젝트를 기획하는 중에 누군가 타입스크립트를 써보는 게 어떠냐는 제안을 했다. 생각해보니 JD를 보면 타입스크립트를 사용하는 곳들도 꽤 있었던 기억이다. 좋아, 그럼 한번 해보지 뭐 생각하고 프로젝트에 도입해보기로 했다. 그런데...타입스크립트가 뭐지? *What is TypeScript 자바스크립트의 특징 중 하나는 타입 시스템이 없다는 점이다. Java 등의 언어에서는 변수에 타입을 미리 지정해서 사용하는 반면, 자바스크립트에서는 변수에 다양한 타입의 값을 사용할 수 있다. 전자를 정적 타입 언어, 후자를 동적 타입 언어라고 한다. 동적 타입 언어의 경우 개발 환경이 유연 장점이 있으나, 런타임 환경에서 쉽게 에러가 발생한다는 단점이 있다. 반대로 정적 타입의 언어는 프로젝트 초기에 소요되는 ..
* API (Application Programming Interface) API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. API가 무엇인지에 대한 위키백과의 설명이다. 얄코에서는 조금 더 쉽게 풀어서 '정보를 주고받는 데 있어서 개발자들이 사용하는 형식'이라고 설명한다. 예를 들어 기상청에서는 날씨 정보를 가지고 있다. 수많은 클라이언트들이 기상청 서버에 날씨 정보 요청을 보낸다. 이렇게 요청을 보낼 때 모두가 다른 방식으로 정보를 요청한다면 정보를 주는 입장에서도, 받는 입장에서도 엄청나게 혼란스러울 것이다. 정보를..
스프린트 과정이 모두 끝나고 첫 번째 프로젝트를 진행할 때가 되었다. 시간이 이렇게 빠르게 흘렀다는 것이 믿기지가 않는다. 지금까지 배운 것들로 과연 프로젝트를 해낼 수 있을 것인가라는 마음 반, 내가 해보고 싶은 것을 백지부터 해볼 수 있다는 기대감이 나머지 절반이었다. 기획력 있는 개발자가 되는 것이 목표였기 때문에 내가 낸 아이디어로 프로젝트를 진행해보고 싶었다. 아이디에이션에 있어 내 기준은 크게 두 가지였다. 첫째, 일반 사용자들이 사용할 수 있는 서비스일 것. B2B보다는 B2C 서비스에 더 관심을 갖고 있기 때문에, 사람들이 쉽고 직관적으로 사용할 수 있는 서비스를 기획하고자 했다. 너무 뻔하기보다는 조금 색달랐으면 했다. 둘째, 배운 것들을 기반으로 구현할 수 있는 서비스일 것. 첫 번째 ..
사람들은 서로 다른 코드 습관을 가지고 있다. 누군가는 스페이스키를 사용하고 누군가는 탭키를 사용한다. 코드를 혼자 칠 것이라면 모르겠으나, 다른 사람들과 협업을 할 때에는 일관된 규칙을 가지고 있는 것이 좋다. ESlint는 공통된 스타일 규칙을 가지고 작업을 하게 해주는 편리한 툴이다. ESlint를 사용해서 코드에 에어비앤비 스타일을 적용하는 과정은 아래와 같다. 먼저 터미널 창에 아래와 같은 명령어를 입력한다. npx eslint --init ESlint를 어떻게 사용할 것인지를 묻고 있다. 문법 확인은 물론, 코드스타일을 강제하고 싶으므로 세 번째 옵션을 선택했다. 사용하고자 하는 모듈을 선택한다. 프로젝트에서 사용하는 프레임워크를 설정하고 타입스크립트 사용 여부에 응답하고 브라우저/노드 환경을..
로그인 시스템을 만든다고 가정해보자. 가장 중요한 것 중 하나는 사용자의 비밀번호를 저장하는 것이다. 예를 들어 다음과 같은 사용자 계정이 있다고 하자. id leomessi password goat_10 만약 클라이언트에서 받아온 정보를 그대로 데이터베이스에 저장한다면 어떻게 될까. 데이터베이스에 접근하는 모든 사람이 사용자의 비밀번호를 알게 될 것이다. 정보 유출의 가능성이 너무나 높은 위험한 방법이다. 따라서 비밀번호는 암호화되어 저장되어야 한다. 암호화에서 가장 많이 쓰이는 방법 중 하나가 바로 해시함수를 사용하는 것이다. *해시함수 (Hash Function) 해시함수는 주어진 정보를 암호화시켜주는 역할을 한다. 예를 들어 'abc'라는 값을 해시함수에 넣으면 'lkjafs@ufkf/#!'와 같..
AWS의 대표 서비스인 S3, EC2, RDS에 대한 소개. 1) S3 (SImple Service Storage) S3는 파일을 저장하는 서비스다. 일반적으로 우리는 SSD에 파일을 저장한다. 하지만 이런 장치들은 언젠가는 고장나게 되어 있다. AWS는 파일 저장에 있어 훨씬 안전한 내구성을 가진 서비스를 제공하고 있다. S3는 컨텐츠 저장 및 배포 용도로 사용 가능하다. 예를 들어 사용자들이 페이스북에 사진을 올리면 해당 파일은 S3에 저장된다. 사용자들이 사진을 다운로드 할 때에는 S3에 저장된 파일을 다운로드하게 된다. 말하자면 S3는 '파일서버를 서비스화' 한 것이라고 할 수 있다. 2) EC2 AWS에서 가장 먼저 생겨났고, 가장 범용적인 서비스가 EC2이다. 독립된 컴퓨터 한 대를 임대해주는..
MySql을 처음 쓸 때마다 명령어가 기억이 안 나서 정리해놓은 치트시트를 정리해보았다. 직관적인 편이라 몇 번 사용해보면 금방 외워지는 것 같다. 1. 데이터베이스 관련 데이터베이스 만들기, 리스트 보기, 사용하기 명령어는 아래와 같다. // Database 만들기 create database '데이터베이스명'; // Database 리스트 보기 show databases; //Database 사용하기 use 데이터베이스명; 2. 테이블 관련 테이블 만들기, 테이블 구조 확인하기, 테이블 이름 바꾸기, 테이블 삭제 명령어는 아래와 같다. // 테이블 만들기 create table '테이블명' ( 컬럼1 데이터타입, 컬럼2 데이터타입, ... ); // 테이블 구조 확인하기 desc 테이블명; // 테이..
앞서 내가 본 영화들을 어떻게 하면 효율적으로 정리할 수 있을까에 대해 다뤄보았다. 영화, 그리고 감독을 기준으로 테이블을 만들어 정리했다. 정리를 하다 보니 욕심이 생겨 장르 정보를 추가해서 아래와 같은 테이블을 작성했다. 1. full_table id(PK) movie director genre 1 기생충 봉준호 드라마, 스릴러 2 아메리칸 허슬 데이비드 O. 러셀 드라마 3 괴물 봉준호 스릴러 4 어라이벌 드니 빌뇌브 SF, 드라마 5 옥자 봉준호 드라마 6 라라랜드 데미언 셔젤 로맨스 7 조조 래빗 타이카 와이티티 코미디, 드라마 8 실버라이닝 플레이북 데이비드 O. 러셀 코미디, 드라마 9 위플래쉬 데미언 셔젤 드라마 10 문라이트 베리 젠킨스 드라마, 로맨스 정리를 하다보니 궁금한 점이 생긴다..
최근에 본 영화들을 정리해보기로 했다. 어떤 기준으로 정리해해야 좋을까? 일단 제일 중요한 정보는 영화 제목이다. 영화 제목만으로 정리하는 것은 조금 심심하니까 영화를 만든 감독 이름도 함께 정리해보았다. 이를 표로 나타내면 아래와 같다. 1. full_table id(PK) movie director 1 기생충 봉준호 2 아메리칸 허슬 데이비드 러셀 3 괴물 봉준호 4 어라이벌 드니 빌뇌브 5 옥자 봉준호 6 라라랜드 데미언 셔젤 7 조조 래빗 타이카 와이티티 8 실버라이닝 플레이북 데이비드 러셀 9 위플래쉬 데미언 셔젤 10 문라이트 베리 젠킨스 나쁘지 않다. 그런데 좀 비효율적이라는 생각이 든다. 이유를 생각해보니 director 컬럼에 들어가는 내용이 중복이 되고 있음을 알 수 있다. 조금 더 나..
바르셀로나 스타일이라고 하면 티키타카로 대표되는 패스 축구를 가장 먼저 떠올릴 것이다. 바르셀로나의 더운 날씨로 인해서 직접 뛰기보다는 패스로 공을 운반하는 티키타카 스타일이 자리 잡게 되었다고 한다. 골키퍼부터 시작해서 최전방 공격수까지 이어져 골을 만들어 내는 모습은 감탄스럽다. 골키퍼가 피케에게 공을 패스한다. 피케는 1초 뒤에 부스케츠에게 공을 패스한다. 부스케츠는 1초 뒤 호르디 알바에게, 알바는 1초 뒤 그리즈만에게, 그리즈만은 1초 뒤 메시에게 패스한다. 그리고 1초 뒤 메시가 득점한다. 이를 코드를 통해 짜 보면 어떻게 될까? 포인트는 모든 동작들이 1초의 텀을 두고 이루어진다는 것이다. 이 경우 setTimeOut 함수를 이용할 수 있다. 비동기로 이루어진다. 패스 순서를 정확하게 맞추기..
너무 신기해. 문과가 어떻게 프로그래밍을 해? 친구들을 만나면 가끔 이런 질문을 듣는다. 나도 문과고 친구들도 문과다. 친구들의 논리는 대체로 이런 식이다. 프로그래밍 잘하려면 수학을 잘해야 하는거 아니냐. 문과는 수학을 잘 못하니까 프로그래밍도 어려운거 아니냐는 것이다. 이해는 한다. 사실 이건 부트캠프를 시작하면서 내가 가장 걱정했던 부분이기도 했다. 딱히 수학을 잘 하는 편이 아니었기 때문에, 시작하기 전에는 내가 코딩을 잘 할 수 있을까에 대한 불안이 있었다. 막상 해 보니 꼭 그렇지는 않다는 생각이 들긴 했다. 물론 수학을 잘하면 엄청나게 도움이 되는 건 맞는 말이라고 생각한다. 특히 알고리즘 문제 풀 때 진짜. 궁금증에 대답이라도 하듯 최근 워싱턴대에서 관련 연구결과를 내놓았다. 통념과 달리 ..
* 왜 리덕스를 사용하는가 버스 하차 벨을 생각해보자. 버튼을 누르면 삐- 소리가 나면서 동시에 버스 내에 있는 모든 벨에 빨간 불이 들어온다. 버튼을 한 번 눌렀는데, 모든 벨의 색깔이 변화하는 것이다. 버스 하차벨처럼 한 칸의 버튼을 클릭하면 나머지 칸의 색이 따라 바뀌는 화면은 어떻게 만들 수 있을까? 먼저 '빨강' 버튼을 누르면 모든 화면이 빨갛게 변하는 화면을 생각해보자. 먼저 (1) 'red' 자신의 색을 빨갛게 바꾸는 코드, (2) 'green'의 색을 빨갛게 만드는 코드, (3) 마지막으로 'blue' 의 색을 빨갛게 바꾸는 코드가 필요하다. 총 세 번의 코딩을 해야 한다. 마찬가지로 모든 칸을 초록으로 만들 때도 세 번, 모든 칸을 파랗게 만들 때도 세 번의 코드작업이 필요하다. 위 화면..
*props 아래와 같이 Subject 라는 컴포넌트를 만들었다. 이제 Subject 라는 컴포넌트를 자유롭게 사용할 수 있을 것이다. // 컴포넌트를 정의하고 class Subject extends Component { render(){ return ( WEB world wide web! ); } } // 요렇게 사용하면 됨 하지만 조금 더 욕심을 내볼 수 있다. Subject 내부의 내용이 꼭 'WEB' 이라던가 'world wide web!' 이라는 고정값을 가져야 할까? 사용할 때마다 동적으로 내용을 바꿔서 쓸 수 있다면 훨씬 효율적으로 이용할 수 있지 않을까? HTML DOM에서는 '속성'을 사용해 태그에 개별적인 성격을 부여한다. 리액트DOM에서도 이와 유사한 방법을 이용해 컴포넌트 사용 시 ..
* 엘리먼트 리액트 공식문서는 엘리먼트를 '리액트 앱의 가장 작은 단위' 라고 표현하고 있다. 엘리먼트는 화면에 표시할 내용을 기술하는데, 브라우저 DOM 엘리먼트와는 달리 리액트 엘리먼트는 일반 객체다. 리액트 DOM은 리액트와 일치하도록 DOM을 업데이트한다. const element = Hello, world; HTML파일 어딘가에 "root" 라는 id를 가지고 있는 엘리먼트가 있다고 가정하자. 이 안에 들어가는 모든 엘리먼트들을 React DOM 에서 관리하기 때문에 이를 '루트 DOM 노드' 라고 부른다. 리액트 엘리먼트를 DOM 노드에 렌더링하려면 ReactDOM.render()로 전달하면 된다. function tick() { const element = ( Hello, world! It ..
*리액트(React) 웹사이트에 넣을 수 있는 정보량이 많아지면 웹사이트는 빠른 속도로 복잡해진다. 이것은 무엇을 의미할까. 사이트 내 HTML 태그가 정보량과 함께 기하급수적으로 늘어난다는 것을 의미한다. 당장 페이스북에 들어가서 개발자도구를 켜보면 엄청난 양의 HTML태그가 있는 것을 확인할 수 있다. 말하자면 HTML태그를 효율적으로 관리할 수 있는 방법이 필요해지는 것이다. 만약 내가 반복해서 사용하는 HTML 태그를 한 덩어리에 담아 사용할 수 있다면 어떻게 될까. 말하자면 '사용자 정의 태그'를 만들어주는 것이다. 이 사용자 정의 태그를 사용하면 동일한 작업을 반복하지 않아도 될 뿐만 아니라(재사용성), 가독성이 좋아진다. 뿐만 아니라, 유지보수 또한 엄청나게 편해질 것이다. 리액트(React..
* XSS (Cross-Site Scripting)사용자가 입력한 정보를 출력할 때, 스크립트가 실행되도록 하는 공격 방식이다. 사용자의 사적인 데이터, 이를테면 로그인 시 쿠키정보 등을 공격자의 사이트로 전송한다거나 사용자가 의도하지 않은 행동들을 하도록 한다. 예를 들어 사용자1이 인터넷 게시판에 글을 쓰면, 해당 내용은 서버로 전송되고 서버의 DB에 저장된다. 그리고 사용자2가 서버를 통해 해당 글 내용을 전송받는다. 공격자는 게시판에 글이 아니라 스크립트를 심어놓는다. 스크립트는 서버로 전송되고, DB에 저장된다. 그리고 피해자가 서버를 통해 해당 게시글을 열면 피해자의 브라우저에서 공격자가 심어놓은 스크립트가 실행된다. 스크립트 내에는 브라우저 내 쿠키에 저장된 피해자의 개인정보를 공격자의 서버..
* CORS : Cross-Origin Resource Sharing 웹브라우저의 기본 정책은 '도메인이 다르면 요청을 주고 받을 수 없다'이다. 이를 동일 출처 정책(SOP)이라고 한다. 유저가 브라우저에 주소값을 입력하면 서버로 요청이 보내지고, 이후 서버에서는 HTML 페이지를 반환해 준다. 이 모든 과정이 같은 도메인에서 일어난다. 과거에는 웹사이트에서 다른 서버로 요청을 보내면 보안상 악의적인 행동(피싱 등)을 하는 것으로 간주되었다. 때문에 브라우저에서는 같은 도메인이 아니면 요청 자체를 막아버렸다. 날씨 API를 이용하는 상황을 생각해보면 그림과 같다. 브라우저에서 웹서버로, 웹서버에서 날씨 API로 요청하는 이중 구조를 가지고 있다. 그냥 바로 브라우저에서 날씨 API를 직접 받아오면 훨씬..
객체 지향 프로그래밍은 수작업이 아닌 공장에서의 생산작업을 의미한다. 하나의 공장(원형)을 만든 후, 같은 성격의 제품들(인스턴스)을 계속해서 찍어내는 것이다. 자바스크립트에 class 가 등장하면서, 공장을 만들어내기가 훨씬 쉬워졌지만, 그 전에는 어떤 방식으로 인스턴스들을 만들어냈을까? 크게 다음의 네 가지 방법이 있다. 이들은 레거시 코드로 이와 같은 방식으로 코드를 작성할 일은 많지 않다. 하지만 이미 만들어진 코드를 이해하는 데 중요하므로 알아둘 필요가 있다. 1. Functional var Shoes = function(brand){ var shoeInstance = {}; shoeInstance.brand = brand; shoeInstance.run = function(){ console...
* Class 앞서 Obejct.create() 를 이용한 상속을 알아보았다. 하지만 ES6가 나오면서 class를 사용해 훨씬 간단하게 상속을 구현할 수 있게 되었다. 아래 코드는 이전 포스팅에서 Object.create()를 이용해 구현한 상속을 ES6 문법의 class 를 사용해 구현한 것이다. // Class class Shape { // class 명 constructor(){ // 기존 생성자함수 부분 this.x = 0; this.y = 0; } move(x,y){ // 기존 prototype 객체에 정의하 메소드 부분 this.x += x; this.y += y; console.info('Shape moved.'); } } class Rectangle extends Shape { const..
* Call by Value : 값에 의한 호출 CBV의 특징은 값이 '그대로' 복사(deep copy)된다는 점이다. 즉, 같은 값을 가진 데이터가 메모리에 또 하나 만들어져 저장되는 것이다. // call by value let x = 2; let y = x; y = 3 x === y // false (x = 2, y = 3) 코드 네 번째 줄을 보면, y에 x의 값이 할당되어 있다. x의 값을 복사(deep copy)해서 y에 할당한 것이다. x와 y의 값은 각각 별개이므로 y값의 변화가 x에 전혀 영향을 미치지 않는다. 따라서 x===y 의 불린값은 false가 된다 (x = 2, y = 3) * Call by Reference : 참조에 의한 호출 CBR의 특징은 변수에 값이 복사되는 것이 아니..
*런타임(Runtime) 런타임이란 프로그램이 구동되는 환경을 의미한다. 일반적으로 자바스크립트는 브라우저에서 실행된다. 이 때의 런타임은 브라우저가 된다. 자바스크립트가 꼭 브라우저에서만 실행되는 것은 아니다. Node라는 환경에서도 실행이 가능하다. .Node를 통해 자바스크립트로 서버 등 여러가 지 프로그램을 만드는 것이 가능해졌다. 같이 runNode.js 라는 파일 내 자바스크립트 코드를 작성했다. 이를 브라우저와 노드에서 각각 실행해볼 수 있다. //runNode.js function hey () { console.log('hello, node!') }; hey(); * 브라우저 실행 html 파일을 하나 만들고, 이를 //src에 파일 삽입 * Node 실행 터미널을 켜고, 아래에 다음 명령..
* Object.create(proto) Object.create 메소드는 지정된 프로토타입 객체 및 프로퍼티를 갖는 새로운 객체를 만들어낸다. Object.create(proto) 메소드는 특정 객체를 프로토타입으로 하는 새로운 객체를 만들어닌다. 메소드의 파라미터(proto)로 객체를 받는데, 이 객체가 새로 생성된 객체의 프로토타입이 된다. Object.create()를 통해 자바스크립트에서 상속을 구현하는 것이 가능한데, MDN 의 예시 코드를 보면 다음과 같다. function Shape() { this.x = 0; this.y = 0; } // 상위클래스 메서드 Shape.prototype.move = function(x, y) { this.x += x; this.y += y; console...
* 함수 생성과 프로토타입 객체 자바스크립트에서는 함수가 생성될 때, 프로토타입 객체도 함께 생성된다. 함수와 프로토타입은 각각 가지고 있는 prototype, constructor 프로퍼티를 통해 서로 연결된다. 코드로 나타내면 아래와 같다. // Constuctor Function function Car(brand){ this.brand = brand }; // Prototype Object : 함수 생성시 같이 생성됨 Car.prototype = { constructor : Car } 함수 Car가 생성되며 의 프로토타입 객체가 함께 생성된다. 객체 안에는 constructor 프로퍼티가 들어있다. ( 실제 찍어보면 __proto__ 가 함께 있는데, 이는 상위 객체인 Object.prototype..
* constructor, prototype 자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어 있다. 이 때, 부모 역할을 하는 객체를 프로토타입 혹은 프로토타입 객체라고 부른다. 객체의 부모, 즉 객체의 프로토타입은 객체가 생성될 때 결정된다. 객체는 생성자함수에 의해 만들어진다. 어떤 함수가 생성되면 프로토타입 객체가 함께 생성된다. 생성된 함수의 prototype 프로퍼티는 함께 생성된 프로토타입 객체를 가리키며, 생성된 객체의 constructor 프로퍼티는 생성자 함수를 가리킨다. 이를 그림으로 보면 아래와 같다. 프로토타입 객체에는 기본적으로 constructor 프로퍼티가 들어있다. 프로토타입도 객체이므로, 아래외 같이 프로퍼티를 추가해서 사용하는 것이 가능하다. // Construct..
* 시간 복잡도 알고리즘의 수행시간을 분석한 결과를 말한다. 일반적으로 빅오 표기법(Big-O Notation)을 사용해 나타낸다. 1. Big-O 알고리즘의 성능을 수학적으로 표현해주는 표기법. 이를 통해 알고리즘의 시간 복잡도, 공간 복잡도를 표현할 수 있다. Big-O는 알고리즘의 실제 러닝타임을 표기하기보다는 알고리즘의 성능을 예측하는 데 사용된다. 2. 상수(Constants) 위에서 언급했듯, Big-O의 용도는 실제 알고리즘 러닝타임이 아니라, 성능 예측이기 때문에 빅오 표기시 상수는 중요하게 고려하지 않아 제거한다. 3. 표기 - O(1) : Constant Time 입력 데이터의 크기와 상관없이 언제나 일정 시간이 걸리는 경우다. 예를 들어, 연결 리스트의 맨 앞에 노드를 추가하는 작업의..
1. 트리(Tree) 트리는 부모-자식의 계층구조를 가진 자료구조를 의미한다. 자식은 여럿일 수 있지만, 부모는 하나라는 특징이 있다. 트리 최상단에 위치한 부모 노드를 루트 노드(Root Node)라고 한다. 그리고, 자식이 없는 노드는 리프 노드(Leaf Node) 혹은 터미널 노드(Terminal Node)라고 한다. 그 외의 노드들은 내부 노드(Internal Node) 라고 한다. 아래 그림에서 루트 노드는 A, 리프 노드는 F, G, H 가 된다. 트리 관련해서 추가적으로 살펴볼 개념은 다음과 같다. - 엣지(Edge) : 노드와 노드를 이어주는 선을 의미한다. 한 노드와 다른 노드와의 관계를 설명한다. - 레벨(Level) : 루트 노드로부터의 거리를 의미한다. 그림의 경우, 레벨 1은:A,..
자료를 일정한 규칙에 따라 데이터를 정리하는 것을 자료구조(Data Structure)라고 한다. 자료를 효율적으로 저장하고 관리하기 위해서 자료구조를 알맞게 활용하는 것이 중요하다. 1. 스택 (Stack) 스택은 한 방향에서만 자료를 넣고 뺄 수 있는 구조를 의미한다. Stack의 사전적 의미는 '쌓다' 이다. 스택을 이해하기 위해서는 책상 위에 쌓아 올려진 책을 생각하면 편하다. 스택의 특징은 마지막으로 들어간 요소가, 제일 먼저 나간다는 데 있다. 이를 LIFO(Last In First Out)라고 줄여 말하기도 한다. 그림으로 보면 더욱 간편하다. 2. 큐 (Que)큐는 스택과 달리 양방향으로 열려 있어, 먼저 들어간 데이터가 먼저 나오는 구조를(FIFO, First In First Out)가지..
* Hash Table 해시테이블은 배열과 연결리스트의 장점을 취한 자료구조이다. 키-밸류 쌍의 자료를 저장한다. 배열과 유사한 구조로 각 칸별로 인덱스가 있다. 그 칸에 자료를 저장할 수 있다. 연결 리스트를 이용해 한 칸에 여러 개의 자료를 저장할 수 있다. * Hash Function 해시함수는 특정 키를 받으면 이를 일정한 규칙(함수)을 통해 해시코드를 만들어낸다. 2. 주어진 key 에 항상 같은 값을 반환 3. 무엇도 저장하지 않고, 그때그때 값을 줌 해시함수의 역할은 자료를 알맞게 구분해 해시테이블에 배분시키는 것이다. 따라서 해시함수가 얼마나 고르게 자료를 해시테이블에 배분하는지가 해시함수 알고리즘을 짤 때 가장 중요한 사항이다. * 예시 candy : sweet 이라는 자료가 있다고 가정..
대표적인 프로그래밍 방법론으로 절차적 프로그래밍(Procedural Programming)이 있다. 순차적인 처리가 중요시되며, 프로그램 전체가 유기적으로 연결되어 있다. 컴퓨터의 처리구조와 유사해 빠른 실행이 장점이다. 예를 들어 점심으로 볶음밥을 만들기로 했다. 팬을 달구고, 계란, 야채 등 재료른 준비해 넣고, 밥을 넣어 볶는다. 이 모든 과정이 순차적으로 이루져야 할 것이다. 해야 할 행동을 코드로 나타내면 다음과 같다. console.log('팬을 달굽니다') console.log('재료를 넣습니다') console.log('재료를 다같이 볶아줍니다') 세 줄의 코드로 요리가 가능해진다. 그런데, 오늘 점심 뿐만 아니라 오늘 저녁도 볶음밥을 먹게 된다면 어떻게 될까? //점심 볶음밥 만들기 co..
자바스크립트에서 함수를 생성하는 여러가지 방법 중 하나가 바로 함수 표현식이다. 함수를 변수에 할당하는 방식이다. 그런데, 함수 표현식은 크게 두 가지로 나눌 수 있다. 익명함수와 기명함수가 그것이다. 할당된 함수가 이름을 가지고 있는지 여부에 따라 익명, 기명으로 나눌 수 있다. 보통 우리가 일반적으로 함수 표현식이라고 말할 때에는 익명함수를 의미한다. // 함수 선언식 function hey(a,b){ return a + b } //함수 표현식(익명) let hey = function(a,b){ return a + b } //함수 표현식(기명) let hey = function why(a,b){ return a + b } 화살표 함수는 함수 생성을 간략하게 하기 위한 방법이다. 화살표 함수는 익명함수..
종종 자바스크립트 강의를 듣다보면 파라미터(parameter) 혹은 아규먼트(arguent)라는 단어를 접하게 된다. 큰 맥락을 이해하는 데에는 문제가 없지만 이 둘의 차이를 알고 학습하는 것이 더 도움이 될 것이다. 결론적으로 말하면 파라미터는 함수를 '선언'할 때의 변수를, 아규먼트는 함수를 '호출'할 때의 실제 함수에 전달된 값을 의미한다. // 함수 선언 (parameter) function hey(a, b){ // a, b 는 parameter return a + b; } //함수 호출 hey(3,4) // 3, 4 는 arguments 위 예시에서, 함수 hey 선언에 사용된 a, b는 파라미터가 된다. 이후 호출된 함수에 사용된 3,4는 아규먼트가 된다.
작년 말, 선거법이 개정되어 만 19살이던 선거연령이 만 18세로 변경되었다. 이에 따라 올 4월에 치뤄질 총선에서는 고등학교 3학년들도 투표에 참여할 수 있게 되었다. 그렇다면 나이에 따라 투표가능여부를 보여주는 코드는 어떻게 짤 수 있을까? 기본적으로는 if를 사용한 조건문을 통해 코드를 구현해볼 수 있다. let age; // 연령을 나타내는 변수 if(age >= 18) { console.log ('you can vote') // 18세 이상인 경우 투표 가능 메시지를 띄우고 } else { console.log('Sorry, not this time') // 18세 미만인 경우 불가 메시지를 띄운다. } //age = 32 // 'you can vote' //age = 15 // 'Sorry, ..
이 팀에 '사나'라는 분 있나요? 이런 질문을 받으면 우리는 다음과 같은 사고과정을 거쳐 대답하게 된다. 첫째, 팀 멤버 리스트를 확인한다. 둘째, 리스트 안에 '사나'라는 팀원이 있는지 빠르게 확인한다. 확인 결과에 따라 우리는 사나가 우리 팀에 있는지 없는지 여부를 대답해낸다. 코드를 짜다 보면 이와 유사한 상황이 자주 벌어진다. 말하자면 배열(회계팀) 내에 특정 요소(사나)가 담겨있는지 확인해야 하는 것이다. 이를 배열로 나타내면 다음과 같이 나타낼 수 있다. 배열은 먼저 팀에 들어온 순서대로 정렬되어 있다. let accounting = ['나연', '정연', '모모', '사나', '지효', '미나']; // 회계팀 let hr = ['다현', '채영', '쯔위']; //인사팀 1. .includ..
찾아보면 의외로 많은 부트캠프들이 있다. 여기저기서 '당신을 6개월 만에 개발자로 만들어 드립니다'라는 문구로 사람들을 유혹한다. 나의 선택은 코드스테이츠였는데, 가장 큰 이유 중 하나가 커뮤니티였다. 혼자 공부하는 것은 힘들고 막막한 일이다. 일방적으로 강의를 듣는 수업보다는 커뮤니티를 통해 질문하고 피드백을 주고받는 방식으로 배우고 싶었다. 게다가 현업에 가면 결국 프로그래밍을 동료들과 함께 하게 된다. 코드스테이츠는 여러 가지 툴을 이용해서 수강생 커뮤니티를 활성화시키고 있다. 코드스테이츠에서 중요시하는 것 중 하나가 바로 페어 프로그래밍이다. 둘 이상의 수강생이 짝을 이루어 함께 과제를 해결하거나 서로의 코드를 피드백해주는 것이다. 한 명이 프로그래밍 방향을 설정하면 다른 한 명이 실제 코드를 작..
"저 개발자 하려고요." 지금도 가끔 내가 도대체 무슨 소리를 하고 다녔던 거지 생각이 들 때가 있다. 하물며 직장 동료들은 무슨 생각을 했을까. 몇 번을 얘기해도 너 어디 이직할 생각이니 묻는 사람도 있었다. 행정학 전공, 영문학 이중전공의 순도 100% 문과 출신 영업/마케팅 직무 종사자. 개발자의 'ㄱ'과도 접점을 찾기가 어려운 게 사실이다. 도대체 나는 왜 개발자가 되기로 한 걸까. 보통 개발자라는 직업에 대해서 사람들이 갖는 몇 가지 이미지가 있다. 이를테면 첫째, 개발자는 자유로울 것 같다. 집이든 카페든 노트북만 있으면 어디든 사무실이 될 것만 같다. 홍콩 여행을 갔을 때, 배를 기다리고 있는 내 옆에서 유유히 노트북을 펴고 코드를 짜는 개발자를 발견하고 기함했던 기억이 난다. 둘째, 전문성..