Grace's Tech Blog

+ Sequelize에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 1. ORM이란 Object-Relational Mapping의 약자로 Object는 Javascript상의 그 '객체'가 맞다. 그리고 Relational은 Relational DB(관계형 DB)를 말한다. 이 그림과 같이 ORM을 통해 관계형 DB의 entity, record 들에 접근할 때 마치 Javascript에 있는 객체 혹은 classs를 다루듯이 취급 할 수 있다. 즉, 관계형 DB와 Javascript의 객체 사이의 통역사 역할을 담당하는 M-V-C 중 Model을 기술하는 도구이다. 2. ORM을 사용하는 이유 우리가 사용한는 객체 지향 프로그래..

이번 sprint에서는 대표적인 관계형 데이터베이스관리 시스템(RDBMS)인 MySQL을 이용하여 Schema를 설계하고 SQL을 사용하여 데이터를 영속성있게(persisstently)저장하는 방법을 배우는 것이 목표였다. 그래서 앞에서는 데이터베이스 시스템 구조 및 기본 개념, 쿼리문 작성 등에 대해서 정리해보았다. 여기서는 본격적으로 데이터베이스를 서버와 연결하고 영속적인 데이터를 요청하고 받아오는 방법에 대해서 배운 것을 정리해보고자 한다. 1. 클라이언트, 서버, 데이터베이스의 관계 2. 필요한 스키마를 디자인하고 작성하기 Client의 Browser의 화면은 이런식이고, 기존의 in-memory방식으로 데이터를 저장했을 때의 방식은 {id:1, username:'grace', text:'hell..

이번 sprint에서는 대표적인 관계형 데이터베이스관리 시스템(RDBMS)인 MySQL을 이용하여 Schema를 설계하고 SQL을 사용하여 데이터를 영속성있게(persisstently)저장하는 방법을 배우는 것이 목표였다. 0. 데이터베이스가 필요한 이유 지난 여러 sprint를 진행해 오면서는 서버를 작성하고, 생성된 데이터들은 in-memory상에 저장하여서 클라이언트에서 HTTP를 이용하여 자원(데이터)를 요청하면 서버에 이 데이터를 돌려주는 방식으로 진행했었다. (*in-memory: 서버가 켜져 있을 동안에만 변수에 할당된 값을 통해 저장하는 것) 그 다음에는 node.js의 fs모듈 중 readFfile이나 writeFile method를 이용하여 정보를 파일로 저장하기도 했다. 이 두 방식의..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞선 27. Redux - Redux의 작동방식2. React-Redux를 통해 상태 사용하기 을 통해 1. Presentational 컴포넌트, Container 컴포넌트 로 구분하고 2. Container 컴포넌트의 Props에 Connect( ) 함수를 사용하여 State값을 연결시켜주고 나면, 해당 컴포넌트는 Store로부터 State를 사용할 수 있게 되는 것 까지 정리해보았다. 이제 Store로부터 State를 사용할 수 있도록 Props에 받아오는 것까지는 했으니, State를 변경하고,그 변경된 것이 화면 UI에 나타나는 것을 할 차례이다. 다시말해 "리듀..

지금까지 1. State와 Store의 역할을 알아보고 2. Action, Reducer을 정의하여서 스토어에 해당 상태를 저장할 수 잇도록 리듀서와 스토어를 연결하는것 까지 알아보았다. 여기서는 Redux의 Store에 있는 State를 React를 통해 사용하는 것에 대해 배운 것을 정리해보도록 하겠다. https://ko.redux.js.org/basics/usage-with-react/ React와 함께 사용하기 | Redux 기초 강좌 > React와 함께 사용하기: How to use Redux with React components ko.redux.js.org 1. Redux를 도입한 React component의 한계와 Presentational 컴포넌트와 Container 컴포넌트 분리 ..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서서 Redux에서 사용하는 Action, Store 그리고 Reducer의 의미와 특징을 살펴보았다. 여기서는 Redux을 배우고, 활용할 때 등장하는 State, Store, reducer,action등의 역할과 서로 어떻게 연관되어 작동하게 되는지를 정리해보고자 한다. 1. State(상태) React를 배울 때 처음 접한 State는 컴포넌트 내부적을 사용하는 데이터의 집합이다. 유튜브라면, 상태는 재생되고 있는 비디오 정보, 화면 비디오 리스트에 출력되는 비디오들의 정보, 다크모드 여부, 등이 될 수 있다. 앞선 유튜브 클론 코딩을 통해 state는 어떤 ev..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) Intro & Redux란 앞서서 22-24번 포스팅을 통해 React를 배웠고, React Sprint -유튜브 클론 코딩을 진행했다. 아래는 미로 에서 제가 짠 유튜브 클론 코딩의 컴포넌트 구성을 나타낸 것이다. (컴포넌트 시각화를 트리 구조로 짜는 것이 편하다는 것을 몰랐다는 것을 감안하더라도 너무 복잡..) 실제로 유튜브 클론 코딩을 하면서 가장 많은 시간을 쓰고 고민하고 힘들었던 점이 'state 끌어올리기'였다. 한 예를 들면, App에 있는 state인 currentVideo와 함수인 handleVideoListEntryTitleClick을 props형태로 ..

CSS; Cascading Style Sheet 해당 내용은 드림코딩 엘리님의 유튜브 강의를 보고 정리한 것입니다. 1. 의미, 정의 웹사이트를 스타일링 할 때는 총 3가지로 나누어서 생각해 볼 수 있다. Author style: css파일로 만든사람(우리)가 지정한 스타일들 User style: 사용자가 지정하는 스타일로, 다크모드, 글자 크기 .. 등이 있다. Browser: 브라우저에서 기본적으로 지정된 스타일 CSS의 C 즉, Cascading은 연속화 라는 의미로, Author style에서 해당 스타일이 있는지 살펴보고 없으면 User style, 그 후엔 Browser로 흐름이 이어지게 된다. CSS의 문법은 [Selector]{ [꾸미고 싶은 Property]: [어떻게 꾸미고싶은지에 대한..

0. Start With.. HTML 요소 참고서 Document and Website Structure 더보기 몇 요소들은 대부분의 페이지에 공통적으로 적용될 것이란 걸 명심하세요 — 네비게이션 메뉴나 footer 컨텐츠처럼. 예를 들어 비즈니스를 위한 페이지라면, 당신의 연락처를 각각의 페이지의 footer에 보이도록 하는 것은 좋은 생각입니다. 모든 페이지에 공통적으로 포함하고 싶은 것을 적어보세요. 다음으로, 각 페이지의 구조를 간단한 스케치로 그리세요.아마 위의 우리의 간단한 웹사이트 같을 것입니다). 각 블럭의 기능을 적으세요. 이제 웹사이트에 포함시키길 원하는 (각 페이지에 공통적이지 않은) 다른 모든 컨텐츠를 brainstorm하세요 - 리스트에 모두 적어 내려가세요. 다음으로, 이 모든 ..

(+ React에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서 React의 주요 개념 중 5. State & Lifecyclev 에 대해서 정리해 보았다. 이번에는 React의 주요 개념 중 6. Handling Events 에 대해서 정리해볼 것이다. React의 주요 개념들 6) Handling Events 앞에서 정리한 순서대로 ' react 개발환경 설치 → Component 제작 → Props의 사용 → state의 사용' 등을 해서 이런 결과창을 띄우는 것 까지 했다고 가정해보자. 그런데 아무런 event를 등록 해주지 않아서, 리스트에 각각의 링크를 클릭 하더라도 아무 일도 일어나지 않는다. 그래서 지금부터는 R..