Rosy's Artificial Intelligence Blog

[JAVA, JAVASCRIPT, PYTHON] Call by .....

RosyPark — Tue, 6 Sep 2022 15:08:26 +0900

call by ..??

평가 전략(Evaluation Strategy)은 프로그래밍 언어에서 함수 호출의 아규먼트(argument)의 순서를 언제 결정하고 함수에 어떤 종류의 값을 통과시킬지 결정하는 것.

(참고)

- 아규먼트란? 전달값, 전달인자, 여기서 int a, int b를 의미

public void change(int a, int b){
	...
}

1. 값에 의한 호출(Call by value)

- 함수를 호출시 단순히 값을 전달하는 형태의 함수 호출

- JAVA의 경우 call by value

arguments로 값이 넘어온다.
값이 넘어올 때 복사된 값이 넘어온다.
caller(호출하는 녀석)가 인자를 복사해서 넘겨줬으므로 callee(호출당한 녀석)에서 변경하여도 caller는 영향을 받지 않는다.
원본의 내용을 함수 내부에서 변경하는 것이 불가능하다.

public void change(int a, int b){
    System.out.println(System.identityHashCode(a)); // 969692468
    System.out.println(System.identityHashCode(b));  // 152018490
    a = 11;
    b = 12; 
    System.out.println(System.identityHashCode(a)); //398844024
    System.out.println(System.identityHashCode(b)); // 1006146619
    System.out.println(a); // 11
    System.out.println(b); // 12
}

public static void main(String[] args) {
    int a = 1;
    int b = 2;
    System.out.println(System.identityHashCode(a)); // 969692468
    System.out.println(System.identityHashCode(b)); // 152018490
    change(a,b);
    System.out.println(a); // 1
    System.out.println(b); // 2 
    return true;
}

2. 참조에 의한 호출(Call by reference)

- 메모리의 접근에 사용되는 주소값을 전달하는 형태의 함수 호출

- C++

arguments로 **reference(값에 대한 참조 주소, 메모리 주소를 담고있는 변수)**를 넘겨준다.
reference를 넘기다 보니 해당 reference가 가리기는 값을 복사하지는 않는다.
caller(호출하는 녀석)가 인자를 복사해서 넘기지 않았으므로 callee(호출당한 녀석)에서 변경하면 caller는 영향을 받는다.
원본의 내용을 함수 내부에서 변경하는 것이 가능하다.

3. Call by Object

- Python

- Call by Value, Call by Reference가 아닌 Call by Object 즉, 객체 참조(Object Reference) 에 의한 호출을 의미한다.

def change(a,b):
    a = 11
    b = 12
    print(f"a:{a}, b:{b}") #a:11, b:12
    print(f"a.id:{id(a)}, b.id:{id(b)}") #a.id:140316426895920, b.id:140316426895952

a = 1
b = 2
print(f"a.id:{id(a)}, b.id:{id(b)}") # a.id:140316426895600, b.id:140316426895632
change(a,b);

4. Call by Sharing

- javascript의 경우

- 함수에 문자열, 숫자 등의 기본 형태의 인자를 넘기면 값을 복사한 지역변수로 사용

- 함수에 객체 형태의 인자를 넘기면 속성은 공유하지만, 새로 객체를 할당할 수는 없음

- call by sharing is a hybrid of the “call by value” and “call by reference” evaluation strategies that are implemented by other languages.

var change = function(a,obj1, obj2){
    a = 10;
    obj1.item = "changed";
    obj2 = {item : "changed"};
}

let a = 1;
let obj1 = {item : "unchanged"};
let obj2 = {item : "unchanged"}; 
change(a, obj1, obj2)
console.log(a); // 1
console.log(obj1); // { item: 'changed' }
console.log(obj2); //  { item: 'unchanged' }

함수의 호출 방식

코딩언어마다 immutable(불변)인지, mutable(가변)인지 확인을 잘 하여 코딩을 해야한다. 할당되는것에 따라 달라지기 떄문이다.

- mutable(가변)객체를 넘기면 call by reference, 리스트와 딕셔너리는 변경이 가능하다.

- immutable(불변)객체를 넘기면 call by value

	python	javascript
가변(mutable)	list, set, dict	array, object, function RefExp, Map ...
불변(immutable)	int, float, bool, tuple, string, unicode	Number, String, Boolean, Symbol, null, undefined 불변을 유지하기 위해? spread연산자, immer라이브러리 사용

Python 주소값 참조

값 복사

- 1차원 곱하기는 참조가 복사되지 않고 다른 주소값으로 만들어진다

b = [False] * 3  # False 를 10개 만든것
print(b); #[False, False, False]

b[0] = True;
print(b) #[True, False, False]

- 하지만 2차원 리스트의 경우 리스트는 참조로 복사되어 a[0][0] = True로 값을 변경하면 a[0][0], a[1][0], a[2][0] 값이 다 똑같이 변하여 동일한 값을 가짐을 알 수 있다. * 주의해서 list를 만들어야 한다.

a = [[False] * 3] * 3  #"동일한" 리스트를 10개 만든것
print(a);  # [[False, False, False], [False, False, False], [False, False, False]]

a[0][0] = True;
print(a) #[[True, False, False], [True, False, False], [True, False, False]]

이를 방지하기 위해서 list comprehension을 사용해서 데이터를 만들어야 한다.

list comprehension으로 만들면 값이 살아 있다.

a = [[False for _ in range(3)] for _ in range(3)] # 다른 리스트를 10개 만든것 주소값을 다른 것으로 만든것
a[0][0] = True
print(a) #[[True, False, False], [False, False, False], [False, False, False]]

출처

1. https://perfectacle.github.io/2017/10/30/js-014-call-by-value-vs-call-by-reference/

(자알쓰) call by value vs call by reference

자알쓰란?자바스크립트 알고 쓰자. (잘 쓰자는 의미도 담겨있다.)자바스크립트라는 언어 자체는 내 기준에서는 설계 상 미스가 참 많다.함수 단위의 스코프, 호이스팅, 동적 타입 등등자바와 같

perfectacle.github.io

2.https://www.pymoon.com/entry/Python-%EC%9D%80-callbyvalue-%EC%9D%BC%EA%B9%8C-callbyreference-%EC%9D%BC%EA%B9%8C

Python 은 call-by-value 일까 call-by-reference 일까

파이썬 call-by-value 일까 call-by-reference 일까 (Python call by value vs call by reference) 결론부터 말하자면 passed by assignment 라고 한다. 즉, 어떤 값을 전달하느냐에 따라 달라지는 것이다. 파이..

www.pymoon.com

3. http://milooy.github.io/TIL/JavaScript/call-by-sharing.html

4. https://bambielli.com/til/2016-02-15-javascript-call-by-sharing/#:~:text=TIL%20that%20there%20is%20a,are%20implemented%20by%20other%20languages.

[React] 제어 컴포넌트& 비제어 컴포넌트 (controlled components & Uncontrolled Components )

RosyPark — Fri, 2 Sep 2022 16:04:07 +0900

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작

사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행

제어 컴포넌트 (Controlled Component)

<input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트

React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트

<input>

1. type = "text"

<input type="text" value={txtValue} onChange={(e) => { setTxtValue(e.target.value); }} />

cf) defaultValue <- Uncontrolled Components

<input type="text" defaultValue={"example"} />

2. checkbox

<input type = "checkbox" checked = {checkValue} onChange = {(e) => setCheckValue(e.target.checked)} />

cf) defaultValue?

Likewise, <input type="checkbox"> and <input type="radio"> support defaultChecked, and <select> and <textarea> supports defaultValue.

3. radio

2.1 radio (two)

<input type="radio" name="radio1" checked={checkRadio} onChange={(e) => setCheckRadio(true)} />
<input type="radio" name="radio1" checked={!checkRadio} onChange={(e) => setCheckRadio(false)} />

3.2. radio (more than three)

 {radioTxt.map((radioTxt, index) => (
      <div key={index}>
        <input
          id={"radio_" + (index + 1)}
          type="radio"
          name="radio"
          defaultChecked={radioValue}
          onChange={() => setRadioValue(radioTxt)}
        />
      </div>
    ))

<textarea type="text" maxLength={50} value={txtAreaValue} onChange={(e) => { setTxtAreaValue(e.target.value); }} />

비제어 컴포넌트 (Controlled Component)

대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋음

대안인 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어짐

1. <input type = "text" >의 defaultValue

<input type="text" defaultValue={"example"} />

2. <input type = "file">

<input type="file" ref={fileInput} />

전체코드는 여기에

출처

1. https://ko.reactjs.org/docs/forms.html

2. https://ko.reactjs.org/docs/uncontrolled-components.html

[HTML] HTML 기본 코드/요소

RosyPark — Fri, 2 Sep 2022 15:36:31 +0900

HTML

- html을 잘 알아볼려면 무슨 사이트 참조? Mozilla 사이트 참조

- HTML(HyperText Markup Language)

HTML 문서 기본 태그

<!DOCTYPE html> ~ </html>

- 현재 문서가 HTML5 언어로 작성된 웹 문서

- 웹 문서의 시작과 끝을 나타내는 태그

- character set은 utf-8 사용, 현존하는 언어를 지원해줌

- 전체 화면들을 보여주는 것

- 웹 브라우저가 웹 문서를 해석하기 위해 필요한정보들을 입력하는 부분

- 실제 문서 내용이 아니기 때문에, 문서 제목만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 표시되지 않음

- 스타일 및 스크립트 등이 포함됨

- 실제로 웹 브라우저 화면에 나타날 내용 = 사용자에게 보여지는 태그들을 의미

- 대부분의 코드는 HTML 태그들은 <body> 태그안에 들어감

HTML Element Reference

- Element Reference 링크

HTML Error 판독해주는 사이트

- validator 사이트

- url or file upload , direct로 input하여 판명할 수 도 있음

Document and website structure

- website structure

- 웹사이트를 만들때 어떤식으로 만들어야 할지 나타내는 것

- 웹사이트에는 header / nav / aside / main / footer을 크게 나누어서 만듦

- html에서 추천하는 방법 section tag를 사용해서 하는 것이 좋음

about:blank

header - 머리말을 나타내는 요소

nav - 메뉴 부분을 나타내는 요소

article - 개별 콘텐츠를 나타내는 요소

section - 제목별로 나눌 수 있는 요소

aside - 좌우측의 사이드바를 나타내는 요소

footer - 제작자의 정보나 저작권의 정보를 나타내는 요소

Box & Item

Box	Item
- header - footer - nav - aside - main - section - article - div - span - form	- a - button - input - label - img - video - audio - map - canvas - table

Block과 Inline의 차이

- Inline 태그는 공간이 허용되면 다른 태그가 됨

Tag & Element

- <p></p> => Tag

- My Cat is very grumpy => Content

- <p> My Cat is very Grumpy </p> => Element

<p> My Cat is very grumpy </p>

Attributes

<p class = "editor-note"> My Cat is very grumpy </p>

Tag 종류

(1) h1 / button

  <!--Box vs Item --> 
  <header> </header>
  <footer> </footer> 
  <section> </section>
  <div> </div>
  <span> </span>
  <h1>로지의 블로그</h1> 
  <button> html 버튼입니다. </button>

(2) a 태그

  <!--a -->
  <a href = "https://google.com" target = _black>click</a>

- Mozilla WebSite에 가면 Target에 관한 tag 정보들을 알 수 있음.. 새로운 창에 열것인가? 등등

- 하이퍼링크를 걸어주는 태그

(3) Block vs Inline

- block? 한줄을 점유하고, 다음 태그는 무조건 줄바꿈 적용. 대표적 tag) <div></div>

- inline? text 크기만큼 공간을 점유하고 줄바꿈을 하지 않음. 대표적 tag) <b></b> , <span></span>

- inline-block? inline 속성의 특징과 block 속성 특징 , 기본적인 특징은 inline 속성과 비슷한데 inline에서 할 수 없었던 width/height 변경 및 line-height를 custom 적용할 수 있음

- <p> </p> -> 문단을 정의할 때 사용

  <p> This is a sentence. <b>That</b> is ..</p> 
  <p> This is a sentence. <span>That</span> is ..</p>
  <p> This is a sentence. <div> That</div> is ..</p>

(4) <ol> <ul>

태그	설명
<ul> <li> 내용 </li> <li> 내용 </li> </ul>	순서없는 목록 만들기
<ol> <li> 내용 </li> <li> 내용 </li> </ol>	순서있는 목록 만들기

- ol>li*3 -> Tab키? 자동생성

   <ol>
     <li></li>
     <li></li>
     <li></li>
   </ol>
   
  <ol>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ol>
  <br>
  <ul>
     <li>안녕하세요</li>
     <li>감사합니다</li>
     <li>또 만나요</li>
   </ul>

(5) Input

- 공식문서

- developer.mozilla.org/en-US/docs/Web/HTML/Element/input

- label이나 input은 Inline Element 둘 다 한줄에 동시에 표기

- id에 고유한 id를 설정해줌

- label의 for과 input의 id를 똑같이 해줌

<1> type = "text"

  <!-- Input --> 
  <label for = "input_name">Name : </label>
  <input id = "input_name" type = "text">

<2> type = "file"

  <!-- Input --> 
  <label for = "input_name">Name : </label>
  <input id = "input_name" type = "file">

<3> type = "password"

  <!-- Input --> 
  <label for = "inputName">Password : </label>
  <input id = "inputName" type = "password">

<4> type = "radio"

example1 -> 일반 javascript

example2 -> jsx를 사용하는 React

(6) span

- 내용이 있어야지 표기가 됨

- <div></div> 태그처럼 특별한 기능을 갖고있지 않고, CSS와 함께 쓰임

- display 속성이 block이 아닌, inline이라는 점

(7) i

- icon Tag

- icon Site

(8) Table

테이블 구성 요소

- <table> : 테이블을 만드는 태그

- <th> : 테이블의 헤더 부분을 만드는 태그

- <tr> : 테이블의 행을 만드는 태그

- <td> : 테이블의 열을 만드는 태그

<1> 테이블 사용법

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Js Bin</title>
</head>
<body>
  <label>
    <span>예제 입니다.</span> <i> 예제 </i>
  </label> 
     <div>
      <table>
         <colgroup>
         <col width = "30%"/>
         <col width = "70%"/>
       </colgroup>
       <tbody>
       <tr>
           <th> 제품명 </th>
           <td> <input type = "text" "file" placeholder = "입력하세요" /> </td>
       </tr>
        <tr>
           <th> 파일 선택</th>
           <td> <input type =file /> </td>
       </tr>
       <tr>
           <th> Button </th>
           <td> <button type = "button"/> 버튼입니다</td>
       </tr>
        <tr>
           <th> Text Area</th>
           <td> <textarea type = "text"/> </td>
       </tr>
      </tbody>
  </table> 
  </div>
</body>
</html>

<2> 테이블 사용법

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Js Bin</title>
</head>
<body>
     <div>
      <table>
         <colgroup>
         <col width = "20%"/>
         <col width = "10%"/>
         <col width = "10%"/>
         <col width = "25%"/>  
         <col width = "25%"/> 
       </colgroup>
       <tbody>
       <tr>
           <th> A (숫자 양수만 입력가능) </th>
           <td> <input type = "checkbox" /> </td>
           <td> <input type = "number"  min="0" max="99999" /> </td>
           <td> </td>
       </tr>
       <tr>
           <th rowsspan ="3" align = "center"> B </th>
           <td> <input type = "checkbox" /> </td>
           <td> <input type = "number" /> </td>
           <td> </td>
       </tr>
       <tr>
           <td> </td>
           <td> </td>
           <td> 예제 1 </td>
           <td> <input type = "checkbox" /></td>
       </tr>
        <tr>
           <td> </td>
           <td> </td>
           <td> 예제 2 </td>
           <td> <input type = "checkbox" /></td>
       </tr>
       <tr>
           <td> </td>
           <td> </td>
           <td> 예제 3 </td>
           <td> <input type = "checkbox" /></td>
       </tr>
       <tr>
           <td> </td>
           <td> </td>
           <td> 예제 4 </td>
           <td> <input type = "checkbox" /></td>
           <td> <span>글자를 사용합니다  </span> </td>
       </tr>  
       <tr>
           <th> C (숫자 text를 사용하여) </th>
           <td> <input type = "checkbox"  /> </td>
           <td> <input type = "text" pattern = "[0-9]+" /> </td>
           <td> </td>
       </tr>
       <tr>
           <th> D (글자 수 제한) </th>
           <td> <input type = "checkbox"  /> </td>
           <td> <input type = "text" maxlength="5"/> </td>
           <td> </td>
       </tr>       
      </tbody>
  </table> 
  </div>
</body>
</html>

텍스트 관련 링크

태그	설명	예시
<hn> ~ </hn>	제목 텍스트 heading, <h1> , ... , <h6> Heading을 나타내줌
<p> ~ </p>	텍스트를 표시할 떄 사용 paragraph
<br>	break 줄바꾸기
<hr>	horizontal 수평줄 삽입
<pre>	preformat 입력하는 그대로 화면에 표시하기
<blockquote> ~ </blockquote>	인용넣기
<strong> ~</strong>
<b> ~ </b>
<em> ~ </em>
<i> ~ </i>
<q> ~ </q>
<mark> ~ </mark>

이미지관련 링크

폼관련 링크

Form요소란?

1. 시맨틱 태그란?

2. 시맨틱 태그로 레이아웃을 만들어야 하는 이유

3. 시맨틱 태그 종류

4. HTML 시맨틱 태그로 웹 표준에 맞는 문서 만들기

<출처>

1. 엘리 드림 코딩

[JAVA] IntelliJ 설정과 빌드도구(Maven, Gradle)

RosyPark — Tue, 9 Aug 2022 18:39:34 +0900

Eclipse와 IntelliJ의 차이

eclipse => workspace 기준

IntelliJ => Project 그룹 기반

IntelliJ Maven 프로젝트로 변경

(1) Maven이란?

프로젝트를 위해 작성한 Java코드나 여러 자원들(.xml, .jar, .properties)를 JVM이나 톰캣같은 WAS가 인식할 수 있도록 할 수 있는 과정 및 결과물

Apache사에서 만든 build tool

pom.xml 파일을 통해 정형화된 빌드 시스템으로 프로젝트 관리를 해줌

정해진 Life Cycle을 통해 Project를 빌드함

* (참조) 빌드도구란?

- 소스코드에서 어플리케이션 생성을 자동화 하기위한 프로그램

- 코드를 사용하거나 실행 가능한 형태로 compiling, linking, packaging 하는것을 포함

- 빌드자동화? 정형화된 다양한 작업을 스크립팅하거나 자동화하는 행위 (종속성 다운로드, 소스코드를 바이너리코드로 컴파일, 바이너리 코드를 패키징, 테스트 실행, 프로덕션 시스템에 배포)

* 빌드도구의 역사

1세대 Make

2세대 Ant - 범용성 높임 , JAVA + XML 도입

3세대 Maven - 작성 효율 높임, 빌드 생명주기, 프로젝트 객체모델(POM) 개념도입

4세대 Gradle - 스크립트 언어로 유연성 증대, Maven 보다 빠름, 다른 빌드도구와 호환가능

(2) 변경 방법

Maven 프로젝트로 변경시 pom.xml이 자동적으로 생성

maven Module 추가 하는 방법

1. 마우스 오른쪽 클릭 -> New -> Module

2. Maven -> Create from archetype 추가

Create From Archetype란? Create From Archetype의 리스트들은 Maven이 미리 만들어놓은 프로젝트

-> maven-archetype-quickstart 선택

3. 다양한 구성 요소 선택 가능

4. 이러한 구조로 JAVA 파일 생성 가능

5. 빨간줄이 뜰때? Add Maven Dependency

- 업데이트 되지 않을 수도 있으니 업데이트도 필요

- 다운로드 가능

- 출처

일반 Java프로젝트로 생성된 프로젝트를 maven프로젝트로 변경

- 변경하고 Maven 프로젝트로 바꿀때 기존의 "src" 폴더는 지워줌

-> https://ifuwanna.tistory.com/298 [IfUwanna IT]

IntelliJ에서 Lombok

- Lombok이란? Java에서 반복적으로 작성되는 getters/settes, toString, 생성자 관련 코드 소스들을 간결하게 만들어주는 라이브러리

- pom.xml에서 dependencies안에 mvnrepository에서 찾은 <dependency>를 넣어주면됨

  <dependencies>
   <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.20</version>
        <scope>provided</scope>
    </dependency>
  </dependencies>

IntelliJ에서 Json 사용하기

IntelliJ에서 Json 사용하기 -> https://m.blog.naver.com/sssang97/221692323514

IntelliJ에서 jar 파일 추가하기

1. 원하는 jar 파일 구하기

2. File -> Project Structure

3. Project Settings -> Modules -> Dependencies -> + 버튼 클릭후 jar 파일 추가

IntelliJ에서 언어 팩 바꾸기

한국어 -> 영어로 변경하기

1. 설정 -> 플러그인에 들어가서 한국어 언어팩 삭제

IntelliJ 단축키

1. Command + Option + L : 소스코드 정렬

2. ctrl + F (검색) / ctrl + R (단어 바꾸기)

3. Shift 두번 파일이나 디렉토리나 객체, 클레스 등 찾아줌

cf) 전체 찾기 ctrl + shift + F

4. shift + delete 한줄 지우기

5. ctrl + Tab tab이동

7. ctrl + shift + 키워드 전체 찾기

8. 같은 단어키 찾기 Alt + J

IntelliJ 프론트 & 서버 동시 진행 방법

Edit Configuration클릭 -> Compount 추가 -> 해당 Front와 SpringBoot 추가

(출처) Intellij 스프링 부트와 npm 커맨드 함께 실행하기

출처: https://kkotkkio.tistory.com/65 [KKOTKKIO'S CAVE:티스토리]

유용한글

-> [IntelliJ] Spring Web MVC 프로젝트 생성 및 세팅 - XML 설정 사용

출처

1.https://velog.io/@changyeonyoo/Maven-%EC%9D%B4%EB%9E%80

[React] Webpack 실습

RosyPark — Thu, 30 Jun 2022 08:58:35 +0900

Webpack? (Review)

자바스크립트, HTML, CSS, 이미지와 같은 여러개의 assets (js, css,png,jpg 등)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러로 의존성이 있는 모듈을 취하여 해당모듈을 대표하는 정적 자산들을 생성

프로젝트 상단에 webpack.config.js만들기

webpack 번들링하는방법 2가지

옵션	설명
--mode	웹팩 실행모드, 현 포스팅에서는 개발버전인 dev or development를 지정
--entry	엔트리 포인트(시작점) 경로를 지정
--output	번들링한 하나의 결과물이 위치하는 경로

1) webpack.config.js파일을 사용하여 번들 설정 관리하기

webpack.config.js

const path = require("path");
module.exports = {
  mode : 'development',
  entry: {
    main: "./src/app.js"
  },
  output: {
    filename: "[name].js", 
    path: path.resolve("./dist")
  }
};

module.exports 내 설정

context : webpack이 번들 빌드를 시작하는곳, context는 엔트리 파일을 포함하는 디렉터리에 대한 절대경로

name : webpack 이름

mode : development

entry : 입력파일 // 파일목록 적기

module : Loader 설정

plugins : 추가 작업 설정

output : 출력 파일

mode : 개발/운영 선택

-> 순서대로 입력파일을 받아서 module(Loader)과 plugins을 적용하여 output을 만든다음 개발 혹은 운영에 배포함

Development와 production의 빌드

Development환경? 강력한 소스매핑, 라이브 리로딩, hot module replacement

Production? 로드 시간을 줄이기 위해 번들 최소화, 가벼운 소스맵 및 애셋 최적화 초점

Production & Development 중복 설정하기 위해 "공통"설정 필요 --> webpack-merge

$ npm install --save-dev webpack-merge

webpack.common.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     app: './src/index.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Production',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

webpack.dev.js

 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
     static: './dist',
   },
 });

webpack.prod.js

 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');

 module.exports = merge(common, {
   mode: 'production',
 });

package.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

npm script를 등록할때 노드 모듈의 명령어를 쓰지않고 webpack만 설정해도 프로그램에 있는 노드 모듈만 사용해도 찾음. 기본 config 파일인 webpack.config.js를 사용함.

webpack은 시작점을 찾아서 하나의 파일로 번들링해줌

2) 매번 옵션으로 관리하기

src/app.js

import * as math from './math.js';
math.sum(1,2);

src/math.js

export function sum(a,b){return a+b;}

$ node_modules\.bin\webpack --mode development --entry .\src\app.js --output-path dist

Hash: b8db1036b79d90b2e7cd
Version: webpack 4.46.0
Time: 52ms
Built at: 2021. 12. 30. 오후 2:50:29
  Asset     Size  Chunks             Chunk Names
main.js  4.8 KiB    main  [emitted]  main
Entrypoint main = main.js
[0] multi ./src/app.js 28 bytes {main} [built]
[./src/app.js] 50 bytes {main} [built]
[./src/math.js] 39 bytes {main} [built]

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src = "./src/app.js"></script>
</body>
</html>

-> 변화 모든 브라우저에서 다 돌아감

<script src = "./dist/main.js"></script>

webpack help

$ node_modules\.bin\webpack --help

출처

1. https://webpack.kr/guides/production/

[React] Webpack이란?

RosyPark — Thu, 30 Jun 2022 07:54:01 +0900

Webpack이란?

자바스크립트는 모듈의 합! 즉 모듈이라는건 특정 기능을 갖는 작은 코드 단위를 의미

자바스크립트에서는 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 병합 및 압축(js, 이미지,.scss, .hbs등등) 해주는 동작을 모듈 번들링이 필요!

웹팩 등장이유

1. 파일 단위의 자바 스크립트 모듈 관리

- 자바의 유효 범위는 기본적으로 전역변수이기 때문에 편하게 관리할 수 있다는 장점도 있지만, 복잡한 애플리케이션을 개발할때는 변수의 이름을 모두 기억하지 않는 이상 중복선언하거나 의도치 않은 값을 할당 할 수 있음(Scope 문제)

- 기존에는 IIFE를 사용하여 스코프 오염을 막았으나 Common.js , export 모듈을 만들고 require를 불러와서 사용했으나 ES2015에서 표준모듈 등장 , export/ import로 모듈을 내보다고 가지고 옴

2. 웹 개발 작업 자동화 도구

- 웹 서비스를 개발하기 위해서는 HTML, css, JS, 이미지 압축등 필요

3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

- 웹 페이지의 로딩 속도를 높이기 위해서 레이지 로딩 사용

웹팩이 해결할 수 있는 문제

1. 자바스크립트 변수 유효 범위 문제 -> ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결

2. 브라우저별 HTTP 요청 숫자의 제약 -> 웹팩을 이용해 여러 개의 파일을 하나로 합치면 위와 같은 브라우저별 HTTP 요청 숫자 제약을 피할 수 있음

3. Dynamic Loading & Lazy Loading 미지원 -> Webpack의 Code Splitting 기능 사용하여 원하는 모듈을 원하는 타이밍에 로딩 가능

웹팩은 시작점(Entry Point)로부터 의존적인 모듈 전부 찾아내서 하나의 파일로 만든다.

개발용 package -> devDependencies / 배포용 package -> dependencies

$ npm install (plugin) --save //dependencies
$ npm install (plugin) --save-dev // devDependencies

모듈 번들러 없이 js 모듈들이 무수히 많이 생성된다면? 하단과 같은 줄이 엄청 많아져서 불편

Webpack 사용하면 main.js로 가능

// Webpack 사용전 
<body>
    <script type="module" src = "./src/setup.js"></script>
    <script type="module" src = "./src/session1.js"></script>
     <script type="module" src = "./src/session2.js"></script>
      <script type="module" src = "./src/session3.js"></script>.... 
</body>

// Webpack 사용후 
<body>
	<script src = "./dist/main.js"></script>
</body>

React에 Webpack 설정하기 (React Webpack)

npx create-react-app

$ npm install -D webpack webpack-cli


// package.json
  "dependencies": {
    "react": "^17.0.2"
  },
  "devDependencies": {
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }

webpack: Webpack(웹팩) 라이브러리.
webpack-cli: Webpack(웹팩)을 명령어로 조작하기 위한 라이브러리
babel-loader : Webpack(웹팩)에서 babel(바벨)을 다루기 위한 라이브러리
@babel/core : babel(바벨)로 컴파일할 예정
@babel/preset-env : babel(바벨)로 컴파일시 어떤 타겟으로 지정할지 설정하는 라이브러리
@babel/preset-react : React(리액트)를 babel(바벨)로 컴파일하기 위한 라이브러리
webpack-dev-server : Webpack(웹팩)으로 로컬에서 개발하기 위한 테스트 서버

출처

1. 웹팩 핸드북

웹팩 핸드북

joshua1988.github.io

2. https://webpack.kr/guides/production/

[Node.js] npm 패키지 사용법

RosyPark — Wed, 29 Jun 2022 14:49:14 +0900

1. npm (Node Package Manager)

- 자바스크립트 프로그래밍 언어를 위한 패키지 관리자

- Node Package Manager의 약어

- 노드가 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 해줌

- 패키지란? 업로드된 노드 모듈

- 모듈이 다른 모듈을 사용할 수 있는 것처럼, 파키지가 다른 패키지를 사용할 수 있음

프론트 엔드 개발에 Node.js가 필요한 이유?

1. 최신 스펙으로 개발할 수 있음

- 자바스크립트 스펙보다 브라우저의 지원속도는 항상 늦기 때문에, 여러가지 도구의 도움이 필요. 웹팩, NPM같은 노드 기술로 만들어진 환경이 필요

2. 빌드 자동화 기구

- 코딩 결과물을 바로 브라우져에 올리지 않고 파일을 압축하고, 코드를 난독화하고, 폴리필 추가하고.. 개발 이외에 작업을 거친후 배포하는데 Node.js가 필요. 라이브러리 의존성해결 및 각종 테스트 자동화

3. 개발환경 커스터마이징

- React의 CRA(Creat-reat-app)가 대부분인데 이는 툴을 그대로 사용할 수 없는 경우도 빈번하기 때문에 직접 환경을 구축해야하는 상황이 있을 수 있음

2. npm 시작하기

2.1 npm 시작하기

- node.js 프로젝트를 시작하는 것

$ npm init

으로 바로 시작하게 되면 package.json을 다 관리해주는게 나오는데

이때! 그냥 엔터키 막 누르고 다음 껄 치면 package.json 관리가 자동적으로 된다. 그러니깐 엔터키만 쭉 누르기~

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

- scripts : 프로젝트를 자동화할 수 있는 shell script = 일종의 sample script

$ npm test // Error: no test specified\" && exit 1

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "love": "echo \"you\"" 
  },

$ npm run love // you

npm 명령어 확인하기

$ npm 


Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    C:\Users\park\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

노드 버전 확인하기

$ npm run love // you

2.2 패키지 설치하기

npm install 하는 방법은 두가지가 있다.

1. 첫번째는 패키지명을 명시해 특정 패키지를 설치하는 경우

- 하단의 경우 express package로 변경

$ npm install express

2. 두번째는 패키지명을 명시하지 않고 package.json을 설치하는 동작

$ npm install

참고)

현재 프로젝트 설치? npm install [모듈명]

모든 프로젝트에 전역설치? npm install -g [모듈명]

유의적 버전

^15.12.0의 의미?

- 프로젝트에서 사용하는 패키지의 버전을 엄격하게 제한하면 프로젝트를 버전업하는데 필요함

- npm은 유의적버전(Sementic Version)에 따라서 패키지를 관리함

- 유의적버전(Sementic Version)은 주(Major), 부(Minor), 수(Patch) 세가지 숫자를 조합해서 버전 관리

- V16.12.0 -> 주버전이 16 / 부버전이 12 / 수 버전이 0

- 각 버전을 변경하는 기준

(1) 주버전 (Major Version) : 기존 버전과 호환되지 않게 변경한 경우

(2) 부버전 (Minor Version) : 기존 버전과 호환되면서 기능이 추가된 경우

(3) 수버전 (Patch Version) : 기존 버전과 호환되면서 버그를 수정한 경우

- 틸트(~)와 캐럿(^)

틸트(~)? 마이너 버전이 명시되어 있으면 패치 버전을 변경, ~1.2.3표기? 1.2.3~1.3.0미만까지

캐럿(^)? 정식버전에서 마이너와 패치 버전을 변경 ^1.2.3표기는 1.2.3부터 2.0.0미만까지

package.json // 모든 react version 명시

$ npm view react versions

$ npm install express socket.io --save

라고 치면 설치시에 package.json의 dependencies 부분을 업데이트 해준다.

또한 --save라는 옵션을 붙여주면 자동적으로 package.json을 업데이트 해주는 역할을 가진다.

-> 하지만 npm 5부터는 --save 옵션을 기본옵션으로 적용하기 때문에 --save를 사용하지않아도 dependencies에 항목이 추가 됨

npm install expres

* npm install express 이후

Folder

(1) node_modules

- Express가 의존하는 패키지

- 패키지 하나에 다른 여러 패키지에 의존하고, 그 패키지들은 또 다른 패키지에 의존

(2) package.json

- 기본적으로 key-value로 저장되는 단일 JSON객체

- package.json에서는 버전 정보를 저장할떄 version range 사용

- 정확하게 package명을 명시하는것이 아니라 버그 수정이 이루어질때마다 버전 수정

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "helmet": "^4.6.0",
    "hpp": "^0.2.3",
    "moment": "^2.29.1",
    "mongoose": "^5.13.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  
  ...
  
  
   "devDependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.14.8",
    "@babel/node": "^7.14.9",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.14.9",
    "babel-loader": "^8.2.2",
    "morgan": "^1.10.0",
    "nodemon": "^2.0.12"
    
  }
  
 ...

(2-1) dependencies => 프로덕션 환경에서 응용 프로그램에 필요한 패키지 for 기술 스펙으로 사용되어야할것

(2-2) devDependencies => 로컬 개발 및 테스트에만 필요한 패키지 for 개발자

- webpack / babel이 devDependencies에 있는 이유?

babel 및 webpack 패키지는 bundle.js 및 etc 파일의 banilla javascript에 코드를 변환하고 번들링할 때 에 사용되므로 devDependencies 섹션으로 이동합니다. 프로덕션에서 번들로 코드를 실행합니다.js 빌드/생성된 코드는 더 이상 이러한 종속성을 필요로 하지 않습니다.

(3) package-lock.json

- npm으로 패키지를 설치 수정, 삭제할때마다 내부 의존관계를 이 파일에 저장, 즉 npm이 node_modules나 package.json이 수정될때 자동으로 생성

- package-lock.json이 존재할때는 package.json을 사용하여 node_modules를 생성하는것이 아니라 package-lock.json을 사용하여 node_modules를 생성함

3. npm 삭제 및 재설치

3.1 npm 재설치

(1) package.json 삭제 + node_modules 폴더 삭제

(2) npm install

3.2 npm 삭제

* 기본 삭제

$ npm uninstall [node_module]

* package.json파일에서 모듈 제거

$ npm uninstall [node_module] --save

npm outdated

- 의존성 모듈에서 새로운 버전이 나오면 모듈을 일일이 확인하려운데, 업데이트가 필요한 모듈 확인 가능

- current : 현재 설치된 버전 / wanted : package.json에 지정한 버전 범위로 설치되는 최대 범위 , npm update 설치

npm-check

- 의존성 관리의 불편함을 덜어주는 cli 모듈

- npm install -g npm-check 사용해서 전역으로 설치하면 사용가능

- npm oudated보다 더 풍부한 데이터가 나옴

* 모듈

(1) npm version 확인하기

npm -v

(2) npm install ~

npm i express cors dotenv hpp helmet

- express : 서버 프레임 워크

- cors: 크지 않은 규모의 경우 백엔드랑, 서버로 둬도 상관없지만 웹 페이지를 다른곳에서 자원을 가져와야되는 경우가 빈번하게 발생, 다른곳에서 자원을 가지고 오게되는 프레임워크, 원래는 그렇지 않지만 cals를 설치해주면 편함 , 자유롭게 자원을 가지고 올 수 있음

- dotenv : 외부에 공유를 하지 않기 위해서 특별하게 값들을 저장해놓고 자유롭게 쓸 수 있게 해주는 것

- hpp, helmet : 서버 보안상 취약점을 보완해주는 기능

* .gitignore 사용법

(1) .gitignore 파일을 하나 만든다

(2) node_modules / .env를 기본적으로 쳐준다

dependencies만 있으면 자동적으로 쳐줌

(3) db 사용하기

npm i mongoose moment

- mongoose : 몽고db를 javascript에서 설치하게 만들어주는것

- moment : mongoose는 시간을 국제 시간으로 따름 , 한국시간으로? 설정해주는것

node.js에서는 common.js라는 module 방식을 채택, 하지만 front 경우 일반적으로 es6라는 문법을 따름

-> 통일성을 부여하기 위해 babel을 사용

-> babel? javascript는 문법이 빠르게 변화, 최신 문법을 사용하고 싶은데 브라우저는 옛날 문법을 사용하는 상황 간극을 작게 해주는 것이 바벨, 바벨은 자바스크립트를 사용할때 사용하는 것이 필수

(4) babel

- -D 넣어주는 이유? 개발단계 "devDependencies"

npm i @babel/cli @babel/core @babel/node @babel/preset-env babel-loader @babel/polyfill -D

@babel/cli

- 바벨을 터미널에서 명령어 처럼 사용할 수 있게 도와주는 것

@babel/core

- es6같은 코드를 변환시켜주는 것

@babel/node

@babel/preset-env

babel-loader

- 실용적으로 컴파일을 해주는 것

@babel/polyfill

- @babel/node로 실행하게 되면 최신 문법을 코드로 사용할 수 있게 해주는 것

- polyfill? 베개..? 여러가지 넣어서 어떠한 상황에서도 문법을 만들 수 있게 해주는 것

(4) npm i morgan nodemon -D

 npm i morgan nodemon  -D

-morgan 서버에서 log기록을 보여주는것

- nodemon 파일을 저장했을때 서버에 즉각적으로 반영시켜주게 하는 것

cf) 이와 같은 과정은 당연히 개발단계에서만 필요하기 때문에 -D을 적어주기

.env 파일 생성하기

- node 프로젝트 개발을 하면 외부로는 알려지면 안될 민감 정보. 오픈소스 공개시 관련정보 유출위험

(1) setting 방법

- 리눅스 -> export ~ / window -> set~

(2) setting 방법

npm install dotenv

---

prettier 이쁘게 저장

---

기본적인 sever 열기 - dev

npm run dev

package.json

  ...
  "scripts": {
    "dev": "nodemon ./server/server.js --exec babel-node",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ....

--------

>> npm install morgan cookie-parser express-session

>> npm install --save-dev nodeman

- 소스패키지가 바뀔 때마다 자동으로 재실행해주는 패키지

>> npm install --global rimraf

- 전역 패키지 설치하기

>> rimraf node_module

- 지정한 파일이나 폴더를 지우는 명령

- 전역설치한 경우 사용가능

>> npm install --save-dev rimraf

>> npx rimraf node_modules

- 전역 설치 안하는 경우

npm install (plugin) --save와 --save-dev 차이점3

ithub.tistory.com/165

기본 javascript src 로딩하는것 만들기

1. npm init 프로젝트 설치

<출처>

1. 5강 패키지 매니저, Node.js 교과서

[css/React] 기본 코드와 응용

RosyPark — Thu, 23 Jun 2022 16:42:23 +0900

CSS란?

- Cascading Style Sheets로 HTML과 함께 웹 표준의 기본

- Cascading 뜻 ?

- 캐스케이딩 스타일 시트(CSS)뜻 ? "위에서 아래로 흐르는 스타일 시트"

- 텍스트 색사이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당

- http://www.csszengarden.com/

CSS Zen Garden: The Beauty of CSS Design

So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into thi

www.csszengarden.com

Cascading

- 사용자가 지정하지 않는다면 Browser가 지정한 style로 지정됨

- Casacding을 끊어내는 것 -> !important

- 가능하면 !important을 쓰지 않는게 좋음 , Box대로 나누어야지 labeling이 쉬움

1. Author style

2. User Style - 사용자가 지정한 것

3. Browser - Browser가 지정한 Style

selectors

Selectors
Universial	*	모든 Tag 고르기
type	Tag	Tag를 고르는것 ex) <div>
ID	#id	id만 고르기
Class	.class
State	:
Attribute	[]

margin -> 공식문서

component 한줄로 만들기

div{display : flex;}

줄바꿈 방지

div{white-space : nowrap;}

- normal : 기본값으로 글자 줄이 자동으로 바뀜, 콘텐츠가 너비를 초과할 경우 다음줄로 바뀜

- nowrap : 줄바꿈이 실행되지 않음

- pre : 줄바꿈과 기타 공백이 유지됨

- inherit : 부묘 요소로부터 값을 상속 받음

font 관련

div{font-size : 1.1em;}

div{font-weight : 300;}

css 사용예제 1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS Demo</title>
</head>
<body>
    <ol>
      <li id="special">First</li>
      <li> Second </li>
    </ol>
    <h1 id = "special">Hello </h1>
    <button> Button 1 </button>
    <button> Button 2 </button>
    <div class = "red"> 
      <button></button> 
    </div>
    <div class = "blue"> </div>
    <a href = "naver.com">Naver </a>
    <a href = "google.com"> Google </a>
    <a> Empty </a> 
</body>
</html>

/* selector { property : value ;} */

* { color : green;}
li{ color : blue;}
#special { color : pink; }
.red { width : 100px; height : 100px;  background : yellow;}
button:hover { color : red ; background : beige;}
a[href="naver.com"] {color : red;}
a[href^="google.com"]{color : purple;}

css 사용예제 2

.red {
  width : 100px;
  height : 100px; 
  background : yellow;
  padding : 30px;
  padding-left : 100px;
  margin : 20px;
  border-width : 2px;
  border-style : solid; 
}

css 사용예제 3 - Display

(1) step1

- 기본적으로 span은 inline Style

- 하지만 css에서 display를 block으로 바꿔주면 됨

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Js Bin</title>
</head>
<body>
    <!-- Block Level --> 
    <div></div>
    <div></div>
    <div></div> 
  
    <!-- Inline Level -->
    <span>1</span>
    <span>2</span>
    <span>3</span>
</body>
</html>

/* selector {   property : value ; } */
div, span{   width : 80px; height : 80px; margin : 20px;}
div{ background : red;}
span { background : Blue;}

(2) step2

- display 속성 : inline / block / inline-block으로 변경

div{
  background : red;
  display : inline-block;
}

span { 
  background : Blue; 
  display : block; 
  
}

css 사용예제 4 - Position

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Js Bin</title>
</head>
<body>
    <article class = "container">
     <div></div>
     <div class = "box">I'm Box</div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</body>
</html>

position은 static으로 저장되어 있음 , relative로 변화하면 변화됨

.container {
  background : yellow;
  left : 20px;
  top : 20px;
  position : relative; 
}

- 원래 있어야할 자리에서 relative를 쓰면 움직일 수 있음

- position : absolute;를 쓰게 되면 가장 가까운 박스로 위치 변경이 이루어짐

- position : fixed ; 웹 페이지 안에서 바뀌어가는것

.container {
  background : yellow;
  left : 20px;
  top : 20px;
  position : relative; 
}

.box{
  background : blue; 
  left : 20px;
  top : 20px;
  position : relative;
}

FlexBox 사용하기

float?

- 이미지와 텍스트를 어떤식으로 배치할까 하는 목적 ex) float : left / float : center / float : right

FlexBox 속성

1. Container - 박스에 있는 속성값이 존재

(1) display

- 보통 display : flex;로 설정

- flex 레이아웃을 설정하기 위해 기본적으로 있어야 하는 속성

- display 직계 자손에게만 적용 (손자x, 하려면 :nth-child(1)) 추가 필요

- 종류 : flex , inline-flex

(2) flex-direction

- 방향 - 기본값은 왼쪽에서 오른쪽

- 종류 : row , row-reverse, column, column-reverse

(3) flex-wrap

- 줄바꿈 속성

- 기본값 nowrap

- 종류 : nowrap, wrap, wrap-reverse

wrap으로 하게 되면? 크기가 커지면 밑으로 내려감

(4) flex-flow

(5) justify-content

(6) align-items

- center - 열 맞추기

(7) lign-content

2. item

- order

- flex-grow

- flex-shrink

- flex

- align-self

FlexBox 특징

- Main Axis와 Cross Axis가 존재

100% vs 100px vs 100vh

값의미기본값

참고사이트

Color Tools

- 사이트

CSS-Tricks

css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi

css-tricks.com

flexboxfroggy.com/#ko

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

단축키

JAVASCRIPT 스타일과 스타일시트

- 스타일 주석 하는 방법 /* */

1. 내부 스타일 시트

- 안쓸거니깐 설명 간략하게 적겠음

- <head> <style> section { width : 500px; padding :15; border : 5px solid gray } </style> </head>

2. 외부 스타일 시트

- 웹 스타일을 만들때 하나의 웹 문서로 끝나는 경우는 거의 없음

- 사이트를 제작할 때 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할때마다 파일에서 가져와 사용함

- <link rel = "stylesheet" href = "외부 스타일 파일 경로">

- h2와 p에 이러한 스타일을 적용하겠다~

h2{
    font-size : 20px;
    color : orange;
}
p{
    color : blue;

}

* 특정 부분에 요소 적용

- 간단한 스타일 정보일경우 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시

- css파일을 만들어서

- head에 연결 => <link rel = "stylesheet" href = "css/style.css">

- <h1 class = "pinktext"> 이쁜 사람 목록</h1>

.pinktext{
    color : pink;
}

* 특정 클래스에 스타일 적용

- <p> 특정 클래스에 스타일 <span class = "pinktext"> 적용 </span> <br>

* id 스타일 적용

- #아이디명 {스타일}

- id 선택자도 클래스 선택자와 마찬가지로 웹 문서안의 특정 부분에 스타일을 지정할때 사용

- 클래스 선택자와 id 선택자의 가장 큰 차이?

--> 클래스 선택자가 문서 안에서 여러번 적용할 수 있는 스타일이지만, id 선택자는 문서 안에서 한번만 적용할 수 있음 즉! 중복해서 사용할수 없기 때문에 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 자바 스크립트 프로그램에서 웹 요소들을 구별

 #container {
            width :600px;
            padding : 15px;
            border : 1px dotted gray; 
 }

<출처>

1. flexbox - thrillfighter.tistory.com/489

2. heropy.blog/2018/11/24/css-flexible-box/

3. 엘리 드림코딩

[Cloud 관련] MicroService Architecture와 Service Mesh

RosyPark — Fri, 17 Jun 2022 11:41:08 +0900

Mirco Service Architecture (MSA)

소프트웨어가 잘 정의된 API를 통해 통신하는 소규모의 독립적인 서비스로 구성되어 있는 경우의 소프트웨어 개발을 위한 아키텍처 및 조직적 접근 방식

애플리케이션의 확장을 용이하게 하고 개발 속도를 앞당겨 혁신을 실현하고 새로운 기능의 출시 시간 단축 가능

완전히 독립적으로 배포가능

다른 기술이 사용가느아도록 단일 사업 영역에 초점

Monolithic Architecture(MA)

소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어 있는 형태

웹 개발시? 웹 프로그램을 개발하기 위해 모듈별 개발, 하나의 결과물로 패키징하여 배포 하지만 한계가 존재

Monolithic Architecture(MA) vs Mirco Service Architecture (MSA)

Monolithic Architecture 아키텍쳐의

Service Mesh

출처

1. https://aws.amazon.com/ko/microservices/

2. https://wooaoe.tistory.com/57

[C#] Thread (3) - Async, Await

RosyPark — Sun, 22 May 2022 11:05:14 +0900

[C#] Thread (3) - Async, Await