akjfal

11/19 본문

하루의 이슈

11/19

akjfal 2019. 11. 19. 20:19

https://wormwlrm.github.io/2018/10/03/What-is-the-difference-between-javascript-and-ecmascript.html

불러오는 중입니다...

https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Korean/questions/html-questions.md

 

yangshun/front-end-interview-handbook

🕸 Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore - yangshun/front-end-interview-han...

github.com

1. DOCTYPE : document type의 약어로 특정 문서 구성 정의1. 이벤트 위임 - 이벤트리스너를 하위요소대신 상위요소에 추가하는 기법

2. 여러 언어 처리 : html lang에서 lang속성 선언

3. 다국어 사이트디자인시 주의사항

  • 텍스트 포함 이미지는 피하기
  • 단어 문장길이 제한도 피하기
  • 색상 이해 조심
  • 날짜 통화 형식
  • 번역딘 문자열 연결
  • 글 읽는 방향

4. data-속성사용 피하기

5. cookie, sessionStorage, localStorage의 차이점

5. <script>, <script async>, <script defer>의 차이점

  • script : html파시잉 중단되고 스크립 실행 후 파싱 다시 시작
  • script async : 병렬적으로 가져오며 실행가능시즉시 실행
  • script defer : 파싱이 끝난후 실행
  • src속서잉 없는 태그는 astnc과 defer속성 무시

6. css <link> 태그는 <head></head>에 js <script>는 </bodt>직전에 위치시키는것이 좋은 이유

  • 아래에 두게되면 점진적 렌더링을 발생시키는데 차단되고 오류를 발생시킨다.
  • <script>는 다운되는동안 HTML파싱을 차단한다. 그래서 멈춰버릴수잇다.

7. 프로그레시브 렌더링

  • 이미지 지연로딩
  • 컨텐츠 우선순위 설정
  • 비동기 HTML 프래그먼트

https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Korean/questions/css-questions.md

 

yangshun/front-end-interview-handbook

🕸 Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore - yangshun/front-end-interview-han...

github.com

1. CSS선택자의 특정성

문제 : CSS선택자가 뭔지를 모른다 찾아보자

https://www.codingfactory.net/10791

 

CSS / 선택자(Selector) / 하위 선택자, 자식 선택자, 형제 선택자, 인접 형제 선택자

하위 선택자 하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택합니다. 예를 들어 div blockquote 1 div blockquote [...]

www.codingfactory.net

그동안 material ui만 사용해서 어렴풀이 줏어 듣기만 햇던 개념이다. 이번기회에 잘 읽어두자

동등한 특정성일시 더 안쪽에 있는것으로 결정됨됨

2. Resetting과 Normalizing CSS의 차이점

  • Resetting - 모든 기본 브라우저 스타일을 제거하기 위한것
  • Normalizing - 유용한 기본스타일은 보존

3. float의 작동 방식

4. z-index와 스택컨텐스트 형성방식

5. BFC(Block Formatting Context)와 그 작동 방식

6. 컨텐츠를 숨기는 방법

  • visibility: hidden : 하지만 요소는 여전히 공간 차지
  • width: 0; heigth: 0 : 요소가 어떠한 공간도 차지하지 않도록
  • position: absolute; left: -999999px : 화면 외부에 배치
  • text-indent: -9999px : block인 요소 내의 텍스트에서만 작동
  • 메타데이터(ex. Schema.org, RDF, JSON-LD)사용
  • WAI-ARIA : 웹페이지의 Accessibility를 높이는 방법을 저으이하는 W3C기술 사양

7. svg스타일링 - 벡터이미지를 저장하는 포멧

https://www.opentutorials.org/course/2418/13666

 

SVG - 생활코딩

소개 svg는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준입니다. SVG 자체는 CSS가 아닙니다만 CSS를 이용해서 다양한 효과를 줄 때 SVG를 활용하는 경우가 많기 떄문에 여기서는 SVG에 대해서 간략하게 언급만하겠습니다. (사실은 어렵게 수업을 만들고 나니까 이건 CSS가 아니잖아라는 생각을 나중에 하게 되었습니다. 만들어진 수업을 버릴까하다가 못 버리고 포함시켰습니다. 보셔도 좋고 안보셔도 좋습니다. ^^

www.opentutorials.org

css는 아는것이 얼마없다보니 내용자체를 모르는경우가많아 스킵을 많이했다

https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Korean/questions/javascript-questions.md

 

yangshun/front-end-interview-handbook

🕸 Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore - yangshun/front-end-interview-han...

github.com

1. 이벤트 위임 - 이벤트리스너를 하위요소대신 상위요소에 추가하는 기법

2. this의 작동

  • 함수를 호출할 때 new키워드 사용시 함수 내부의 this는 완전히 새로운 객체
  • apply, call, bind가 함수의 호출/생성에 사용되는 경우, 함수내의 this는 인수로 전달된 객체
  • obj.method()와 같이 함수를 메서드로 호출하는경우, this는 함수가 프로퍼티인 객체
  • 함수가 자유함ㅅ로 호출되는 경우, 즉 위의 조건 없이 호출되는 경우 this는 전역 객체
  • 브라우저에서는 window객체 -> 엄격모드('use strict')의 경우 this는 전역객체대신 undefined가 된다
  • 위의 규칙중 다수가 적용되며 더사우이 규칙이 승리하고 this값 설정
  • 화살표 함수의 경우 모든규칙을음 무시하고 생성된 시점에서 주변 스코프의 this값을 받음

3. prototype의 상속

프로토 타입의 체인의 끝에 도달할때까지 찾는다

4. AMD vs CommomJS

5. IIFE로 작동하지 않는 이유: function foo(){}();를 IIFE로 만들기 위해서는 무엇을 바꿔야하는것인가?

  • IIFE:즉시 함수 호출 표현식(Immediately Invoked Function Expressions)
  • JavaScript parser는 function foo(){ }();을 function foo(){ } 와 ();로 읽는다. 전자는 함수선언이고 후자는 함수를 호출시도했지만 이름이 지정되지 안아 에러 발생
  • 2가지 해결방법 존재 - (function foo(){ })() 그리고 (function foo(){ }()). function
  • void function foo(){ }(); - 이방식은 반환을 할 수가 없다.

6. null, undefined, undeclared의 차이점

  • undeclared : 생성되지 않은 식별자에 값을 할당할 때 생성됨
  • undefined : 변수는 선언되었지만, 값이 할당되지 않은 변수명
  • null : null이 명시적으로 할당된것

7. 클로저의 사용이유

  • 데이터 프라이버시를 모방, 일반적으로 모듈 패턴에 사용
  • 모듈 패턴 - encapsulates "privact"

8. .forEact와  .map()의 차이

  • forEach : 배열 요소 반복, 각 요소에 콜백 실행, 값 반환x
  • map : 배열 요소 반복, 각요소에서 함수를 호출해 결과로 새배열 작성

9. 익명함수의 일반적인 사용 사례시

  • IIFE로 사용되어 지역 범위 내에서 일부 코드를 캡슐화하므로 선언된 변수가 전역범위로 누출 x
  • 콜백의 인자로 사용

10. 호스트 객체와 내장 객체의 차이점

  • 내장 객체 : js언어의 일부인 객체(ex.String, Math, RegExp, Object, Function등)
  • 호스트 객체 : window, XMLHTTPRequest등과 같이 런타임 환경(브라우저 or 노드)에 의해 제공

11. function Person(){}, var person = Person(), var person = new Person()의 차이점

  • function Persion : 정상적 함수선언
  • var person = Person() : 생성자가 아니고 함수를 호출하는 것뿐 - 일반적으로 생성자는 아무것도 반환하지 않으므로 호출시 undefined
  • var persion = new Person() : Persion.prototype을 상속받은 new연산자를 사용하여 Person객체의 인스턴스를 생성 == Object.create(Persion.prototype)

12. .call과 .apply의 차이점

  • 모두 함수를 호출하는데 사용되며 첫번째 매개변수는 함수내에서 this값으로 사용
  • .call : 쉼표로 구분된 인수를 두번째 인수로 취함
  • .apply : 인수의 배열을 두번째 인수로 취함

13. AjaX의 특징

  • 상호작용성이 좋아짐 - 전체로드할것없이 동적으로 변경가능
  • 상태를 페이지에서 관리가능
  • spa의 장점과 같음
  • 동적 웹페이지는 북마크하기 어려움
  • 웹크롤러는 js를 실행하지 않으며 js에 의해 로드된 콘텐츠를 볼 수 없음

14. 호이스팅

var키워드로 선언되거나 초기화된 변수는 현재 스코프의 최상위까지 옮겨짐

// var 선언이 호이스팅됩니다
console.log(foo) // undefined
var foo = 1
console.log(foo) // 1

// let/const 선언은 호이스팅되지 않습니다.
console.log(bar) // ReferenceError: bar is not defined
let bar = 2
console.log(bar) // 2

15. attribute와 property의 차이점

attribute는 HTML마크업에 정의되지만 property는 DOM에 정의된다.

<input type="text" value="Hello">
const input = document.querySelector('input')
console.log(input.getAttribute('value')) // Hello
console.log(input.value) // Hello

텍스트 필드에 "Wordl!" 추가시

console.log(input.getAttribute('value')) // Hello
console.log(input.value) // Hello World!

16. load이벤트와 document DomContentLoaded이벤트의 차이점

  • DOMContentLoaded이벤트는 스타일시트, 이미지, 서브프레임로딩을 기다리지 않고, 초기HTML문서가 완전히 로드되고 파싱되면 발생
  • window의 load 이벤트는 DOM과 모든 종속 리소스아 에셋들이 로드된 후에 발생함

17. ==과 ===의 차이점

  • ==는 추상 동등 연산자이고 ===는 완전 동등 연산자이다. ==는 타입변환이 필요할 경우 타입변환후 동등한지 비교를함
  • ==는 null과 undefined를 비교할대를 제외하고 사용하지 말아야한다.

18. javaScript의 same-origin 정책을 설명

js가 도메인 경계를 넘어서 요청하는것을 방지함. URI체계, 호스트이름, 포트번호의 조합으로 정의됨 -> 악의적 스크립트 접근 방지

https://en.wikipedia.org/wiki/Same-origin_policy

 

Same-origin policy - Wikipedia

From Wikipedia, the free encyclopedia Jump to navigation Jump to search Security measure for client-side scripting In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits s

en.wikipedia.org

오류를 본적이 있다 나중에 따로 글로 적어볼 필요가 있을듯하다

19. use Strict : 엄격모드 사용

  • 실수로 전역변수 만드는것 불가
  • 실패한 예외를 throw하지 못하는 할당을 만듬
  • 삭제할 수 없는 속성 삭제 시도
  • 함수의 매개변수 이름을 고유
  • this는 전역 컨텍스트에서 undefined
  • 예외를 발생시키는 몇 가지 일반적인 코딩을 잡아냄
  • 헷갈리거나 잘 모르는 기능을 사용할 수 없게함
  • function.caller와 function.arguments에 더이상 접근할 수 없음
  • 서로 다른 엄격모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있음

20. laod이벤트를 사용하는 이유와 단점

  • load는문서로딩 프로세스가 끝날때 발생 이때 문서의 모든 객체가 DOM에 있고, 모든이미지, 스크립트, 링크 및 하위 프레임로딩이 완료
  • DOM이벤트 DOMContentLoaded는 페이지의 DOM이 생성된 후 발생하지만 다른 리소스가 로딩되기르 ㄹ기다리지않음. 초기화전 모든 페이지가 로드될 필요가 없는 경우 선호

21. SPA가 무엇인지와 SEO-friendly하게 만드는 방법 - 한단어도 빼먹기 어려워 전체 첨부

https://github.com/grab/front-end-guide

 

grab/front-end-guide

📚 Study guide and introduction to the modern front end stack. - grab/front-end-guide

github.com

더보기

웹 개발자는 요즘 웹 사이트가 아닌 웹 앱으로 제작한 제품을 언급합니다. 두 가지 용어 사이에는 엄격한 차이는 없지만, 웹 앱은 대화형, 동적인 경향이 있어 사용자가 작업을 수행하고 작업에 대한 응답을 받을 수 있습니다. 전통적으로, 브라우저는 서버에서 HTML을 받아 렌더링합니다. 사용자가 다른 URL로 이동하면, 전체페이지 새로고침이 필요하며 서버는 새페이지에 대해 새 HTML을 보냅니다. 이를 server-side rendering이라고합니다.

그러나 현대 SPA에서는 대신 client-side rendering이 사용됩니다. 브라우저는 전체 애플리케이션에 필요한 스크립트(프레임워크, 라이브러리, 앱 코드) 및 스타일시트와 함께 서버의 초기 페이지를 로드합니다. 사용자가 다른 페이지로 이동하면 페이지 새로고침이 발생하지 않습니다. 페이지의 URL은 HTML5 History API를 통해 업데이트됩니다. 일반적으로 JSON 형식의 새 페이지에 필요한 새 데이터는 브라우저에서 AJAX 요청을 통해 서버로 전송됩니다. SPA는 초기 페이지 로딩에서 미리 다운로드된 JavaScript를 통해 페이지를 동적으로 업데이트합니다. 이 모델은 네이티브 모바일 앱의 작동 방식과 유사합니다.

장점들:

  • 전체 페이지 새로고침으로 인해 페이지 탐색 사이에 하얀 화면이 보이지 않아 앱이 더 반응적으로 느껴지게 됩니다.
  • 동일한 애셋을 페이지 로드마다 다시 다운로드할 필요가 없으므로 서버에 대한 HTTP 요청이 줄어듭니다.
  • 클라이언트와 서버 사이의 고려해야 할 부분을 명확하게 구분합니다. 서버 코드를 수정하지 않고도 다양한 플랫폼(예: 모바일, 채팅 봇, 스마트워치)에 맞는 새로운 클라이언트를 쉽게 구축할 수 있습니다. 또한 API 규약이 깨지지 않는 한도 내에서 클라이언트와 서버에서 기술 스택을 독립적으로 수정할 수 있습니다.

단점들:

  • 여러 페이지에 필요한 프레임워크, 앱 코드, 애셋로드로 인해 초기 페이지로드가 무거워집니다.
  • 모든 요청을 단일 진입점으로 라우트하고 클라이언트 측 라우팅이 그 한곳에서 인계받을 수 있도록 서버를 구성하는 추가 단계가 필요합니다.
  • SPA는 콘텐츠를 렌더링하기 위해 JavaScript에 의존하지만 모든 검색 엔진이 크롤링 중에 JavaScript를 실행하지는 않으며 페이지에 빈 콘텐츠가 표시될 수 있습니다. 이로 인해 의도치 않게 앱의 검색 엔진 최적화(SEO)가 어려워집니다. 그러나 대부분의 경우 앱을 제작할 때 검색 엔진에서 모든 콘텐츠 색인할 필요는 없으므로 SEO가 가장 중요한 요소는 아닙니다. 이를 극복하기 위해, 앱을 서버 측 렌더링하거나 Prerender와 같은 서비스를 사용하여 "브라우저에서 JavaScript를 렌더링하고, 정적 HTML을 저장한 다음, 크롤러에게 반환합니다".

참고자료

22. Promises와 그 Polyfill에 대해서

ES2015는 즉시 사용할 수 있는 Promise를 지원하며 요즘엔 일반적으로 polyfill필요 x

23. Callback대신 Promise사용시 특징

  • 가독성이 떨어지는 콜백 지옥 피할수 있음
  • .then을 이용하여 가독성 좋은 연속적인 비동기 코드 쉽게 작성
  • Promise.all()을 사용하여 병렬 비동기 코드 쉽게 작성
  • 콜백을 너무 빠르거나, 늦게, 적게, 많이 호출피함
  • 필요 환경/매개변수 전달 실패, 오류예외 무시를 피할 수 있음
  • ES2015를 지원하지 않는 브라우저를 사용하기 위해서는 polyfill 필요

24. 디버깅 도구와 기술

react Devtools, Redux Devtools, Chrome Devtools,...

25. 오브젝트와 배열 반복시 사용하는것

  • 오브젝트 : for-in, object.kets, object.getOwnPropertyNames
  • 배열 : for ,forEach, for-of

25. 이벤트루프, 콜스택, 태스크 큐

이벤트 루프 : 콜 스택을 모니터 하고 태스크 큐에서 수행할 작업이 있는지 확인하는 단일 스레드 루프

https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html

 

What the heck is the event loop anyway? – Philip Roberts

JavaScript programmers like to use words like,

2014.jsconf.eu

javascript이해에 최고다 꼭 들어보는걸 추천한다

26.  function foo(){} 와  var foo = function(){} 차이

foo() // 'FOOOOO'
function foo() {
  console.log('FOOOOO')
}
foo() // Uncaught TypeError: foo는 함수가 아닙니다
var foo = function() {
  console.log('FOOOOO')
}

27. let, var, const 차이

  • var는 함수 밖에서 전역 오브젝트로 적용
  • let과 const는 블록 스코프 -> 가장 가까운 중괄호 내에서만 접근가능

28. =>함수 문법

  • 화살표 함수내의 this는 this가 함수를 호출하는 개체에 의해 결정되는 일반함수와 다르게, 주변스코프에 묶인다.
  • 렉시컬 스코프 this는 콜백호출에 유용하다
  • 렉시컬 스코프(Lexical scope) == 정적 스코프(Static scope)
  • 함수 생성시 this의 값이 설정되고 그 이후에는 변경할 수 없다.

29. 디스트럭쳐링

// 변수 할당.
const foo = ['one', 'two', 'three']

const [one, two, three] = foo
console.log(one) // "one"
console.log(two) // "two"
console.log(three) // "three"
// 변수 할당.
const o = { p: 42, q: true }
const { p, q } = o

console.log(p) // 42
console.log(q) // true

30. spread문법의 이점과 rest문법과의 차이점

  • spread
function putDookieInAnyArray(arr) {
  return [...arr, 'dookie']
}

var result = putDookieInAnyArray(['I', 'really', "don't", 'like']) // ["I", "really", "don't", "like", "dookie"]

var person = {
  name: 'Todd',
  age: 29
}

var copyOfTodd = { ...person }
  • rest
function addFiveToABunchOfNumbers(...numbers) {
  return numbers.map(x => x + 5);
}

const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]

const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]

const { e, f, ...others } = {
  e: 1,
  f: 2,
  g: 3,
  h: 4,
}; // e: 1, f: 2, others: { g: 3, h: 4 }

멘토링

웹브라우저에서 페이지가 새로고침되면 완전히 처음부터 다시한다
html parser도 다시 css js둘다 reset
history api가 나오면서 push state histstory api가 있는데
pushstate를 이용하면 새로고침을하지않는다록

웹브라우저잇는것은 index.html하나이다 spa
404일때도 index.html로 가도록한다
즉 어떤주소로가든 index.html로 가도록한다
windows.location을 하게되면 완전히 reset을한다
주소에 id를 넣고 넘겨받은 데이타 id에잇는것을fetch하도록 아니면 redirect를하도록
직접 접근상황을고려하라
redux persist에서 사용하는 stroage를 직접만들면된다
redux persist에서 저장해야하는 애들은 그 브라우저에 저장해야하는 아이들
나중에 다시들어왔는ㄷ 로그인유지가 필요하거나 브라우저에서 하던일을 저장해야한다거나
제일많이하는것은 브라우저의 구분을하기위해 - 클라이언트의 구분을 하기위해서 많이사용
ga => 광고추적을 위해서도 사용
스크롤 같은것을 측정할때 => scorll이벤트에서 나온 값을 저장한다
직접호출을하는것은 지양해야한다
()와 {}이 차이점
() => {
return 1;
}
() => 1
위 둘은 같다
()=>{}
()=>({a:1})
tbody 밑에는 iv가 들어가서는 안된다
<></> === react.fragment
e.target.value 하지말고 debounce나 throught를 이용한다
빈도를 조절한다.
1초나 5초마다 한번반응하도록한다
타이핑의 간격이 0.5초정도 비었을때 반응하도록 - codejong의 영상을 보자 잇다
hook과 그냥 함수의 차이
func과 class의 차이
state의 유무
class는 멤버변수 - 클래스의 인스턴스는 무엇가를 기억할줄알다 a=new Person
function은 스스로 무엇인가르 ㄹ기억할 수 없다.
상태가 존재하지 않는다 -> 입력이 같으면 출력이 같다
class는 상태에 따라 결과같이 바뀐다
상태를 기억하는 방법은 함수 일 때
hook이라는것은 하나의 컴포넌트만을 위한 저장공간을 함수 바깥에 만드는것이다ㅣ 그러고 나서 다시 호출하는것이다.
jest
react 김동우 e2e 이용하자
@type.react 이런식으로 사용하기
devdependencies에 설치해서 사용하기
useEffect return 어떤 작업을 하고 어떤 또 다른 효과를 할 때 clean을 할때 return 을 해준다 -> 주로 eventlistener ->예시 어떤화면ㅇ 들어가서 식{가 있을때 다른화면을 넘어가면 시계가 필요가없을때 시계는 계속 카운트가 되고있다. 이 시계를 없애야 할때 eturn을 통해서 clean을 해준다. 언마운트될때 cleanup이 실행이 된다. 그 컴포넌트가 unmount될때 return이 된다.
포커스가 풀린 케이스 -> react가 input을 재사용을 못하는 케이스
렌더링하는 코드에서 create dom을 한다던가 등등
payload => flux standard action에서 사용되던 규격이다! => 원래 액션에서 사용되던 사항이다
자바스크립트 개발자 포럼을 이용하자

'하루의 이슈' 카테고리의 다른 글

주간 이슈(2주치)  (0) 2019.11.23
11/21  (0) 2019.11.22
11/18  (0) 2019.11.18
11/17  (0) 2019.11.18
11/13  (0) 2019.11.14
'하루의 이슈' Related Articles more
Comments