본문 바로가기

전체 글117

[Side Project] 프론트엔드 포트폴리오 사이트 개발 프로젝트 URL 포트폴리오 사이트를 제작했습니다. 깃허브 주소 https://github.com/BaikSeungJeon/project-portfolio GitHub - BaikSeungJeon/portfolio-timeline: 제 지난 날의 발자취를 기록한 포트폴리오 사이트입니다. 제 지난 날의 발자취를 기록한 포트폴리오 사이트입니다. Contribute to BaikSeungJeon/portfolio-timeline development by creating an account on GitHub. github.com 깃허브 페이지 주소 https://baikseungjeon.github.io/project-portfolio/ 백승전 포트폴리오 기술 블로그 작성 2021 05 ~ 개발을 시작하며, 복.. 2021. 9. 13.
[Clone Coding] 키움증권 MTS 클론코딩(React) 프로젝트 개요 리액트 '쇼핑몰 만들기' 유료강의를 들은 후, 의류가 아닌 '구매한다'는 성격을 그대로 가져와 주식을 구매할 수 있는 MTS(Mobile Trading System) 앱을 클론코딩 해 봤습니다. 실제로 주문이 되는 건 아니고, 홈화면과 주문화면, 그리고 '매수 주문' 버튼 클릭 시 체결이 완료 됐다는 모달창만 구현했습니다. 제가 클론코딩을 한 증권사는 키움증권이며, 절대 상업 목적으로 사용되지 않았으며 이미지 저작권은 전부 키움증권에 있습니다. 프로젝트 URL 깃허브 주소 https://github.com/BaikSeungJeon/project-react-mts/ GitHub - BaikSeungJeon/clonecoding-react-mts: 리액트로 키움 증권 MTS 화면 클론 코딩을 .. 2021. 9. 9.
[Firebase] Firebase 설치 및 복습 Firebase Firebase는 구글에서 개발 된 모바일이나 웹 어플리케이션을 만들기 위한 플랫폼입니다. 인증, 데이터베이스, 스토리지, 푸시 알림, 배포 등 Firebase에서 제공해 줍니다. Firebase 특징 1. Mysql, 오라클 같은 관계형 데이터베이스 X 2. MongoDB, NoSQL 기반의 Document 형식의 빠르고 간편한 데이터 베이스 3. 그리고 RTSP(Real Time Stream Protocol) 방식을 지원 → 덕분에 실시간 기능(채팅 앱 등) 요구하는 앱을 쉽게 구현이 가능하다. Firebase 사용하기 1. Firebase 사이트 이동 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키.. 2021. 8. 16.
[React] props 대신 Redux + Redux 복습 Redux npm install redux react-redux redux를 사용하는 이유? 속된 말로 props 쓰기 귀찮아서입니다. Redux 세팅 1. index.js에 import {Provider} from 'react-redux'; 2. App을 Provider로 묶어주기 3. store란 변수에 state 담기 4. Provider에 props 전송 + 수정 import {Provider} from 'react-redux'; 밑에 추가해주기 JS 파일에 가져오기 1. export default () 대신 export default connet()() 사용 2. connet를 사용하기 위해서, 위에 import {connet} from 'react-redux'; 입력 3. function으로 .. 2021. 8. 15.
[React] React에서의 Ajax Ajax Ajax: 서버에 새로고침 없이 요청 할 수 있게 도와주는 것. 요청의 종류에는 여러가지가 있습니다. 이건 제가 예전에 인프런 무료 강의에서도 작성한 내용인데요. 1. GET 요청 주소창에 URL 때려 박는 요청 특정 페이지 / 자료 읽기 2. POST 요청 서버로 중요 정보 전달 아이디와 비밀번호 같이 조금 숨겨서 전달할 때 Ajax 사용하는 방법? 1. jQuery 설치 후 $.ajax() 2. axios 설치 후 axios.get() 3. 자바스크립트에서 fetch() npm install add axios 이번에도 똑같이 라이브러리 설치 후 import로 axios 추가해주면 됩니다. axios.get(URL).then().catch() then() 안엔 성공하면 실행할 코드를 작성하는 .. 2021. 8. 12.
[React] React 스타일 - Style-components과 SASS Style-components npm install style-components # 설치 import로 'styled-components'를 불러와 사용할 수 있게끔 세팅을 끝냅니다. 변수 = style.태그명 SASS npm install node-sass # 설치 1. scss 파일 생성 후, import로 가져오기 2. 변수에 데이터를 저장해서 쓰자 3. nesting 문법 4. 복붙 말고 @extend 5. @mixin 함수(), @include 함수() @mixin 함수()를 위에다 작성하고, 아래에 @include 함수()로 불러와 줘야 합니다. 2021. 8. 11.

티스토리툴바