이머시브_16

오늘은 코드스테이츠 이머시브 16기의 첫날이었다. 위워크 건물로 들어가 건물을 구경하고 OT를 시작했다. 파트 #1 OT에서는 이머시브 코스에 대한 전반적인 설명과 Urclass를 사용한다는 것, 그리고 상당히 할 과제도 많고 힘들다는 내용이 전반적이었다. 하지만 포기하지 않고 끝까지 한다면 많은 성장을 이룰 수 있다는 것도 들었다. 첫날이어서 그런가 정...

어제 원래 2일차 TIL정리 했어야 하는데 할머니 집에 가니 와이파이가 없어 업데이트를 못했다... 이제 업데이트를 하고 집에 가야겠다. ESlint와 Jest를 터미널을 통해 설치했다. ESlint는 코드를 쓸 때 규칙을 정해놔 깔끔하고 정리되게 코드를 작성하는 것

오늘은 3일차 밖에 안됬는데 생각보다 많이 한 기분이 든다...허허 오늘은 페어분과 sprint로 리커젼 문제를 풀었다. Stringify를 해결하고 parse를 다 하고싶었는데...stringify는 수월하게? 생각보다 그래도 막힘없이 진행했는데 parse는 완수

Data Structure 자료구조 자료를 어떻게 효율적으로 조직, 관리, 저장 데이터 값의 모임, 또는 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수 Stack, queue, linked list Algorithm A step-by-step list of directions to follow to solve a problem Esta...

Data Structure - *Stack and Queue 자료구조 자료를 어떻게 효율적으로 조직, 관리 저장 데이터 값의 모임, 또는 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수 나 명령 스택과 큐는 데이터의 추상적 형태와 그걸 다루는 방법 (Abstract Data Type) 스택이란? (Stack) 데이터를 집어넣는 선형(li...

자바스크립트 자료구조 연결 리스트 (Linked List) 중북된 데이터의 저장을 막지 않으며 나란히 저장함. 선형리스트(Linear List): 배열을 기반으로 구현된 리스트 간단함. 기본으로 내장되있음. 데이터 타입을 연속적으로 저장 장점: 간단하고 참조가 쉽다. 인덱스 값만 알면 참조가 가능하다. 단점: 크기가 초기에 고정되어야 하고...

Complexity Analysis 복잡도 분석? 알고리즘이 문제를 푸는데 있어서 시간과 공간을 얼마나 차지하는지 나타내는 지표 왜 중요한가? Shows how efficient it is. 만약 시간과 공간이 무한정하다면, 모든 경우의 수를 계산하면...알파고도 가능. Time Complexity 가장 큰 숫자와 작은 숫자의 차이를 찾을 때 모...

Prototype과 상속 모든 함수에는 Prototype이라는 기능이 있고 prototype은 instance를 만들 때 필요한 원형 객체, 즉 청사진이다. Constructor 는 특정 객체를 생성할 때 실행하는 코드, 즉 생성자 함수이다. this 는 함수가 실행될 때 적용되는 고유의 context. Instance 를 생성하는 과정을 Instanti...

ES6 키워드 / Syntax Destructuring With Objects Screenshot from 2019-11-21 10-05-32.png With Arrays - Match by index destructuring arrays.png 함수안에 인자로 값을 넣을 때 더 유용하다. 객체는 배열과 거의 똑같고 할당을 할 때 키값으로 찾...

시간은 빠르고 한정적이고 끊임없이 부족하다. 잠도 자야되고 공부도 해야 하고 신림에서 선릉까지 왔다갔다 또 주말에는 대전 왔다 갔다...그래도 2주가 순식간에 흘러갔고 Dance Party Sprint를 진행하며 Prototype Chain에 관해 많은 것을 배워 정리를 해야할 것 같아서 한다. Prototype 자바 스크립트에서 좋은 점은 객체 지향프...

알고리즘 스프린트이고 지금까지? 3주밖에 안됐지만 가장 어렵다고 생각하는 N-Queens 스프린트를 정리한다. Algorithm 알고리즘을 공부하고 연마하는 방법에는 다음과 같은 방법을 사용할 수 있다. 온라인 문제풀이 사이트 유투브 알고리즘 책 구글 What is algorithm: 주어진 문제를 해결하기 위한 일련의 절차들을 정의한 것 Compu...

Web Architecture API (Application Programming Interface) 프로그래밍 되어 있는 애플리케이션과 의사소통 가능한 매개체 UI(User Interface) 사용자와 의사소통 가능한 매개체 API를 활용해서 UI를 만드는 스프린트 클라이언트 -> 서버 -> 데이터베이스 그리고 Vice Versa 클라이언트 ...

Browser Security 브라우저 위협의 가장 큰 이유는 자바스크립트를 구동한다는 점이다. Ajax call 을 해서 api 호출 DOM 제어 인증 정보를 브라우저에 저장 인증 정보를 불러 올 수도 있다. 한 웹페이지가 렌더 되려면 각기 다른 서버에 여러 번 요청을 보내고, 서로 다른 서버에서 제공하는 리소스를 사용해 이미지, 사진...

이번 주 배운 것 Web Architecture & Chatterbox-client Mini-node server Chatterbox-server 4주차를 하면서 서버의 관련된 기본적인 내용을 배워 클라이언트와 서버 측면에서 fetch를 통해 요청을 보내고, 서버를 구축해 그 요청을 처리하는 방법을 배웠다. 생각보다 배우는게 재밌었고 만들면 바로 실행되고...

Intro 이번 스프린트는, 채팅을 할 수 있는 chat application의 클라이언트 부분을 만들어 보는 것이었다. 서버는 AWS에 배포되어 있는 코드스테이츠 서버를 활용하고 fetch library 를 활용하여, GET과 POST method를 사용해 서버에 메시지를 요청해 받고, 또 메세지를 보낼 것이다. fetch를 잘 활용해, GET meth...

Intro 지난번에 만들었던 chatterbox client 어플은 이미 만들어진 AWS 서버에서 챗들을 받아오고 또 거기에 보내 새로운 챗을 보내 만들어 주었다. 이번 스프린트는 localhost와 연결을 해서 Node.js를 사용한, 서버 측면의 어플을 만드는 것이다. Nodemon 을 활용. 브라우저가 서버와 어떻게 연결하는가 API 문서 작성 exp...

React 프론트 엔드에서 유명한 프레임 워크. React, Angular, Vue 가 삼대천왕. 페이스북이 만든 사용자 UI 구축을 위한 라이브러리. 컴포넌트 기반 라이브러리. 여러 부분을 분할해서 코드의 재사용성과 유지보수성 증가. 가상 DOM을 사용해 미리 최적화를 시켜주고 가상 돔은 바뀐 부분과 바뀌지 않은 부분을 자동으로 감지해 업데이트! Dat...

처음 이머시브 스프린트를 시작할 때는 TIL을 매일매일 쓰자...! 라고 다짐했지만 5주가 지난 지금을 보면 매주 1개? 2개 쓰고 있다. 변명을 하면 바쁘다 ㅠㅠ 매일 하루 쓰는 것을 우습게 생각했던 내 자신이 우습다. 그래도 블로깅 끊기지 않게 계속 합시다~ Introduction 클라이언트와 서버 코드를 모두 짜본 나에게 이제 두려울 것은 없다 라고...

지금까지 배운 스프린트 리뷰나 블로깅 정리할 때 제목을 TIL로 했는데 사실 TIL은 Today I learned 의 약자로 난 주마다 지금 정리하기 때문에 그렇게 잘 맞지는 않다. TIL을 This Week I learned로 바꿔야 겠다 ㅋㅋㅋㅋ TWIL? TIL? Either works for me! Introduction 저번 시간에 눈물의 첫 리...

Why Use React Redux? is a standalone library that can be used with any UI layer or framework (React, Angular, Vue, Ember and vanilla JS). originally designed and intended for use with React. Also kept...

Promise (프로미스 함수) 자바스크립트에서 비동기 함수를 처리하고 싶을 때 사용할 수 있는, ES6부터 가능한 비동기 처리 패턴이다. 비동기 처리 시점을 명확히 표현하기도 한다. 콜백 패턴의 단점 비동기식 처리를 위해 콜백 패턴을 사용할 시 처리 순서를 위해 여러 개의 콜백 함수가 네스팅 (중첩)되어 가독성도 나쁘게 하고 복잡도도 높아진다. 에러 ...

SQL Structured Query Language -> 구조화된 Query 언어 Query: 질의문 검색어도 Query의 일종 저장되어 있는 정보를 필터 하기 위한 질문 데이터베이스 용 프로그래밍 언어 데이테베이스에 query를 보내 원하는 데이터만 추출 Why do we need this? In-memory 끄면 데이터가 없어짐...

Introduction 이번 스프린트는 SQL을 사용해 전에 완성한 채터박스의 채팅 데이터를 데이터베이스에 저장하도록 해주는 것이었다. 그 전 채터박스 스프린트에서는 fs를 적용해 파일에다가 데이터를 적용하는 방법을 했는데 클라이언트 코드만을 가져와 데이터 베이스에 저장하고 또 찾을 때는 불러오는 식으로 짜면 된다. 처음 데이터 베이스에 들어갈 항목들을 정...

Only one more sprint to go

Introduction Use SPA (Single Page Application) serve strategy to deploy data on web. 단일 페이지 애플리케이션...단일 페이지로 구성. 서버 사이드 렌더링 보다 배포가 간단. 모든 정적 리소스를 최초에 한번 다운로드. 이후 요청시 갱신에 필요한 데이터만을 전달 받아 갱신. 트래픽 감소. ...

관심사 일단 왠만한 서비스 및 어플은 시중에 나와 있기 때문에 아이디어를 생각하는게 어려웠다. 그래서 나의 관심사, 취미를 생각해 산책이나 운동에 관련된 서비스를 만들어 보고 싶었다. Introduction 현대 사회의 사람들은 고단하고 바쁜 일상 속 휴식을 찾는다. 여러 방법들을 시도 하겠지만...산책 만큼 상쾌하고 몸이 건강해지는 취미도 드물다. 건강...

오늘은 JWT를 이용한 모바일 인증을 구현하기로 해서 관련된 레퍼런스를 찾아보고 상세히 설명해주는 영상을 보면서 구현했다. 그리고 인증하는 부분을 위한 서버를 따로 분리하기로 해 그것도 실행했다. 먼저 모바일 인증을 하는 방법을 여러가지 인데 우리 팀은 우리가 이미 한번 구현해보고 더 익숙한 JWT를 사용해 인증을 구현하기로 했다. JWT의 핵심은 토큰...

이메일 인증 - 토큰

마커 표시해주기, 카류셀 표시해주기, addCat 추가해주기