Closed joey-ful closed 4 years ago
์ฌ๋๋ณ๋ก ์ ๋ฆฌํ๋๊น ๋ํํ๋ฆ์ด ๊ธฐ์ต๋๊ณ ์ข์ ๊ฒ ๊ฐ์์! ํ ํฌ์ธ๋ฏธ๋ ๋ด์ฉ ๋ฐฐ์น ๊ณ ๋ฏผ์ค์ด๋ผ๊ณ ํ์ จ๋๋ฐ dev log์์๋ ๊ฐ๋ตํ๊ฒ๋ง ์ ๋ฆฌํ๊ฑฐ๋ ๊ธธ๊ฒ ๋จ๊ธฐ๋ ค๋ฉด ์์ ๋ฐ๋ก ์ด์๋ฅผ ํ๋ ๊ฒ๋ ๊ด์ฐฎ์ ๊ฒ ๊ฐ์์! ๋ฌผ๋ก ์ง๊ธ ์ ๋ฆฌ๋ ๋งํผ๋ ์ข๊ตฌ์~!~!
๊น๋ํ๊ณ ๊ผผ๊ผผํ๊ฒ ์ ๋ฆฌํด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋น~!
ํด์ผํ ์ผ์ด ๋ง์ด ๋์์ด์!!
์ ์์ด ์ด๋ง์ด๋ง ํฉ๋๋ค ์ ๋ฆฌํด์ฃผ์ ์ ๊ฐ์ฌํด์! ์ฑ์๋, ๋ฏธํ๋ ํ ํฌ์ธ๋ฏธ๋๋ ๋๋ ์ข์์ต๋๋ค. ํ๋ก ํธ ๋น ์ดํ .
๐พ 1. Done
Taelee
Mihykim
๐พ 2. Learned
Mihykim
Global stylesheet can only be imported in _app.js file
Each component's stylesheet should be in 'module.css' filename extension
Importing specific libraries is recommended
Instead of importing material-ui/core
It is recommended to import specific libraries such as material-ui/core/icons
Secho
Mihykim Tech Seminar
Richard Stallman came up with the concept of Free Software
He campaigned for the free software movement that encouraged many peopel to edit the codes
However, the term "free" was misleading; people understood it as without payment while Stallman actually meant no restriction.
OSI(Open Source Initiative) was established in 1998
In 1997, Bruce Perens published a formal definition of Open Source.
Eric Raymond adopted the term Open Source and co-founded an official organization called OSI.
OSI promotes Open Source and provides criteria that users should meet including:
Free Redistribution
Include Source Code
Allow modifications and derived works
Distribution of modifications and derived works
Allow sales of modifications and derived works
Open Source is not free
There are 9 popular licenses and MIT is one of them
GPL is the strongest license that is recursively applied to every modifications and derived works.
If GPL source code is open, its modifications and derived works should open their source codes
This forced SONY to recall 40million DVDs and PlayStation3 to open its source codes.
Lately, licenses with less restrictions like MIT is more widely used than GPL
Such licences include LGPL, MIT, Apache and BSD
Commonly used Software tend to use these licenses
Things to remember
Copyright convention
Secho Tech Seminar
1. Our Project's sturcture
We use React, CSS, Express, NodeJS and MySQL
CRA(Create-React-App)
To see the view and data together, the data is brought through back server and front server's interaction
Taelee
: json type is JavaScript object notation, a document that every programming languages can understandresponse - fetch('/api/postst');
Taelee
: The line of code above tells React where to get information2. Traditional Server Side Rendering (SSR)
Taelee
: Regardless of using Next or React, the front server can either be static or dynamic3. Client Side Rendering (CSR)
Rendering occurs on client's browser
When a new page is requested, only the necessary data is transferred to create the page (Responsive)
Takes time to download all the resources in the beginning
React's SSR
Daelee
: Are gray screens on youtube displayed due to SSR?Taelee
: That is CSR. With SSR, white screen is displayed before the page pops upCSR vs SSR
![image-20200703155503731](/Users/jehong/Library/Application Support/typora-user-images/image-20200703155503731.png)
4. Next
Taelee
: In case of a Single Application, only the initial page loads with SSR. Since this process takes a while, Code Splitting is used to only render the necessary data on the pageMihykim
: "What is automatic page optimization?"Daelee
๐พ 3. Decided
Mihykim
๐พ 4. Thinking
Taelee
Trying to figure out if timeline, table and yearly calendar need a database each
mihykim
: More efficient to link the timeline and yearly's dataBack-end's top priority is to figure out how front-end will read data
Daelee
: This process is questionable since our front and back codes are contained in the same folderDatabase's data are not static. Database is on the server so the process of reading the server is necessary
Mihykim
: How to input data in the serverMySQL, installed in GCP, can export and import data
Back express can open the library called npm MySQL using query commands
If yebalja.com's front is not a server, it's another challenge to bring data to a static front
Mihykim
Installed the component library instead of the CDN (Content Delivery Network) method
Taelee
: Led to believe that it's better to install libraries because CDN is highly dependent on the speed of the InternetDaelee
: Was told that CDN is betterWhat is --save?
Taelee
: Heard that the --save option is used to firmly declare our usage. Verified that the library is listed under dependency with the --save option and under dev-dependency otherwise. However, this option seems unnecessary.Daelee
Mihykim
: Need to check if Yearly's unit can be changed from month to dayJehong
๐พ 5. To do.
front-end
back-end
๐พ 1. ๋ง๋ฌด๋ฆฌํ์ต๋๋ค.
Taelee
Mihykim
Jehong
๐พ 2. ๋ฐฐ์ ์ต๋๋ค.
Mihykim
์ ์ฒด library๋ฅผ ๋ถ๋ฌ์ค์ง ์๊ณ ํน์ library๋ฅผ ๋ถ๋ฌ์ค๋ ๊ฒ์ด ๊ถ์ฅ๋ฉ๋๋ค.
material-ui/core๋ฅผ importํ๊ธฐ๋ณด๋ค๋
material-ui/core/icons ์ ๊ฐ์ด ํ์ํ ๋ถ๋ถ๋ง ์ฐธ์กฐํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
Secho
Mihykim ํ ํฌ ์ธ๋ฏธ๋
Open Source ์ด์ ์ ๋ฆฌ์ฒ๋ ์คํจ๋ง์ด Free Software๋ผ๋ ๊ฐ๋ ์ ๊ณ ์ํ์ต๋๋ค.
1998๋ OSI(Open Source Initiative)๊ฐ ์ค๋ฆฝ๋์์ต๋๋ค
1997๋ ๋ธ๋ฃจ์ค ํ๋ ์ค๊ฐ ์ฒ์์ผ๋ก ์คํ์์ค๋ฅผ ์ ์ํ์ต๋๋ค
์๋ฆญ ๋ค์ด๋จผ๋๋ ํ๋ฆฌ ์ํํธ์จ์ด์ ์คํ์์ค ์ฉ์ด๋ฅผ ์ฑํํด OSI๋ผ๋ ๊ณต์ธ๋ ๊ธฐ๊ด์ ๋ง๋ค์์ต๋๋ค.
OSI๋ ์คํ ์์ค์ ์๋ฏธ์ OSI๊ฐ ์ถ๊ตฌํ๋ ๋ผ์ด์ผ์ค ์ฌ์ฉ ์กฐ๊ฑด๋ค์ ์ ์ํ๋ฉฐ ์ผ๋ถ๋ ์๋์ ๊ฐ์ต๋๋ค.
์๋ฌด ๋๊ฐ ์์ด ์ฌ๋ฐฐํฌ ๊ฐ๋ฅ
์์ค์ฝ๋ ์ ๊ทผ ๊ฐ๋ฅ
์์ค์ฝ๋ ์์ ๊ฐ๋ฅ
์์ ํ ์์ค์ฝ๋ ๋ฐฐํฌ ๊ฐ๋ฅ
์์ ํ ์์ค์ฝ๋ ์์ ์ ํ๋งค๋ ๊ฐ๋ฅ
์คํ์์ค๋ ๋ฌด๋ฃ๊ฐ ์๋๋๋ค
๋ผ์ด์ผ์ค ์ข ๋ฅ๋ ์์ฃผ ์ฌ์ฉ๋๋ ๊ฒ์ด 9๊ฐ๊ฐ ์์ผ๋ฉฐ ๊ทธ ์ค MIT๋ ํฌํจ๋์ด์์ต๋๋ค.
GPL์ ๊ฐ์ฅ ๊ฐ๋ ฅํ ๋ผ์ด์ผ์ค๋ก ์ฌ๊ท์ GPL์ด ์ ์ฉ๋ฉ๋๋ค.
GPL ์์ค์ฝ๋๊ฐ ๊ณต๊ฐ๋ผ๋ฉด ํด๋น ์ฝ๋๋ฅผ ์ฌ์ฉํ ํ๋ก๊ทธ๋จ๋ค๋ ๊ฐ์ ๋ก ์ฝ๋๋ฅผ ๊ณต๊ฐํด์ผํฉ๋๋ค.
์ด ๋๋ฌธ์ SONY๋ DVD 4์ฒ๋ง์ฅ์ ๋ฆฌ์ฝํ ์ ๋ ์๊ณ ํ๋ ์ด์คํ ์ด์ 3์ ๊ฐ์ ๋ก ์์ค๋ฅผ ๊ณต๊ฐํ๊ธฐ๋ ํ์ต๋๋ค.
์ต๊ทผ์๋ GPL์ ๊ธฐํผํ๊ณ MIT์ ๊ฐ์ ์ฝํ ๋ผ์ด์ผ์ค ์ฌ์ฉ์ด ๋์ด๋๊ณ ์์ต๋๋ค.
์ฝ๊ฐ ๋ผ์ด์ผ์ค๋ LGPL, MIT, Apache, BSD ๋ฑ์ด ์์ต๋๋ค.
๊ณตํต์ ์ผ๋ก ๋ค์ด๊ฐ๊ฒ ๋๋ ์ํํธ์จ์ด๋ ์ฝํ ๋ผ์ด์ผ์ค๋ฅผ ์ฌ์ฉํ๋ค๊ณ ํฉ๋๋ค.
์ด๊ฒ๋ง์ ์๊ณ ๊ฐ์!
ํธํฐ์ ๋ค์ด๊ฐ๋ ์ ์๊ถ ํ์
Secho ํ ํฌ์ธ๋ฏธ๋
1. ์ฐ๋ฆฌ ํ๋ก์ ํธ์ ๊ตฌ์กฐ
๋ฆฌ์กํธ, CSS, Express, NodeJS, Mysql์ ์ฌ์ฉํฉ๋๋ค
CRA(Create-React-App) ๋ฐฉ์
๋ทฐ๋ ๋ฐ์ดํ๋ฅผ ๊ฐ์ด ๋ณด๋ ค๋ฉด ๋ฐฑ์๋์์ ์ง์ ๋ฐ์ดํ๋ ์ฐ๋ํด์ ํ๋ก ํธ๋ ํต์ ํด์ ๋ฐ์์ต๋๋ค.
Taelee
: JavaScript object notation ์ผ๋ก ์ธ์ด๋ง๋ค ํ์์ด ๋ค๋ฅด๋๊น ์ธ์ด๋ผ๋ฆฌ ์ ๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ์ ๋ ์ฐ๋ notation์ ์ด์ฉํด์ ์์ฑํ ๋ฌธ์์ ๋๋ค.response - fetch('/api/postst');
Taelee
: ์ด ํ ์ค์ด ๋ฆฌ์กํธ์๊ฒ ์ ๋ณด๋ฅผ ์ด๋์ ์ป์์ง ์๋ ค์ฃผ๋ ๊ฒ์ ๋๋ค2. ์ ํต์ ์ธ ์๋ฒ์ฌ์ด๋ ๋๋๋ง SSR
๋๋๋ง๋๋ ์ฃผ์ฒด๊ฐ ์๋ฒ
Taelee
: ๋ฅ์คํธ๋ ๋ฆฌ์กํธ๋ ์ ์ ์ผ ์๋ ์๋ ์๋ ์์ต๋๋ค.3. ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋๋๋ง CSR
๋๋๋ง๋๋ ์ฃผ์ฒด๊ฐ ํด๋ผ์ด์ธํธ
์๋ก์ด ํ์ด์ง๋ฅผ ์์ฒญํ ๋ ํ์ํ ๋ฐ์ดํ๋ง์ ์ ๋ฌ๋ฐ์ ํ์ด์ง๋ฅผ ๋ง๋ค๊ธฐ๋ ํฉ๋๋ค (๋ฐ์ํ)
์ ์ฒด์ ์ธ ํธ๋ํฝ์ ๊ฐ์
์ฒ์์ ๋ชจ๋ ๋ฆฌ์์ค๋ฅผ ๋ค์ด๋ฐ๊ธฐ ์ํด์๋ ์๊ฐ์ด ๊ฑธ๋ฆฝ๋๋ค.
js๋ฅผ ๋ฐ์์ ํด์ํ๊ธฐ๊น์ง ๋๊ธฐ์๊ฐ ํ์
๋ฆฌ์กํธ์ ์๋ฒ์ฌ์ด๋๋๋๋ง
Daelee
: ์ ํฌ๋ธ ๋ค์ด๊ฐ๋ฉด ์์ ๋จ๊ธฐ ์ ์ ํ์ ๋จ๋ ๊ฒ๋ ์๋ฒ์ฌ์ด๋๋๋๋ง์ธ๊ฐ์?Taelee
: ๊ทธ๊ฒ์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ๋๋๋งํ๋ ์ค์ ๋๋ค. ์๋ฒ์ฌ์ด๋๋๋๋ง์ ํฐ ํ๋ฉด์ด๋ค๊ฐ ๊ฐ์๊ธฐ ๋น๋๋คCSR๊ณผ SSR ๋น๊ต
![image-20200703155503731](/Users/jehong/Library/Application Support/typora-user-images/image-20200703155503731.png)
4. Next
Taelee
: ์ฑ๊ธํ์ด์ง ์ดํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ์ฒซ ํ์ด์ง๋ง SSR๋ด์ฉ์ ๋ค ๊ฐ์ ธ์ค๋๋ฐ ๊ทธ ๊ณผ์ ์ด ๋๋ฆฌ๊ธฐ ๋๋ฌธ์ ํ์ํ ํ์ด์ง์ ๋ํ ์ฝ๋๋ง ๋ฝ์์ ๋๋๋งํฉ๋๋ค ๊ทธ๊ฒ์ ์ฝ๋ ์คํ๋ฆฌํ ์ด๋ผ๊ณ ํฉ๋๋ค.Mihykim
: "ํ์ด์ง๋ฅผ ์๋์ผ๋ก ์ต์ ํ๋ ๋ฌด์์ธ๊ฐ์?Daelee
๐พ 3. ๊ฒฐ์ ํ์ต๋๋ค.
Mihykim
๐พ 4. ๊ณ ๋ฏผ์ ๋๋ค.
Taelee
์์ธํ์๋ผ์ธ, ๋น๊ตํ, ์ฐ๊ฐ, ์์ธํ์ด์ง ๋ฑ๋ฑ ๋๋น๋ฅผ ๋ค ๋ฐ๋ก ๋ง๋ค์ด์ผ ํ ์ง ๊ณ ๋ฏผ์ ๋๋ค.
mihykim
: ํ ์ด๋ธ์ ๋ฐ๋ก, ํ์๋ผ์ธ๊ณผ ์ฐ๊ฐ ๋ฑ์ ๋ฐ์ดํ๊ฐ ์ฐ๊ณ๋๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.๋ฐฑ์๋์์ ์ฐ์ ์ ์ผ๋ก ํด์ผํ ์ผ์ ๋ฐ์ดํฐ๋ฅผ ํ๋ก ํธ์์ ์ฝ์ ๋ฐฉ์์ ๊ณ ๋ฏผํ๋ ๊ฒ์ ๋๋ค.
Daelee
: ์ฐ๋ฆฌ ์๋ฃ๋ ์ด์ฐจํผ ํ ํด๋์ ์์ง ์๋์?๋๋น์ ์ ๋ณด๋ ์ ์ ์ด ์๋๋ผ์ ์๋ฒ์ ์๊ธฐ ๋๋ฌธ์ ์๋ฒ๋ฅผ ์ฝ๋ ๊ณผ์ ์ด ํ์ํฉ๋๋ค. ๋ฐ์ดํ๊ฐ ์๋ฒ์ ์์ต๋๋ค.
Mihykim
: ์๋ฒ์ ๋ฐ์ดํ๋ ์ด๋ป๊ฒ ๋ค์ด๊ฐ๋์?GCP์ mysql์ด ๊น๋ ค์์ด์ ๋ฐ์ดํ๋ฅผ export/import ํฉ๋๋ค.
Back express๊ฐ npm mysql์ด๋ผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ query๋ฌธ์ผ๋ก ์ด์ด๋ณผ ์ ์์ต๋๋ค.
์ฐ๋ฆฌ yebalja.com์ ํ๋ก ํธ๊ฐ ์๋ฒ๊ฐ ์๋๋ผ๋ฉด ์๋ฃ๋ฅผ ์ด๋ป๊ฒ ๊ฐ์ ธ์ฌ์ง ๊ณ ๋ฏผํด๋ด์ผํฉ๋๋ค
Mihykim
CDN (Content Delivery Network) ๋ฐฉ์ ๋ง๊ณ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ธ์คํจ ํ์ต๋๋ค
Taelee
: CDN์ ์ธํฐ๋ท ์๋์ ์ข์ง์ฐ์ง๋ผ์ ์ค์นํ๋ ๊ฒ์ด ์ข๋ค๊ณ ๋ค์์ต๋๋ค.Daelee
: CDN์ผ๋ก ๊ฐ์ ธ์ค๋ ๊ฒ์ด ์ข๋ค๊ณ ๋ค์์ต๋๋ค--save ์ต์ ์ด ๋ฌด์์ธ์ง ๊ถ๊ธํฉ๋๋ค.
Taelee
: ์ฌ์ฉํ๋ค๋ ๊ฒ์ ๋ช ํํ๊ฒ ํํํ๊ณ ์ถ์ ๋ --save ์ต์ ์ ์ ์ฉํด์ค๋ค๊ณ ๋ค์์ต๋๋ค. ํด๋น ์ต์ ์ ์จ์ฃผ๋ฉด dependency์ ์ถ๊ฐ๋๊ณ ์ ์ฐ๋ฉด dev dependency์ ์ถ๊ฐ๋๋ ๊ฒ์ ํ์ธํ์ต๋๋ค. ํ์ง๋ง ์ต๊ทผ์๋ ์ฌ์ฉํด๋ ์ฌ์ฉํ์ง ์์๋ ์๊ด์๋ค๊ณ ๋ค์์ต๋๋ค.Daelee
Mihykim
: ์ฐ๊ฐ์ ์ต์ ๋จ์๊ฐ month์ธ๋ฐ day๋จ์๋ก ํ ์ ์๋์ง ํ์ธํด๋ด์ผํฉ๋๋คJehong
๐พ 5. ํ ์ผ์ด ์์ต๋๋ค.
front-end
back-end