프로그래밍104 3개월 프로그래밍 부트캠프를 통해 배운 것들. wecode라는 프로그래밍 부트캠프에 등록하여 8월부터 11월까지의 과정을 얼마 전에 수료했다. 잊혀지기 전에 과정에서 배웠던 것들을 적어두고자 한다. 요약. 한 달차 프론트엔드 또는 백엔드 분야를 선택해서 오면 좋지만, 기본적인 공부를 거친 후에 선택하는 방식이다. 나는 프론트엔드를 선택했는데, 이전에 조금이나마 자바스크립트 공부를 했기 때문에 수월하지 않을까라고 생각하기도 했고, 성향상 페이지에 보여지는 부분에 조금 더 흥미가 있기 때문이었다. 기본적인 HTML, CSS, Javascript 공부와 퀴즈를 푼 이후에는, instagram의 웹사이트 버젼을 그대로 따라 만드는 과정으로 넘어갔다. 이렇게 2주가 흘렀고, 3주차부터는 프론트엔드 프레임워크인 리액트를 통해서 다시 instagram 프론트엔드.. 2020. 11. 20. 노드JS - 미들웨어, next() 미들웨어 클라이언트의 요청 (request)과 서버의 응답 (response) 사이에서 작동하는 중간에서 정해진 역할을 수행하는 요소들을 '미들웨어'라고 합니다. 각각의 페이지로 이동을 돕는 라우터와 에러 핸들러 또한 미들웨어의 일종이며, 노드JS를 초기 세팅할 때 설치하는 morgan, body-parser 등 또한 모두 미들웨어라고 할 수 있습니다. 사용법 app.use의 인자에 넣어 사용할 수 있습니다. const app = express(); app.use(bodyParser.json()); app.use(cookieParser()); app.use('/', getAllItems); Next() 미들웨어의 인자에 next라는 파라미터 형식으로 선언해줄 수 있으며, next()를 사용하여 그 다음 .. 2020. 10. 30. wecode 10/20 (node.js 사전공부 - mysql) 데이터베이스 생성 CREATE DATABASE '데이터베이스명'; SHOW DATABASES; #현재 mysql내에 저장되어 있는 모든 데이터베이스를 조회 가능 데이터베이스 사용 USE '데이터베이스명'; #생성한 데이터베이스에 접근 데이터베이스 내 테이블 조회 SHOW tables; #현재 데이터베이스 안에 저장되어 있는 테이블들을 보는 명령어 신규 테이블 생성 CREATE TABLE '테이블명' ( id INT NOT NULL AUTO_INCREMENT, #정수 타입의 id 칼럽, Null이 아니며 값이 자동 증가하게 설정 name VARCHAR(100) NOT NULL, #100의 크기를 가지는 문자열 생성 PRIMARY KEY (id) #이 테이블의 primary key는 id로 설정 ) 테이블 .. 2020. 10. 20. wecode 10/20 (node.js 사전공부 - mysql) mysql 1. 설치 brew install mysql /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2. mysql 설정 mysql.server start : mysql 서버 시작 mysql_secure_installation : 기본 설정 3. mysql 시작 mysql -u root -p mysqlclient 를 설치해도 괜찮습니다. pip install mysqlclient 2020. 10. 20. wecode 10/19 (node.js 사전공부) Pre-test 준비자료 Javascript 1. Promise 자바스크립트 비동기 처리에 사용되는 객체로, 주로 서버에서 데이터를 요청하고 받아올 때 많이 사용합니다. Promise는 Pending, Fulfilled, Rejected의 총 3가지 상태로 나누어질 수 있습니다. Pending(대기) 상태는 Promise가 처음 호출되었을 때 부여되고, Promise 내의 콜백 함수에서 resolve를 실행하면 Fulfilled 상태가 됩니다. 반대로, reject()를 실행하면 Promise는 Rejected 상태가 됩니다. Promise Chaining : 한 개의 promise를 호출하여 반환되는 결과값에 여러 개의 추가 프로미스를 연결해서 사용할 수 있습니다. 자바스크립트 fetch 함수가 가장 .. 2020. 10. 19. wecode (10/18) 1. 프로젝트 선정 독서 모임이 손쉽게 모임을 관리할 수 있게 도와주는 독서 모임 & 도서 리뷰 서비스 2. 해결하고자 하는 문제 1) 증가하는 독서 모임에 비해, 모임을 관리하는 도구는 지나치게 분산화되어 있다 (구글 드라이브, 카톡방, 카페 등) 2) 이로 인해 많은 독서 모임들이 참가자들에게 일관된 모임 경험을 제공하지 못한다 3) 이는 독서 모임과 참가자들의 독서가 지속되기 어렵게 만든다 (모임 관리 열정 고갈, 읽은 책을 한 눈에 정리하는 기능 부재, 모임이 끝난 후 결과물의 산발적 관리 등) 3. 독서 모임을 쉽게 개설하거나 모임에 쉽게 참여하고, 해당 모임에서 다루는 책과 독후감(리뷰)을 깔끔한 UI로 정리할 수 있게 도와주는 서비스 4, 주요 기능 1) 독서 모임 개설 서비스 : 자신이 운.. 2020. 10. 19. [1nass] 클래스101-alike 사이트 만들기 팀프로젝트 후기 프로젝트 소개 준비물까지 함께 보내주는 온라인 취미 수업 제공 서비스인 '클래스101'과 비슷한 서비스를 만드는 프로젝트 프로젝트 기간 : 10. 5 ~ 10. 16 (2주) 개발인원 (총 6명) : 프론트엔드 (권영빈, 김우석, 문상호, 배규덕) / 백엔드 2명 (김성진, 이수현) 주요 기능 (+영상) 1. 메인 페이지 (모달창, MD추천 클래스, 모든 클래스, *새로 생성한 클래스) 2. 크리에이터 센터 (새로운 수업 생성) 사용 기술 Front-End JavaScript (ES6) React.js (CRA, functional component 사용) Styled-components Git / Github AWS S3 라이브러리 React-router-dom React-slick (슬라이더) cla.. 2020. 10. 19. 사진 AWS S3 업로드 기능 구현하기 목적 일나쓰 101 프로젝트의 '새로운 수업 만들기' 페이지 구현 중, 프로필 사진을 업로드하는 기능을 만들어야 했다. 검색해보니 Form-data 형식으로 백엔드 쪽에 전송해주면 된다고 했지만, 프론트엔드에서 파일을 업로드시 자동으로 AWS S3 bucket에 업로드되고, 백엔드에는 url(string) 형식으로 전송해주는 것이 더 효율적일 것 같아서 구현해보기로 했다. AWS 에서 새로운 bucket 생성 및 세팅 아래와 같은 순서로 작업을 진행하였다. 참고 : lovit.github.io/analytics/2019/01/25/aws_s3_release_files/ AWS S3 에 데이터셋 공유하기 (Bucket 만들고 파일 업로드 하기) 이전의 Git 으로 데이터셋 API 공유하기에서 github .. 2020. 10. 19. wecode (10/10) 배운 것/개발한 것/정리한 것 - redux 코드 리뷰 받은 사항 반영 : fetch 함수를 굳이 store에 저장하지 말고, 각 컴포넌트 내에서 정의한 후 getClasses 함수만 store에서 dispatch로 꺼내 쓰기 const allClassData = useSelector((state) => state.allClasses); useEffect(() => { getAllClasses(dispatch); fetch(`http://localhost:3000/Data/classesMOCK.json`) .then((res) => res.json()) .then((res) => { dispatch(getClasses(res.data)); }); }, []); - 슬라이더 애니메이션 완성 react sl.. 2020. 10. 11. 이전 1 2 3 4 ··· 12 다음
