TIL

코드 스테이츠 부트캠프 Pre코스를 시작했다. 매일매일 TIL을 써보도록 노력해보겠다.자바스크립트의 변수, 조건문, 함수에 대해 배웠다. 배웠다기 보다도 그냥 슥 훝었다고 보는게 맞을 것 같다. 자바와 다른 점(선언이나 타입) 때문에 조금 헷갈렸다.우분투가 자꾸 말썽이

마크다운이란?마크다운은 일반 텍스트 문서의 양식을 편집하는 문법이다. README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰인다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능하다. <위키백과>한마

변수는 상황에 따라 변할 수 있는 값 (저장 공간)let을 이용해 변수 x를 선언 - let x ;=을 이용해 변수 x에 값을 할당 - x = 12 ;변수의 선언과 할당을 한번에 하면 - let x = 12 ;변수에는 다양한 타입이 있음숫자(Number) - 1, 9.

배열은 순서가 있는 값인덱스(index) = 값의 순서, 순서는 1이 아닌 0부터 시작요소(element) = 각 인덱스에 저장되어 있는 값반복문은 조건식이 true인 동안 구문을 반복한다.For 구문을 While 구문으로, While 구문을 For 구문으로 표현 가능

키-값 쌍(key-value pair)으로 이루어져있다. 콜론(:) 왼쪽이 키(Key), 오른쪽이 값(Value)str\[index] : index에 해당하는 문자를 반환\+ 연산자 : string 타입 + 다른 타입 = string 형식으로 변환length pro

자바스크립트에서 for... in 문은 객체의 프로퍼티를 순회하는데 사용된다.지정된 object의 property 중 이름 하나가 순서대로 지정한 변수에 문자열 타입으로 할당된다.예상 결과 값예상 결과 값for..in 구문에 대해서 자세히 알아봤다. 자세히 배운게 아니

내일을 대비해서 미리 레슨 예습. 함수형 프로그래밍 생각보다 어려웠다. forEach와 map, filter, reduce 메소드가 아직은 확실히 구분이 안되는 느낌. 솔직히 아직 이해가 안 된 상태라 TIL에 정리하는 것도 포기... 내일 한번 더 복습하고, 코플릿

for 반복문을 forEach()메소드로 대체 가능지정된 배열에서 원하는 부분을 배열로 추출 (지정된 배열의 길이와 같음 )지정된 배열에서 조건에 맞는 부분만 배열로 추출원하는 부분을 원하는 형태로 추출함수형 프로그래밍 이해하기 너무 어려웠다. 그래도 나름대로 정리해보

오늘 Math.sqrt()메소드를 사용하지않고 제곱근의 근사값을 구하는 알고리즘을 풀고 있었다.또 근사값은 소수점 둘째자리까지만 구하라는 조건이 있어서 다음과 같이 코드를 짰다.while 반복문이 작동되는 동안, value값이 0.01씩 증가하면 결과 값은 당연히 X.

for...of 명령문은 반복가능한 객체(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols>출처: MDN위 설명대로 for...of 문은 반복가능한 객체(Iter

명령 줄 인터페이스 또는 명령어 인터페이스는 가상 터미널 또는 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다.출처 : 위키백

컴퓨터 프로그래밍에서 변수 영역은 변수가 유효성을 갖는 영역을 가리킨다. 프로그램은 영역을 벗어난 변수를 가리킬 수 없다.출처 : 위키백과Scope란 '변수에 접근할 수 있는 범위'Local Scope에서 선언된 변수는 바깥쪽 Scope에서 사용할 수 없다.Global

미용실가서 머리도 깔끔하게 자르고 마트가서 쇼핑도 하고 편안한 휴식 시간을 보냈다. 호계에서 먹은 밀면 진짜 맛있었다. 저녁엔 오리고기에 맥주까지 흐흐미용실 예약을 해 놓고 갔는데 사람이 너무 많아서 막상 40분 넘게 기다려야했다. 남는 시간에 내 블로그에서 중국 여행

실용주의 프로그래머라는 책을 읽고 있다. 누가 추천해줘서 읽고는 있는데 아직 딱히 느낌이 오거나 하지는 않는 것 같다. 번역이 좀 딱딱한 것 같기도 하고. 영어를 좀 더 잘 해서 원문으로 읽었으면 더 좋았을 것 같다. 는 노력도 안하고 불평만하네 또 ㅋㅋ음 부트캠프 시

테스트 주도 개발(TDD)에 대해 배웠다. 먼저 개발을 하고 그 후 프로그램에 문제가 있는지 확인하는 것이 보통인데, TDD의 경우 코드를 작성하기 전에 테스트를 쓰는 방법론이다. 나눌 수 있는 작은 단위 별로 테스트를 해가면서 개발을 진행해 나가기 때문에 차후에 디버

자바스크립트에서 변수는 데이터를 두 타입으로 나누어 저장하는데, 하나는 Primitive type(원시 타입) 다른 하나는 Reference type(참조 타입)이다.원시 타입 데이터는 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터 값을

웹 페이지의 틀을 만드는 마크업 언어마크업 언어 : 태그 등을 이용하여 문서나 데이터 구조를 명기하는 언어Tag: 부등호(<, >)로 묶인 HTML의 기본 구성 요소HTML은 tag들의 집합, Tree 구조웹 페이지 구성요소의 스타일을 정의하는 언어HTML의 특

Document Object ModelHTML 문서의 구조와 관계를 객체(Object)로 표현한 모델브라우저 콘솔에 console.dir(document)을 입력하면 HTML문서를 객체의 형태로 볼 수 있음또 확인하고 싶은 Element를 선택한 후 console.di

어제 HTML과 CSS를 이용해서 Twittler 목업을 만들었고 오늘은 DOM을 바탕으로 몇 가지 기능을 구현했다.먼저 HTML파일에 template을 이용해 트윗메시지의 틀을 짜고 , 객체가 담겨져 있는 DATA 배열에서 정보를 가져왔다. 그 뒤 forEach()메

부트 캠프를 시작하고서 3주차가 지나갔다. 다음 주가 지나면 부트캠프의 Pre코스가 끝나게 된다. 시간 정말정말 빠르다... 놀라울 정도로. 그리고 내가 여태껏 TIL을 빼먹지 않고 쓰고 있다는 것에도 아주 놀랐다. 솔직히 중간에 귀찮아서 몇 번 빼먹을 줄 알았는데.

어제 가볍게 패킹하고 동해안을 따라 경주까지 라이딩하고 돌아왔다. 문무대왕릉까지 가려고 하다가 터널을 지나야해서 포기하고 정자 쪽으로 내려와서 텐트를 쳤다. 간만에 캠핑하니까 기분이 좋더라!아침에 일어나자마자 텐트 밖으로 빼꼼 고개내밀고 커피를 드립해서 먹었는데 바다보

항상 3번 방식으로 코딩을 하다가 오늘 Office Hour 시간에 .addEventListener()메소드가 나와서 한 번 써봤다.일단 3번 방식이 오래된 방식이라는 건 알겠는데 나에게는 조금 더 직관적인 것 같다.다만 .addEventListener()의 경우 함수

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 평탄화하여 새로운 배열을 생성한다.setTimeout()메서드는 타이머가 만료된 뒤 함수나 지정된 코드를 실행한다.underbar 과제 생각보다 어려워서 혼났다. 과제 중 처음 보는 메소드 두 개를 정리해봤다

Method는 객체에 담긴 함수(Function)다시 날아오를 추진력을 얻어야 할 시기.

Recursion 과제를 시작했다. JASON.stringify() 메소드를 브라우저 내장함수를 사용하지 않고 해결하는 문제였는데, 엄청난 노가다를 요구했다. 무엇보다 만들려는 메소드 자체가 어떻게 기능하는지도 모르는 상태에서 함수를 만드려고 하니까 더 힘들었던 것 같

recursion과제 2일차, getElementsByClassName()구현하는 함수를 작성했다. 어제 재귀함수를 통해서 문제를 한 번 풀었기때문에 문제 푸는 시간이 많이 줄었다. DOM, Element, Node 개념이 뒤섞여서 혼란스럽긴했지만, 콘솔로그를 이용해서

부쩍 여름이 다가와서 그런가. 나에겐 쭉 여름이었던 작년의 냄새가 난다. 모두가 그런건진 모르겠지만 나에게 기억은 냄새다. 기억할 만 한 순간의 온도, 분위기, 소리가 냄새로 남는다. 그리고 어쩌다 맡게 된 냄새는 다시 그 때의 상황을 기억으로 불러일으킨다. 특히 비

DOM(Document Object Model)JavaScipt를 이용해서 엘리멘트의 속성값을 얻어내거나, 변경하는 방법HTML 문서, JavaScript 객체 둘 다 트리 구조 -> 이를 이용해 HTML 문서의 구조와 관계를 JavaScript의 객체(Object)로

6월의 시작. 시간은 언제나 그렇듯 미친듯이 과속하는 중이고. 어느새 내일이 이제 시험이다. 무사히 통과할 수 있겠지? 불안해서 코플릿 문제 풀면서 배운 것들 한 번씩 돌려봤다.날씨가 더워져서 그런가 의욕이 감퇴되는 느낌이다 ㅠㅠ 일단 다시 운동은 시작했는데 앉기만 하

Pre코스 평가 날. 7문제가 나왔는데, 주로 함수형 프로그래밍, 재귀, DOM에 관한 내용이었다. 난이도가 엄청 높지는 않았던 것 같고, 마지막에 map()메소드와 reduce()메소드를 동시에 써야하는 문제가 있었는데 그게 좀 까다로웠다. 짜증나서 머리 쥐 날 뻔했

간만에 푹 쉬었다. 엄마랑 같이 나가서 맛난 것도 먹고 시원한 것도 먹고 재밌게 데이트하고 돌아옴 :)Pre코스 테스트는 다행히도 무사히 통과했고,오늘 하루 푹 쉬어보니 아무것도 안하고 노는게 마음이 불편쓰.. 해서 시험이 끝난 이번주의 목표는 실용주의 프로그래머 -

깨진 창문이론은 깨진 창문을 방치하면 그 지역의 치안유지가 제대로 이루어지지 않고 흉악범죄가 더 많이 발생한다는 이론이다. 이는 반대로 깨진 창문만 없도록 해도 범죄율이 줄어든다는 것을 의미하기도 한다.이 책의 저자들(?)은 그것이 소프트웨어 개발에도 적용된다고 생각한

GUI 인터페이스가 보편적으로 보급됨에 따라 이전부터 쓰이던 CLI는 그 가치를 잃는가? 저자는 이 질문에 대해 단호히 아니라고 말한다. 'GUI 인터페이스는 훌륭한 것이고, 몇 가지 간단한 조작에는 그게 더 빠르고 편리할 수도 있다.' 면서도 '모든 작업을 GUI로

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 출처 :위키백과정리하자면 N

오늘 배운 것 Arrow Function 1. 기본 구문 2. This 바인딩 Template Literal

Identifiers(식별자)를 찾는 일련의 과정자바스크립트는 함수가 정의될 때의 환경을 기준으로 스코프가 설정.(호출X)위 코드의 경우 inFunc 함수 내에 변수 a가 설정되어 있지 않음에도 outFunc 함수 내의 지역 변수 a의 값을 가져오는 것을 볼 수 있다.

LIFO : Last In, First Out인터넷의 뒤로 가기 버튼을 생각해봤다.브라우저를 켰을 때 홈페이지가 가장 먼저 나왔고, 이후 여러 페이지를 서칭했다고 가정하자.뒤로 가기 버튼을 누르면 가장 첫 번째 화면이었던 홈페이지가 아니라, 바로 직전 페이지로 돌아간다

이머시브 코스 1주차가 끝났다. 확실히 Pre코스때보다 난이도가 올라간게 체감이 간다. 그리고 코스 디테일도 이머시브가 더 정교하게 디자인되어있는 듯한 느낌.오늘은 Linked List와 Hash Table 자료구조에 대해서 공부했는데, Hash Table이 생각보다

노드(Node)의 연결로 이루어진 자료구조각 노드는 최소한 하나의 값과 다음 노드(포인터)를 가지고 있어야 한다.따라서 각 노드는 Head 노드로부터 연결되어있고, 원하는 노드를 찾기 위해서는 Head 노드에서부터 Tail 노드까지 차례대로 탐색해야 한다. 따라서 O(

금요일날 다 못 푼 HashTable 구현을 마저 해 봤다. 생각보다 시간도 오래 걸리고 문제 풀면서 화가 나더라. 기본적인 개념은 알고 푸는 건데도 디테일에서 턱턱 막히는 바람에 짜증이 많이 났다. 특히 마지막에 resize()메소드를 구현하면서 기존에 있던inser

그래프는 정점(vertex 또는 node)과 vertex와 vertex를 연결하는 간선(edge)로 구성되는 자료구조이다.그래프그래프는 서로 다른 정점(Vertex) 간에 여러 개의 간선(Edge)가 존재할 수 있다.그래프는 방향성을 띄고 있는지에 따라 방향 그래프(D

트리는 노드로 구성된 계층적 자료구조.트리에는 루트(최상위 노드)가 존재하고, 루트에서부터 시작해서 자식노드들이 아래로 뻗어나가게 된다.TreeA는 트리 구조의 최상위에 위치한 노드로서, Root라고 부른다. 트리는 오직 하나의 루트 노드를 갖는다.A, B, C는 트리

JavaScript에서는 객체를 상속하기 위해서 프로토타입이라는 방식을 사용한다.JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불린다— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(pro

new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다.참조 : MDNOOP(객체지향프로그래밍)을 배우고 있다. 자바스크립트는 Prototype기반 언어이고, 상속(Inheritance)을 위해 Prototype을 활용하고 있기 때문에 pro

SubClass-Dance-Party라는 스프린트를 진행했다. DOM과 객체지향프로그래밍(OOP)를 동시에 활용해서 하나의 클래스가 다른 클래스를 상속하도록하고, 각각 클래스에서는 어떤 부분은 공유하고 어떤 부분은 서로 조금씩 다른 HTML Element를 만들어내서

자바스크립트에서 배열이나 객체를 복제할 때 고려해야 할 얕은 복제(Shallow Copy)와 깊은 복제(Deep Copy)에 대해 알아본다.우선 자바스크립트의 Data Type에는 Primitive Type과 Reference Type이 있다는 것을 알고 있을 것이다.

어제 유튜브 보고 요가를 따라 해봤는데 온몸이 욱신거린다.... 몇 달 앉아서 생활했더니 밸런스도 많이 무너지고 몸이 많이 굳었나보다. 한 반년만 더 이렇게 지내면 몸이 많이 안좋아지겠다는 생각이 든다. 으.. 얼른 탈출해야지. 종종 요가를 하면서 몸을 풀어줘야겠다.S

알고리즘 N-Queens 스프린트를 시작했다. 말 그대로 N-Queens 알고리즘을 구현하는 과제다. n\*n배열에 퀸이 n개 있을 때 서로가 서로에 한번에 도달할 수 없는 경우의 수를 구하는 알고리즘이다. 알다시피 체스에서 퀸은 가로,세로,대각선으로 움직인다. n개의

음...결국 제 시간안에 N-Queens스프린트 제출을 하지 못했다... 😭 그래도 이전 기수분들도 가장 어려웠던 부분이었다고 하고, 어떤 분은 40시간을 투자해도 못했었다는 이야기로 자기합리화를.... 내일은 이머시브코스 첫 Hiring Assesment이니까 끝나

이머시브 첫 Hiring Assesment가 끝났다. 난이도가 엄청 높았던 것 같지는 않았지만 마지막 Tree 문제에서 재귀를 이용해서 구현해야 하는 map 메소드가 조금 까다로웠던 것 같다. 그나마 저번주 자료구조 스프린트 때 비슷한 메소드를 구현한 적이 있어서 비교

게을러지지 말자!!!!!!!!!!!!!!!!!!!!

하나의 버텍스(Vertex)으로부터 시작하여 모든 정점들을 순회하는 것.그래프(Graph) 탐색의 종류에는 DFS(Depth First Search)와 BFS(Breadth First Search)가 있다.트리(Tree) 자료구조는 방향성 있는 그래프이므로, DFS와

간만에 동네 친구를 만나 수다를 떨었다. 사실 동네 친구가 없어서 술 마실 일이 한동안 없었는데 갑자기 많이 생기기 시작하네. 친구가 곁에 있으니 정서적으로는 좀 더 안정적이어서 좋긴 한데, 조절은 잘 해야 할 것 같다. 그나저나 다들 뭔데 울산으로 오고 그래 ㅋㅋㅋㅋ

N-Queens 문제를 다시 풀어보았다. 방법도 알겠고, 맞게 구현도 한 것 같고, 콘솔에도 잘 찍히는데. 테스트만 가면 이상하다..... 아주 깊은 수렁에 빠진 느낌이다.... 짜증난다.... 으... 뭐가 문제일까.넷플릭스에서 이승기랑 류이호가 나오는 twogeth

자바스크립트(JavaScript)는 싱글 스레드(Single Thread)이다. 즉 컴퓨터가 여러 개의 CPU를 가지고 있어도 Main Thread라 불리는 단일 Thread에서만 작업이 실행된다.별도의 다른 처리를 하지 않는다면, 작성한 모든 코드는 Main Thre

자바스크립트(JavaScript)는 싱글 스레드(Single Thread)이다. 즉 컴퓨터가 여러 개의 CPU를 가지고 있어도 Main Thread라 불리는 단일 Thread에서만 작업이 실행된다.별도의 다른 처리를 하지 않는다면, 작성한 모든 코드는 Main Thre

브라우저(Browser)는 자바스크립트의 런타임(Runtime)이다.기본적으로 컴퓨터는 이진수만 해석 할 수 있다. 그렇다면 자바스크립트 언어로 작성한 코드들을 컴퓨터는 어떻게 이해하는가?브라우저(Browser)가 HTML, CSS, JavaScript 작성된 코드를

CORS는 도메인 또는 포트에서 다른 서버의 리소스을 요청할 경우 이를 허용하는 매커니즘을 말한다.따라서 같은 서버의 리소스를 요청할 경우는 CORS 이슈가 발생하지 않는다.다른 서버의 리소스를 요청할 때 비로서 CORS 이슈가 발생하며 이 요청을 받아들일 지 말지에

아주 간단한 서버를 만들어보는 스프린트를 진행했다. HTTP의 POST요청한 데이터를 가공해 다시 되돌려 주는 서버인데, Node에서 HTTP 모듈을 직접 다뤄본게 처음이라 조금 당황스럽긴 했다. 공식 문서는 읽으면 읽을수록 모르겠고 ;;;; 그래도 어쩌다 이 문서를

아이폰으로 바꿨다. 생태계를 옮기니까 적응하기가 어렵다. 그래도 어차피 맥북으로 바꿀걸 생각하면 지금 바꿔놓는 것도 나쁘지 않을 것 같다. 그래도 확실히 아이클라우드로 모든 기기가 연동되니까 그것은 아주 편하긴하다. 정리하다보니 사진이랑 동영상이 60GB가 넘는데 이걸

우선 Node.js 공식문서(https://nodejs.org/dist/latest-v8.x/docs/api/buffer.html1\. JavaScript 언어에는 이진데이터 스트림을 조작하거나 읽을 수 있는 방법이 없었다. 이것을 가능하게 하기 위해서 도입한

아이폰 사진 정리때문에 너무나 화가 난다. 나는 예전부터 SD카드에 사진을 저장해서 가지고 있었다. 하지만 아이폰은 SD카드를 지원을 안해서, 우선 컴퓨터에 사진을 옮겨놓고 아이튠즈로 동기화를 시도했다. 그런데 동기화시킨 사진들을 휴대폰에서 볼 수는 있지만 삭제 및

지금까지 스프린트를 진행하면서 사용한 Git 명령어는 대충 이정도?레포지토리를 나의 원격 레포지토리로 Fork 나의 로컬 레포지토리로 Clone 작업을 마친 뒤 다시 원격 레포지토리로 add ->commit -> Push 함께 스프린트를 진행하는 페어의 원격 레포지토리

React를 배웠다. 처음 배우는 개념이라 그런지 아직 확 와닿거나 하지는 않는데, 순수 JavaScript로만 DOM을 조작하다가 React를 살짝 써보니 확실히 더 간편한 것 같다. DOM을 직접 조작하다보면 일일이 element 만들고 id나 class 지정하고,

React is a JavaScript library for building user interfaces.앞으로 3개의 포스팅에 걸쳐 React의 주요 개념에 대해 공식문서를 기반으로 정리해보고자 한다.JSX는 문자열도 HTML도 아니다. JavaScript를 확장한

React is a JavaScript library for building user interfaces.앞으로 3개의 포스팅에 걸쳐 React의 주요 개념에 대해 공식문서를 기반으로 정리해보고자 한다.State는 Class Component에서만 사용할 수 있으며,

간만에 머리를 했다. 마음에 든다. 미용실 갔다가 돌아와서 잠시 낮잠을 잤는데. 자고 일어나니 정신이 혼미했다. 짧게 잤어야 했는데.저녁으론 가지볶음을 해서 먹었다. 지난번처럼 튀기지 않고 바로 볶았는데 생각보다 괜찮았다.이번주는 배우고 소화해야하는 분량이 항상 목 끝

논리 연산자는 보통 Boolean(논리적) 값과 함께 쓰이며, 불리언 값을 반환합니다. 그런데, &&과 || 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.위 설명은 MDN

React is a JavaScript library for building user interfaces.앞으로 3개의 포스팅에 걸쳐 React의 주요 개념에 대해 공식문서를 기반으로 정리해보고자 한다.React Component들의 흐름은 단방향적이다. Compone

아래 문서는 Redux 공식문서를 바탕으로 공부한 내용을 정리한 것이다.Action : State에 어떤 변화가 일어났는지 알려주는 자바스크립트 객체Reducer : Prev State와 Action을 인자로 받아 앱의 Next State를 반환하는 자바스크립트 함수모

아래 문서는 Redux 공식문서를 바탕으로 공부한 내용을 정리한 것이다.Store는 Action과 Reducer를 가져와 작업하는 객체이다. Redux 애플리케이션에는 단 하나의 스토어만 존재한다.스토어는 다음과 같은 일들을 할 수 있다.애플리케이션의 State를 저장

날씨가 정말 좋았다. 솔로데이라 간만에 늦잠도 잤고, 햇빛 맞으며 라이딩도 했다. 올해 여름은 너무 덥지도 않고, 딱 적당하게 덥다. 간만에 바다 쪽으로 나갔는데 아 오늘 날씨 너무 좋았어. 20살 이후로 고향에서 이렇게 오래 동안 머물었던 적은 없었는데, 막상 있어보

속초로 떠난다 \~~ 올해 여름 휴가랄까. 숙소로 게스트하우스를 잡았는데, 내일 오전에는 숙소 로비에서 공부를 좀 해볼까한다. 요즘 디지털 노마드의 삶에 대해서 조금씩 생각해보고 있는데, 놀러가서 공부하는 느낌은 어떨까 궁금해졌다. 어땠는지는 내일 해 보고 업데이트해보

Express는 Node.js를 위한 Web framework순정 Node.js만을 이용해서 개발할 때보다 훨씬 간단하게 서버를 만들 수 있다.라우팅은 특정 URI나 HTTP 메소드에 따른 엔드포인트에서의 요청에 대해 어떻게 응답을 할지 결정하는 것을 말한다.오랜만에

if 문을 중첩해서 사용하게 되면 가독성이 떨어지게 된다. 이럴경우 Switch 문을 사용한 비교법으로 간단하게 작성해 볼 수 있다.다만 <, >, >=, <=, !==와 같은 비교연산자는 Switch 문에서 사용할 수 없다.출처 : MDNswitch의 파라

react router를 이용해 클라이언트 단 라우팅, express를 이용해 서버 단 라우팅을 배우고 있다. 스프린트 과제가 이 둘을 종합해서 포트폴리오를 하나 만들어보는 것인데, 사실상 라우팅 하는 것 보다 CSS position 개념이 제일 어려운 것 같다. 봐도

솔로 스프린트가 끝이 났다. 페어랑 같이 안하니 진도는 술술 나가는데 긴장감은 좀 없는 것 같기도 하고. 그래도 시간은 잘 갔다. 뭐하다보면 점심이고, 저녁이고 그러네.오늘은 컨디션이 별로다. 그런 핑계로 조금 게으름을 피웠다. 내일부턴 다시 운동도 하고, 공부도 더

Structured Query Language의 약자관계형 데이터베이스 관리 시스템(RDBMS)의 데이터를 관리하기 위해 설계된 프로그래밍 언어데이터베이스에 qeury를 보내서 원하는 데이터만을 취할 수 있다.직역하면 "질의문"검색창에 적는 검색어도 Query의 일종저

불러오는 데이터베이스 객체 Customers Table은 다음과 같다고 가정하자데이터베이스에서 원하는 데이터를 선택하고자 할 때 사용한다.기본 : SELECT column1, column2, ... FROM table_name;예시 1 : SELECT Customer

데이터베이스 스프린트가 너무 어려웠다. 퀸즈 다음으로 역대급 난이도인 것 같다. 일단 기본적으로 데이터베이스를 입문하는 셈이니 sql 문법부터 시작해서 배워야 될 지식의 양이 많았는데, 얄밉게도 스프린트에서 요구하는 수준은 그것보다 더 나가는 느낌이었다. body-pa

body-parser는 node.js의 parsing middleware다.request로 들어오는 사용자 요청을 기존의 복잡한 방식없이 req.body으로 접근할 수 있게 한다.기본적으로 node.js에서는 사용자로부터 전달된 데이터는 Buffer의 형식으로 처리하

아빠 보험이 만기가 되서 만기환급금 계산을 도와드리다 보험사에서 "사업비"라는 명목으로 월 납입금의 7%나 되는 빼고 있었다는 것을 알게 되었다. 보장성 보험이 아니고 저축보험이었는데 사업비가 7%라니.. 다행히 가입한 상품이 5%대 복리상품이었기 때문에 원금 보다는

서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각. 쿠키는 클라이언트 측에 저장된다.특정 호스트에서 생성된 쿠키는 이후 모든 요청마다 서버로 다시 전송쿠키를 이용해서 서로 다른 두 요청이 동일한 브라우저에서 들어왔는지 판단할 수 있다.모든 요청시마다 부여받은 쿠

해시 생성 및 암호화와 관련된 Node.js 내장 모듈가장 기본적으로 사용할 수 있는 클래스, 암호화를 진행할 때 Salt를 사용하지 않는다면 사용할 수 있다.암호화를 진행할 때 Salt를 사용한다면 사용할 수 있다.\[https://nodejs.org/api

로그인 기능을 구현하기 위해 직접 서버를 만들어 인증하는 방식 대신, 인증을 중개해주는 메커니즘인 Oauth 방식을 사용해 Social Loigin 기능을 구현할 수 있다.사용자 정보를 가지고 있는 웹 서비스(google, facebook, github 등)에서 사용자

간만에 해가 떴길래 간만에 라이딩. 나갈 땐 귀찮은데 막상 나가면 너무 좋다.올 여름 중 가장 더운 날인 것 같다. 올해 유난히 시원해서 더운 줄 모르고 살았는데, 오늘 햇빛 쨍쨍할 때 나가서 자전거 타보니 엄청 덥더라. 역시 여름은 여름.주말이고 집도 덥고 해서 카페

날이 더워서 부모님 집에서 더이상 공부를 지속할 수가 없게 됐다. 더 이상 선풍기의 힘으로 버틸 수가.....해서 공부 장소를 에어컨이 있는 형 집으로 옮겼다. 공간에 대한 제한이 없다보니 자유롭게 공부할 공간을 선택을 할 수 있다는 점은 코드스테이츠의 큰 장점이다.

Amazon Web Services(AWS)클라우드 : 인터넷을 통해 제공되는 서버와 해당 서버에서 실행되는 소프트웨어 및 데이터베이스를 나타낸다.클라우드 컴퓨팅 : 클라우드 컴퓨팅(Cloud Computing)은 클라우드를 통해 가상화된 컴퓨터의 시스템 리소스를 즉시

Amazon Web Services(AWS)클라우드 : 인터넷을 통해 제공되는 서버와 해당 서버에서 실행되는 소프트웨어 및 데이터베이스를 나타낸다.클라우드 컴퓨팅 : 클라우드 컴퓨팅(Cloud Computing)은 클라우드를 통해 가상화된 컴퓨터의 시스템 리소스를 즉시

오늘 마지막 Hiring Assesment가 진행됐다. test case는 다 통과했는데 왜 이렇게 찝찝할까 ㅠㅠ최근 몇 주를 서버, 데이터베이스를 공부하다 다시 클라이언트 부분을 하려니까 힘들었다. 리엑트가 새롭게 보였다..... ㅋㅋ 그리고 로그인하고나서 서버에서

삽입 정렬은 자료 배열의 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입함으로써 정렬을 완성하는 알고리즘이다. <위키백과>우선 난 위키백과의 삽입정렬에 대한 정의를 보고 아무것도 이해하지 못했다...그래서 삽입정렬을 그

합병 정렬 또는 병합 정렬(merge sort)은 O(n log n) 비교 기반 정렬 알고리즘이다. 일반적인 방법으로 구현했을 때 이 정렬은 안정 정렬에 속하며, 분할 정복 알고리즘의 하나이다. 존 폰 노이만이 1945년에 개발했다. <위키백과 정의>큰 그림(fu

첫 프로젝트가 시작했다. 다행히 하고 싶었던 프로젝트에 선정이 되어서 재밌게 할 수 있을 것 같다. 팀장님이 디자인적인 요소는 거의 신경 쓸 필요가 없을 수준으로 이미 준비를 해오셔서 프로그래밍과 UX에 집중해서 프로젝트를 진행할 수 있을 것 같다. 앞으로 2주동안 프

프로젝트 둘째 날. 프로젝트의 전체적인 큰 그림을 완성했다. 와이어프레임부터 기능 플로우, 서버의 경우엔 스키마와 API문서 작성까지. github 레포지토리의 위키문서도 작성 중이다. 프로젝트 시작 전에 문서작업이 생각보다 엄청 많다. 바로 코드부터 써놓고 시작하는

함께 프론트앤드를 맡은 페어 분과 함께 개발환경세팅을 했다. create-react-app으로 시작하기로 했는데, 생각보다 시간이 꽤 걸렸다. 단순히 리엑트 앱만 설치하면 될 줄 알았는데, Git branch문제도 있었고 create-react-app 안에 기본적으로

채팅화면을 구현했다. 리엑트에서는 DOM에 직접적으로 appendChild를 해줄 수 없었고, state를 변경하는 방식으로 구현해야했다. 그런데 질문과 답변 즉 채팅이 버튼을 누를때 마다 하나씩 생성이 되어야해서 고민을 정말 많이했다. 바닐라JS였으면 그냥 appen

리엑트에서 url에 포함된 쿼리를 가져오기위해서는 그림과 같이 props.location.search로 접근하면 된다.브라우저 혹은 Node.js(글로벌 변수window에 접근 허용시)에서 url에 포함된 쿼리스트링을 가져오기 위해서는 window.location.se

채팅화면을 리팩토링했다. 지난번에 함수 하나로 복잡하게 구현했던 것을 질문을 만드는 함수와 답변을 만드는 함수로 분리해서 만들어주었고, 답변 객체를 처리할 때 기존에는 질문-답변 배열 안에 있던 질문 객체 안에 답변 객체를 추가하는 방식을 사용했는데, 리팩토링하면서 아

react-create-app을 통한 SPA(Single Page Application)구현 및 React-Router-Dom을 통한 path에 따른 분기로그인, 회원가입 ,소셜로그인(Client)채팅방화면 (대화 주고 받기)CSS를 통한 디자인 적용 및 애니메이션 구

파이널 프로젝트 아이디어 피칭이 시작되었다. 기업협업 제안도 2곳에서 들어왔다. 한 달 동안 진행해야 할 마지막 프로젝트이니만큼 신중하게 프로젝트들을 살펴보았는데, 아무래도 취업연계형 기업협업 프로젝트가 끌린다. 취업이 안되더라도 현장 분위기도 파악할 수 있고 여러모로

기업 협업 프로젝트에 참여하게 되었다. 태그바이컴퍼니라는 곳에서 인스타그램 링크모음 페이지 같은 것을 만들게 될 것 같다. 아직 미팅 전이라 구체적인 요구 사항을 알지는 못하지만, 그 동안 써왔던 react를 잠시 내려두고 vue를 배워야 할 것 같다. 파이널 프로젝트

Vue는 UI를 만들기 위한 프론트엔드 프레임워크이다.vue.js공식문서를 통해서 배운 것을 정리해보려고 한다.모든 예제는 vue.js 공식문서에서 가져와 필요에 따라 약간의 수정을 한 것임을 밝힌다.모든 Vue앱은 Vue 생성자 함수로 Vue 인스턴스를 만드는 것으로

오늘 배운 것 Vue Component Basic 컴포넌트 작성 Props를 이용해 자식 컴포넌트로 데이터 전달 emit을 이용해 부모 컴포넌트로 데이터 전달 event bus를 이용해 형제 컴포넌트 사이의 데이터 전달

드디어 파이널 프로젝트 개발을 시작했다. 그동안 react만 배워오다 vue와 python을 사용해 개발을 진행해야 하는 부분 때문에 학습 시간도 필요했지만, 기업과 코드스테이츠 간에 의사소통 문제도 있어서 개발 시작 시점이 계속해서 미뤄지고 있었다.어쨌든 디자인은 내

https://developers.google.com/identity/sign-in/web/reference에서 구글 gapi 메소드들을 정독하고 시작한다.자바스크립트 SDK를 이용해서 구글 로그인을 진행할 시에 refresh 토큰을 받을 수 없다. 구글에서

Vue를 이용한 SPA에 Vue-analytics 라이브러리를 이용해 구글 애널리틱스를 적용해본다.

코드스테이츠 마지막 프로젝트(08. 24. ~ 09. 22.) 회고

잡서칭 세션 중 깔끔한 이력서 만드는 법에 대해 배웠다. 원티드, 노션, pages 등등 다양한 툴을 이용해 이력서를 만들 수가 있구나. 내가 기억하는 이력서와는 결이 조금 달랐던 것 같다. 이렇게 조금씩 발전해가는 이 느낌이 좋다.요즘은 개발 지식말고도 개발자가 되기

이벤트 버블링은 한 요소에서 이벤트가 발생하면 , 할당된 핸들러가 실행되고 이어서 부모 요소의 핸들러도 작동되는 것을 말한다. 버블링은 가장 최상단의 요소를 만날 때까지 반복된다.버블링을 멈추기 위해서는 이벤트 객체의 메서드인 event.stopPropagation()

두 함수는 자바스크립트에서 자주 사용되는 배열 메소드이며, 평소 Map 함수를 즐겨 사용하고 있다. Map 함수와 Reduce 함수의 차이에 대해 간단히 알아본다.map() 메소드는 배열의 모든 요소들을 순회하며 주어진 콜백 함수를 실행시킨다. 콜백함수에서 반환된 값들