본문 바로가기

전체 글

(157)
2주차 프로젝트 정리. 1. 사용한 스택 React , nodejs, mysql, express, sequelize ,prettier 2. 내가 사용한 스택과 코드에서 중요한 것 사용한 스택 express, mysql, prettier. nodejs, React 코드에서 중요한 것은 잘 나눠서 구분해서 router 영역과 controller 영역 model 영역을 잘 나누는 것이 중요하다. 그렇게해서 최대한 꼬이지 않게 api를 잘 정리해서 쓰는 것이 중요하고, db 스키마를 잘 짜는 것이 무엇보다 매우 중요하다고 생각한다. 3. 프로젝트 진행으로 얻게 된것과 개인적 피드백 이번 프로젝트 진행으로 가장 많이 얻는 것은 sequelize 사용방법이다. 에러가 많이 나왔엇는데 잘 해결이 되지 않아서 머리아프게 골썩힌 일이 참으로 ..
2. 2주차 프로젝트 2일차. 1. 오늘 프로젝트 진행상황 어제 각자가 해온 api를 직접 만들기 위한 각 질문지 작성 발표 발표 내용을 토대로 데이터 스키마 작성. UI 설계 카드 수정 및 분배 각 유형별 특징 및 질문 조사 및 데이터 수집. 2. 내일 해야할 사항 git work flow 재 실습 필요. aws 에서 s3 , rds, ec2 환경 설정 필요. 기본 리액트 버전 배포 연습
1. 2주차 프로젝트 1일차.. 팀명 dreammaker 프로젝트명 dreammaker 프로젝트 시작시에 처음으로 만나서 이야기를 나누는 stand up meeting 오전 10시 30분 새롭게 알게 된것 프로젝트용 git flow에 대해서 팀원들끼리 학습을 했다. 변화된점 기존에 사용할려고 했던 api에서 데이터 핸들링을 할려고 했으나 너무나도 많은 데이터와 복잡한 데이터들이 있었다. 그리고 너무 많은 질문을 고객들에게 했을 경우 지루하고 짜증을 요청할 가능성이 있으므로 좀 더 간단하게 해결하기 위해서 새롭게 api를 만들어서 구현하도록 방향을 바꾸었다. 팀룰 - 모각코 형식으로 행아웃에서 또는 줌 에서 카메라를 켜놓고 각자 코딩 진행 한다. - 성용 - 코드 작성시 주석에 신경 쓸 것 (상대방이 이해할 수 있도록, 상대방의 생각과 ..
S3 , EC2, RDS 에 대해서.. S 3(Simple Store Service) Simple Store Service에 대한 약자로 파일 서버의 역할을 하는 서비스 이다. 일반적인 파일서버는 트래픽이 증가함에 따라서 장비를 증설하는 작업을 해야한다. S3는 이와 같은 작업을 아마존같은 회사같은 곳에서 대행해준다. 주요특징에 대해서 이야기하면 많은 사용자가 접속을 해도 이를 감당하기 위해서 따로 시스템 적인 작업을 하지 않아도 된다. 저장할 수 있는 파일 수의 제한이 없다. 최소 1바이트에서 최대 5TB의 데이터를 저장하고 서비스 할 수 있다. 파일에 인증을 붙여서 무단으로 액세스 하지 못하도록 할 수 있다. HTTP와 BitTorrent 프로토콜을 지원한다. REST , SOAP 인터폐이쓰를 제공한다. 데이터를 여러 시설에서 중복으로 저..
DATABASE 명령문정리 SELECT - extracts data from a databse 데이터베이스로 부터 데이터를 추출 UPDATE - updates data in a database 데이터베이스안에 있는 데이터 변경 DELETE - deletes data from a database 데이터베이스로 부터 데이터를 삭제한다. INSERT INTO - inserts new data into a database 데이터베이스 안에 새로운 데이터를 삽입한다. CREATE DATABASE - creates a new database 새로운 데이터베이스를 만든다. ALTER DATABASE - modifies a database 데이터베이스를 변경한다. CREATE TABLE - creates a new table 새로운 테이블을 생..
Server Side Techniques 에 대해서 여러번의 비동기 함수로 인한 충돌을 방지하기 위해서 만들어진것이 바로 promise 라는 것입니다. Promise는 여러 번의 asynchronous call로 인해 callback이 중첩되는 상황에서 여러분의 수고를 덜어줄 수 있는 유용한 도구입니다. Promise는 Asynchronous libraries에서 기본적으로 사용하기 시작했고 ES6에서는 language standard로 포함되어 있습니다. Promise를 사용하기에 앞서서 연결되는 개념들을 여러가지 알아보도록 하겠습니다. 첫번째로 콜백 함수를 이용한 파일 시스템 사용과 request 사용을 적어보겠습니다. 파일시스템 1 2 3 4 5 6 7 8 9 10 11 const getDataFromFile = function(filePath, c..
youtube api를 이용한 유튜브 비슷한 화면 만들기. 대략적으로 그림을 그려봤다 ... 마우스로 그려서 그런지 좀 잘 못그린거같다. 완성된 프로젝트는 이렇게 나와있다. VideoListEntry 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import React from 'react'; const VideoListEntry = (props) => ( {props.data.snippet.title} {props.data.snippet.description} watch later ); export default VideoListEntry; Colored by Color Scripter cs src는 이미지를 가져온 것을 넣는것이고 onclick을 이용해 bind로 묶어줌으로서 데이터를 가져와서 함수로 메서드를 만들었다. 1 2 3..
react flow 에 대하여(사용법 및 설치) Flow flow 는 자바스크립트 코드를 위한 정적 타입 체커입니다. Facebook에 의해 개발되었으며 종종 React와 함께 사용합니다. 변수, 함수 및 React 컴포넌트에 특수한 타입 구문을 사용하여 주석을 달고 실수를 조기에 발견 할 수 있습니다. Flow를 사용하기 위해서는 3가지를 확인해야한다. 프로젝트 의존성에 Flow를 추가해야합니다. Flow 구문이 컴파일 코드에서 제거되었는 지 확인하세요. 타입 주석을 추가하고 Flow를 실행해 체크해야합니다. 프로젝트에 flow 추가하기 만약 yarn 을 쓴다면, 터미널 창에서 yarn add --dev flow-bin yarn run flow init 만약 npm 을 쓴다면, 터미널 창에서. npm install --save-dev flow-bin..