Jerry

이번 스프린트는 먼저 쉽게 이야기하자면, 서버와 데이터베이스를 연결시켜줘야 하는 과제다. 더 자세하고 명확하게 이야기하자면, 이전에 했던 chatterbox client와 chatterbox server에서는 Javascript 변수와 in-memory 저장 방식을 이용하는 방법으로 데이터를 받아와 스프린트를 진행했었다. 이에 반해, 이번 스프린트는 서버가 영속성(persistence)을 가져 서버를 껐다 켰다 해도 데이터가 사라지지 않게 하도록 한다. 여기서 In-memory와 Persistence에 대해 잠시 집고 넘어가겠다. 바로 밑 문장을 읽어보자. In-memory databases are more volatile than traditional databases because data is lo..

Achievement Goals Web Architectures 클라이언트, 서버, API 가 무엇인지 정의 내릴 수 있다. 웹 개발과 관련한 아키텍처를 이해할 수 있다. Browser의 역할을 이해할 수 있다. Browser와 서버와의 연결이 어떤 규약(protocol)을 통해 이루어지는지 이해할 수 있다. 서버에서 정의한 API 문서를 통해, 서버가 제공하는 리소스를 이용할 수 있다. API를 활용해서 UI를 만들 수 있다. AJAX가 무엇이고, 왜 필요한지를 이해할 수 있다. AJAX 통신을 가능하게 하는 API (fetch API 등)을 이용할 수 있다. Browser Security Model CORS가 왜 필요한지 이해할 수 있다. XSS 및 CSRF가 어떤 원리를 통한 공격 방법인지 이해할 ..

Database and SQL Flow Example ex) (클라이언트) 남자 직원들 목록 보여줘 -> (서버) SELECT * FROM employee WHERE gender='M'; -> (데이터베이스) 필터링 후 결과값을 서버로 전달 -> 서버가 클라이언트에게 결과물을 전달 ( 클라이언트 -> 서버 -> 데이터베이스 -> 서버 -> 클라이언트 ) SQL Tutorial and SQL Database SQL Tutorial에서는 Syntax Select : SELECT * FROM table_name; // ' * '는 와일드카드라고 부르며, 전체를 가리키며, 저 자리에 column이 들어갈 수 있음 Where : SELECT * FROM table_name WHERE condition; // 컨디..

이틀간 스프린트 결과물이다. 아직 많이 부족하지만, 주말에 보강해보고 부족하면 더 시간 날 때마다 해볼 생각이다. 스프린트 내용은 밑에 적어 놓았다. 스프린트 설명 이번 스프린트는 클라이언트 사이드 프로젝트와 서버 사이드 프로젝트를 따로 만드는 스프린트다. 테마는 Personal Portfolio이며, 즉 자신의 포트폴리오를 만들기다.! Bare minimum Requirement로는 클라이언트 사이드 React를 사용해야 합니다. SPA(Single Page App)로 만들어야 합니다. 클라이언트 상에서 페이지 라우팅을 적용하십시오. React Router를 사용해봅시다 Stateful 한 컴포넌트를 두 개 이상 만드세요. (다음 예시를 참조하세요. 라이브러리를 사용하지 마세요.) 메뉴 선택 (sele..

Achievement Goals React 기본 React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다. 요즘 웹페이지는 유저와 많은 interaction이 일어나(ex. button) 수많은 상태 관리가 필요하다. 돔 관리와 상태 관리 말고 기능 구현에 집중하고 싶은 욕구가 있었고, React, Angular, Vue가 탄생했다. 리액트는 component (하나의 의미를 가진 독립적인 단위 모듈) 개념에 집중하고 있는 라이브러리다. 직관적과 재사용성이 증가한다. JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다. 리액트는 기본적으로 ES6를 사용한다. Destructuring, Spread operator, rest parameters, default paramete..

어제 오전 9시부터 오늘 오전 11시까지 HA 시간이었다. "이번 HA의 주제는 Full Stack으로 영화 정보를 보여주는 애플리케이션을 만드는 것입니다. 클라이언트와 서버 각각 구현해야 할 요구사항이 아래 제공되어 있습니다." 위 문장에서 보는 거와 같이 클라이언트 부분과 서버 부분을 작업을 통해 구현해야 하는 미션이다. React와 Express를 이용해야 했다. #2 처럼 구현해야 하는데, 난 #1까지 구현했다. #1처럼 보이게 하는 거까지 예상 대비 일찍 짰지만, 그다음부터 코드가 꼬였는지 삽질 & 삽질의 반복이였다. #1 #2 마감 시간 후에 공개된 reference를 참고 삼아 셀프 리뷰를 해보면서, 내가 구현이 안 돼서 답답했던 부분도 알 수 있어서 사이다 && 무엇보다 부족했던 부분까지 ..

웹, 데스크톱, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리. 이전에 나는 페이지 단위의 DOM 개발을 다뤘다면, 이제는 컴포넌트 단위의 개발을 다룬다. React React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. React 리액트는 유저 인터페이스(Ui)를 빌딩하기에 선언적, 효율적이며 유연한 자바스크립트 라이브러리다. 리액트는 컴포넌트라고 불리는 작고 독립된 코드 조각들을 가지고 복잡한 UI들을 ..

1. 객체 지향 프로그래밍이란? 라이브러리 특정 언어를 지칭하는 것이 아닌 프로그래밍의 철학 객체 지향 프로그래밍에서 모든 것은 self-sustainable 객체로써 그룹화됨 -> 재사용성 우리가 클래스라고 부르는 것(data model of blueprint)을 코드로 구현한 것 1-1. 그렇다면 클래스란 무엇인가? 클래스는 객체 생성을 위한 객체의 Blueprint이자 Idea 임 객체는 클래스의 인스턴스 클래스는 객체를 생성하는 constructor를 가지고 있다. 1-2. 객체지향 프로그래밍의 기본 개념 4가지 1. 캡슐화 : 캡슐화는 single 단위로 데이터를 wrapping up(뜻: 감싸다) 하는 것으로 정의된다. 이 메커니즘은 코드들을 묶거나 데이터를 조작할 수 있다. 또한, 바깥에서의..