출처: https://circumeo.tistory.com/51 [℃:티스토리]

디테일하게 나온곳.

https://yesviz.com/viewport/

''

논리적 픽셀

고밀도 디스플레이 기술로 디바이스마다 해상도가 높아졌고, 픽셀 밀도도 다양해졌다.

픽셀 밀도가 다양해지니 개별 픽셀의 크기도 천차만별이었다.

디바이스별 개별 픽셀의 크기에 따라 같은 이미지가 다른 위치, 크기로 보이는 문제가 발생했다.

그래서 어떤 디바이스에서든 같은 이미지가 동일하게 보이도록 논리적 픽셀을 도입했다. 

*논리적 픽셀: css에서 표현하는 픽셀로, 물리적 픽셀의 토대 역할을 한다.

즉, 디스플레이 픽셀이 몇 개든 css 픽셀 컨텐츠가 구현된다.

보통 논리적 픽셀을 기준으로 디자인한 것을 디바이스 밀도에 맞게 몇 배로 곱한다.

논리적 픽셀 단위는

• 안드로이드 OS에서 DP와 SP
• 아이폰 OS에서 PT

*물리적 픽셀(px): 최종적으로 디바이스 화면에 출력되는 픽셀이다.

우리가 보는 디바이스의 실제 해상도를 이루는 픽셀이라 할 수 있다. 

*DP: 안드로이드 OS의 논리적 픽셀 = 밀도 독립적 픽셀(Density Independent Pixel)이란 뜻 

*SP:  안드로이드 환경의 폰트 단위  = 크기 독립적 픽셀(Scale Independent Pixel)이란 뜻

기본적으로 DP와 같은 크기지만, DP와 달리 SP는 시스템 폰트 설정 값에 영향을 받는다.

즉, 사용자가 안드로이드 시스템 설정에서 폰트 크기를 조절하면 SP 단위가 적용된 폰트도 조절되어 

 사용자들은 시스템 폰트를 크게 설정하기때문에 그러한 사용자를 고려한다면 sp를 사용하기도 한다.

ex) 높은 연령대,장애인, 근시,난시 등

*PT(Point): 아이폰 OS의 논리적 픽셀로, DP와 같은 역할을 한다.

AOS와 IOS 밀도

안드로이드 기반 디바이스는 고도로 발전하여 현재 점유율이 가장 높고 디스플레이 밀도도 매우 다양하다.

그래서 안드로이드 OS(AOS)에선 DPI를 6단계로 나누고 DP라는 논리적 픽셀을 공통의 측정 단위로 정했다.

기준 밀도(mdpi)인 160 dpi가 초기 시장에서는 가장 보편적이었으나, 이제는 초고밀도(xhdpi)인 320 dpi가 가장 보편적이다. 

*안드로이드 배포 대시보드: developer.android.com/about/dashboards?hl=ko

*안드로이드 밀도 지원: developer.android.com/training/multiscreen/screendensities

한편 아이폰 OS(IOS)에서는 밀도를 3단계로 나누고 PT라는 논리적 픽셀을 공통의 측정 단위로 정했다.

아이폰 밀도 단계

mdpi: 1@x *base(기준 밀도)이며 1pt가 1px이다.

xhdpi: 2@x *1pt=2px

xxhdpi: 3@x *1pt=3px

안드로이드, 아이폰 OS의 밀도 단계에 대해 알아보았다.

디바이스 밀도에 따라 어떻게 디자인해야 하는지 알고 싶다면 다음의 포스팅을 참고하자.

mesign.tistory.com/12

출처: https://mesign.tistory.com/11 [UI·UX Design Study:티스토리]

1 dp는 mdpi(160 dpi) 디스플레이에서 1px이며,

DPI에 따라 2px이나 3px, 또는 4px이 되기도 한다.

*보통 디자인 툴에서 1dp는 1px로 설정, 디자이너는 1dp로 디자인한 후 렌더링한다.

dp를 px로 변환식  = px = dp * (dpi / 160)

*래스터화 과정: 논리적 픽셀 → (n배수로 렌더링) → 렌더링 된 픽셀 → (다운/업샘플링) → 물리적 픽셀 →물리적 디바이스

*다운샘플링: 렌더링 된 픽셀 해상도가 물리적 디바이스의 해상도보다 높으면 크기를 낮춘다.

*업샘플링: 렌더링 된 픽셀 해상도가 물리적 디바이스의 해상도보다 낮으면 크기를 높인다.

샘플링 과정에서 해상도를 강제로 키우거나 줄이므로 픽셀이 열화될 수 있다.

*아이폰 해상도 변환 가이드: www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

*모든 단위 변환 웹사이트: https://pixplicity.com/dp-px-converter/

출처:  https://mesign.tistory.com/m/10

npx는 npm@5.2.0에서부터 사용할 수 있는 npm을 좀 더 편하게 사용할 수 있는 npm에서 제공하는 도구입니다.
Node.js 도구를 전역에 설치하지 않고도 실행할 수 있게 해줍니다.

npm을 패키지로 설치할 때 2가지 케이스가 있습니다.

1.  전역으로 패키지를 설치하여 의존성 라이브러리들을 전체적으로 관리
2.  특정 프로젝트에만 의존성 라이브러리 설치

이렇게 설치할때 대표적으로 3가지 문제가 생기기 시작했습니다.

1. 모듈이 업데이트되었는지 안되었는지 확인하기

모든 프로젝트마다 모듈을 재설치하는 것이 아닌, 한번 설치한 모듈을 그대로 사용하기 때문에 프로그래머가 의식해서 글로벌 모듈을 최신으로 재설치하지 않으면 확인이 힘들다.

2. 업데이트 시 다른 프로젝트에 영향이 간다.

프로젝트를 여러 개를 운영하는데 같은 모듈의 각각 다른 버전이 필요한 상황이 있을 수 있습니다.

글로벌 모듈은 1개이기 때문에 변경할 수가 없습니다.

 = 대표적으로 노드버전으로 인한 이슈가 저는 제일 많이 생겼는데.  각 프로젝트마다 노드버전이 달랐고 그래서 노드버전을 바꿔줘야 하는 일이 제일 많았습니다.

3. cra 같은 보일러플레이트에 치명적인 이슈

리엑트 생성 cra의 경우  변경사항이 잦습니다. 업데이트 때마다 새로운 기능과 다양한 버그가 고쳐지기 때문에 최신 버전으로 유지해 주는 것이 좋은데 이렇게 되면 생성 시 기마다 버전이 다르게 되어서 생기는 문제가 생깁니다.

 npx은 언제 사용할까?

• npm run-script를 사용하지 않고 로컬에 설치된 패키지를 사용할 경우
• 일회성 명령으로 패키지를 실행할 경우
• 특정 노드 버전의 스크립트를 실행할경우
• gist-based scripts를 실행할 경우

npm run-script 없이 로컬로 설치된 도구사용

{
	"devDependencies": {
    	"test": "^1.1.0"
    }
}

로컬 devDependencies 설치된 test 패키지를 바로 실행 가능합니다.

app npx test 메세지

일회성 명령 실행

npx는 우선적으로 로컬에 패키지가 설치되어 있는지 파악후 패키지가 존재하지않으면 npm레지스트리에서 해당 이름의 패키지가 자동으로 설치되고 호출됩니다.

npx으로 실행된 패키지는 실행하기 위해 설치되었다가 실행 후 삭제됩니다.

다른 Node.js 버전으로 실행

ㅁnpm 레지스트리에 node라는 패키지가 존재합니다. (node-bin 패키지는 deprecated 되었습니다.)

node패키지는 nvm, nave 또는 n과 같은 노드 버전 관리 도구를 사용하지 않고도 서로 다른 노드버전을 사용하여 노드를 사용할수 있습니다.

gist-based scripts를 공유할 경우

github의 gist에 스크립트를 올리고 실행할 때 유용하게  사용할수 있습니다. gist에 스크립트를 올리고, npx {gist url}만 실행하면 스크립트를 실행할수 있습니다.

아이프레임은 기본적으로 로드를 호스트하는 페이지에 정적인 높이값을 지니게 됩니다. 로드되는 페이지의 높이에 맞춰 값을 조정하기 위해서는 별도의 자바스크립트 코드가 필요합니다.

플러그인 스크롤바 관련
https://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

Same-Domain Iframes

동일한 도메인 iframe의 경우 상위 페이지에서만 코드 변경이 필요합니다. iframe 페이지에는 코드 변경이 필요하지 않습니다.

• iframe이 로드된 후 contentDocument.body.scrollHeight 속성은 전체 높이를 가져 옵니다.
• contentDocument.body.scrollWidth 속성은 전체 넓이를 가져 옵니다.

<iframe src="child.html" id="child-iframe"></iframe>

<script>
  let iframe = document.querySelector("#child-iframe");

  iframe.addEventListener('load', function() {
    iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
    iframe.style.width = iframe.contentDocument.body.scrollWidth + 'px';
  });	
</script>

Cross-Domain Iframes

크로스 도메인 iframe의 경우 iframe과 상위 페이지 모두 코드를 수정 해야합니다.

 iframe이 로드된 후 사이즈는 postMessage()를 사용하여 상위 페이지로 전달됩니다 .

window.addEventListener('load', function() {
  let message = { height: document.body.scrollHeight, width: document.body.scrollWidth };	

  window.top.postMessage(message, "*");
});

상위 페이지에서 메시지가 수신되고 iframe 사이즈가 업데이트 됩니다.

<iframe src="https://cross-domain.com/child.html" id="child-iframe"></iframe>

<script>
  let iframe = document.querySelector("#child-iframe");

  window.addEventListener('message', function(e) {
    let message = e.data;

    iframe.style.height = message.height + 'px';
    iframe.style.width = message.width + 'px';
  } , false);
</script>

jQuery iFrame Resizer 플러그인

• iFrame Resizer
• iFrame Resizer Docs

출처: https://hohoya33.tistory.com/128 [개발 메모장:티스토리]

function ResizeFrame(name)

{

  // IFRAME 내부의 body 개체

  var fBody  = document.frames(name).document.body;

  // IFRAME 개체

  var fName  = document.all(name);


  // IFRAME 내부의 body개체의 넓이를 계산하여 IFRAME의 넓이를 설정해 준다.

  fName.style.width 

    = fBody.scrollWidth + (fBody.offsetWidth - fBody.clientWidth);

  // IFRAME 내부의 body개체의 높이를 계산하여 IFRAME의 높이를 설정해 준다.

  fName.style.height 

    = fBody.scrollHeight + (fBody.offsetHeight - fBody.clientHeight);


  // 만약 IFRAME의 크기 설정에 실패 하였다면 기본크기로 설정한다.

  if (Frame_name.style.height == "0px" || Frame_name.style.width == "0px")

  {

    fName.style.width = "700px";     //기본 iframe 너비

    fName.style.height = "300px";    //기본 iframe 높이

  }

}

<iframe name="NeBoard" src="/neboard/board.aspx?bno=005001&mode=LIST&goto=1"

    scrolling="No" onLoad="ResizeFrame('NeBoard');" ></iframe>

Hyuntae Hwang, https://medium.com/keep/what-is-jwt-89889759ae37
그랩의 블로그, https://tansfil.tistory.com/58?category=475681
그랩의 블로그, https://tansfil.tistory.com/59?category=475681
그랩의 블로그, https://tansfil.tistory.com/60?category=475681

참고 사이트에 내용을 개인적으로 복습하기 편하도록 재구성한 글입니다.
자세한 설명은 참고 사이트를 살펴보시기 바랍니다.

세션과 쿠키를 이용한 인증

인증 순서

• 사용자가 로그인을 합니다.
• 서버에서는 계정 정보를 읽어 사용자를 확인한 후, 사용자에게 고유한 ID값을 부여하여 세션 저장소에 저장한 후, 이와 연결되는 Session ID를 발급합니다.
• 서버는 HTTP 응답 헤더에 발급된 Session ID를 실어 보냅니다. 이후 매 요청마다 HTTP 요청 헤더에 Session ID가 담킨 쿠키를 실어 보냅니다.
• 서버에서는 쿠키를 받아 세션 저장소에서 대조를 한 후 대응되는 정보를 가져옵니다.
• 인증이 완료되고 서버는 사용자에 맞는 데이터를 보내줍니다.

장점

• 사용자의 정보는 세션 저장소에 저장되고, 쿠키는 그 저장소를 통과할 수 있는 출입증 역할을 합니다. 따라서 쿠키가 담긴 HTTP 요청이 도중에 노출되더라도 쿠키 자체에는 유의미한 값을 갖고있지 않아서 쿠키에 사용자 정보를 담아 인증을 거치는 것 보다 안전합니다.
• 각 각의 사용자는 고유의 Session ID를 발급 받기 때문에 일일이 회원 정보를 확인할 필요가 없어 서버 자원에 접근하기 용이합니다.

단점

• 쿠키에 사용자 정보를 담아 인증을 거치는 것 보다 안전하지만, 해커가 쿠키를 탈취한 후 그 쿠키를 이용해 HTTP 요청을 보내면 서버는 사용자로 오인해 정보를 전달하게 됩니다. 이를 세션 하이재킹 공격이라고 합니다. 해결책으로는 HTTPS 프로토콜 사용과 세션에 만료 시간을 넣어주는 것 입니다.
• 서버에서 세션 저장소를 사용하기 때문에 추가적인 저장공간을 필요로 합니다.

Access Token을 이용한 인증

JWT

JWT는 JSON Web Token의 약자로 인증에 필요한 정보들을 암호화시킨 토큰을 말하며, Access Token으로 사용됩니다. JWT를 생성하기 위해서는 Header, Payload, Verify Signature 객체를 필요로 합니다.

Header

Header는 토큰의 타입을 나타내는 typ과 암호화할 방식을 정하는 alg로 구성되어 있습니다.

{
  'alg': 'HS256',
  'typ': 'JWT'
}

Payload

Payload는 토큰에 담을 정보를 포함합니다. 여기서 하나의 정보 조각을 클레임으로 부릅니다. 클레임의 종류로는 Registered, Public, Private로 3가지가 존재합니다. 보통 만료 일시, 발급 일시, 발급자, 권한정보 등을 포함합니다.

{
  'sub': '1234567890',
  'name': 'John Doe',
  'admin': true,
  'iat': 1516239022
}

Verify Signature

Verify Signature는 Payload가 위변조되지 않았다는 사실을 증명하는 문자열입니다. Base64 방식으로 인코딩한 Header, Payload 그리고 SECRET KEY를 더한 후 서명됩니다.

HMACSHA256 {
  base64UrlEncode(header) + '.' +
  base64UrlEncode(payload),
  your-256-bit-secret
}

완성된 토큰

Header, Payload는 인코딩될 뿐, 따로 암호화되지 않습니다. 따라서 Header, Payload는 누구나 디코딩하여 확인할 수 있기에 정보가 쉽게 노출될 수 있습니다. 하지만 Verify Signature는 SECRET KEY를 알지 못하면 복호화할 수 없습니다.

만약에 해커가 사용자의 토큰을 훔쳐 Payload의 데이터를 변경하여 토큰을 서버로 보낸다면, 서버에서 Verify Signature을 검사하게 됩니다. 여기서 Verify Signature는 해커의 정보가 아닌 사용자의 정보를 기반으로 암호화되었기 때문에 해커가 변경한 정보로 보낸 토큰은 유효하지 않은 토큰으로 간주합니다. 이를 통해 사용자의 SECRET KEY를 알지 못하면 토큰을 조작할 수 없다는 것을 알 수 있습니다.

인증 순서

• 사용자가 로그인을 합니다.
• 서버에서는 계정 정보를 읽어 사용자를 확인 후, 사용자의 고유한 ID값을 부여하고 Payload에 정보를 넣습니다.
• JWT 토큰의 유효기간을 설정합니다.
• SECRET KEY를 통해 암호화된 Access Token을 HTTP 응답 헤더에 실어 보냅니다.
• 사용자는 Access Token을 받아 저장한 후, 인증이 필요한 요청마다 토큰을 HTTP 요청 헤더에 실어 보냅니다.
• 서버에서는 해당 토큰의 Verify Signature를 SECRET KEY로 복호화한 후, 조작 여부, 유효 기간을 확인합니다.
• 검증이 완료된다면, Payload를 디코딩하여 사용자의 ID에 맞는 데이터를 가져옵니다.

장점

• 간편합니다. 세션과 쿠키를 이용한 인증은 별도의 세션 저장소의 관리가 필요합니다. 그러나 JWT는 발급 후 검증만 거치면 되기 때문에 추가 저장소가 필요없습니다.
• 확장성이 뛰어납니다. 토큰 기반으로 하는 다른 인증 시스템에 접근이 가능합니다.

단점

• JWT는 한 번 발급되면 유효기간이 완료될 때까지는 계속 사용이 가능하며 중간에 삭제가 불가능합니다. 따라서 해커에 의해 정보가 털린다면 대처할 방법이 없습니다.
  해결책으로는 Refresh Token을 추가적으로 발급하여 해결하는 방식으로 아래에서 설명하겠습니다.
• Payload 정보가 디코딩하면 누구나 접근할 수 있기에 중요한 정보들을 보관할 수 없습니다.
• JWT의 길이가 길기 때문에, 인증 요청이 많아지면 서버의 자원낭비가 발생합니다.

Access Token + Refresh Token을 이용한 인증

Access Token을 이용한 인증 방식의 문제는 해커에게 탈취당할 경우 보안에 취약하다는 점입니다. 토큰의 유효기간을 짧게 하면 사용자는 로그인을 자주 해야해서 번거롭고, 길게 하면 보안이 취약해지기 때문에 이를 해결하고자 나온 것이 Refresh Token입니다.

Refresh Token은 Access Token과 같은 형태인 JWT입니다. Refresh Token은 Access Token보다 긴 유효기간을 가지고, Access Token이 만료됐을 때 새로 발급해주는 열쇠가 됩니다. 예를 들어 Refresh Token의 유효 기간이 2주, Access Token의 유효 기간이 1시간이라고 한다면, 2주 동안 Access Token이 만료 되는 1시간 주기마다 Access Token을 새롭게 발급받을 수 있습니다.

인증 순서

• 사용자가 로그인을 합니다.
• 서버에서는 회원 DB에서 값을 비교합니다.
• 로그인이 완료되면 Access Token, Refresh Token을 발급하여 HTTP 응답 헤더에 실어 보냅니다. 이때 일반적으로 회원 DB에 Refresh Token을 저장해둡니다.
• 사용자는 Refresh Token은 안전한 저장소에 저장 후, Access Token을 HTTP 요청 헤더에 실어 요청을 보냅니다.
• Access Token을 검증하여 이에 맞는 데이터를 보냅니다.
• 시간이 지나 Access Token이 만료됐다고 보겠습니다.
• 사용자는 이전과 동일하게 Access Token을 HTTP 요청 헤더에 실어 보냅니다.
• 서버는 Access Token이 만료됨을 확인하고 권한 없음을 신호로 보냅니다.
• 사용자는 Refresh Token과 Access Token을 HTTP 요청 헤더에 실어 보냅니다.
• 서버는 받은 Access Token이 조작되지 않았는지 확인한 후, HTTP 요청 헤더의 Refresh Token과 사용자의 DB에 저장되어 있던 Refresh Token을 비교합니다. Token이 동일하고 유효기간도 지나지 않았다면 새로운 Access Token을 발급해줍니다.
• 서버는 새로운 Access Token을 HTTP 응답 헤더에 실어 다시 API 요청을 진행합니다.

장점

• Access Token의 유효 기간이 짧기 때문에, 기존의 Access Token만을 이용한 인증보다 안전합니다.

단점

• 구현이 복잡합니다.
• Access Token이 만료될 때마다 새롭게 발급하는 과정에서 서버의 자원 낭비가 생깁니다.

OAuth 2.0을 이용한 인증

OAuth

OAuth는 외부서비스의 인증 및 권한부여를 관리하는 범용적인 프로토콜입니다.

OAuth 2.0

현재 범용적으로 사용되고 있는 것은 OAuth 2.0입니다. 2007년에 OAuth 1.0의 초안이 발표되었는데, 네트워크 시장이 커감에 따라 한계가 나타나기 시작했습니다. 그리고 2012년에 OAuth 2.0를 발표하면서 현재까지 사용되고 있습니다. 바뀐 점은 크게 3가지 입니다.

• 모바일에서도 사용이 용이합니다.
• 반드시 HTTPS를 사용하므로 보안이 강화됐습니다.
• Access Token의 만료 기간이 생겼습니다.

OAuth 2.0의 인증 방식은 4가지가 있지만, 가장 범용적으로 쓰이는 Authorization Code Grant에 대해 알아보겠습니다.

인증 순서

• Resource Owner : 일반 사용자
• Client : 우리가 만든 웹 어플리케이션
• Authorization Server : 권한 관리 및 Access Token, Refresh Token을 발급해주는 서버
• Resource Server : OAuth 2.0을 관리하는 서버의 자원을 관리하는 곳
  
• Resource Owner가 Client에게 인증 요청을 합니다.
• Client는 Authorization Request를 통해 Resource Owner에게 인증할 수단(Facebook, Google 로그인 url)을 보냅니다.
• Resource Owner는 해당 Request를 통해 인증을 진행하고 인증을 완료했다는 신호로 Authorization Grant를 url에 실어 Client에게 보냅니다.
• Client는 해당 권한 증서를 Authorization Server에 보냅니다.
• Authorization Server는 권한 증서를 확인 후, 유저가 맞다면 Client에게 Access Token, Refresh Token, 그리고 유저의 정보를 발급해줍니다.
• Client는 해당 Access Token을 DB에 저장하거나 Resource Owner에게 넘깁니다.
• Resource Owner가 Resource Server에 자원이 필요하면, Client는 Access Token을 담아 Resource Server에 요청합니다.
• Resource Server는 Access Token이 유효한 지 확인 후, Client에게 자원을 보냅니다.
• 만일 Access Token이 만료됐거나 위조되었다면, Client는 Authorization Server에 Refresh Token을 보내 Access Token을 재발급 받습니다.
• 그 후 다시 Resource Server에 자원을 요청합니다.
• 만일 Refresh token도 만료되었을 경우, Resource Owner는 새로운 Authorization Grant를 Client에게 넘겨야합니다.

SNS 로그인

인증 순서

• 사용자가 서버에게 로그인을 요청합니다.
• 서버는 사용자에게 특정 쿼리들을 붙인 페이스북 로그인 URL을 사용자에게 보냅니다.
• 사용자는 해당 URL로 접근하여 로그인을 진행한 후 권한 증서를 담아 서버에게 보냅니다.
• 서버는 해당 권한 증서를 Facebook의 Authorization Server로 요청합니다.
• 서버는 권한 증서를 확인 후, Access Token, Refresh Token, 유저의 정보를 돌려줍니다.
• 받은 고유 ID를 Key값으로 해서 DB에 유저가 있다면 로그인, 없다면 회원가입을 진행합니다.
• 로그인이 완료되었다면 세션과 쿠키 , 토큰 기반 인증 방식을 통해 사용자의 인증을 처리합니다.

참고 사항

• 우리가 만들 서버에서 OAuth를 이용하기 위해서는 사전에 OAuth에 등록하는 과정이 필요합니다. 개발자 사이트에서 웹 어플리케이션을 등록 후 APP_ID와 CLIENT_ID 등을 보내야 OAuth 에서는 어느 서비스인지를 알 수 있습니다.
• 페이스북 로그인을 인증을 이용하는 경우, 대부분은 Resource Server(페이스북 자체 API)를 사용하지 않습니다. 따라서 Access Token, Refresh Token은 실제로 쓰이지 않습니다. 우리의 서버에서 Access token을 검증할 수도 없을 뿐더러 인증의 수단으로 활용하기엔 부족한 점이 많습니다. 따라서 보통 Authorization Server로 부터 얻는 고유 ID값을 활용해서 DB에 회원관리를 진행합니다.

검색하여 나올만한것들을 썻고 관련한 답변은 각 출처란에 자세히 기록되어있습니다.

자세히 안나와있는건 코멘트로 추가하였습니다.

질문중 프론트엔드가 받을만한 질문이 있냐고 하실수있지만 퍼블리셔는 UI를 만들어야하고
그렇기때문에 스크립트를 잘 알아야합니다.
특히 요새는 react,vue 퍼블이라고 하여 마크업과  ui기능동작을 만들어줄 사람을 찾기때문에 프론트 면접 질문과 겹치는
부분들이 있을수 있습니다.

웹 표준

웹 표준(Web Standards)
1. 웹 표준이란?  - '웹에서 표준적으로 사용되는 기술이나 규칙'  - 표준화 단체인 W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다.  - 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미.  - 표준 스펙을 잘 지키는 것 뿐만 아니라 구조적 마크업(XHTML)과 표현 및 레이아웃(CSS) 및 사용자 행위 제어(DOMScripting)를 잘 분리하는 고급 홈페이지 구축 방식.  - CSS 와 HTML(XHTML)로 웹 문서를 작성하는 것의 명확한 용어는 권고(recommend)라고 하며 버전과 상관없이 HTML, XHTML은 그 자체로 표준이라고 한다.

출처: https://goddaehee.tistory.com/244 [갓대희의 작은공간:티스토리]

웹접근성

웹 접근성이란?

• 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
  - 물론 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있음
• 웹 접근성을 갖추면 웹에 접근했을 때 그 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다!
• 결국, 궁극적인 목적은 어떤 상황이든 , 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것

웹 콘텐츠 접근성 지침

웹 접근성을 잘 확보했는지 판단할 기준이 되는 웹 콘텐츠 접근성 지침!

• W3C이 웹 접근성 권고안인 ‘WCAG(Web Content Accessibility Guidelines) 2.0’을 기반으로 한국 실정에 맞게 조금 수정한 ‘한국형 웹 콘텐츠 접근성 지침 2.1’ 내용을 정리해보았다.

https://t1.daumcdn.net/cfile/tistory/1162174250B247F71B


출처 :https://velog.io/@jos9187/%EC%9B%B9-%ED%91%9C%EC%A4%80%EA%B3%BC-%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C

doctype에 종류는? doctype란?

DTD(DOCTYPE)란?

DTD는 Document Type Definition의 약자이다. 즉, 문서형식을 정의해주는 것이다.

DOCTYPE 종류

HTML 4.01 and HTML5 공통 사용

<!DOCTYPE html> W3C에서 html5를 공식 표준 권고안으로 2014년 10월 28일에 확정 발표했다.
HTML5 표준 권고안

공통의 DOCTYPE 선언하기

HTML5

HTML 4.01 Strict (엄격모드)

http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional (호환모드)

http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict (엄격모드)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional (호환모드)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
위의 다섯가지가 제일 많이 사용되는 것이다.
DTD를 적지 않는 브라우저들은 Quirks Mode 상태(어물쩡한 상태)로 렌더링 되기 때문에 바른 DTD를 적어주는 것이 좋다. 크로스 브라우징을 하기 위해서는 꼭 필요한 원칙이다.
우리나라에서는 DOCTYPE 중에서 XHTML 1.0 Transitional를 제일 많이 사용중이다. 그 이유중에 하나는 IE중에서도 하위 브라우저를 사용하는 곳이 많기 때문이다. 또 하나는 표준모드는 너무 엄격하여 적용하기가 쉽지 않아 하위 브라우저 호환성을 고려하여 느슨한 상태의 호환모드 DOCTPYE 이다.
그렇지만 IE7이상에서 사용할 때는 HTML5를 사용해도 무관하니 참고 바람.

Quirks MODE(쿼크모드) 렌더링과 DTD

쿼크모드(Quirks mode)

오래된 웹 브라우저를 위하여 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 W3C나 IETF의 표준을 엄격히 준수하는 표준모드(Standards Mode)를 대신하여 쓰이는 웹 브라우저 기술을 가리킨다.
참고문헌
쿼크모드의 발생 원인

• DOCTYPE 선언이 존재하지 않거나 잘못 적혀있을 경우, 웹 브라우저는 문서를 쿼크 모드로 해석한다.
• DOCTYPE 선언 내의 URL이 생략된 경우, 웹 브라우저는 문서를 쿼크 모드로 해석한다.

호환 출력 방식(Quirks Rendering Mode)의 특징

• 브라우저가 HTML을 읽는데 시간이 더 걸린다.
• 브라우저가 HTML을 해석하는데 시간이 더 걸린다.
• 브라우저가 HTML을 출력하는데 시간이 더 걸린다.
• 브라우저마다 HTML을 각각 다르게 출력한다.

IE10에서 쿼크 모드를 볼 수 있다.

DTD 정의 필요성

1. 문서의 가독성 증가
2. 브라우저 별 호환성 증가(크로스 브라우징)
3. 문서 제작의 효율성 증가

참고사항

HTML5가 표준이 되었지만 아직 IE 웹 브라우저에서는 호환성 보기 헤더(X-UA-Compatible header)가 설정되지 않을 경우, 쿼크모드(Quirksmode)로 변경되는 문제를 가진다.



출처 : https://singihae.gitbooks.io/front-end-developer-guide-book/content/chapter01.html

반응형웹과 적응형의 차이

css 방법론

OOCSS(Object Oriented CSS)는 CSS를 모듈(module) 방식으로 작성하여 중복을 줄이는 방식의 방법론이다
BEM(Block Element Modifier)은 블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 이름을 작성하는 방식의 방법론이다
SMACSS(Scalable and Modular Architecture for CSS)는 CSS를 범주화(Categorization)로 패턴화 하고자 하는 방법론이다

사용이유

• 원활한 유지보수를 위함
• 코드의 재사용성을 높이기 위함
• 클래스명 만으로도 무슨 내용인지 예측할 수 있게 함

출처 :https://velog.io/@hahan/CSS%EB%B0%A9%EB%B2%95%EB%A1%A0OOCSS-BEM-SMACSS

css Sass와 Scss의 차이

• SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어
• SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가
• SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식
• 전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS 보다 더 많음
• SASS보다 SCSS가 CSS와의 호환성이 더 좋음
  

출처 : https://cocoon1787.tistory.com/843

Ir기법

IR(Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로 이는 웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요하다.

출처 : https://velog.io/@chumil7432/CSSIR%EA%B8%B0%EB%B2%95

SEO 란? 최적화 작업?

요즘 사람들은 궁금한 것에 대한 답을 대부분 Google에 검색하여 답을 얻곤 하는데요. 그렇기 때문에 당연히 모든 비즈니스 및 웹사이트 소유주들은 Google에서 자신들의 정보를 사람들이 찾기 쉽도록 만들기 위해서라면 할 수 있는 모든 것을 합니다. 이것이 바로 SEO입니다. 즉, 검색 결과에서 상위에 노출될 수 있도록 내 콘텐츠를 최적화하는 방식을 말합니다.

SEO(검색 엔진 최적화)는 웹사이트가 유기적인(무료) 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정을 말합니다. 비즈니스 유형이 어떤 것이든 SEO는 가장 중요한 마케팅 유형 중 하나입니다.

왜냐하면 Google은 검색하는 사람들에게 긍정적인 사용자 경험을 선사하는 것이 목표이기 때문에 가능한 한 최고의 정보를 제공하길 원합니다. 따라서, SEO 노력은 검색 엔진이 여러분의 콘텐츠를 특정 검색어에 대한 웹 상의 주요한 정보로 인식하도록 하는 과정에 포커스를 맞추어야 합니다.

1. SEO 계획 세우기
2. 키워드 리서치
3. 페이지 속도 최적화
4. 타이틀 태그 및 메타 설명 작성
5. 대체 텍스트 추가
6. 내부 링크를 제작
7. 외부 링크에 노력을 기울이기
8. 모바일 친화적인 사이트인지 확인
9. 결과 분석

출처 : https://ko.wix.com/blog/post/what-is-seo

meta태그와 종류

메타 데이터는 데이터에 대한 데이터 (정보)입니다.

<meta> 태그는 HTML 문서에 대한 메타 데이터를 제공합니다. 메타 페이지에 표시되지 않지만, 기계 분석 할 것이다.
메타 엘리먼트는 일반적으로 페이지 설명, 키워드, 문서 저자, 마지막 수정, 및 다른 메타 데이터를 지정하는 데 사용된다.
메타 데이터 브라우저에서 사용할 수있는 검색 엔진 (키워드), 또는 다른 웹 서비스 (콘텐츠 또는 다시로드 페이지를 표시하는 방법).

예제

예제 1 - 검색 엔진 키워드를 정의:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

예제 2 - 웹 페이지에 대한 설명을 정의:

<meta name="description" content="Free Web tutorials on HTML and CSS">

예제 3 - 페이지의 저자를 정의:

<meta name="author" content="홍길동">

예제 4 - 30초마다 새로고침을 한다:

<meta http-equiv="refresh" content="30">

예제 5 - 인터넷 익스플로러 호환 모드
http-equiv는 컨텐츠의 속성 정보/값에 대한 것을 HTTP헤더에 제공하는 것.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

예제 6 - 문자열 인코딩 HTML5

<meta charset="UTF-8">

HTML 4.01

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

웹 사이트의 기본 정보를 제공

필요한 항목만 <head> 태그 요소에 삽입하여 사용.

<meta name="generator" content="사이트 제작 툴 혹은 에디터">
<meta name="author" content="저자 제작자"> 
<meta name="keywords" content="검색을 위한 키워드">
<meta name="description" content="페이지의 요약설명">
<meta name="copyright" content="저작권 정보">
<meta name="subject" content="사이트의 주제 입력">
<meta name="title" content="사이트의 타이틀">
<meta name="publisher" content="발행인 조직 혹은 기업">
<meta name="other agent" content="사이트 책임자">
<meta name="classification" content="카테고리 분류">
<meta name="reply-to(email)" content="메일주소">
<meta name="filename" content="파일명">
<meta name="author-date(date)" content="제작일">
<meta name="location" content="위치/국가">
<meta name="distribution" content="배포자">

효과를 나타내는 제공

각 옵션의 선택사항 : 
Page-Enter : 페이지 들어갈 때 효과 줌
Page-Exit : 페이지 나올 때 효과 줌
blendtrans : 점점 밝게 또는 점점 어둡게 나타나도록 설정
revealtrans : 문서 전환 효과 지정
duration : 시현 시간 지정

transition=0 사각형 작아지기
transition=1 사각형 커지기
transition=2 원 작아지기
transition=3 원 커지기
transition=4 위에서 아래로
transition=5 아래이서 위로
transition=6 왼쪽에서 오른쪽
transition=7 오른쪽에서 왼쪽
transition=8 수직 블라인드
transition=9 수평 블라인드
transition=10 체크무늬 왼쪽에서 오른쪽으로
transition=11 체크무늬 위에서 아래로
transition=12 랜덤 뿌리기
transition=13 수직 2등분 가운데로 모움
transition=14 수직 2등분 바깥으로 퍼짐
transition=15 수평 2등분 가운데로 모움
transition=16 수평 2등분 바깥으로 퍼짐
transition=17 45도 오른쪽 위에서 왼쪽 아래로
transition=18 45도 오른쪽 아래에서 왼쪽위로
transition=19 -45도 왼쪽 위에서 오른쪽 아래로
transition=20 -45도 왼쪽 아래에서 오른쪽 위로
transition=21 수평 랜덤
transition=22 수직 랜덤
transition=23 1~22 랜덤 선택

로봇을 제어하는 메타태그

robot.txt 파일을 생성하지 않고 메타태그를 활용하여 로봇을 제어할 수 있습니다.

<meta name="robots" content="all" />
<!-- // 로봇 검색을 허가한다. // -->
<meta name ="robots" content="none" />
<!-- // 로봇 검색을 허가하지 않는다. // -->
<meta name="robots" content="index,follow" />
<!-- // 이 파일을 읽는다. 링크 연결 문서도 읽는다. // --> 
<meta name="robots" content="noindex,follow" />
<!-- // 이 파일은 읽지 않는다. 링크 연결 문서만 읽는다. // --> 
<meta name="robots" content="index,nofollow" />
<!-- // 이 파일을 읽는다. 링크 연결은 무시한다. // --> 
<meta name="robots" content="noindex,nofollow" />
<!-- // 이 파일를 읽지 않는다. 링크 연결도 무시한다. // -->

 출처 :https://singihae.gitbooks.io/front-end-developer-guide-book/content/chapter03.html 

 css size rem em px 

px

px은 우리가 알고 있는 픽셀값입니다. 우리가 해상도를 지정할 때 1920x1080 로 지정한다면, width(너비)는 1920px이고, height(높이)는 1080px이라는 것입니다. 위의 예시에서 p태그 속성값에 400px을 주었다면 p태그로 묶인 문장들은 너비가 400px로 고정됩니다. 창이 400px보다 줄어들면 스크롤이 생기게 됩니다. font-size의 기본값은 16px입니다. 즉, 아무런 지정을 하지 않는다면 font-size는 16px이 기본값입니다.

%

%는 사용자가 보이는 화면에서 차지하는 비중입니다. 가령 위의 예시에서 p의 속성값이 400px가 아닌 70%라면 창이 줄어들든 늘어나든 사용자 입장에서 보이는 화면의 70%만 <p>태그가 사용하게 됩니다. 즉, 부모가 만들어준 공간안에서의 너비 비율로 볼 수 있습니다. 가령, 위 예시에서 p의 속성값이 70%라면, p의 부모는 body이므로, body(부모)가 만들어준 공간 안에서의 70%로 볼 수 있습니다. body자체에 margin값(여백)이 살짝 존재하므로 화면에 살짝 여백이 존재합니다. margin=0을 주어서 없앨 수도 있습니다.

em

em단위는 em단위가 있는 곳의 폰트사이즈의 배수입니다. 가령 위의 예시에서 h1의 폰트 속성값이 1.5em, h2의 폰트 속성값이 1.2em, p의 폰트 속성값이 1em이라면, h1의 폰트사이즈는 1.5*16px=24px이고, h2의 폰트사이즈는 1.2*16px=19.2px이며, p의 폰트사이즈는 16px이 되는 것입니다. p의 width가 가령 20em이라면, 20*16px=320px이 됩니다. em은 기준이 되는 값만 수정을 하면 나머지는 비율대로 조정을 해줄 수 있기 때문에 가장 유용한 단위라고 생각합니다. 앞으로 저도 작업을 할 때, 가급적 em단위를 쓰는 습관을 기르려고 합니다.

rem

rem단위는 문서의 기본값의 배수입니다. em과 비슷하지만 em단위는 em단위가 쓰여진 곳(부모 태그)의 기준값에 따라 달라지지만, rem단위는 문서 전체의 기본값의 배수이므로, 문서 전체의 기준값에 따라 달라집니다. 만약, 문서 전체의 기준값을 바꿔야 한다면, style에 :root{font-size:16px} 의 코드를 달아주시면 됩니다. root는 뿌리, 근간이기 때문에 저런 표현을 쓰나봅니다. rem의 r도 root의 약자입니다. 사이트 전체적으로 font-size를 조정해야 한다면 root의 속성값을 변경해주면 됩니다.

출처: https://esef.tistory.com/117 [굴리고 굴리는 블로그:티스토리]

grid

• Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)

출처 : https://studiomeal.com/archives/533

플러그인 사용
AGGrid
https://www.ag-grid.com/example

AUIGrid
https://www.auisoft.net/demo/auigrid/index.html?init&theme=default&s=0

flex

Flex(플렉스)는 Flexible Box, Flexbox라고 부르기도 합니다.
Flex는 레이아웃 배치 전용 기능으로 고안되었습니다. 그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많아요.
출처 :https://studiomeal.com/archives/197

css 전처리기/ 후처리기 

전처리기 : 화면에 보여주기 전에 (렌더링 전에) CSS를 변경해서, 스타일을 보여준다.
    사용자가 작성하기 쉬운 코드로 작성 => 기본 CSS로 변환 => 렌더링
후처리기 : 화면에 보여주고 나서, CSS 변경
    기본 CSS파일 작성 => 렌더링 => 외부 프로그램 사용해서 스타일 변경

전처리기 : Scss, Stylus, Less
후처리기 : PostCSS

버전관리툴 git /svn

형상관리(Version Control Revision Control)툴

• 소프트웨어 버전 관리 툴이라고도 한다.
• 형상관리는 소스의 변화를 끊임없이 관리하는 것을 말한다.
• 소스를 버전 별로 관리할 수 있어서 개발할 때 실수로 소스를 삭제하거나, 수정하기 이전으로 돌아가야되는 경우 유용하게 사용되는 툴.
• 또한 팀 프로젝트에서도 누가 무엇을 어떻게 수정했는지도 알 수 있기 때문에 코드를 병합하거나 수정된 소스를 추적하는 데에도 쓰인다.

SVN vs GIT 비교

0.3.1 SVN

• SVN은 보통 대부분의 기능을 완성해놓고 소스를 중앙 저장소에 commit
• commit의 이미 자체가 중앙 저장소에 해당 기능을 공개한다는 의미.
• (GIT 과 가장 큰 차이점) 개발자가 자신만의 version history를 가질 수 없다. (그렇기 때문에 local History를 이용하긴 하지만, 일시적이다. 내가 몇일전 까지에 한하여 작업했던 내역을 확인 가능하지만 버전 관리가 되진 않는다.)
• commit한 내용에 실수가 있을 시에 다른 개발자에게 바로 영향을 미치게 되는 단점도 있다.

0.3.2 GIT

• (GIT 과 가장 큰 차이점) 반면, git은 개발자가 자신만의 commit history를 가질 수 있고, 개발자와 서버의 저장소는 독립적으로 관리가 가능.
• commit한 내용에 실수가 있더라도 이 바로 서버에 영향을 미치지 않는다
• 개발자는 마음대로 commit(push)하다가 자신이 원하는 순간에 서버에 변경 내역(commit history)을 보낼 수 있으며, 서버의 통합 관리자는 관리자가 원하는 순간에 각 개발자의 commit history를 가져올 수 있음.

이렇게 git은 서버 저장소와 개발자 저장소가 독립적으로 commit history를 가져갈 수 있기 때문에 매우 유연한 방식으로 소스를 운영할 수 있으며, 이러한 유연성이 git의 가장 큰 장점이다.

es5, es6 문법 차이

레거시 코드가 프로젝트에 존재할수있기때문에

1.let,const keyword
2.Arrow function
3.for/of
4.Class
5.Promise
6.Symbol
7.Default parameter
8.function rest parameter
9.String.inclues()/.startsWith()/.endsWith()
10.Array.from()/.keys()/.find()/.findIndex()
11.New Math Methods
12.New Number Properties, Methods
13.New Global Methods
14.Iterable Object.entries
15.Javascript Module

gulp 

Gulp는 Node.js 기반의 프로세스 자동화 도구이며 MIT 라이센스의 오픈소스 프로젝트입니다. 회사 일을 하면서 스크립트를 난독화하거나 파일을 복사하는 등의 작업이 반복될 때가 많았는데, Gulp는 이런 반복되는 작업들을 자동화하기 위해 개발된 도구입니다. 또한 Gulp의 플러그인을 사용하면 기능을 다양하게 확장할 수도 있습니다.

출처 :https://haeguri.github.io/2019/03/31/introduction-gulp/

css reflow와 repaint 에 설명

브라우저 렌더링 과정을 알아보았으니 최적화시키는 방법을 알아보자. 

위와 같은 렌더링 과정에서 Reflow와 Repaint는 둘다 비용이 많이 드는 작업이다.

먼저 이 두 과정에 대해 알아보자. 

Reflow(Layout)이란?

화면구조(Layout)이 변경되었을 때 뷰 포트 내에서 렌더 트리상 노드의 정확한 위치과 크기를 계산하는 과정이다. element의 reflow는 DOM에 있는 모든 하위, 상위 요소의 후속 리플로우를 유발한다. 

- 모든 엘리먼트의 위치나 길이, 크기 등등을 다시 계산하는 과정

- 상위 엘리먼트를 변경시키면 하위 엘리먼트에도 영향을 끼침

- render tree를 재생성하므로 부하가 크고 레이아웃에 영향을 줌

- DOM노드를 추가, 제거 , 업데이트하는 경우 발생 

Repaint(Redraw)란?

화면에 가시성이 변하지만 레이아웃에 영향을 미치지 않는 요소의 외관을 변경할 때 발생한다. 

- 레이아웃에 영향을 주지않지만 눈에 보이는 요소들(background-color, color, visibility,..)이 변경됨

- reflow 보다는 부하가 크지는 않음

Reflow와 Repaint가 모두 일어나는 경우 

- DOM 노드를 추가, 제거 업데이트하는 경우 

- DOM 요소의 위치 변경, 크기 변경 (margin, padding, border, width, height, 등..) 

- display : none으로 DOM 요소를 숨기는 경우

- DOM 노드를 이동하거나 애니메이션을 생성하는 경우

- 창 크기를 조정하는 경우 (Resizing)- 글꼴 스타일을 변경하는 경우 (요소의 geometry가 변경되고 이는 페이지에 있는 다른 요소의 위치나 크기에 영향을 미칠 수 있고 두 요소 모두 브라우저에서 reflow를 수행하고 repaint 과정을 거침)- 스타일 시트를 추가하거나 제거하는 경우- DOM을 조작하는 스크립트를 수정하는 경우

- offset, scrollTop, scrollLeft와 같은 계산된 스타일 정보 요청

- 이미지  크기 변경

Repaint만 일어나는 경우 

- visibility :  hidden 으로 DOM 요소를 숨기는 경우 (레이아웃이나 위치 변경이 없어 repaint만 발생)

- background-color, visibillty, outline 등의 스타일 변경

Reapint와 Reflow 최소화하는 방법

1) 개별 스타일을 바꾸기보다 클래스 이름을 변경. 동적인 스타일인 경우 cssText속성을 편집한다.

2) DOM 변경사항을 일괄처리

  - documentFragment를 사용하여 DOM사용을 최소화한다. ( documentFragment는 DOM에 적용되기 전까지는 메모리상에만 존재)

  - display :none으로 요소를 숨기고 (1 reflow, 1 repaint) 변경사항 100개를 추가한 후 display를 복원한다. ( 총 2 reflow, 2 repaint)

3) 계산된 스타일을 반복적으로 묻지 않고 변수에 캐싱

:offset, scrollTop과 같은 계산된 스타일 정보를 요청할 때마다 정확한 정보를 제공하기 위해 큐를 비우고 모든 변경사항을 적용하기 때문에 스타일 정보를 변수에 저장하여 사용을 권장

4) 영향받는 엘리먼트 제한하기 ( position fixed, absolute를 활용)

5) <table> 레이아웃을 피한다.

:<table>은 점진적으로 렌더링 되지 않고 모두 로드되고 테이블 너비가 계산된 후 화면에 그려진다. 콘텐츠의 값에 따라 테이블 너비가 계산되기 때문에, 테이블 콘텐츠의 작은 변경만 있어도 테이블 너비가 다시 계산되고 테이블의 모든 노드들이 Reflow가 발생. 데이터 표시용 도로 사용 시 table-layout:fixed를 사용하자.

6) IE의 CSS표현식을 사용하지 않는다.

: Reflow가 발생할 때마다 자바스크립트 표현식이 다시 계산되기 때문이다.

6) 되도록 실행 사이클 안에서 실행하도록 처리

타이머에서 실행되게 하면 추가적인 실행 사이클이 발생하게 되는데, 첫 번째 요소에 대한 작업이 한 사이클 내에서 실행되고, 타이머의 실행은 먼저 실행된 사이클이 끝난 다음에 진행된다. 이로 인해 결과적으로 리플로와 리페인트가 두 번 일어나게 되므로 리플로우와 리페인트가 일어날 수 있는 작업은 가능하면 실행 사이클 안에서 실행하도록 처리하는 편이 효과적이다.

7) 노드복제 

: 변경하려는 요소의 노드를 복제한 후 복제된 노드에 필요한 작업을 실행하는 방법. 복제된 노드는 DOM 트리에 추가된 상태가 아니므로 렌더링 성능에 영향을 줄 수 있는 작업을 실행하더라도 리플로나 리페인트가 발생하지 않는다.

작업이 모두 완료된 이후 복제된 노드를 원래 노드와 치환해 DOM 트리에 변경된 사항이 적용되게하면 치환 시점에만 리플로와 리페인트가 발생한다.

var element = document.getElementById("box1");
var clone = element.cloneNode(true);     // 원본 노드를 복제한다.

for(var i=0; i < 100; i++) {
    clone.style.width = i + "px";
}

// 변경된 복제 노드를 DOM 트리에 반영하기 위해 기존 노드와 치환한다.
parentNode.replaceChild(clone, element);

Chorme Tool을 통한 성능 확인

-Bad Code

- Optimized Code

출처 :https://ekimnida.tistory.com/45
----

참고사이트

- <Reflow or Repaint(or ReDraw) 과정 설명 및 최적화 방법>

- <[Browser] Critical Rendering Path 최적화>

- <[Browser] Reflow와 Repaint>

- <브라우저 렌더링에 대한 이해와 최적화>

- <FrontEnd-성능 최적화-기본>

- <Understanding Reflow and Repaint in the browser>

- <[자바스크립트] 브라우저 렌더링>

- https://ekimnida.tistory.com/45 [기록:티스토리]

출처 :https://k0102575.github.io/articles/2020-11/reflow-repaint

브라우저 랜더링 원리

홈페이지가 사용자에게 보이는 순서(브라우저 렌더링 과정)

1. 주소창에 입력된 주소를 통해 서버를 찾아간다.
2. 이후 DNS가 연결해줄 곳을 찾는다.(실제 서버)
3. 서버에서 HTML 파일을 클라이언트로 보낸다.
4. HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식)
5. 중간에 css를 로드하는 link혹은 style 태그를 만나면 DOM 생성을 중지한다.
6. CSS를 파싱하고 CSSOM을 생성한다.
7. 이렇게 만들어진 DOM와 CSSOM은 렌더링(브라우저에 시각적으로 출력하는 것)을 위해 렌더 트리로 결합된다.
8. 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단한다.
9. 이후 JS엔진을 실행하고 JS코드를 파싱한다.

자바스크립트가 DOM, CSSOM을 변경하는 경우 리렌더링을 하게 된다.
리플로우: 레이아웃 계산을 다시 하는 것
리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것

여기서 script태그를 만날때마다 파싱이 중단되는 문제를 script 태그 뒤에 async 혹은 defer를 붙여줌으로써 해결할 수 있다.
async: HTML 파싱, JS 파일 로드가 동시에 진행
defer: DOM 생성이 완료된 직후, JS의 파싱과 실행이 진행된다.

출처 :https://velog.io/@wkahd01/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EB%AC%B8%EC%A0%9C-%EC%9D%80%ED%96%89-HTML-%EC%A7%88%EB%AC%B8-%EB%8B%B5%EB%B3%80

호이스팅

모든 선언이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.

아래는 호이스팅의 예시이다.

console.log(name1) // undefined 출력
var name1 = ‘자몽’
/////////
console.log(name2)
let name2 = ‘자몽’; // ReferenceError 에러출력

var는 선언, 초기화가 동시에 이루어지고,
let,const는 선언단계만 호이스팅 되기때문에 실행 결과가 다름을 확인할 수 있다.

(선언 => 초기화 => 할당) 과정을 거침

클로저

로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

외부 함수보다 중첩 함수가 더 오래 유지되는 경우,
중첩 함수는 이미 생명 주기가 다한 외부 함수의 변수를 참조할 수 있으며,
이러한 중첩 함수를 "클로저(closure)"라고 한다.

클로저는 은닉성이라는 강점을 지니고 있다.

function closureF(){
  let name = 'jamong';
  return function(){
    return name;
  };
}
let closure = closureF();
console.log(closure()); // 'jamong' 출력

코드를 보면 closureF 함수가 종료되었음에도 name에 저장된 값이 그대로 출력되는 것을 확인할 수 있다.

자바스크립트는? 

JavaScript는 싱글 스레드이면서 논 블록킹 언어이다.

스레드
어떠한 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위를 말한다.

싱글 스레드
스레드가 하나밖에 존재하지 않아 한번에 하나의 작업만 할 수 있다.

싱글 스레드 논 블록킹
자바스크립트는 비동기 처리를 통해 싱글 스레드이지만 블록킹 되지 않게 한다.
하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 수행함으로써(비동기) 문제를 해결한다.

비동기 처리
특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

=> 멀티 스레드가 아닌 이유는 동시성 문제(동시에 공유된 자원에 접근하는 경우)를 해결하기 까다롭기 때문.

자바스크립트에서 비동기적으로 코딩하기

Promise
비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값
=> 쉽게 말해 비동기 작업의 결과라고 생각하면 된다.

• 콜백 함수
  콜백 지옥에 빠지게 될 수도 있다는 단점 존재
• Promise
  .then: promise가 처리될 때까지 대기
• async/await
  async: 해당 함수는 항상 promise를 반환
  await: promise가 처리될 때까지 대기

비동기 처리가 필요한 이유: https://velog.io/@dev-katrina/%EB%B9%84%EB%8F%99%EA%B8%B0

자바스크립트 동작 원리(이벤트 루프)

gif 출처: https://beomy.github.io/tech/javascript/javascript-runtime/

• 일반적인 작업은 Call Stack에서 이루어짐
• 시간이 소요되는 작업들(setTimeout, 이벤트, HTTP 요청 메서드 등)은 Web API에서 대기하다가 Callback Queue로 보내진다.
• Call Stack이 비워져 있을때만 Callback Queue에 저장되어있던 작업들을 Call Stack으로 보낸다.

REST API

REST 기반으로 서비스 API를 구현한 것

REST(Representational State Transfer)
자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것

• HTTP URI를 통해 자원을 명시하고,
• HTTP 메서드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD를 적용하는 것
  => 즉, 자원 기반의 구조 설계의 중심에 자원이 있고, HTTP 메서드를 통해 이를 처리한다.

API(Application Programming Interface)

• 응용프로그램에서 사용할 수 있도록 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
  => 쉽게 말해 프로그램끼리 통신할 수 있도록 하는 중재자이다.

• REST API의 특징
  REST API는 HTTP 표준을 기반으로 구현됨
  REST 기반으로 시스템을 분산시켜 확장성, 재사용성을 높여 유지보수와 운용을 쉽게 할 수 있게 만들어준다.
  
  
  

이벤트 전파

생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM트리를 통해 전파된다.

이벤트 버블링
이벤트가 하위 요소에서 상위 요소 방향으로 전파

이벤트 캡처링
이벤트가 상위 요소에서 상위 요소 방향으로 전파

+) 이벤트 버블링과 캡처링를 막기 위해서 e.stopPropagation()을 사용한다.
해당 웹 API를 통해 이벤트가 전파되는 것을 막을 수 있다.

타깃 단계
이벤트가 이벤트 타깃에 도달

이벤트 위임: 이벤트 버블링 활용하기

이벤트 위임을 사용하지 않고, 동일한 이벤트를 일일히 수동으로 달아주기에는 코드 낭비가 너무 심하다.

따라서 부모 요소에 이벤트를 부여해 버블링을 통해 하위 요소를 동작시킬때도 해당 이벤트가 발생하도록 만드는 것이 바람직하다.

아래와 같은 상황에서

 <div class="itemList">
      <li>
        <input type="checkbox" id="item1" />
        <label for="item1">1</label>
      </li>
      <li>
        <input type="checkbox" id="item2" />
        <label for="item2">2</label>
      </li>
    </div>

• case1: 각각 이벤트들을 부여해주기
  inputs의 내부 input에 각각 이벤트를 달아주었다.

let inputs = document.querySelectorAll("input");
inputs.forEach((input) => {
  input.addEventListener("click", () => {
    alert("clicked");
  });
});

• case2: 부모 요소에 이벤트 부여하기
  부모 요소인 itemList를 클릭했을 때, 이벤트 버블링을 통해 checkbox type을 클릭했을 경우, 이벤트가 똑같이 동작하도록 만들었다.

let itemList = document.querySelector(".itemList");
itemList.addEventListener("click", (e) => {
  console.log(e);
  if (e.target.type === "checkbox") {
    alert("click");
  }
});

이처럼 이벤트 버블링을 통한 이벤트 위임은 하위 요소에 각각의 이벤트를 붙이지 않고도 상위 요소에서 하위 요소의 이벤트들을 제어할 수 있다.

실행 문맥(실행 컨텍스트)

var x = 10;
const y = 20;

function edit(a){
  var x = 1;
  const y = 2;

  return x+y+a;
}
edit(12);

위와 같은 코드에서의 실행 컨텍스트를 확인하면 다음과 같다.

1. 전역 실행 컨텍스트 생성/소스코드 실행

• var로 선언한 전역 변수는 객체 환경 레코드에 저장됨.
• const, let으로 선언한 전역 변수는 선언적 환경 레코드에 저장됨.

1. edit 함수 실행 컨텍스트 생성/소스코드 실행

• 전역 환경 레코드와 달리 함수 환경 레코드는 분리되지 않고, 한 장소에서 var,const,let 모두를 처리한다.

추가로 알아야 하는 것들:

• 실행 컨텍스트들은 실행 컨텍스트 스택에 하나씩 쌓이고 사라진다.
• 소스코드 평가 과정에서는 선언문이 실행되고, 스코프에 등록된다.
• 소스코드 실행 과정에서는 변수에 값이 할당되고 함수가 호출된다.

SPA CSR SSR

• SPA
  [싱글 페이지 렌더링]
  SPA는 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션
  => 하나의 페이지에서 실행됨.
• CSR
  [클라이언트 사이드 렌더링]
  최초 로드시 필요한 파일들을 전부 받고, 사용자의 인터렉션에 따라서 클라이언트단에서 받아와 랜더링을 해주는 방식
  => 기본 틀만 받고, 브라우저에서 동작으로 DOM을 그림

단점: 초반에 뼈대만 다운받기 때문에, SEO에 취약, 초기 화면의 렌더링 속도가 느리다
장점: 렌더링 속도가 빠름

• SSR
  [서버 사이드 렌더링]
  요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식
  => 이미 다 만들어진 DOM을 받음

단점: 매 랜더링마다 서버를 거침으로 속도가 느림
장점: 초기 화면의 렌더링 속도가 빠르며, SEO에 최적화됨.

null, undefined, undeclared, NaN 

• null
  => 빈 값
  null이라는 빈 값을 할당했을 때, 생기는 타입.
• undefined
  => 정의되지 않음
  var 선언문의 경우, 호이스팅 되었을 때, 변수 선언과 초기화가 동시에 일어나기 때문에, 변수가 undefined됨.(타입 결정 안됨)

console.log(data) // undefined
const data = 'data'

• undeclared
  => 선언되지 않음
  let, const 선언문의 경우, 호이스팅 되었을 때, 변수 선언과 초기화가 따로 이루어지기에, 변수가 undeclared되어 에러가 생긴다.

console.log(data) // error
let data = 'data'

• NaN
  => 표현 불가능한 수치형 결과

typeof 1/0 // NaN

this 

• 일반 함수 호출
  전역 객체 바인딩된
• 메서드 호출
  메서드를 호출한 객체 가리킴
• 생성자 함수 호출
  생성자 함수가 생성할 인스턴스를 가리킴
• apply/call/bind 메서드에 의한 호출

Property와 Attribute의 차이

우선, 둘 다 속성을 의미한다.

• Property
  프로퍼티는 정의되는 위치가 DOM이다. 브라우저에서 DOM 트리를 생성할 때, div 태그의 attribute와 value를 읽어서 노드를 생성한다.
• Attribute
  어트리뷰트는 정의되는 위치가 HTML로, HTML 태그에 추가적인 정보를 제공한다.

https://yeoulcoding.tistory.com/157 참고

HTML 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는 이유?

렌더링 엔진은 HTML 한 줄씩 순차적으로 파싱하며 DOM을 생성해 나가다가 JavaScript를 만나면 DOM 생성을 임시 중단한다.

DOM 생성을 임시 중단하고, 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 되는데, 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML 파싱을 재개하며 DOM 트리를 생성한다.

[신입 웹퍼블리셔 예상 면접 질문 리스트]

- 간단한 자기소개 (이건 회사 by 회사 )

- 웹 이전에 했던 일과 '웹 퍼블리셔'를 선택한 이유 (많이 물어봄)

- 웹접근성 / 웹표준의 뜻과 차이점

- 자바스크립트, 제이쿼리 얼마나 사용가능한가?

- 본인이 생각하기에 HTML,CSS의 능력은 어느정도?

- 포트폴리오 제작 기간

- 포토샵, 일러스트 사용가능 여부

- 성격의 장단점

- 트러블이 생겼을 때 해결방안

- 해당 디자인이나 사이트를 보여주며 얼마만에 작업 가능한지

- 반응형 웹 퍼블리싱 가능 여부

- 벤치마킹할 때 자주 보는 사이트 (디자이너/퍼블리셔 면접)

- 요소를 세로,가로 가운데 배치하는 방법 

- 워드프레스 사용 여부

- 플러그인이 무엇인지, 사용 여부

- 부트스트랩 사용 여부

[경력 웹퍼블리셔 예상 면접 질문 리스트]

- 기술 자기소개 (많이 물어봄) : 직전회사에서 했던 작업물 위주나 사용했던 기술로 대답

- 부트스트랩 사용 여부

- 웹 이전에 했던 일과 '웹 퍼블리셔'를 선택한 이유 (많이 물어봄)

- 자바스크립트, 제이쿼리 얼마나 사용가능한가?

- 본인이 생각하기에 HTML,CSS의 능력은 어느정도?

- 자바스크립트, 제이쿼리 얼마나 사용가능한가?

- 트러블이 생겼을 때 해결방안

- 해당 디자인이나 사이트를 보여주며 얼마만에 작업 가능한지

- 웹접근성 마크 획득 경험

- 협업 여부, git이나 제플린과 같은 협업 툴 사용여부 (제플린을 우대하는 곳이 많음)

- 전 회사 그만 둔 이유와 본 회사에서 같은일이 발생하면 그만 둘 것인지?

- dom이란 ?

- react 사용 -> react를 사용하는 이유

- javascript es6 가능 여부

- css 사이즈인 rem, em 사용 여부

- 취미

- 사수가 없어도 괜찮은지

- 회사를 어떻게 알게되었고 지원한 동기

- 지금 하는 일(퍼블리싱)에  만족하는가?

- (퇴사후 구직기간이 길었을 때) 공백기간 동안 어떻게 지냈는지

[면접시 질문 리스트]

아래는 제가 면접했을때 물어본 질문 리스트입니다 :)
면접때 참고하세요!

- 같이 일하게 될 팀원 나이대와 몇명인지
- 연봉
- 야근 유무와 빈도
- 직원들 근속 기간
- 사수가 있는지
- 직원 수가 몇명인지
- 하는 업무에 대해 자세한 설명
- 연차같은 기본 복리
- 그 외의 복지

출처: https://eunyoe.tistory.com/45 [eunyo의 it이야기:티스토리]

최근 업계에서 많이 이야기되고 있는 TailwindCSS 가 있습니다.
그리고 Utility-first CSS, Atomic CSS, Functional CSS가 있습니다.

이 글은 CSS에 대한 전반적인 내용과 함께 Atomic css, Unocss에 관해 공유하려고 남깁니다.

Atomic css는 오래전부터 있었고 근래에 다시 재발견? 되었으며 다소 오해가 많은 패러다임이기에 조심스럽게 CSS유래와 함께 설명하며 풀어가려고 합니다.

CSS Language & Interaction

[1996] CSS1 https://www.w3.org/TR/REC-CSS1/
[1999] CSS3 https://www.w3.org/TR/CSS/
[2022] CSS4 작업 초안 작성

초창기 html에 스타일 입히는 방식이였던 inline-style

1990년 웹이 보편화 되면서 꾸미는 것을 원했고 이를 위해 Style이라는 것이 추가가 되었습니다.
그래서 태그에 style을 입력해서 조금 더 다양한 형태의 문서를 만들 수 있게 되었습니다.
이렇게 태그에 직접 style을 지정하는 방식을 inline-style이라고 합니다.

<h1 style="color:black;">타이틀</h1>

inline-style은 같은 코드 표현할때 너무 비대해지면서 가독성,유지보수가 어려웠습니다.

<p style="position:absolute;width:1px;height:1px;left:-100px;top:-100pxfont-weight: 400;font-family: 'Noto Sans KR', sans-serif;">문장1</p>
<p style="position:absolute;width:1px;height:1px;left:-100px;top:-100pxfont-weight: 400;font-family: 'Noto Sans KR', sans-serif;">문장2</p>
<p style="position:absolute;width:1px;height:1px;left:-100px;top:-100pxfont-weight: 400;font-family: 'Noto Sans KR', sans-serif;">문장3</p>
<p style="position:absolute;width:1px;height:1px;left:-100px;top:-100pxfont-weight: 400;font-family: 'Noto Sans KR', sans-serif;">문장4</p>

inline-style의 중복을 제거하기 위한 방법을 고안하게 되고 그래서 CSS를 만들게 됩니다.
CSS는 위와 같이 중복해서 쓰이던 inline-style을 별도의 Rule로 선언을 하고 필요한 곳에 반복적용을 하는 방식으로 만들어졌습니다.

컨텐츠와 서식의 분리관리

CSS와 html이 분리가 되면서 컨텐츠(html)와 서식(css)를 꼭 1:1로 매칭을 하지 않고 하나의 컨텐츠에 여러가지 스타일을 선택적으로 적용하였습니다.

• 컨텐츠수정 = HTML을 수정
• 서식이 변경 = CSS를 수정

유연하게 디자인을 적용할 수 있도록 HTML을 잘 구조화시키고
HTML 변화 없이 CSS만으로 여러가지 스타일 만드는것이 주요 과제였습니다.

HTML을 수정하지 않고 CSS만으로 디자인을 적용하려고 하다보니 스타일을 하나하나 원하는 엘리먼트를 선택해서 스타일을 적용하는 것은 쉬운일이 아니었습니다. 원하는 요소를 찾고 수정하기 위해서는 복잡한 Selector를 써야했고 Selector역시 세분화가 필요했습니다.

그래서 이렇게 복잡해진 Selector를 조금 더 쉽게 만들 수 있는 언어인 Sass와 같은 것들이 등장 하였습니다.

.class {
  font-size:13px;

  .class2 {
    color:#3399ff;
  }
}

CSS Preprocessors

[2006] Sass https://sass-lang.com/
[2009] LESS http://lesscss.org/
[2010] Sass (SCSS) https://sass-lang.com/
[2010] Stylus http://stylus-lang.com/

Ajax의 등장

Ajax가 보편화가 되면서 백엔드에서 HTML을 제외한 데이터만 전달을 할 수 있게 되면서 이제는 HTML의 편집권은 백엔드가 아니라 프론트엔드로 내려오게 됩니다.

HTML과 CSS를 동시에 편집을 할 수 있게 되면서 이제는 복잡하게 Selector를 쓸 필요가 없다는 것을 깨닫게 됩니다.

CSS에서 복잡한 Selector를 잘 쓰기 보다는 HTML에서 미리 잘 지어둔 class가 처리하는데 좋다고 변하게 됩니다.

그래서 이후에는 Selector를 어떻게 잘쓰는지 보다 어떻게 class 이름을 더 잘 지을 수 있는지로 흐름이 변하게 됩니다.

의미있는 이름 vs 시각적인 이름

복잡한 Selector보다는 단순한 Class Selector 사용이 보편화되면서 업무의 어려움이 이제 어떠한 이름을 지을 지가 되었습니다.

class 이름을 짓는 방식

• 의미를 기반으로 하는 .error, .title
• 기능이나 시각적 요소를 기반으로 하는 .red .bold

그러나 시각적 요소로 작성하는것에 문제가 생기기 시작합니다.

.blue {color:blue;} 

디자인이 변경이 되어 blue가 black가 된다면??

.blue {color:black;}

스타일 변경시 CSS를 수정을 하는데 변경된 디자인에 맞게 CSS를 변경하다보니 시각적인 이름을로 짓게 될 경우 .blue { color: black} 라는 이상한 작성이 되게 되었습니다.

시각적인 이름 보다 의미에 맞는 시멘틱한 이름이 좋다.

이때 아래와 같은 방법론이 나타나게 됩니다.

시대가 흘러 이제는 웹 문서가 아니라 웹 어플리케이션의 시대가 왔습니다.

웹은 더 이상 문서나 홈페이지 형태가 아니라 웹으로도 어플리케이션을 만들게 되고 CMS와 같은 데이터를 다루는 백오피스등의 웹페이지의 요구사항이 커지게 되었습니다. 그러다보니 웹은 점차 어플리케이션의 형태로 발전을 하게 됩니다.

하지만 CSS는 웹 문서를 잘 꾸미기 위해서 설계되었습니다.

문제가 생기기 시작하였습니다.

• css를 수정했는데 엉뚱한 곳이 틀어져 보이는 문제
• 선택자가 안 먹고 우선순위가 잘 맞지않아 !important로 덮어써야 하는 경우
• 안쓰이는 코드 찾기 (특히 JS와 결합된 class)

CSS는 어플리케이션을 만들기 위해 설계가 된 것이 아닌데 JS는 Component와 Framework 기반의 개발방식으로 변해갔습니다. 당시에는 flexbox와 같은 어플리케이션을 위한 레이아웃 스펙은 존재하지 않았기에 float,table등을 억지로 사용하고 문서의 간격을 만들기 위한 결정적으로 큰 2가지 설계상 문제들이 존재했습니다.

1 .Global Scope: 전역변수 = 내가 수정한 코드가 모든 프로젝트에 영향을 줘서 관리비용 증가 및 기존에 사용한 이름을 피해가며 작성해야한다.

2. 작성된 순서대로 적용 원하는대로 되는 문제

• HTML에서 지정한 class순서가 아니라 CSS의 순서에 의한 우선순위가 결정.
• 코드 순서도 있지만 무엇보다 Selector가 복잡할수록 서식이 나중에 적용
• 다른 서식을 덮어 쓰기 위해서는 Selector를 더 복잡하게 작성
• 이걸 간단한하게 수정하려면 !important 사용
• !important를 한 속성을 덮어쓰려면 복잡한 Selector에 !important
  
  

CSS 방법론

처음부터 CSS를 작성하는 규칙을 잘 짜면 이러한 문제들을 해결할 수 있지 않을까? 하는 생각에서 나온 것이 CSS 방법론입니다.

SMACSS, OOCSS, BEM, ITCSS, ATOMIC CSS ...

CSS Methodologies

[2009] OOCSS http://oocss.org/
[2011] SMACSS http://smacss.com/
[2012] BEM http://getbem.com/
[2013] ACSS https://acss.io/
[2016] ITCSS https://itcss.io/

그러나 점점 발전해가며 점점 작성하는 방식이 바뀌며 BEM스타일을 많이 사용하게되었습니다.

하지만 방법론만으로는 코드의 복잡성을 줄이며 생산성을 가져오는 것은 아니었습니다.
그래서 JS와 함께 사용 하는 방식으로 해결하고자 하였습니다.

CSS Modules, 2015

CSS의 범위를 컴포넌트를 벗어나지 않게하여 Global Scope 문제 해결

CSS의 문제인 Global Scope를 막기 위해 Component 단위에서 사용되는 CSS에 hash를 추가하여 CSS가 더 이상 Global하지 않도록 하는 방식을 통해서 해결을 하고자 하는 방법이 만들어졌습니다.
이후 React에서 Style을 다루는 불편함을 해소하기 위해서 JS에서 HTML을 쓰기 위해 JSX를 만든 것처럼 JS에서 style을 쓰기 위한 방법으로 CSS-in-JS 라는 방법이 등장하게 됩니다.

CSS-in-JS StyledComponent, 2016

CSS를 JS의 컴포넌트 방식으로 작성하게 되며 StyledComponent가 탄생

JS Tools & CSS-in-JS

[2013] PostCSS

[2014] Autoprefixer

[2014] Browserslist

[2014] JSS

[2015] CSS Modules

[2016] Styled Components

[2017] Emotion

https://2021.stateofcss.com/ko-KR/technologies

Atomic CSS

우리는 분명 CSS가 만들어지고 초기 자연 발생했던 .bold .hidden .red .text-right .mt10 과 같은 Class를 만들어서 분명히 편하게 사용했던 경험들이 있었습니다.

그러나 이러한 방식은 시멘틱과는 멀었습니다. 그렇기에 일종의 작업편의 나 편법으로 생각했습니다.
하지만 작업하기 편리했습니다.
bg-blue-100 w-32 h-32 .text-center .font-semibold
.mt-30 .pt-10 self-start flex-wrap mb-10

저희가 작업하며 제일 어려운것들은 무엇이였을까요?

1. 이름짓기 - 프로젝트 코드, 디렉토리, 파일명, 클래스명, 변수명, 메소드명
2. 구현시 불가능한 상황 이해 시키기
3. 업무를 받았을때 끝나는 시간 산정하기
4. 다른 작업방식의 본인의 작업방식과는 다른사람의 소스 작업하기

이러한것들이 힘든일이라 생각됩니다.

.header .link .gnb .button .footer
어떤모양인지 알수있을까요.?

.section-header .main-title .inner-wrap .footer-title

이러한 이름들 어떤 디자인인지 구분이 안됩니다.

의미론적 이름짓기 방식의 한계점이 오기 시작하였습니다.

아토믹을 사용하게되면

• 컨벤션과 방법론 역할 해줌
• 이름에 대한 고민 해결
• 누구나 동일한 형태의 코드 스타일
• 레거시 의식 불필요
• 구조변경시에도 파악하기 쉬워짐

왜냐하면 local scope기 때문입니다.

이러한 장점이 있으나 atomic CSS는 주류가 되지 못하였습니다.
TailwindCSS도 AtomicCSS이라 볼수있습니다. 하지만 Utility-First 라고 이름을 지었습니다.
Functional CSS도 마찬가지입니다.

ATOMIC CSS의 단점?

• html에 스타일 코드 반복?
• 의미론적 구분이 없으면 컨텐츠 파악의 어려움?
• 컨텐츠와 서식의 분리를 위한 다양한 테마는?
• html의 지저분함은? 코드의 가독성?
• css의 사용이 줄어들고 html만 작성이면 css를 잊는거 아닌지?

WebFrameWork의 COMPONENT 기반 개발 시대이며 컴포넌트가 시멘틱과 중복방지 역할을 해줍니다.

디자인이 곧 아디덴티티인 시대이며 솔루션이 아니라 서비스의 시대입니다.

코드는 시멘틱하지 않아도 됩니다.
그리고 점점 발전해 나가고있습니다.

그렇다면 왜 현재 인기가 제일 많은 TailwindCSS가 아니라 AtomicCSS 인지 시작해보겠습니다.

TailwindCSS 문제로 많이 지적되는것은 HTML의 가독성 문제를 꼽습니다.

그런데 이전 BEM방식도 초창기에는 가독성 문제를 지적받았습니다.

CSS Modules나 CSS in JS 역시 그 가독성이 높은 편은 아닙니다. 그럼에도 왜 가독성 이야기가 나오는 것일까요?

TailwindCSS의 장점으로 보면 단순히 편리한 class 모음 몇 가지가 아닙니다.

기존 프레임워크 및 개발 생태계와의 쉬운 통합, IDE 지원, 기존 방식과 적절히 결합해 줄 @apply과 같이 하이브리드한 브릿지 기능, 사람들이 우려하는 반복처리, 용량 문제 등 많습니다.

디자인 시스템을 구축하면서 작업하기에는 TailwindCSS만한것도 없다고 생각이 들었습니다.

유지보수 과정에서 디자인 시스템구축이 되어 미리 수치나 색상등을 지정하고 그 틀에서 벗어나지않는다면 효과적인 작업이 되었습니다.

이렇게 미리 맞춰두고 작업을 하는 것이 좋은 디자인과 좋은 설계라고 했지만 디자인의 확장성이 어렵게 되었습니다. 정해진 컬러, 정해진 간격 등 그 틀을 벗어나는 디자인을 하기 힘들어졌기 때문입니다.

작업 속도의 저하도 발생이 되었었는데. TailwindCSS에서 만들어둔 inlineCSS의 이름들과 CSS 스펙과 이름의 차이 등이 발생하였고 무엇보다 모든 CSS의 기능을 쓸 수 있는 것은 아니었습니다.

작업자마다 다르겠지만 조건부 class 서식이나, Child Selector를 쓸 수도 없었습니다. 코드 가독성이 떨어지는 부분들은 inline이라서가 아니라 이렇게 조건부 class들이였습니다.

TailwindCSS의 의 아쉬운 점이라면

1. 커스텀을 하려면 복잡한 설정을 해야만 한다. 했었다.
2. 용량문제(크다). purge를 하면 되지만 속도가 느리다.
3. w-16은 16px이 아니다. 4배수 계산 이슈 - 이미지를 해상도에 맞춰야할때 4배의 size가 들어가는 케이스
4. HTML이 복잡해진다.
5. 미묘하게 아쉬운 스펙과 문법 = 러닝 커브 발생 (특히 flexbox)
6. 모든 CSS 기능을 제공하는 것이 아니다.

Runtime CSS in JS의 문제

React가 유행하면서 CSS in JS가 많은 인기를 얻었습니다. 리액트를 사용해봤다면 한번쯤은 styled-component나 emotion을 사용해본 경험이 있을 정도입니다. CSS in JS는 다음과 같은 장점이 있습니다.

• CSS에서 JS문법을 사용할 수 있어서 생산성 🔼
• 컴포넌트 파일에 관련된 코드들을 함께 둘 수 있음 (colocation)
  • 기존에는 css와 js파일을 분리해야했다.
• className이 겹치지 않음을 보장한다.(지역 스코프 스타일)

하지만 모든 기술에는 단점도 존재합니다. 기존의 CSS in JS, 즉 런타임 CSS in JS는 성능을 저하시킬 수 있다는 것입니다. 런타임 CSS in JS는 런타임에 js파일이 실행되면서 style을 생성합니다. style 생성의 규모가 크고 빈번할 수록 성능이 저하될 수 있습니다. 더 구체적인 예시를 들어보겠습니다.

Runtime CSS in JS의 문제점을 해결하기 위해 Zero-runtime CSS in JS가 등장합니다. Linaria, Sttiches, Vanilla Extract등이 있습니다.

Vanilla Extract는 기본적으로 CSS Modules-in-TypeScript라고 생각하면 됩니다.

• 빌드타임에 ts파일을 css파일로 만듭니다. (sass와 같음)
• type-safe하게 theme를 다룰 수 있습니다.
• 프론트앤드 프레임워크에 구애받지 않습니다.
• Sttitches 처럼 variant 기반 스타일링을 구성할 수 있습니다.

styled-component에서는 잘못된 프로퍼티를 사용해도 타입 검사를 제대로 하지 못한다는 단점이 있습니다.(물론 객체형태로 사용하면 됩니다.) 그리고 개인적으로 거추장스러운 문법들이 있었습니다. 예를 들면 (props)=> props.theme.color 같은 것들이 있습니다. Vanilla Extract는 거추장스러운 문법은 버리고 객체형태로 이를 풀어갑니다.

Vanilla Extract는 기능적으로 높은 확장성을 가지고 있습니다. Tailwind CSS를 모방한 Sprinkles, Sttiches을 모방한 Recipes 그리고 Linaria를 모방한 dynamic을 제공합니다. Vanilla Extract의 조금 부족했던 사용성을 채워줍니다. 거의 모든 CSS in JS를 총망라 했다고 볼 수 있습니다.

UnoCSS 의 배경

Tailwind는 큰 용량의 utility CSS 생성 → 시작과 HMR 오래 걸림 → Windi CSS를 대안으로 사용 - Windi CSS - 0 dependency, on-demand → Tailwind보다 20~100x 빠름 → Tailwind가 JIT 엔진을 개발

기존 방식의 단점

• margin의 범위가 1~10으로 제한됨
• 한 개만 써도 10개의 CSS rule 생성
• margin 방향 갯수를 지원하려면 코드 x 5 (mb, mt, mr, ml, m)
• hover:나 focus: 같은 variant 지원하려면 코드 x N

Tailwind에서는 PurgeCSS로 해결 → prod에서만 해결

On-demand 방식

on-demand 방식에서는 생성 단계와 스캐닝 단계의 순서를 뒤집어 cost 절약함과 동시에 미리 생성하는 방식에서 해결하기 어려운 동적 need를 해결할 수 있는 유연함도 갖춤

• dev와 prod 둘 다 사용 가능 → 일관성 보장, HMR 더욱 효율적

UnoCSS

UnoCSS - the instant atomic CSS engine with maximum performance and flexibility.
“최대 성능과 유연성을 가진 즉석 Atomic CSS 엔진”

core utility가 없기 때문에 framework라기보다는 engine이다 → 모든 기능은 preset이나 inline configuration을 통해 제공됨

직관적이고 완벽한 커스터마이징 가능
UnoCSS의 목표 - 직관성과 커스터마이징

자신만의 utility를 단번에 정의 가능

정적 룰

  rules: [
    ['m-1', { margin: '1px' }]
  ],

코드에서 m-1이 발견되면 아래 CSS 생성:

.m-1 { margin: 0.25rem; }

동적 룰

matcher를 RegExp로 바꾸고 body를 함수로 바꾸면 됨

rules: [
  [/^m-(\\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
  [/^p-(\\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],
]

<div class="m-100">
  <button class="m-3">
    <icon class="p-5" />
    My Button
  </button>
</div>

위 코드가 있으면 아래 CSS가 생성됨

.m-100 { margin: 25rem; }
.m-3 { margin: 0.75rem; }
.p-5 { padding: 1.25rem; }

변형

variants: [
  // support `hover:` for all rules
  {
    match: s => s.startsWith('hover:') ? s.slice(6) : null,
    selector: s => `${s}:hover`,
  },
  // support `!` prefix to make the rule important
  {
    match: s => s.startsWith('!') ? s.slice(1) : null,
    rewrite: (entries) => {
      // append ` !important` to all css values
      entries.forEach(e => e[1] += ' !important')
      return entries
    },
  }
],

프리셋

Tailwind CSS, Windi CSS, Bootstrap 등 기존 프레임워크 방식과 호환되는 다양한 프리셋 제공

유연성

지금까지는 Tailwind의 행동을 따라하는 방법을 보여줬음

지금부터는 UnoCSS의 진정한 힘

속성화 모드

"Attributify"

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">
  Button
</button>

위 코드를 아래처럼 쓸 수 있음:

<button 
  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Button
</button>

코드가 보기 편해짐
예를 들어, 동일한 접두사를 중복하지 않고 text-sm text-white그룹화할 수 있습니다 .text="sm white"

접두사 자체 참조​

접두사와 동일한 유틸리티를 갖는 flex, grid, 와 같은 유틸리티 의 경우 특수 값이 제공됩니다.border~

예를 들어:

HTML

<button class="border border-red">
  Button
</button>

다음과 같이 쓸 수 있습니다:

HTML

<button border="~ red">
  Button
</button>

Valueless attributify​

Windi CSS의 속성 모드 외에도 이 사전 설정은 값이 없는 속성도 지원합니다.

<div class="m-2 rounded text-teal-400" />

위 코드를 아래처럼 쓸 수 있음:

<div m-2 rounded text-teal-400 />

순수 CSS 아이콘

제작자가 아이콘에 진심, 순수 CSS만으로 아이콘 표시 가능

<!-- A basic anchor icon from Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- An orange alarm from Material Design Icons -->
<div class="i-mdi-alarm text-orange-400 hover:text-teal-400" />
<!-- A large Vue logo -->
<div class="i-logos-vue text-3xl" />
<!-- Sun in light mode, Moon in dark mode, from Carbon -->
<button class="i-carbon-sun dark:i-carbon-moon" />
<!-- Twemoji of laugh, turns to tear on hovering -->
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

• 변형을 사용하면 hover, 라이트/다크 모드 등 기반으로 아이콘 변경 가능
• 10,000+개의 아이콘 지원
• ?bgfor background-img- 아이콘을 배경 이미지로 렌더링합니다.
• ?maskfor mask- 아이콘을 마스크 이미지로 렌더링합니다.
  
  

<div class="w-full flex items-center justify-center gap-x-4 text-4xl p-2 mt-4"> <div class="i-vscode-icons:file-type-light-pnpm" /> <div class="i-vscode-icons:file-type-light-pnpm?mask text-red-300" /> </div>

예를 들어 배경 이미지로 렌더링될 vscode-icons:file-type-light-pnpm색상이 포함된 아이콘( 은 svg포함되지 않음 )입니다. 마스크 이미지로 렌더링하고 색상을 우회하는 데 currentColor사용됩니다 .vscode-icons:file-type-light-pnpm?mask

https://unocss.dev/presets/icons 아이콘

속성 충돌​

속성 모드의 이름이 요소 또는 구성 요소의 속성과 충돌하는 경우 un-UnoCSS의 속성 모드에 특정한 접두사를 추가할 수 있습니다.

예를 들어:

HTML

<a text="red">This conflicts with links' `text` prop</a>
<!-- to -->
<a un-text="red">Text color to red</a>

접두사는 기본적으로 선택 사항입니다. 접두사 사용을 적용하려면 다음을 설정하세요.

TS

presetAttributify({
  prefix: 'un-',
  prefixedOnly: true, // <--
})

다음과 같은 방법으로 특정 속성에 대한 검색을 비활성화할 수도 있습니다.

TS

presetAttributify({
  ignoreAttributes: [
    'text'
    // ...
  ]
})

TypeScript support (JSX/TSX)​

Create shims.d.ts with the following content:

By default, the type includes common attributes from @unocss/preset-uno. If you need custom attributes, refer to the type source to implement your own type.

React​

ts

import type { AttributifyAttributes } from '@unocss/preset-attributify'

declare module 'react' {
  interface HTMLAttributes<T> extends AttributifyAttributes {}
}

스코프

Tailwind/Windi - preflight로 native element를 reset하고 CSS 변수 fallback 제공 → 다른 UI 프레임워크와 함께 사용하면 conflict 발생 가능

UnoCSS - preflight를 유저가 알아서 하게 함 (다른 프레임워크와 함께 사용 가능)

Vite plugin에 scoped-vue 모드 → 각 컴포넌트마다 scoped 스타일을 생성해 컴포넌트 라이브러리로 안전하게 만들 수 있음 (유저 CSS와 conflict 걱정 X)

<template>
  <div class="m-2 rounded"><slot></div>
<template>

<!-- the following will be inject in the bundler -->
<style scoped>
.m-2{margin:0.5rem;}
.rounded{border-radius:0.25rem;}
</style>

예시

https://unocss.dev/play/

https://github.com/unocss/unocss

1. 브라우저 렌더링 원리 (https://d2.naver.com/helloworld/59361)

   -  1. DOM, CSSOM생성: 가장 첫번째 단계로 서버로부터 받은 HTML, CSS를 다운받는다 → 단순한 텍스트인 HTML, CSS파일을 Object Model로 만든다. HTML은 DOM으로, CSS는 CSSOM으로 만들어진다. (html이 여기서 파싱된다)
      DOM Tree와 CSSOM Tree가 만들어진다
       2. Render Tree생성: DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성한다. 렌더트리에는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다. 
      3. Layout 단계: 브라우저의 뷰포트(Viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계이다.(reflow 단계) 레이아웃 단계에서 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 픽셀 단위로 변환된다. 
      4. Paint: Layout 계산이 완료되면 이제 요소들을 실제 화면을 그리게 된다.(repaint 단계) 처리해야하는 스타일이 복잡할수록 paint 단계에 소요되는 시간이 길다. (가령 그라데이션, 그림자 효과 > 단색 배경) 

2. 호이스팅에 대해 설명해보시오

 - 호이스팅은 변수를 선언하고 초기화했을 때, 선언 부분이 최상단으로 끌어올려지는 현상을 말한다. var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생한다. 반면 let/const 의 경우 선언과 초기화 단계가 동시에 일어나지 않는다. 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄진다. 그 사이의 시간을 TDZ(Temporary Dead Zone)이라고 한다. 즉 실행 컨텍스트에 변수가 선언은 되었으나 메모리가 할당되지 않아 ReferenceError가 발생한다.  함수 호이스팅은 선언문에서 발생한다. 선언된 함수는 상단에서 참조, 호출이 가능하다. 함수 표현식은 결국 변수에 할당하는 모습이라 변수 호이스팅의 사례로 볼 수 있다. 

(변수 선언 3단계: 선언 -> 초기화 -> 할당)

3. 클로저는 무엇인가요? 원리와 왜 사용하는지? 

  - 클로저란 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다. 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수이다. 전역 변수의 사용을 억제하고, 정보를 은닉하기 위해 사용한다. 

4. this의 용법을 아는대로 설명하시오

 - This는 함수를 호출할 때 결정되는 것이다. 전역범위에서 사용될 때 this는 전역객체를 가르킨다. 함수에서 사용될때도 전역객체를 가르킨다. 객체에 속한 메서드에서 사용될때 그 메서드의 객체(점 앞에 명시된 객체)를 가르킨다. 객체에 속한 메서드의 내부함수에서 사용될땐 전역객체를 가르킨다. 생성자에서 사용될때 생성자로 인해 생성된 새로운 객체를 가리킨다.

5. 브라우저 저장소에 대한 차이점을 설명해주세요

  - key-value형태의 만료기한이있는 쿠키의 단점을 보완해 웹스토리지(로컬과 세션)가 만들어졌다. 로컬 스토리지는 클라이언트의 정보를 영구적으로(자동로그인) 저장하는 반면 세션 스토리지는(비로그인 장바구니) 브라우저를 닫을 경우 정보가 삭제된다. 쿠키는 로컬&세션에 비해 용량이 매우작고, 치명적인 단점에는 암호화가 없어 정보 도난 위험이있다.  

6. 이벤트 버블링에 대해 말씀해주세요

 - 이벤트 버블링은 어떤 요소에 대한 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정이다. HTML 구조상 자식 요소에 발생한 이벤트가 상위 부모요소에 영향을 미치는 것이다. 이벤트 캡쳐링과 정반대이다. (최상위 부모에서 이벤트 발생 요소까지 이벤트 전달 되는 것) 
 이벤트 버블링이나 캡처링을 차단 하고 싶을때 e.stopPropagation을 호출하면 이벤트 전파를 막고 해당 이벤트만 실행시킬 수 있다. 

7. 타입스크립트 사용해본 적 있는지? 어떤가요?

- 타입스크립트는 자바스크립트 기반의 언어이며 자바스크립트의 상위확장버전이다다. 정적타입으로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있고, 강력한 객체지향 프로그래밍을 지원합니다. ES6의 새로운 기능들을 사용하기 위해 바벨과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔젠에서 실행 가능하다. 명시적인 정적 타입 지정은 코드의 가독성을 높이고 디버깅을 쉽게 한다.

8. CSR과 SSR의 차이점은 무엇인가요?

 - SSR은 사용자가 웹 페이지에 접근 할때, 서버에 각각 페이지에 대해 요청하고 서버에서 HTML, JS 파일 등을 모두 다운로드하여 화면에 렌더링 하는 방식이다. CSR은 클라이언트측에서 HTML, JS, 리소스 파일들을 받은 이후에 브라우저에서 렌더링을 진행하는 것으로, JS가 동작하면서 데이터만을 주고 받는다.

초기로딩속도 측면에서, SSR은 필요한 부분의 HTML과 스크립트만 서버에서 렌더링 하여 가져오기 때문에 속도가 빠른 반면, CSR은 HTML, JS 파일을 다운 받고 브라우저에서 렌더링 하기 때문에 초기에 오래걸린다.
서버 부담측면에서, SSR은 서버와 잦은 응답(View가 바뀔 때마다 서버에 요청)을 하기 때문에 서버에 부담이 되고 UX측면이 떨어진다(새로고침 많음), CSR은 데이터 요청이 있을때만 서버에 요청하기 때문에 서버에 부담이 적다.
SEO 측면에서, SSR은 HTML에 대한 정보가 처음에 포함되어 있어(SEO에 사용되는 meta 태그들이 미리 정의되어있음) 데이터를 수집할 수 있어 SEO에 유리하지만, CSR은 맨 처음 HTML 파일이 비어있어 구글을 제외한 크롤러가 데이터를 수집할 수 없다.

9. React, Vue, Angular의 차이는 무엇인가요? 

   - 일단 3개의 공통점은 SPA기반 프론트엔드 프레임워크/라이브러리인것이다. 리액트는 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달되고, vue나 angular는 양방향 바인딩이 구현 가능하다는 차이가 있습니다. 러닝커브는 뷰가 가장 낮고, 리액트는 jsx 문법을 사용하며, 개발 생태계가 가장 잘 활성화 되어있다. 큰 규모의 어플리케이션 개발에 유리하다. 뷰와 앵귤러는 프레임워크이다. 앵귤러는 타입스크립트를 사용함으로써 코드의 가독성과 안정성이 좋지만 러닝커브가 크다. 

10. React의 상태관리 방법에 대해서 설명하시오

   - 리액트의 상태관리에는 context API를 통한 방법 및 MobX, Redux 등의 라이브러리를 사용한 방법이 있다. 그 중 가장 많이 사용하는 Redux는 전역 상태를 생성하고 관리하며, 상태관리 라이브러리 중 가장 압도적으로 많이 사용된다. 리덕스는 컴포넌트에서 액션 크리에이터를 통해 액션을 만들고, 그 액션을 디스패치 함수로 실행시킨다. 그러면 store에서 해당 리듀서로 매칭되는 액션이 있는지 확인하고 스토어에 저장된 상태를 변경해주는 원리로 작동한다. 리덕스는 context api와 다르게 전역 상태 관리 외에도 redux-saga, reduc-thunk 등 추가 라이브러리를 통해 비동기 작업을 쉽게 해줄 수 있는 장점이 있지만, 코드가 많고 복잡하기 때문에 이런 부가기능이 필요하지 않은 소규모 프로젝트에는 context api를 쓰는 것이 나을 수도 있다.

11. React의 라이프사이클에 대해 설명해주세요

   - 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프 사이클은 총 9개의 과정이 존재하는데 크게는 컴포넌트가 처음 실행될때인 Mount, 데이터에 변화가있을때인 Update, 컴포넌트가 제거 될때인 Unmount이렇게 세개로 나눌 수 있다. (아주 잘 설명되어있는 블로그 바로 여기)

12. var, let, const의 차이점

   - let과 const는 블록 스코프를 갖고 공통적으로 재선언이 되지 않는다. 그러나 let은 재할당이 가능하고, const는 선언과 동시에 할당이 되기에 재할당이 불가능하다.

13. MVC, MVVM 모델에 대해 설명하세요

 -  MVC패턴은 모델 + 뷰 + 컨트롤러를 합친 용어이다. 모델은 데이터 및 데이터를 처리하는 부분이고, view는 사용자에게 보여지는 UI 부분이다. 컨트롤러는 사용자의 입력을 받고 처리하는 부분이다. MVC는 사용자의 액션이 컨트롤러에 들어오면, 컨트롤라가 액션을 확인하고 모델을 업데이트한다. 컨트롤러는 모델을 나타내줄 view를 선택하고, view는 모델을 이용하여 화면을 나타낸다. 컨트롤러는 여러개의 view를 선택할 수 있는 1:n 구조이고, 뷰를 선택할 뿐 직접 업데이트는 하지 않는다. 보편적으로 널리 사용되는 패턴이며, 단점은 뷰와 모델사이의 의존성이 높고, 어플리케이션이 커질수록 복잡하고, 유지보수가 어렵다는 점이다. (React는 MVC 구조에서 View 라고 불리며, 페이스북에서 Flux라는 자체 아키텍쳐를 제공해 MVC 구조의 문제점을 보완했다. )

MVVM 패턴은 모델+뷰+뷰모델을 합친 용어이고, 모델과 뷰는 MVC와 동일하다. 뷰모델은 뷰를 표현하기 위해 만든 뷰를 위한 모델이다. 뷰를 나타내 주기 위한 모델이자, 뷰를 나타내기 위해 데이터 처리를 하는 부분이다. 액션이 뷰를 통해 들어오면, 뷰 모델에 액션을 전달한다. 뷰 모델은 모델에게 데이터를 요청하고, 모델은 요청받은 데이터를 뷰 모델에게 응답하고, 뷰 모델은 받은 데이터를 가공하여 저장한다. 뷰는 뷰 모델과 데이터 바인딩을 하여 화면을 그리는 동작 방식이다. 이 패턴의 가장 큰 장점은 뷰와 뷰 모델의 의존성을 없애고, 각 부분이 독립적이라는 것이다. 단점은 뷰 모델의 설계가 쉽지 않다는 점이다. 이 패턴의 주요 목적은 로직의 분리이다. 리액트에서는 데이터와 화면 컴포넌트를 분리하는 것을 예시로 들 수 있다.

14. Flex 속성을 설명해주세요.

  - Flexbox란 기존 컨텐츠를 수평으로 배치할 때, float나 inline-block으로 마크업할때의 불편함을 쉽게 해결할 수 있도록 추가된 기능이다. 다양한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜줌으로써 반응형 웹 사이트에 유용하게 쓰인다. Flex는 컨텐츠를 감싸는 상위 부모요소인 Flex Container와 각 컨텐츠들인 자식요소 Flex Item으로 구성되어있다. Flexbox css 적용방법은 부모요소인 container에 display:flex를 선언하면 된다. Flex Container에는 전체적인 정렬과 관련된 속성인 display, flex-direction, align-items, flex-wrap 같은 속성을 정의하고, 자식요소인 flex item에는 flex-grow, flex-shrink 같은 크기나 순서 같은 속성을 정의한다.

15. 주소창에 naver.com을 입력하면 생기는 일 

  - 사용자가 입력한 url 주소 중에서 도메인 네임을 DNS 서버에서 검색한다. -> DNS 서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아 사용자가 입력한 URL 정보와 함께 전달함. -> 웹 페이지 URL + IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메세지를 생성한다 -> HTTP 요청 메세지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 해당 IP 주소의 컴퓨터로 전송된다 -> 이렇게 도착한 HTTP 요청 메세지는 HTTP 프로토콜을 사용하여 웹 페이지 URL 정보로 변환된다. -> 웹 서버는 도착한 웹 페이지 URL 정보에 해당하는 데이터를 검색한다 -> 검색된 웹 페이지 데이터는 또다시 HTTP 프로토콜을 사용하여 HTTP 응답 메세지를 생성한다 -> 이렇게 생성된 HTTP 응답 메세지는 TCP 프로토콜을 사용하여 인터넷을 거쳐 원래 컴퓨터로 전달된다. -> 도착한 HTTP 응답 메세지는 HTTP 프로토콜을 이용하여 웹 페이지 데이터로 변환되고, 웹 브라우저에 의해 출력되어 사용자가 볼 수 있게 된다. 

16. HTTP와 HTTPS의 차이점은?

 -  HTTP는 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜이다. HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다. 공개키/개인키 암호화 방식을 이용해 데이터를 암호화한다. HTTP는 암호화가 추가되지 않았기 때문에 보안에 취약한 반면, HTTPS는 안전하게 데이터를 주고받을 수 있다. 하지만 HTTPS를 이용하면 암호화/복호화 과정이 필요하기 때문에 HTTP보다 속도가 느리다(그러나 실 사용에서는 크게 차이는 없다.) HTTPS는 인증서를 발급하고 유지하는데에 추가 비용이 발생한다. 개인정보와 같은 민감한 데이터를 주고 받는다면 HTTPS를 이용해야 하지만, 단순 정보 조회 같은 사이트는 HTTP를 적용하면 된다.

17. OOP의 특징에 대해서 설명하시오

   -  객체지향프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 그 객체들간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법으로 OOP의 장점은 코드 재사용성이다. 클래스를 한번 만들어 놓으면 계속 이용 가능하고, 상속을 통해 확장 가능하다. 수정해야할 부분이 클래스 내부에 멤버 변수 혹은 메서드로 있기 때문에 해당 부분만 수정하면 되어 유지보수가 쉽다. 단점은 처리속도가 느리고, 객체가 많으면 용량이 커진다는 것이다. OOP의 특징으로는 클래스와 객체, 캡슐화, 상속 등이 있다. 클래스는 집단에 속하는 속성과 행위를 변수와 메서드로 정의한 것이고, 객체 즉 인스턴스는 클래스에서 정의한 것을 토대로 실제 메모리 상에 할당된 데이터이다.  상속은 부모 클래스의 속성과 기능을 그대로 이어받아 사용할 수 있게 하고, 코드의 중복을 없애기 좋다. 

18. useMemo vs useCallback

  - 둘다 메모이제이션 훅으로 연산 된 값을 자료구조에 저장 후 재사용시 계산을 반복하지않고 꺼내서 사용가능하게 해준다. 메모이제이션 훅은 리액트의 불필요한 랜더링(예: 자식 컴포넌트의 상태가 변경되지않아도 랜더링 해버리는 경우)을 방지하여 퍼포먼스 최적화에 사용된다. 둘의 차이점은 useCallback은 전달된 함수 그 자체를 캐싱하지만, useMemo는 전달된 함수가 실행되고 반환된 결과를 캐싱한다는 것이다.(=useMemo는 메모이제이션 된 값을 반환하고 useCallback은 메모이제이션 된 콜백을 반환한다.)

19. 비동기 함수에 대해 설명하세요

  - 현재 실행중인 코드 완료 여부와 무관하게 즉시 다음 코드로 넘어간다. 즉 요청과 응답이 동시에 이루어지지 않는다. 비동기 방식이 필요한 이유는 화면에서 서버로 데이터를 요청했을 때, 요청에 대한 응답을 계속 기다릴 수 없으니깐(빈 화면을 보여줄 수 없으니까) & 기다리는 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다.  

20. Promise란?

 - 비동기 동작을 다루기 위한 패턴으로, 비동기 요청을 보내면 성공 또는 실패가 다양한 형태로 발생한다. 프로미스를 사용하면 이러한 성공(resolve)이나 실패(reject)를 편리한 방식으로 환원할 수 있다. new 연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백함수는 호출할 때 바로 실행, 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있으면 둘 중 하나가 실행되기 전까지는 다음 then or catch 구문으로 넘어가지 않는다. pending, fulfilled, rejected 3가지 상태를 가진다. 

21. Async, Await와 Promise의 차이는?

 - promise를 사용할 때는 .catch()문으로 에러 핸들링 가능 but async/await은 에러 핸들링 기능이 따로 없어 try-catch() 문을 활용해야한다.
 promise는 .then() 지옥의 가능성이 있어,  코드가 길어질수록 async/await문을 사용하면 가독성이 좋다.

22. ESLint에 대해 설명해주세요.

  - 자바스크립트 언어와 소스코드를 분석하는 도구로 eslint패키지를 설치해주면 코드에 특정 스타일과 규칙을 적용해 에러를 찾고 패턴을 적용시킬 수 있는 분석 툴이다. 사용시 ECMAScript코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정해주는 유용한 도구이다. 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적이다. 추가로 코드를 더 보기좋도록 포맷팅 해주는 prettier를 ESLint와 함께 사용해주면 더 효율적이다.

23. ES6 문법에 추가된 것들을 아는대로 설명하세요

   - String Literal, 객체 비구조화, 객체 리터럴, for .. of, Spread Operator, Rest Parameter, Arrow Function, Default Params, let & const, import & export, Map & Set 

24. DOM 과 가상 DOM이란? 

- Document Object Model 의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미한다. HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 된다. 가상돔은 추상화된 DOM을 뜻한다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄인다. DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있다. 리액트도 가상돔을 이용하여 구현되어있다. 

25.  웹팩과 바벨은 무엇인가?

- 바벨은 모든 실행환경에서 자바스크립트가 정상적으로 동작할 수 있도록 ES6 코드를 ES5코드로 변환해주고, 리액트의 JSX, TS 까지 변환해주는 자바스크립트 컴파일러이다. 특정 버전이상에만 실행되는 코드 or 특정 브라우저에서는 실행되지 않는 코드들을 정상적으로 동작하게 만들어준다. 
 웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 사용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)다. 모듈 번들러는 여러개의 나누어져 있는 파일들을 하나로 만들어주는 라이브러리이고, 웹페이지를 보여주기 위해 수많은 파일을 서버에 개별적으로 요청하는 것이 아닌 하나로 줄여서 요청하여 코드를 압축하고 최적화해준다.  

26. JWT 방식을 설명하고, 왜 사용했는지?

- JWT는 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 말한다. 기존의 세션인증방식은 인증 관련 정보를 세션 저장소라는 DB에 저장했기 때문에 서버가 과부하 되거나 서버를 확장하기 어려웠다. 이를 보완하기 위해( = 서버자원을 절약) 사용자 인증에 필요한 정보를 토큰 자체에 담고 있어 별도 저장소에 정보를 저장해 둘 필요가 없는 JWT을 사용하게 되었다. 토큰은 로그인 이후 서버가 만들어주는 문자열이고, 문자열 안에는 사용자의 로그인 정보와 서버의 서명이 들어있다. 사용자가 로그인을 하면 서버는 사용자에 토큰을 발급하고, 사용자는 토큰과 함께 다른 API 작업을 요청한다. 서버는 토큰의 유효성 검사를 통해 요청한 것에 대한 응답을 해준다. 단 한번 발급된 토큰은 수정 및 폐기가 불가하다는 단점이 있고, 유효기간을 짧게 지정해주는 것이 중요하다.

27. async/awiat이란?

  - 앞에서 나온 callback과 Promise보다 좀 더 비동기 작업을 일반적인 함수적으로 실행하기 위해 나온 객체이다. 동기식으로 비동기 코드를 적을 수 있다. 함수 선언자 앞에다가 async를 붙여주고, 비동기가 필요한 작업 앞에다가 await를 붙여줘소 결과를 기다린다. 다수의 비동기 처리 작업을 할 때 유용하고, try/catch를 이용해서 에러를 핸들링 할 수 있다.

28. 리덕스가 무엇인지 그리고 장단점 설명

- 리덕스란 현재 가장 많이 사용되고 있는 상태관리 라이브러리다. 컴포넌트의 상태 관련 로직을 따로 분리시켜 효과적으로 관리 할 수 있고, 상태를 공유할 때에도 다른 컴포넌트를 거치지 않고 Store를 통해 전달이 가능해서 편리하다. 그리고 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리 할 수 있다 프로젝트할 때 각 로그인 여부에 따라 댓글 창을 활성화시켰는데 리덕스를 사용하지 않았다면 여러 컴포넌트를 거쳐서 로그인 상태를 받았어야 했는데 store에 연결만하면 바로 알 수 있어서 편하게 진행 할 수 있었다. 리덕스에서 데이터를 가공하기 위해선 액션이란 것을 만들어야한다. 그 액션의 이름을 type이라고 하고, 그 액션을 디스패치를 해야지만 Store내에 있는 데이터가 바뀐다. 또한 그 액션들이 어떻게 동작해야하는지 구현을 해서 저장해 두는 곳을 리듀서라고 한다. 리덕스의 단점은 데이터를 다를 때마다 액션을 하나하나 만들어야하는 번거로움이 있다. +코드량 증가

29. 리액트 훅에 대해 설명하시오

 - 리액트 훅은 리액트 16.8 버전에서 새롭게 추가된 사용방법으로 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 한다. 함수형 컴포넌트에서 상태값을 관리할수도, 생명주기 함수 또한 이용할 수 있다. 훅을 사용하면 재사용 가능한 로직을 쉽게 만들 수 있고, 또 React의 내장된 훅 말고 새로운 커스텀 훅을 만들수도 있다. 또한 코드 가독성이 좋아지는 장점이 있다. (예를들어, componentDidMount + componentWillUnmount를 useEffect 로 간단하게 대체할 수 있음)
 리액트에는 useState, useEffect, useCallback 등의 기본적인 내장 훅들이 있다. 

30. CORS란? CORS를 위한 처리를 했는지, 해결 방법? 

  - CORS는 도메인 혹은 포트가 다른 서버의 자원을 요청할 때 생긴다. 그러나 동일 출처 정책으로 인해 CORS같은 상황이 발생하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단을 한다. 해당 문제를 해결하려면 response헤더에 "Access-Control-Allow-Origin"를 추가하던가, 서버 쪽에서 처리를 해주면 된다.

31. Rest API란?

  - REST API는 'REST하게 클라이언트와 서버간에 데이터를 주고받는 방식'인데, 여기서 REST란 HTTP URI를 통해 자원을 명시하고, HTTP메소드(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것이다. (URI란 웹상의 자료의 id 즉, 내가 올린 블로그 글의 특정 id를 입력해줘야 글을 볼수 있는 것처럼 URI는 인터넷 자원을 나타내는 고유 식별자) REST의 특징에는 유니폼 인터페이스(HTTP 표준에만 따른다면, 안드로이드/IOS 플랫폼이든, 특정 언어나 기술에 종속되지 않고 모든 플랫폼에 사용할 수 있으며, URI로 지정한 리소스에 대한 조작이 가능한 아키텍처 스타일을 의미), 무상태성(작업을 위한 상태정보를 따로 저장하고 관리하지 않음) 

32.  클래스형 컴포넌트와 함수형 컴포넌트를 비교해주세요.

   - 리액트에서 컴포넌트를 선언하는 두가지 방식인 클래스형 컴포넌트와 함수형 컴포넌트 중, 클래스형의 경우 state의 사용이 가능하여 상태 저장이 가능하고, 리액트 라이프 사이클 메서드를 사용 가능하다. 함수가 아닌 클래스이기 때문에 return문이 없고 render() 함수가 필수적으로 있어야 JSX 반환이 가능하다. 함수형 컴포넌트보다 먼저 나왔기 때문에 유지보수를 위해 알아두어야 한다. 
함수형 컴포넌트는 클래스보다 선언하기 좀 더 편하고, 함수는 한번 실행되고 나면 메모리 상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점이다. 함수형 컴포넌트에서는 hook을 사용할 수 있고, return문을 사용한다.   

33. redux-thunk를 사용한 이유와 작동원리에 대해 설명하시오

  - 리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리할 때 사용하는 미들웨어 중 하나이다. (여기서 미들웨어란? dispatch 함수를 결합해서 새 dispatch 함수를 반환하는 고차함수이다. 리듀서에는 비동기 로직이 존재할 수 없기 때문에 미들웨어를 쓴다) thunk는 특정 작업을 나중에 하도록 미루기 위해서 함수 형태로 감싼 것을 칭한다. redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해준다. 리덕스에서는 기본적으로 액션 객체를 디스패치하는데, 일반 액션 생성자는 파라미터로 액션 객체를 생성하는 작업만 한다. thunk를 이용하면 특정 액션이 몇 초 뒤에 실행되게 하거나, 조건이 충족되는 경우에만 dispatch 할 수 있다. 함수를 디스패치 할 때에는 dispatch와 getState를 매개변수로 두고, 해당 함수를 만들어주는 함수가 thunk 인 것이다. thunk를 사용한 이유는 리덕스가 비동기처리를 하지 못하여 미들웨어인 thunk를 이용해 API를 호출하고, 비동기 액션을 처리하기 위함이었다.

34. props와 state에 대해 설명해주세요

  - props와 state 모두 리액트 컴포넌트에서 다루는 데이터로 그 중 props는 부모 컴포넌트에서 받아온 데이터이다. 리액트는 부모에서 자식으로만 데이터가 흐르는 단방향 형식으로, 이미 상속된 props는 수정이 불가능하다. 반면 state는 해당 컴포넌트 내부에서 선언되기때문에 수정이 가능하다는 차이점이 있다. setState를 사용하여 state값을 업데이트 해주면 자동으로 리렌더링되지만 주의할 점은 setState의 비동기적 특성을 기억하고 사용 해야한다. (setState가 있을 경우, 리액트는 다른 state변경까지 한꺼번에 통합해서 리액트 자신이 판단하기에 가장 적절한 시기에 돔을 리렌더링한다. 해결하기 위해 콜백 혹은 useEffect를 사용한다)

35.  .call과 .apply의 차이점은 무엇인가요?

  -  this가 함수 호출식에 따라 객체를 가르켰다면 call apply bind는 함수가 직접 실행문맥을 결정한다. 그 중 call과 apply는 함수를 호출해서 실행한다. 두번째로 쓰이는 매개변수가 배열일 경우 apply를 사용한다.

36. AJAX에 대해 자세히 설명하세요(+장단점)

   - 자바스크립트를 이용하여 비동기식으로 XML을 이용해 서버와 통신하는 방식이다. 최근에는 XML보다 JSON을 많이 사용한다. 웹 페이지 전체를 업데이트 하는게 아니라 부분적으로 업데이트를 하기 위해 사용한다. 따라서 장점은 SPA와 마찬가지로 웹페이지를 업데이트시 새로고침 없이 필요한 부분만 업데이트 되어서 UX가 향상된다. 그러나 단점으로는 SEO가 까다롭고, 동적화면에서 History 관리와 북마크가 어려울 수 있다.

37. use strict 이 무엇인가요? 사용시 장단점이 무엇인가요?

 - 자바스크립트 언어의 문법을 보다 엄격히 적용하여 기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. 전역에서 선언하면 모든 소스코드가 대상이고, 로컬로 선언하면 함수 내에서만 대상이 된다. use strict 모드에서는 삭제가 불가능한 프로퍼티를 삭제하거나 함수의 매개변수를 중복해서 사용하는 것 등이 금지된다. 
 코드의 문제를 더 빨리 알게되기에 디버깅이 쉬워지고 실수로 전역변수를 만드는 것이 불가능하지만, 단점으로는 엄격모드를 지원하지 않는 브라우저에서는 엄격 모드의 코드가 다른 방식으로 동작할 수 있다는 것이다. 

38. Box model에 대해 설명해주세요.
-모든 HTML 요소는 BOX모양으로 구성되며, 이것을 박스모델이라고 한다. 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다. 박스 모델은 총 네 부분(영역)으로 이루어지고, 이 네가지 부분은 패딩, 테두리(border), 마진, 내용(content)로 구분한다. 내용은 텍스트나 이미지가 들어가있는 박스의 실질적인 부분으로 색상, 너비, 높이 등을 지정할 수 있다. 패딩은 내용과 테두리 사이의 간격이다. 패딩은 눈에 보이지 않는다. 테두리(border)는 내용과 패딩 주변을 감싸는 테두리이다. 마진은 테두리와 이웃하는 요소 사이의 간격이고 마진은 눈에 보이지 않는다.

39. Prototype이란? Prototype Chaining은? 

 - 프로토타입이란 객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입 객체를 만든다. 이때 만들어진 객체 안에 __proto__ 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있다. 그 링크를 프로토타입이라고 한다. 어떤 데이터의 __proto__ 프로퍼티 내부에서 다시 __proto__ 프로퍼티가 연쇄적으로 이어진것을 프로토타입 체인(prototype chain)이라 하고, 이 체인을 따라가며 검색하는 것을 프로토타입 체이닝(prototype chaining) 이라고 한다.

40. undeclared 란? (null, undefined와 비교)

   undefined과 null의 차이는 둘다 선언은 되어있지만, 값의 할당 차이

  - Undefined: 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태
      var amy; console.log(amy) => undefined

 -  Undeclared: 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태.

 - Null: 변수를 선언하고 "null" 이라는 빈값을 할당한 경우 (null은 객체임)
     var amy; (선언), amy = null; (할당)

41. forEach와 Map의 차이점은? 

    - 두 메소드 다 배열의 모든 원소를 돌면서 해당 요소에 관한 작업을 실행하는데, forEach는 원본을 변경시키는데, map은 새로운 배열을 반환한다.

42. 이벤트 루프란? 

    - 싱글 스레드 기반의 언어인 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다. 이벤트 루프는 콜스택과 콜백큐의 상태를 체크하여, 콜 스택이 빈 상태가 되면 콜백 큐의 첫번째 콜백을 콜 스택으로 밀어주는 역할을 한다. 즉, 자바스크립트 엔진이 코드 조각을 하나씩 처리할 수 있도록 작업을 스케쥴하는 동시에 JS에서 비동기 작업을 처리할 수 있게 해준다. 모든 비동기 방식의 API들(setTimeout, ajax 등)은 이벤트 루프를 통해 콜백 함수를 실행한다고 볼 수 있다.

43. 화살표 함수와 일반함수의 차이점

  - 화살표함수는 함수를 간단하게 표현할 수 있는 ES6문법이다. 일반 함수는 this가 동적으로 바인딩되는 반면, 화살표 함수는 바로 상위 스코프의 this와 같다. 또한, 화살표함수는 프로토타입 프로퍼티를 가지고있지않기때문에 생성자 함수로 사용이어렵고, (일반함수는 생성자 함수로 사용 가능) 일반함수에서는 함수가 실행될때 암묵적으로 arguments변수가 전달되어 사용할 수 있지만, 화살표 함수에서는 arguments변수가 전달되지않는다. 객체 프로토타입으로 메소드를 선언할 때에는 화살표 함수는 적합하지않다.

44. "==" 와 "==="의 차이

  - "=="는 동등 연산자로, 비교하는 대상의 형(타입)이 다르더라도, 강제로 비교한다.  즉 두 값의 타입이 다르더라도, 형 변환된 값이 같다면 true를 리턴한다. "==="는 일치 연산자로 동등 연산자보다 엄격하게 비교한다. 타입과 값이 모두 같을 경우에만 true를 리턴한다.

45. 깊은복사, 얕은복사란? 

  - 얕은 복사란 바로 아래 단계의 값만 복사하는 방법이다. 즉 객체를 복사할 때 원래값과 복사된 값이 같은 참조를 가리키고 있다.  깊은 복사는 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법. 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다. 

46. 고차 컴포넌트(HOC)란? 사용해본 적 있는지? 

    -  고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수입니다. 즉 리액트 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다. 컴포넌트 로직을 재사용하기 위한 아주 고오급 리액트 기술이고, 유저 인증 로직 처리 혹은 로딩 중 화면 처리, 컨테이너 컴포넌트와 프레젠테이션 컴포넌트를 분리하는 등에 자주 활용된다. 나는 유저 인증 로직을 처리할때 사용해보았다.  

47. 이벤트 바인딩이란?

   - 이벤트 바인딩이란, 발생하는 이벤트와 그 후에 어떤일이 일어나는지 알려주는 콜백함수와 연결해준 다는 뜻이다. 이벤트 바인딩이는 총 3가지 방법이 있는데, HTML이벤트 핸들러, 전통적인 DOM핸들러, EventListener을 이용한 핸들러가있다. HTML핸들러는 HTML요소의 이벤트 Attribute에 이벤트 핸들러를 넣는 방식이다. 현재에서는 지양하는 방식이고, HTML과 JS가 혼용될 수 있는 문제가 생긴다. 전통적인 DOM이벤트 핸들러는 HTML과 JS가 혼용되는 문제를 해결했으나, 이벤트 핸들러에 하나의 함수만 바인딩 할 수 있고, 함수에 인수를 전달하지 못하며, 바인딩 된 이벤트 핸들러가 2개 이상인 경우 제일 마지막에 추가다된 코드의 이벤트 핸들러만 실행된다.앞에서 설명한 것의 단점을 보완하기 위해 만든 것이 EventListener을 이용한 이벤트 핸들러이인데, addEventListener함수를 이용하여 대상 요소에 이벤트를 바인딩하고, 해당 이벤트가 샐행될 콜백함수를 지정한다.하나의 이벤트에 대해 다수의 핸들러를 추가할 수 있고, 캡쳐링과 버블링을 지원하며 HTML뿐만 아니라 DOM요소에도 동작한다는 장점이 있다.

48. 라이브러리, 프레임워크의 정의를 간단하게 해본다면?

  - 라이브러리는 응용프로그램 개발을 위해 필요한 기능을 모아놓은 소프트웨어이고, 기능 사용법은 사용자가 결정합니다. 리액트가 UI를 만들기 위한 대표적인 자바스크립트의 라이브러리이다. 프레임워크는 소프트웨어 개발을 위한 개발 환경, 토대, 기반시설을 제공하는 것이고 프로그래머는 프레임워크가 제공하는 전체적인 규칙을 따라가면서 개발해야한다. 코드를 프레임워크가 제어하는것이 라이브러리와의 차이점이다. 

49. NPM이란? 

   - Node Packaged Manager의 약자로, NPM은 Node.js 로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램이다. 자바스크립트 패키지 매니저고 Node.js에서 사용할 수 있는 모듈들을 패키지화에서 모아둔 저장소 역할이며 설치, 관리를 수행할 수 있는 CLI를 제공한다.  많은 자바스크립트 프로그래머들이 유용한 패키지들을 만들어 npm에 코드를 공개한다.  npm은 npm i <패키지명> 명령어로 설치할 수 있다. 이와 별개로 yarn 이라는 패키지 매니저가 있다. yarn은 facebook 에서 만든 것으로 npm 서버에 비해 속도가 빠르고 사용법이 npm과 비슷하여 쉽게 사용할 수 있다. 

50. 크로스 브라우징이란? 

 - 어떤 환경에서 접근하여도 동등하게 작동하는 것을 말한다. 웹 표준 기술을 채용하여 다른 기종/플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듬과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법이다. 쉽게 말하자면 익스플로러에서 이용할 수 있던 사이트가 크롬이나 오페라에서는 보이지 않아 이용할 수 없는 것을 크로스 브라우징을 이용하여 사이트를 100% 이용할 수 있게 만드는 기술이다. 크로스 브라우징을 해야하는 이유는, 여러가지 브라우저들은 각각 다른 속성을 가지고 있기 때문에(즉, 각각의 렌더링 엔진이 다르기 때문에) 동일한 코드를 작성하더라도 브라우저마다 화면이 다르게 보일 수 있기 때문이다. 내가 쓰는 css가 사용되지 않는 브라우저를 can I use 사이트 같은 곳에서 확인하고, 제이쿼리 라이브러리를 사용하거나, css 속성 앞에 브라우져별 접두사인 벤더 프리픽스를 사용하는 것도 해결 방법이다. 

51. 원시값과 참조값(array, object)의 차이점을 메모리 관점에서 설명해주세요

 - 원시값은 복제할 때 값이 담긴 주솟값을 바로 복제하고, 참조형은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주솟값을 복제한다. 원시값은 불변값이므로 원시값을 재 할당하면 새로운 메모리 공간을 확보하고 재 할당한 값을 저장하고 참조하던 메모리 공간 주소를 변경한다. 참조값은 가변값이므로 객체가 할당된 메모리 공간에는 실제 객체의 주소가 저장된다. 객체를 할당한 변수는 재할당없이 객체를 직접 변경할 수 있다. 프로퍼티를 동적으로 추가할 수 있고, 갱신, 삭제도 가능하다.  

52. 리액트의 useCallback, useEffect등을 사용할 때 의존성 배열을 받게 됩니다. 이 배열의 역할은 무엇인가요?

 - useEffect의 의존성 배열은 두 번째 매개변수로, 의존성 배열의 내용이 변경되었을 경우, 부수 효과 함수(이펙트 함수)가 실행된다. 의존성 배열안의 값이 바뀔때만 렌더링 되는 특성을 이용해 state 혹은 props값이 변경될 때 특정 함수를 실행하거나, 컴포넌트가 마운트 될 때 API를 이용해 데이터를 가져오거나 하는데 사용된다. 빈 배열을 넣게 되면 최초 마운트 될 때 한번만 호출되도록 할 수 있다. 이펙트 내부에서 사용되는 모든 변수는 deps에 명시를 해야 버그가 발생하지 않는다. 
useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 훅으로 함수 안에서 사용하는 상태나 props가 있다면 의존성 배열에 추가하게 된다. 추가하지 않으면 함수 내에서 해당 값들을 참조할 때 가장 최신의 값을 참조할 것이라는 보장이 없다. 의존성 배열에 넣은 값이 변할 때만 함수를 새로 만들게 된다. 

53. "attribute"와 "property"의 차이점은 무엇인가요? 

  - Attributes는 HTML 요소의 추가적인 정보를 전달하고 이름="값" 이렇게 쌍으로 온다. 예를들어 <div class="my class"></div> 를 보면 div 태그가 class라는 값이 "my class"인 attribute를 가지고 있다.
 Property는 attribute에 대한 HTML DOM트리 안에서의 표현이다. 같은 예시에서 attribute는 값이 "myclass"이고 이름이 className인 property를 가진다. 
둘의 차이는 Attribute는 HTML 텍스트 문서에 있는 것이고, property는 HTML DOM 트리에 있는 것이다. attribute는 변하지 않고, property는 변할 수 있다. 가령 사용자가 체크박스를 체크하면 property의 값은 변하는 것이다.(DOM안에 존재하고 동적이기 때문에) 

54. 자바스크립트의 this는 몇가지로 추론될 수 있는지? 

  -  this는 전역범위에서 사용될 때, 전역객체를 가르킨다. 함수에서 사용될 때에도 전역객체를 가리킨다. 객체에 속한 메서드에서 사용될때는 그 메서드의 객체를 가리킨다. 객체에 속한 메서드의 내부함수에서 사용될때는 전역객체를 가르킨다. 생성자에서 사용될 때, 생성자로 인해 생성된 새로운 객체를 가리킨다. 

55. Function.prototype.bind을 설명하세요.

  -  새로운 함수를 반환한다. 따라서 보통 변수를 할당하여 호출하는 형태로 사용하며, 첫번째 인자로는 this 키워드를 지정하고 그 뒤의 인자들은 바인드 된 함수에 매개변수로 제공된다. 

56. 콜백함수란?

  -  다른함수의 인자로써 이용되는 함수이며 제어권도 함께 위임한 함수이다. 위임받은 코드는 자체적인 내부 로직에 의해 콜백함수를 적절히 실행한다. 비동기 처리시 콜백함수를 사용한다. 콜백지옥에 빠지면 들여쓰기 수준이 높아지며 가독성이 떨어진다. Promise나 Async/Await를 이용해 보완한다. 

57. 리액트와 제이쿼리의 차이점은?

  - 제이쿼리와 리액트 모두 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리이다. 제이쿼리는 인터넷 익스플로러의 시장 점유율이 높을땐 많이 사용되었지만, 크롬이 나타나면서 제이쿼리와 같은 라이브러리를 사용하지 않고도 양질의 웹 앱 구현이 가능해졌다. 리액트는 가상돔을 사용하는 라이브러리인데, 이와 같은 가상 돔을 사용하는 라이브러리가 많아질수록 돔을 직접 조작하는 제이쿼리의 필요성이 줄어들게되었다. 가상돔을 사용하는 리액트는 제이쿼리보다 리렌더링 과정이 빠르고, 그렇다보니 더 많은 DOM조작이 발생하는 규모가 큰 앱일수록 제이쿼리의 선호도가 떨어지고있다. 

58. event.target 과 event.currentTarget의 차이점은?

  - 어떤 것을 반환하느냐의 차이인데, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다.

59. Map()과 Set()의 설명 및 차이점은?

 - Map은 key가 있는 데이터를 저장한다. 객체와 비슷한면이 있지만, 키에 다양한 자료형을 허용을한다. 예를들어 객체의 키는 무조건 문자형이지만, Map에는 키의 자료형에 제한이 없다. 주의 사항은 객체처럼 Map[key]형태를 사용하면 일반 객체로 취급하기 때문에 안쓰는게 좋다.

Set은 중복을 허용하지 않는 값을 모아두는 객체다. new Set(iterable) 이런식으로 선언을 한다. 요소의 유무를 판단할때 Array.find보다 Set.has()가 더 효율적이다.

60. TDD란?

  - 테스트 주도 개발이라는 뜻으로, 먼저 테스트 코드를 작성 한 후에 구현을 하는 방식이다. 총 3가지의 절차가 있는데 실패→ 성공 → 리팩토링이 서로 꼬리를 물고 이뤄진다. TDD를 진행하면 테스트 케이스를 작성할 때 주로 작은 단위로 만들기 때문에 코드가 방대해지지 않고, 코드의 모듈화가 자연스럽게 잘 이루어진다. React에서 테스트를 위해 jest(프레임 워크)와 enzyme(라이브러리)등이 있다. 실제 프로젝트에서 사용해본 적은 없으나 언젠가는 꼭 해보고 싶다.

61. useEffect란?

  - 컴포넌트가 렌더링 되거나 업데이트 될 때 그 안에 있는 기능을 실행할 수 있는 React Hooks중 하나다. 컴포넌트의 특정 값이 업데이트 될 때 해당 기능으로 작동시키고 싶으면 두 번째 파라미터의 배열에 그 값을 넣어주면 된다. 컴포넌트가 언마운트 되거나 업데이트 되기 직전에 원하는 작업을 하고 싶다면 뒷정리 함수를 리턴하면 된다. 실제로 무한스크롤을 구현 할 때 스크롤 이벤트를 삭제하기 위해 사용했었다.

62. import와 require의 차이점은 무엇인가요?

  -  import와 require 모두 외부 라이브러리나 다른 파일을 불러오는 동일한 목적을 가지고있다. import의 경우 ES6에서 도입되었기때문에 babel과 같은 ES6 코드를 변환해주는 도구 없이는 사용하지못한다. 사용방법은 import는 그냥 바로 키워드를 사용하여 직관적으로(import moment from "moment";) 모듈을 불러 올 수 있지만 require은 다른 변수를 할당하듯이 불러와줘야한다.(const moment = require("moment");

63. 스코프란? 스코프체인이란 무엇인가요?

  - 스코프는 어떤 변수들에 접근할 수 있는 유효범위로 코드 어디서든 참조할 수 있는 전역스코프, 함수 자신과 하위 함수에서만 참조할 수 있는 지역스코프가있다. 함수안에서 선언된 변수는 해당 함수안에서만 사용할 수 있으니 전역변수에 영향을 끼칠 수 없다. 내부함수는 호출된 변수를 찾기위해 먼저 자신의 스코프에서 찾고 없으면 한단계씩 외부로 나가면서 찾는다. 이렇게 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인이라고 부른다.

64. HTTP요청 메소드 POST와 GET의 차이점은 무엇인가요?

  - GET은 주로 데이터를 읽거나 검색할때 사용되는 메소드인 반면 POST는 update나 create할 때 사용된다. (예: 검색페이지=get요청, 비번 수정 form=post요청) GET은 데이터의 변형 위험이 없기때문에 POST보다 안전하다고 간주된다. POST요청은 클라이언트에서 서버로 전송할 때 추가적인 데이터를 body에 포함할 수 있지만 GET요청은 필요한 데이터를 URL에 포함하여 요청한다.

출처 : https://amyhyemi.tistory.com/224

앱과 웹의 차이를 막기

 /* ios 15+ 롱탭차단 */
 img,a {-webkit-user-drag:none;}
 html {user-select:none;-webkit-touch-callout:none;}

user-drag 설명

https://pure-f.tistory.com/19

user-select 사용자가 텍스트 선택 못하게 막기

-webkit-touch-callout 는 모바일기기에서 사용하는 css 이다.

사용자가 화면을 길게 누르고 있으면 나오는 메뉴를 제어하는데 쓰이며

보통 아이폰 모바일 웹에서 어떠한 링크를 길게 누르고 있으면 뜨는 메뉴를 막는데 쓴다.

이러한 속성들을 사용하게되면  앱인것처럼 브라우저 특성을 막을수 있다.