DB(DataBase) : 일정한 체계 속에 저장된 데이터의 집합 엑셀이나 메모장에 어떤 정보를 입력하고 저장하는 것과 비슷하나, 필요한 정보를 저장하거나 검색할 때 조금 더 효율적인 구조로 만든 것 -> 데이터를 효율적으로 저장하는 공간 Table : 표 형태로 저장된 데이터의 집합 엑셀 - 시트 데이터베이스 - 테이블(표) 데이터는 데이터베이스 안에서 테이블이라는 단위로 저장, 하나의 데이터베이스에는 여러 개의 테이블 존재 가능 -> 관련있는 정보들을 하나의 테이블에 저장하고, 여러 테이블을 두면 많은 데이터를 체계적으로 저장할 수 있음 row와 coulmn - row(행): 레코드(Record)라고도 하며, 하나의 개체를 표현 -> 하나의 row가 하나의 데이터 집합을 의미(글 하나에 대한 정보) ..
[Ruby On Rails] 루비 온 레일즈란?
[Ruby On Rails] - 루비 프로그램 언어에서 동작하는 웹 어플리케이션 프레임워크, 간략히 레일즈라고 부름 - 데이터베이스를 이용한 웹 애플리케이션을 개발할 때 반복되는 코드를 대폭 줄여 개발 기간을 단축하는 것으로 인기 (문법 간결) - 모든 개발자가 개발을 시작 할때 필요한 초기 준비나 가정들을 쉽게 만들수 있는 도구 제공, 웹 어플리케이션 프로그래밍을 더 쉽게 만들수 있도록 설계 철학 1) DRY (Don't Repeat Yourself) 같은 코드를 반복하지 말자 2) CoC (Convention over Configuration) : 설정보다 규칙이 중요하다 - 웹 서비스 만드는 방법을 최선의 방법 하나로 제안 -> 이러한 정해준 방법을 Rails Way라고 함 - Rails는 Rail..
# What React? : 유저 인터페이스를 만들 수 있는 라이브러리 (A lobrary for creating user interfaces) -> 사용자에게 UI를 보여주고, 이벤트를 처리하는 일들을 할 수 있음 - 사용자에게 보여지는 UI를 만들고, 그 위에서 사용자가 클릭을 하거나 다양한 이벤트가 발생을 하게 되면, 그 이벤트에 맞게 반응하도록 만들어진 라이브러리 - 페이스북에서 만든 자바스크립트 라이브러리 중 하나 (2013년도에 등장 ex) 페이스북, 에어비앤비, 우버, 넷플릭스, 인스타그램 등에서 사용 React 장점 - 단순하며, 배우는 시간이 앵귤러에 비해 상대적으로 짧음 - 버전이 업데이트 되어도 이전 버전과 호환이 잘 되도록 안정성있게 업데이트 됨 (= 앵귤러와 달리 Breaking ..
사전준비 | 레일즈 프로젝트 작업 위한 세팅
프론트엔드(리액트)와 백엔드(루비 온 레일즈) 모두 다루는 풀스택으로 진행 될 예정 맥북이였으면 좀 더 쉬웠겠지만~ 윈도우 사용자로서 루비온레일즈 세팅하기~ 1) 루비 2.6.5버전 설치 rubyinstaller.org/downloads/archives/ -> 2.6.5버전은 Archives에 있어서 여기서 다운받을 수 있음.. junstar92.tistory.com/5 (..처음에 이 글을 보고 윈도우에서 바로 설치하려 했으나, 몇 시간동안 끝 부분에서 계속 같은 오류로 막힘) 레일즈 개발 대다수가 유닉스 환경에서 이루어지므로, 윈도우 대신 Linux 가상 머신에 레일즈 설치하고 사용하는 것을 권장! -> 다시 WSL로 옮겨 Ubuntu 18.04 LTS 설치 후 재설치 해보기 WSL 설치 1. 설정 ..
[1차 프로젝트] 마켓홀리 팀 프로젝트 후기
1. 프로젝트 소개 - 온라인 식재료 판매 커머스 마켓컬리 웹 사이트를 모티브로한 팀 프로젝트(Market Holy) - 2021.03.15 ~ 2021.03.26 (2주) - 프론트 4명 + 백엔드 2명 ⚒ 기술 스택 Front-end - HTML, JavaScript(ES6+), React, SCSS ⚙ 협업 툴 - Slack, Trello, Git & Github 👉 팀 배정을 받아 2주동안 마켓컬리 클론 프로젝트를 하게 되었다! 팀 배정 전 웹 사이트 투표할 때, 주로 깔끔한 UI 구조를 가진 사이트들에 투표하였는데, 마켓컬리 웹 사이트도 깔끔한 편이라 만족했다. 1-1 프로젝트 시작 전 팀원들과 이 사이트에서는 어떤 페이지가 필수적으로 구현되어야 하는지, 서비스 특징을 파악하여 필수 구현 페이지..
[TIL] 백엔드 API 통신 시, Proxy 설정으로 해결
처음에 백엔드에 로그인 id pw값은 보내지는데 프론트에서 아무 메시지도 뜨지 않음 Proxy 설정으로 CORS 도메인 문제 해결 [ Webpack ] Proxy 설정으로 CORS 도메인 문제 해결 Webpack Proxy 설정으로 CORS 도메인 문제 해결 CORS (Cross-Origin Resource Sharing) 란? 웹브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 스팩이다. 서버와 클라이언트가 정해진 헤더를 통 ryulog.tistory.com package.json에 백엔드 서버 url 넣어주고 Login.js에 const summonerUrl 로 url 넣어주기 로그인 성공 완료 시 console에서 백엔드에서 보내주는 메시지 확인 가능 아이디나 비번 틀렸을 시,
fetch 가져오다 서버로 요청(request)를 보내고 응답(response)을 받는 함수 request -> 웹 브라우저가 서버에 보내는 요청 response -> 서버가 다시 보내주는 응답 fetch('https://www.google.com') .then((response) => response.test()) .then((result) -> { console.log(result); }); 1) 파라미터로 넘어온 url로 요청(request)을 보내고, 서버로부터 응답이 오면 응답(response) 받음 2) 서버에서 응답이 오면(조건), 두 번째 then 함수 실행 (-> 서버가 보낸 response는 하나의 객체가 되어 response라는 파라미터로 넘어옴) 3) 두 번째 콜백이 실행되고 난 후..