본문 바로가기

전체 글130

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.
wecode (10/9) 배운 것/개발한 것/정리한 것 - Redux 1) store 생성, action 함수 정의, reducer 정의 2) 각 컴포넌트에서 redux내 정의한 함수 사용하여 전체 수업 리스트 fetch 완료 내일 할 것 1. 슬라이더 애니메이션 완성 - react slick을 활용하여 만든 슬라이더의 애니메이션 (진행 바 자동으로 채워지기) 완성하기 2020. 10. 11.
React 10. Styled Components Styled Components 컴포넌트 자체 뿐 아니라 컴포넌트의 스타일마저 JS파일에서 정의하는 방식을 CSS-in-JS 라고 하며, styled components는 해당 방식 중 가장 널리 사용되는 라이브러리입니다. Why? SASS는 CSS의 많은 부분을 해결했지만, 아직 해결되지 않는 문제점 또한 존재했습니다. 서비스가 커질수록 scss 파일의 수도 많아지며, scss 클래스명도 많아집니다. 이는 서비스의 구조를 복잡하게 만듭니다. 유지보수 (해당하는 css 태그를 찾아 수정하는 것)가 어려울 수 있습니다. Inline style (HTML 요소에 바로 스타일을 정의하는 것) 방식은 html 파일의 부피가 과도하게 증가하고 CSS 파일과의 역할 분리가 모호해지는 문제가 있습니다. 또한 :hov.. 2020. 10. 11.
React 9. Hooks (useState & useEffect) Hooks? Hooks는 리액트 16.8 버젼에 새롭게 추가된 함수로, 함수형 컴포넌트 내에서 state와 여러 lifecycle 기능들을 연동할 수 있게 돕는 메소드입니다. Hook은 일반적인 클래스형 함수에서는 작동하지 않고, 함수형 컴포넌트 내에서 동작하게 되며, react에 기본 탑재된 Hooks는 useState, useEffect, useRef, useReducer가 있으며, 자신만의 Hooks를 만들 수도 있습니다. 왜 사용할까요? 기존의 클래스형 함수로 컴포넌트를 작성할 때, state과 관련된 함수를 컴포넌트 간에 재사용하고 싶은 경우가 많이 생깁니다. Hook은 컴포넌트 트리에 새로운 컴포넌트를 추가하지 않고도 이것을 구현할 수 있게 해줍니다. Hook 사용 규칙 2가지 최상위 레벨에서.. 2020. 10. 4.

티스토리툴바