전체 글
-
[DB] AQueryTool : 스타벅스 모델링Back-End/Database 2020. 12. 21. 21:44
AQueryTool을 사용해서, 스타벅스 음료 페이지의 정보를 관계형 데이터 모델로 제작해 본 과제(실습)였다. 🧑💻 스타벅스 모델링 과제 - 아이디어 네비게이션 바의 MENU -> 음료(대분류), 다시 음료(대분류) -> 콜드 브루 등(중분류) 이렇게 두 개의 카테고리의 필요성을 느꼈다. 음료 페이지를 켜서, 컬럼이 필요할만한 데이터들을 선정했다. (이미지, 이름, 설명, 사이즈 등) 고유 데이터는 기본적으로 items 테이블에 넣겠지만, 중복요소들은 one to many, many to many 등으로 별도 table을 만들겠다. - 수행결과 0. Main_Categories, Sub_Categories : MENU-음료-콜드브루 같은 카테고리 분류를 위한 테이블 (One to Many) id : ..
-
[Javascript] Iteration ProtocolFront-End(Web)/Javascript 2020. 12. 17. 20:45
🤔 서론 for 반복문을 사용하던 중, 객체에서 for - in 은 key값을 반환하지만, for - of 문에선 value 값이 반환되지 않았다. 또한, 'Uncaught TypeError: obj is not iterable' 라는 에러가 발생하는 것을 확인했다. for - of 문을 확실히 이해하려면, Iteration, Iterable, Iterator 에 관해 정리할 필요성을 느껴 별도 포스팅을 시작했다. 📒 Iteration Protocol - Iteration(반복) (ES6 추가) 이터러블 객체가 for - or문, 전개연산자(spread, ...) 등 순회동작 하도록 만든 규약을 Iteration Protocol 이라고 한다. 혹은 모든 객체를 이터러블로 만들 수 있는 규약을 의미한다. ..
-
[Javascript] Class(클래스) 기본Front-End(Web)/Javascript 2020. 12. 16. 22:56
위코드 Replit 과제중, Class 개념에 대해 정리가 필요하다고 생각해서 글을 쓰게 되었다. 📒 class 란? - 객체지향(OOP, Object-Oriented Programming) 객체지향 프로그래밍이란, 프로그램을 객체(Object)들로 구성하고 서로 상호작용을 통해 구현하는 방법을 의미한다. 객체에 변수나 함수를 저장한 뒤 이를 반복적으로 사용하고자 하는 개념으로, 이 객체를 편리하게 생성하는 템플릿이 바로 Class인 것이다. - class 정의 class를 "특별한 함수" 라고 설명한다. class 선언과 표현식으로 정의할 수 있다.(실제로 ES6 전에는 함수가 class를 대체했다.) 1) class 선언 ES6부터 class 개념이 도입되면서, class는 아래와 같이 'class ..
-
[CSS] Position / Display(block) / FloatFront-End(Web)/HTML, CSS 2020. 12. 14. 22:14
🤔 서론 여기선 스타일링의 Layout 및 Box-model에서 주로 사용되는 위 세 가지 속성에 대해 포스팅하고자 한다. 🚀 Check Point Assignment 그 동안 배운 것을 정리할겸 아래의 사이트에서 학습을 완료해주세요. - http://learnlayout.com/ - https://poiemaweb.com/css3-layout - https://poiemaweb.com/css3-box-model 그리고 블로그를 작성해야 합니다. 블로그를 작성할 때는 아래 사이트, replit 뿐만 아니라 youtube, 다른 좋은 블로그 등 여러 자료를 참고하고 작성해주시면 됩니다. 각자 편한 블로그 채널(티스토리, velog, medium 등)에 포스팅을 아래의 주제로 작성해 주시고, Google C..
-
[HTML] Semantic Web, Semantic TagFront-End(Web)/HTML, CSS 2020. 12. 14. 19:13
🤔 서론 위코드 사전스터디 과제를 진행하며 Semantic Tag에 대해 아래와 같이 간단히 정리한 적이 있다. 이에 더하여, 의미론적인 웹페이지(Semantic Web)이 왜 필요한지, 적용배경을 더하여 포스팅 해보겠다. HTML4까지는 구역을 나눌때 위주로 구성하고 id, class를 부여하는 식이었다. HTML5가 도래하면서 이름이 있는 태그들을 지원하여, 컨텐츠를 명확히 정의하고 코드 가독성을 높이고자 하였다. 이 이름있는 태그를 바로 Semantic Tag라고 한다. 종류는 포스팅 링크 참고(abangpa1ace.tistory.com/3?category=910459) 🚀 Check Point Assignment #2 "사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그..
-
[Git & Github] Git 다시 공부하기 (드림코딩 엘리)Environment(개발환경)/Git & Github 2020. 12. 6. 19:05
🙀 다시 공부해보는 Git 과 Github! Git 명령어를 통해 직접 Github로 push까지 해보았지만, 아직 사용하는데 있어 익숙치가 않았다. 또한, branch나 commit 등 갈 길이 멀기에, 심화를 들어가기 전 드림코딩 엘리님 영상으로 복습했다. 출처: Youtube 드림코딩 엘리님 영상(youtu.be/Z9dvM7qgN9s) 📕 Git 공부 준비하기 - Git 설치하기(공식사이트) : git-scm.com/git-scm.com/download/ - Git GUI 설정: 프롬프트(터미널) 명령어 기반 프로그램으로 UI 권장. (git-scm.com/download/gui/mac) Git - GUI Clients GUI Clients Git comes with built-in GUI tool..
-
[Git & Github] 기본개념 및 명령어Environment(개발환경)/Git & Github 2020. 12. 3. 01:22
🙋♀️ 개발자들의 필수지식 Git과 Github! 비슷해 보이지만 다른 이들은 무엇일까? 참고영상: 유튜버 얄팍한 코딩사전님(youtu.be/Bd35Ze7-dIw) 간단하게, Git은 버전 관리 시스템이고, Github는 이 데이터를 업로드하여 개발자들이 공유할 수 있는 플랫폼이다. Git과 Github에 대해 자세히 알아보고, Github 업로드를 위해 Git에서 사용되는 push 등의 명령어에 대해 포스팅하겠다. 📕 Git에 대하여 로컬 영역의, 분산 소스 버전 관리 시스템(Distributed Version Control System) 서버를 분산시켜 구축할 수 있게 하는 소프트웨어 소스코드를 효율적으로 관리할 수 있는 형상관리도구 - Git이 필요한 이유 차기 Version 개발간 데이터가 증발..
-
[React.js] React FormsFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 22:55
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 4 지난 포스팅에서는, PropTypes라는 props의 type을 검증하는 라이브러리에 대해 공부했다. 이번에는 React Form에 관해 공부한 내용이다. 기존 React를 쓰지 않은 환경에서는, HTML에 태그내 , 등 태그에 정보를 입력하였다. 또한, 이 정보를 을 통해 Submit하여 업데이트 처리했지만, 이는 React에서 선호하는 방법이 아니다. 하지만, React Form에선 매 입력/삭제의 순간순간을 서버에서 확인에서 확인하고 스크린을 업데이트 해야하며, 그렇기에 Form과 rest App들이 실시간 연동되어있는게 이상적이다. 📒 Event Listener : onChange 지금까지 에 종종 적용해온 onChange이다. rende..