Office Hour

활용해 보았으면 좋겠는 부분들

React Framer Moion 으로 애니메이션을 만드는 것도 도전해 보기! (주니어에서 벗어나려면 해당 작동 원리도 알아야 한다) Flexbox Layout 등을 이용한 tailwind 도 활용해 보기! 다양한 걸 활용해 보자!

프론트엔드 개발자에게 요구하는 것들

clientside rendering 과 serverside rendering, 특히 대기업같은 경우, serverside rendering 을 많이 요구한다. Next.js 가 대표적인 프레임워크(라이브러리) 이다. serverside rendering 같은 경우 SEO 나 Pre-rendering 등등의 장점이 있기 때문에 꼭 알아두도록 하자. 그 외에도 이전에 말했던 반응형, 서버사이드 렌더링, 애니메이션은 "기본으로" 요구된다.

Serving Apps with Client Side Routing

React 의 create-react-app 문서, 그 중에서도 deployment 에 가서 확인해보자. 했어야 했는데 못 했다(...)

Modal window

먼저 click 이벤트를 주고, subscribe 라는 메뉴를 클릭하면, display:none 으로 되어있던 모달창이 나오게 하는 방식으로 구현하였다고 한다.

기타

1linelayout 이라는 사이트에서 예제와 같이 공부해보는 것도 추천한다. CSS 가 잘 안 되어서 어떻게 공부해야 할까 고민이 되었는데, 이 사이트를 통해 공부해보자! 감사합니다!

{this.props.children} 을 통해서, component 의 내용물을 불러올 수도 있다

styled-component 사용해보자, 진짜 많이 쓴다! sass, less 등도 잘 알아두어라! 최근에 react 에서는 emotion 도 인기라고 한다.

사실 이번의 sprint 는 동기부여를 위한 것. 빌드하고, 배포라는 과정도 직접 해 보고, 이런저런 많은 도전을 해 보았다면 충분히 의미있는 스프린트라고 할 수 있다. (다크모드 해 봤으니 됐나...?)

질문

css공부는 보통 어떻게 하나요? 예시를 계속 따라해보는게 제일 효율적으로 공부하는 방법일까요?

예시를 통해서 만드는 것이 제일 좋다. 위에 나온 1linelayout 같은 것들처럼. 예제를 통해 구현해 보고, flex 같은 속성값을 조금씩 바꿔줘보면서 어떤건지 감을 잡아보고, 따로 공부해서 정리해보는 과정을 거치면 괜찮다.

반응형에 익숙하지가 않아서, 반응형을 orientation: landscape라는 미디어 속성을 사용했는데 max-width를 사용하는 것보다 안좋을까요?

목적이 다르다. orientation 은 스마트폰을 가로/세로로 놓으냐 안 놓느냐의 차이다. max-width 는 해상도의 차이이다. resonsive web 을 검색하면 구글에서 만든 문서가 나오므로, 잘 확인해보자.

.ex2 .box {} 라는 css가 있다고 치면요, 두개 쓰는게 무슨 의미인지를 잘 모르겠습니다.

.ex2 의 자식으로 .box 가 있다는 의미이다. 참고로 codepen 도 자주 활용하자. 거기서 이쁜 무언가를 만들어놓은 걸 보면서 따라하는 것도 좋은 공부다. **CSS Selector 규칙은 기본적으로 배워놓아야 한다.**

---

Lesson - Learn SQL

이번 스프린트의 목표

• SQL과 Schema가 무엇인지 스스로 정의할 수 있다.
• 1:N, N:N 관계를 이해하고, 데이터베이스에서 테이블을 조작할 수 있다.
• Learn SQL에서 다루는 SQL을 사용 혹은 활용할 수 있다.

자세한 목표 잡기

위의 스프린트 목표와 비슷하지만, 자세한 항목 몇 개가 조금 더 추가된 목표부터 잡고 가자

• SQL 이 어떻게 이루어져 있는지 이해한다
• SQL 기본 query 문을 사용할 수 있다
• Schema 의 설계 방법과 더 나은 방향성을 고안한다
• 서버와 클라이언트 사이에서 주고받는 데이터를 database 에 영속성있게(persistantly) 저장할 수 있다

SQL이란?

Structured Query Language 의 약자, 한국어로 직역하면 "구조화 된 쿼리 언어" 라는 의미이다.

Query 는 "질의문" 이라는 뜻으로, 쉽게 말 해서 우리가 네이버나 구글에 검색하는 검색어들도 저런 query 에 해당된다고 볼 수 있다. 이 query 를 사용하는 이유는, 저장되어있는 정보를 filter 하기 위함이다.

→ 정리하자면 SQL 은 DB용 프로그래밍 언어이며, DB에 query 를 보내 원하는 데이터만을 뽑아올 수 있게끔 한다.

Database 가 필요한 이유는?

우리의 기존 In-memory , 혹은 file-I/O 방식과 비교해보자

In-memory 방식의 경우는 프로그램을 종료하게 되면 데이터가 사라진다.

file-I/O 는 원하는 데이터만을 가져오기가 어렵고, 항상 모든 데이터를 가져온 뒤 서버에서 필터링 하는 과정이 필요해 과부하가 많이 걸린다.

DB 방식은 필터링 외에도 file-I/O 로 구현이 힘든, 관리를 위한 여러가지 기능들을 가지고 있는 데이터에 특화된 서버이다. In-memory 방식의 종료한 경우 데이터가 사라지는 문제도 해결이 가능하다! (저장되기 때문에)

그래서 Database 란 무엇인가?

Row / Column 을 통한 table 로 데이터들을 저장하고, query 문을 통해 filter 를 걸어줘서(서버와 통신을 해야 하기 때문에 GUI 보다는 CLI 가 더 많이 쓰인다) 해당하는 데이터들을 불러오는 일련의 정보저장체계를 의미한다.

client - server - DB 의 통신방식

client 가 server 에 특정 정보를 요청한다 → server 는 SQL 을 이용해 DB에 특정 정보를 요청한다 → DB 는 결과값을 서버에 전달한다(XML 을 통해 전달하거나, JSON 을 통해서 보내거나, 서버와 합의된 사항대로 보내준다) → 서버는 해당 값을 클라이언트에 전달한다

---

Sprint - Learn SQL

작업환경 세팅

작업환경 세팅 - Brew

일단은 W3School 에 들어가서 SQL 을 학습해 보는 시간이다. 나는 그 이전에 추가로 SQL 작업 세팅도 진행하였다. HomeBrew 에 들어가서 일단 아래와 같은 명령어를 통해 Brew를 설치하였다. Brew 홈페이지에 들어가서 이게 뭘 하는건지 공식홈페이지를 둘러보았는데, "Homebrew, The Missing Package Manager for macOS (or Linux), installs the stuff you need that Apple (or your Linux system) didn’t." 라고 한다.

macOS 에서 기본적으로는 존재하지 않는 것들을 편하게 설치하고 관리하는 패키지 매니저라는 사실을 알았다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Brew 를 통한 MySQL 설치

Brew 설치를 완료한 뒤에는, CodeStates 측에서 제공해 준 Install MySQL on macOS 라는 레퍼런스의 과정대로 MySQL 설치까지도 완료하였다. 해당 레퍼런스에서는 5.7.15 버전 - macOS Sierra 기준으로 이야기를 하고있지만, 현재는 8.0.21 버전이고, 내 OS 는 macOS Catalina 이다. brew install mysql 을 통해서 설치하였다.

SQL Tutorial 학습

일정에 맞추어 W3Schools 의 SQL 튜토리얼을 통한 학습을 진행하였다.

---

W3Schools - SQL Tutorials

SQL Intro

What is SQL

SQL is standard language for accessing and manipulating databases. Structured Query Language.

RDBMS

Relational Database Management System. it is basis for SQL.

SQL Syntax

Database most often contains one or more tables. And each table is identified with name, such as Customers. Table contain records(rows) with data.

Select All Records from table "Customers"

SELECT * FROM Customers;

using * means "All", so it means "Select All data(row and column) from "Customers" table.

Keep in mind

• SQL keywords are NOT case sensitive, select is same as SELECT
• Semicolon(;) is required for some database systems at the end of each SQL statement. It's standard way.

Others

• SELECT - extracts data from a database
• UPDATE - updates data in a database
• DELETE - deletes data from a database
• INSERT INTO - inserts new data into a database
• CREATE DATABASE - creates a new database
• ALTER DATABASE - modifies a database
• CREATE TABLE - creates a new table
• ALTER TABLE - modifies a table
• DROP TABLE - deletes a table
• CREATE INDEX - creates an index (search key)
• DROP INDEX - deletes an index

---

SQL SELECT

SELECT statement is used to select data from a database. The data retruned in a result table, called the result-set.

SELECT

SELECT column1, colum2, ...
FROM table_name;

We can get specific colum(s) from table like this.

SELECT * FROM table_name; 

And We can get all the fields available in the table.

SQL SELECT DISTINCT

SELECT DISTINCT statement is used to return only distinct(different) values. We use this sentence when we want to get only distinct(different) values from Table, not duplicate(same) values.

SELECT DISTINCT column1, column2, ...
FROM table_name;

SELECT DISTINCT Country FROM Customers;

For Example, We can use this sentence like this. We get Country column from Customers table, without duplication.

SELECT Count(*) AS DistinctCountries
FROM (SELECT DISTINCT Country FROM Customers);

And we also use AS and COUNT . COUNT is used for count the number of data(rows) from column. AS is used for set column name as I want.

---

SQL WHERE Clause

The WHERE is used to filter records. It extract only those records that fulfill a specified condition.

SELECT column1, column2, ...
FROM table_name
WHERE condition;

Caution : WHERE clause is not only used in SELECT statement. It is also used in UPDATE, DELETE statement, or else!

SELECT * FROM Customers
WHERE Country='Mexico';

For example, when we want all data from Custormers table but data's country is Mexico, we can use WHERE clause like this, WHERE Country='Mexico' . Plus, many DB systems will allow double quotes("). so, WHERE Country="Mexico" is also allowed.

SELECT * FROM Customers
WHERE CustomerID=1;

But we don't use any quotes with numeric conditions. It should not be enclosed in quotes.

Operators in The WHERE clause

Caution : It's little bit different with programming language such as JavaScript or else. Same operator is = in SQL, but JS use == or === . Not Equal operator is <> in SQL, but JS use != or !==.

---

SQL AND, OR, and NOT Operators

We can use this operators with WHERE clause. They are used to filter records based on more than one condition.

• The AND operator displays a record if all the conditions separated by AND are TRUE.
• The OR operator displays a record if any of the conditions separated by OR is TRUE.
• The NOT operator displays a record if the condition(s) is NOT TRUE.

AND syntax

SELECT column1, column2, ...
FROM table_name
WHERE condition1 AND condition2 AND condition3 ...;

OR syntax

SELECT column1, column2, ...
FROM table_name
WHERE condition1 OR condition2 OR condition3 ...;

NOT syntax

SELECT column1, column2, ...
FROM table_name
WHERE NOT condition;

Combine these

We can combine this operators.

SELECT * FROM Customers
WHERE Country='Germany' AND (City='Berlin' OR City='München');

It is same with...

if ((Country === "Germany") && ((City === "Berlin) || (City==="München")))

SELECT * FROM Customers
WHERE NOT Country='Germany' AND NOT Country='USA';

And it is same with...

if((Country!=="Germany") && (Country!=="USA"))

---

SQL ORDER BY Keyword

The ORDER BY keyword is used to sort result-set in ascending or descending order. It's default sort style is ascending. To sort the records in descending order, use the DESC keyword.

SELECT column1, column2, ...
FROM table_name
ORDER BY column1, column2, ... ASC|DESC;

SELECT * FROM Customers
ORDER BY Country;

For example, when we get all data from Customers table and sort it by Country with ascending, we write down code like this.

SELECT * FROM Customers
ORDER BY Country DESC;

And when we want to sort by Country with descending, add DESC keyword to last of sentence.

ORDER BY Several Columns Example

SELECT * FROM Customers
ORDER BY Country, CustomerName;

This sentence means sorted by Country at first, but when some data's Country value is same, then sort them with CustomerName.

SELECT * FROM Customers
ORDER BY Country ASC, CustomerName DESC;

This sentences means sorted ascending by the "Country" and descending by "CustomerName".

---

SQL INSERT INTO Statement

This statement is used to insert new records in a table.

Two ways to write the INSERT INTO

first way : specify both the column names and values to be inserted

INSERT INTO table_name (column1, column2, column3, ...)
VALUES (value1, value2, value3, ...);

second way : put value(s) to all columns of the table

But if we adding values for all the columns of the table, don't need to specify the column names in the SQL query. However, make sure the order of the values is the same order as the columns in the table.

INSERT INTO table_name
VALUES (value1, value2, value3, ...);

INSERT INTO Customers (CustomerName, ContactName, Address, City, PostalCode, Country)
VALUES ('Cardinal', 'Tom B. Erichsen', 'Skagen 21', 'Stavanger', '4006', 'Norway');

For example, Add values in Customer(...) to the column of VALUES(...)

INSERT INTO Customers (CustomerName, City, Country)
VALUES ('Cardinal', 'Stavanger', 'Norway');

When we want to put specific data in Customer table's specific columns, write query sentence like this.

---

SQL NULL Values

What is a NULL value?

A field with a NULL value is a field with no value. If a field in a table is optional, it is possible to insert a new record or update a record without adding a vlaue to this field. Then, the filed will be saved with a NULL value

How to Test for NULL Values?

It is not possible to test for NULL values with comparison operator such as <, <>, <=, or else. We use IS NULL and IS NOT NULL operators instead.

SELECT column_names
FROM table_name
WHERE column_name IS NULL;

Example of IS NULL operator

SELECT column_names
FROM table_name
WHERE column_name IS NOT NULL;

And it is Example of IS NOT NULL operator

---

SQL UPDATE Statement

UPDATE statement is used to modify the existing records in a table.

UPDATE table_name
SET column1 = value1, column2 = value2, ...
WHERE condition;

Caution : When use UPDATE statement, careful with condition using WHERE. If there is no WHERE sentence, All of the table's data is updated with this UPDATE sentence.

UPDATE Customers
SET ContactName = 'Alfred Schmidt', City = 'Frankfurt'
WHERE CustomerID = 1;

---

SQL DELETE Statement

The DELETE statement is used to delete existing records in a table

DELETE FROM table_name WHERE condition;

If there is no condition in query sentence, all data from table is removed.

DELETE FROM table_name;

---

SQL LIKE Operator

The LIKE operator is used in a WHERE clause to search for a specified pattern in a column. There are two wildcards often used in conjunction with LIKE operator

• % : The percent sign represents zero, one, or multiple characters
• _: The underscore sign represents a single character

Example of using LIKE OPERATOR with '%' and '_' sign

Peculiarity, this LIKE operator can be used with NOT

SELECT * FROM Customers
WHERE CustomerName NOT LIKE 'a%';

This query sentence select all data, which CustomerName column is not started with 'a' from customers

---

일단은 LIKE 까지 공부를 했다. 다 보지 못했지만, 하면서 알아가면 되는 거라고 생각한다.

---

Sprint - SQL with MySQL

개발환경을 세팅하면서 겪은 오류들

MySQL 에서 root 계정 로그인이 되지 않을 때

ubuntu에서 mysql의 root계정이 로그인 안될때.

Sequel Pro 를 사용하는데 로그인이 되지 않을 때

MySQL 실습 환경 Sequel Pro 사용하여 만들기 (on Mac)

해당 블로그를 통해 mysql-native-password 로 변경해서 로그인한다.

Test Builds

그 다음에는 beta 버전을 설치한다. 맨 위에 나와있는 다운로드 링크를 누르면 됨.

• mysql 설치
• sequel pro 세팅

정규 시간 공부는 일단 이렇게 마무리해야겠다. Schema and Query Design 이라는 강의가 남아있는데, 강의 내용을 슥 훑어보니 해당 강의는 SQL 관련해서 조금 더 해 보고, JOIN 등도 실행해 본 뒤에 마저 공부를 해야겠다는 생각이 든다.

---

After Hours

socrative 를 풀어보는데, 생각보다 잘 되지 않는다. 특히 JOIN 에 대한 이해가 없어서 4번 문제 이후로는 진행이 어렵다. 그래서 JOIN 을 해 보고, 그 다음 Schema and Query Design 을 한 다음, 다시 도전해 볼 생각이다. 내일 checkpoint solution 전까지는 열려있다고 하니 천천히 공부하고 잘 풀어보자!

공부는 했는데, 나머지 공부하는 부분들은 별도의 notion 문서에 정리하였습니다.