'분류 전체보기' 카테고리의 글 목록

1. 동기 (Synchoronous:동시에 일어나는)

- 동기는 말 그대로 동시에 일어난다는 뜻이다

- 요청과 그 결과가 동시에 일어난다

- 바로 요청을 하면 시간이 얼마가 걸리든 요청한 자리에서 결과가 주어져야 한다

- 순서에 맞춰 진행되는 장점이 있지만, 여러가지 요청을 동시에 처리할 수 없다

- 설계가 매우 간단하고 직관적이다

- 결과가 주어질 때 까지 아무거도 못하고 대기해야 한다

- A 노드 B노드 사이의 작업 처리 단위 (transaction)을 동시에 맞추겠다

2. 비동기 (Asynchronous: 동시에 일어나지 않는)

- 비동기는 동시에 일어나지 않는다를 의미한다

- 요청과 결과가 동시에 일어나지 않을 거라는 약속이다

- 하나의 요청에 따른 응답을 즉시 처리하지 않아도 , 그 대기 시간 동안 또 다른 요청에 대해 처리 가능한 방식이다

- 여러 개의 요청을 동시에 처리할 수 있지만, 동기 방식보다 속도가 떨어질 수 있다

- 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간동안 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다

- 학생이 시험지를 선생에게 건넨 후 가만히 앉아 끝나 시험지를 돌려받기만을 기다린다면 학생은 블록상태이다

- 하지만 학생이 시험지를 건넨 후 선생에게 채점이 완료되었다는 전송을 받기 전까지 다른 과목을 공부한다거나 게임을 한다거나 다른 일을 하게 되면 학생의 상태는 논 블록 상태이다

- A노드와 B노드 사이 작업 처리 단위를 동시에 맞추지 않아도 된다

동기는 추구하는 같은 행위(목적)가 동시에 이루어지며
비동기는 추구하는 행위(목적)가 다를 수 도 있고 동시에 이루어지지 않는다

비동기적 처리의 이유

- 제이쿼리의 ajax 통신과 같은 원하는 데이터를 서버로부터 받아오는 방식을 취하는 어플리케이션을 만들었다고 가정해본다. 서버로부터 데이터를 받아와서 해당 데이터를 처리해야 하므로, 데이터를 받아오는 코드는 전체 코드 중의 최상단에 위치해야 한다. 그런데 만약 비동기적 처리를 하지 않고 동기적 처리를 하는 어플리케이션이라면?

- 서버로부터 데이터를 받아오는 코드의 실행이 완전히 끝난 뒤 이후 코드를 처리할텐데 받아오는 데이터의 크기나 갯수가 적다면 상관없지만 데이터의 크기가 크고 많다면 문제를 초래한다.

- 모든 데이터의 수신을 완료한 다음 나머지 코드를 실행할 수 있으므로, 데이터를 받아오는 동안에 프로그램은 사실 멈춰있는 것과 다름없다. 언제 끝날지도 모르는 요청 때문에 나머지 코드를 실행시키지 못하고 사용자를 기다리게 하는 아주 불친절한 프로그램이 된다.

- 이러한 사용자의 불편을 없애기 위해 데이터의 수신과 기다려야 하는 코드를 비동기적으로 처리한다

- AJAX를 사용하는 이유도 단순히 WEB 화면에서 무언가를 부르거나 데이터를 조회하고 싶을 경우 페이지 전체를 새로고침 하지 않기 위해 사용한다고 볼 수 있다.

- AJAX의 경우 html 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request한다. 이 경우 JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다

'FE' 카테고리의 다른 글

HTTP (0)	2023.02.26

HTTP

클라이언트 - 서버 모델을 따르는 프로토콜

인터넷에서 데이터를 주고받을 수 있는 프로토

TCP/IP 위에서 동작

well-known 포트인 80번 포트를 사용하여 통신한다.

첫번째 표준은 http/1.1이며 http/2 및 http/3이 등장하였다

'FE' 카테고리의 다른 글

동기와 비동기의 차이 (0)	2023.02.27

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-5 Servlet -BE (0)	2023.02.21
1-4 개발환경 설정 - BE (0)	2023.02.21
1-3 CSS - FE (0)	2023.02.21
1-2 HTML - FE (0)	2023.02.20
1-1 웹개발의 이해 (0)	2023.02.20

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-6 Summary (0)	2023.02.21
1-4 개발환경 설정 - BE (0)	2023.02.21
1-3 CSS - FE (0)	2023.02.21
1-2 HTML - FE (0)	2023.02.20
1-1 웹개발의 이해 (0)	2023.02.20

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-6 Summary (0)	2023.02.21
1-5 Servlet -BE (0)	2023.02.21
1-3 CSS - FE (0)	2023.02.21
1-2 HTML - FE (0)	2023.02.20
1-1 웹개발의 이해 (0)	2023.02.20

CSS의 구성

span{

color:red;

}

- span: selector (선택자)

- color: property

- red: value

CSS의 구성 요소

inline

internal

external

inline

- html 태그 안에 넣는 것

- 같은 속성 추가 시 다른 CSS 적용보다 최우선으로 적용

<p style="border:1px solid gray;color:red;font-size:2em;">

internal

- head안에 <style></style> 태그 넣는 방식

- 구조와 스타일이 섞이게 되므로 유지보수가 어렵다

- 별도의 CSS파일을 관리하지 않아도 되며 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다

<head>
<style>
p  {
  font-size : 2em;
  border:1px solid gray;
  color: red;
}
</style>
</head>

<body>
<div>...</div>
</body>

external

- 외부파일(.css)로 지정하는 방식

- html파일 안에 CSS 파일 추가하는 방식

- CSS 코드가 짧지 않다면 이 방법으로 구현하는 것이 좋다

- 여러 개의 CSS 파일을 분리하고 이를 합쳐 서비스에 사용하기도 하낟

- internal 코드와 같은 css코드를 구현하고 style, css와 같은 별도 파일로 만든다

- 이후 아래처럼 link 태그로 추가하면 된다

<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div>
			<p>
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</p>
		</div>
	</body>
</html>

우선순위

- inline은 별도의 우선순위를 갖지만 internal과 external은 우선 순위가 동등하다

- 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다

javascript로 동적으로 css코드를 수정하려고 하면 어떻게 해야 할까요? 나중에 차츰 알게 되지만, 미리 어떤 방법이 있을지 고민해보세요.
1. javascript의 getElementById() 등의 메소드를 이용하여 css를 수정할 수 있습니다.

구글 웹사이트는 어떻게 css를 선언하고 있을까요? 구글 웹사이트(구글 내 여러가지 웹사이트중 하나)에서 소스보기를 해서 CSS 코드를 한번 찾아보세요. internal 방식이나 external 방식 등을 목격할 수 있을 겁니다.
2. internal, external 모두 사용하고 있습니다.

상속의 우선순위 결정

- 상위에서 적용한 스타일은 하위에서도 반영된다

- 이로 인해 여러 단계로 중첩된 element마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다

<!DOCTYPE html>
<html>
<head>
  <style>
    div{
      color:green;
    }</style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div><span>my text is upper!</span>
  <ul>
    <li><span>my text is dummy</span>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
      molestiae in architeco non quos aperiam , incidunt.
      Ex sequi ullam, culpa explicabo fecere
      modi ad fugiat ipsa cupidiate provident , a, expedita!</p>
    </div></li>
  </ul></div>
</body>
</html>

Cascading

- CSS는 여러 스타일 정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 반영된다

선언 방식에 따른 차이

inline>internal (head태그 사이)>external 순으로 먼저 적용

span{

color:red;

}

span{

color:blue;

}

동일하면 나중의 것이 적용됨

body<span {

color:red;

}

span{

color:blue;

}

더 구체적으로 표현된 것이 적용됨

text....

</div>

#a {

color:red;

}

.b {

clolor:blue;

}

div{

color:green;

}

id값이 우선됨

id>class>element

google search

-> CSS specificity

class는 우선점수가 10점, id는 100점이라고 표현했습니다. 그런데 class 가 11개라면 어떻게 될까요? id보다 우선순위가 높을까요? 실제로는 그렇지 않습니다.이현상은 올림픽순위가 금메달의 갯수를 통해 우선결정되는 것과 비슷한데요.id는 금메달, class는 은메달, tag는 동메달로 이해하는게 편합니다.

CSS selector

- HTML의 요소를 tag,id,html 태그 속성 등을 통해 쉽게 찾아주는 방법

- tree 구조로 되어 있는 데이터를 빠르게 찾아가는 방법

-태그 : 부모 자식 관계로 되어 있

element에 style 지정을 위한 3가지 기본 선택자

-tag로 지정하기

span{

color:red;

}

- id로 지정하기

#spantag{

color:red;

}

- class로 지정하기

.spanclass{

color:red;

}

CSS Selector의 다양한 활용

- id, class 요소 선택자와 함께 활용

#myid {color:red}

div.myclassname{color.red}

span#myspan

<<span인데 아이디가 myspan인 요소들 선택

- 그룹 선택 해야 한다면 (여러 개 셀렉터에 같은 style 적용해야한다면)

h1, span, div{color:red;}

- 하위 요소 선택(공백)

#jisu span {color:red;}

- 자식 선택 (>)

#jisu>span {color:red}

- n번째 자식 요소를 선택

#jisu>p:nth-child(2) {color:red}

id가 지수인 태그의 자식 태그 들 중 n번째 자식 태그가 p이면 색상 변경

#jisu>p:nth-of-type(2) {color:red}

id가 지수인 태그의 자식 태그들 중 n번째 p태그의 색상을 red로 변경

- 자식 선택: 자식은 바로 하위 엘리먼트를 가리킨다

pseudo-class인 nth-child 와 nth-of-type의 차이점은 무엇일까요? 두 개의 차이점을 꼭 기억하시기 바랍니다.
nth-child: 유형과 관계 없이 n번째를 선택
nth-of-type: 특정 유형부터 n 카운팅

:nth-child(N)= 부모안에 모든 요소 중 N번째 요소
A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소
:first-child= 부모안에 모든 요소 중 첫번째 요소
:last-child= 부모안에 모든 요소 중 마지막 요소
A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소
A:last-of-type= 부모안에 A라는 요소 중 마지막 요소

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-6 Summary (0)	2023.02.21
1-5 Servlet -BE (0)	2023.02.21
1-4 개발환경 설정 - BE (0)	2023.02.21
1-2 HTML - FE (0)	2023.02.20
1-1 웹개발의 이해 (0)	2023.02.20

tag의 종류

- 태그는 의미에 맞게 사용해야 한다 Symantic tags

- 링크

- 이미지

- 목록

- 제목

- anchor 태그, img 태그, ul/li 태그, heading 태그, p 태그 등이 자주 사용

- 그 밖에 가장 많이 사용하는 div태그가 있다

- div 태그는 block 엘리먼트라고 하는데 일반적인 영역을 표현할 때 가장 많이 사용

레이아웃을 위한 태그

- header

- section

- nav

- footer

- aside

html design structure

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <h1>Company Name</h1>
    <img src=" " alt="logo">
   </header>
  <section>
    <nav>
      <ul>
        <li> Home </li>
        <li> Home </li>
        <li> About </li>
        <li> Map </li>
        </ul>
    </nav>
    
    <section>
      <button></button>
      <div> <img src="" alt=""></div>
      <div> <img src="" alt=""></div>
      <div> <img src="" alt=""></div>
      <button></button>
    </section>
    
    <section>
      <ul>
        <li>About us</li>
        <li><h3>Wha we do<h3></li>
          <li> Contact us </li>
        </ul>
      </sction>
      
    </section>
  <footer>
    </footer>
  

</body>
</html>

ID

- 고유한 속성으로 html문서에 하나만 사용 가능

- 고유한 id값이 있으면 하나 하나에 특별한 제어를 할 수 있고 검색에 용이

Class

- 하나의 html 문서 안에 중복해서 사용 가능

- 하나의 태그에 여러 개 다른 class 이름을 공백을 기준으로 나열 가능

- 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class 사용 필수

- 비슷한 스타일을 여러번 사용하기 위해

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <h1>Company Name</h1>
    <img src=" " alt="logo">
   </header>
  <section class="nav-secction">
    <nav>
      <ul>
        <li> Home </li>
        <li> Home </li>
        <li> About </li>
        <li> Map </li>
        </ul>
    </nav>
    
    <section class="roll-section">
      <button></button>
      <div> <img src="" alt=""></div>
      <div> <img src="" alt=""></div>
      <div> <img src="" alt=""></div>
      <button></button>
    </section>
    
    <section>
      <ul>
        <li class="our_description">About us</li>
        <li class="our_description"><h3>Wha we do<h3></li>
          <li class="our_description"> Contact us </li>
        </ul>
      </sction>
      
    </section>
  <footer>
    </footer>
  

</body>
</html>

'WEB > 웹 프로그래밍(Boostcourse)' 카테고리의 다른 글

1-6 Summary (0)	2023.02.21
1-5 Servlet -BE (0)	2023.02.21
1-4 개발환경 설정 - BE (0)	2023.02.21
1-3 CSS - FE (0)	2023.02.21
1-1 웹개발의 이해 (0)	2023.02.20

AUSPICIOUS