취업/면접 (14) 썸네일형 리스트형 Protobype 면접질문 자바스크립트 개발자라면 누구나 한번은 Prototype에 대해서 질문을 받아보았을 거라고 생각을 한다. 그만큼 유명하고 자주 출제 하는 단골 면접 질문이다. 하지만 여러 웹사이트를 방문하며 Prototype에 관한 글을 살펴보았지만 간단하고 명료한 답변을 본적이 없다. 그 이유는 내용자체가 간단명료하지 않기 때문이다. 이 글을 읽는 여러분은 운이 좋다. 간단 명료하게 프로토 타입을 정의해볼테니 다음 면접에서는 걱정은 한수 접어두길 바란다. (왜인지 모르겠지만 옛날 필독서 작가 말투를 따라하는중) 면접에서는 대게 이렇게 물어본다. Q : 프로토타입이 무엇인가요? A : (현재의 나) 프로토타입은 JavaScript에서 oop로 개발하기 위해 사용하는 패턴. Javascript의 Class문법은 protot.. Promise 면접질문 면접질문으로 맨날 듣는 단골 질문들이 있따. 근데 나는 제대로 답을 하지 못한다.. 왜일까? 왜긴 제대로 정리를 안해서다. 그래서 질문들을 정리할 까 싶은데 지금 생각나는 거는 Promise Prototype Was vs Webserver 불변성 순수함수 nextjs 정도가 있따. 일단 오늘은 promise에 대해서 정리해보자. 면접관님은 물어볼것이다. Q : Javascript에서 Promise가 무엇일까요? A(22.02 현재의나) : Promise는 js 콜백 형태를 보완하기 위해 나온 비동기 통신 방식입니다. js에서 콜백헬의 문제인 상황에서 이를 해결 하기 위해 이런 패턴이 나왔고 상태로는 resolve, pending, reject를 가지며 return은 resolve나 reject로 받습니다.. 지긋지긋한 CORS! 타파!! CORS는 Cross Origin Resource Sharing 이란 단어의 약자로 교차 출처 리소스 공유라고 불린다. 이를 위해선 동일 출처 정책인 Same Origin Policy를 알아두어야 한다. Sop는 동일한 출처에서만 http 요청이 가능하도록 하는 정책이다. 간단히 말하면 인가받지 않은 클라이언트에서 서버로 http 통신을 요청할 때 이를 방지하기 위해서 나온 정책이다. 예를 들어 어느 홈페이지에 방문하였을 때 나의 웹 페이지가 가진 쿠키를 통해 내 개인정보를 네이버에 요청하면 내 개인정보가 해커에게 노출될 우려가 있다. 이를 방지하기 위해서 네이버 서버에서는 허용된 웹페이지 url이 아니면 cors를 발생시켜 정보를 제공하지 않을 정책을 수립한 것이다. 이게 끝이다. 간단한다. 이를 해결.. React.memo 알아보기 (feat. React.callback) React.memo는 React 최적화할 때 사용하는 메소드이다. 사실 이것을 사용하지 않아도 React로 개발하는데 문제는 없지만, 속도를 개선하기 SPA를 위해서 사용하는 React 사용하는데 있어 React.Memo를 사용함을 통해 최적화를 한다면 좀 더 좋은 퍼포먼스를 통해 UX를 줄 수 있기에 사용을 할줄 알아야 어디가서 "React 해봤다~" 할 수 있다고 생각한다. 그리하여 이에 대해 정리해보도록 하자. React는 React.Memo와 React.Callback과 묶여서 언급된다. 둘다 메모이제이션에 대해 관련된 메소드라 그런데 조금 더 자세히 알아보면 React.memo는 렌더링 결과를 메모이징하여 불필요한 Rendering을 건너뛴다. 메모이제이션이란 계산된 값을 자료구조에 저장하고 이.. Callback 비교 - 1 js는 동기적이다. ⇒ 호이스팅 이후로는 차례대로 실행이 된다. ⇒ 호이스팅은 var, function 선언한 것이 최상단으로 올라 가는 것. ⇒ let, const는 호이스팅 안되나? ⇒ 된다, 하지만 tdz에 의해 referenceError를 발생한다. ⇒ 변수는 어휘적 환겨에 포함될 때 생성되지만, 실행되기 전까지는 엑세스 할 수 없는 현상을 tdz라고 한다. 콜백함수란 ⇒ 우리가 전달해준 함수를 나중에 불러줘라는 뜻. 콜백함수는 동기, 비동기으로 사용할 수 있다. Callback Hell 콜백 지옥의 문제점 가독성이 너무 떨어진다. 비즈니스 로직을 한눈에 이해하기 어렵다. 무슨일이 일어나는지 파악하기 어렵다. 에러가 발생하거나 디버깅 시 굉장히 어렵다. Promise callback을 대체해서 깔.. React 배열에 key가 존재하는 이유 쾌락코딩님의 글을 보고 제식대로 정리한 것입니다. React를 사용하신 분이라면 map을 이용해 리스트를 표현할 때 key값을 설정안했을 때의 노란색 경고창을 본 경험이 있을 것이다. 그곳에 항상 index값을 넣고 사용하긴 했지만 정작 index값이 필수적으로 필요한지 정확히 알고 사용하진 않았다. 마침 일방적 담당 쌤인 종원쌤이 나에게 되물었다. "왜 key값이 필요한지 아나요?" 5초 고민하고 나온 답은 key값을 통해 list에 유일 키를 부여하고 변경 시에 효율적인 탐색을 통해 값을 변경하기 위해서 입니다. 거의 맞았다고 하셨지만 sibing 방식을 추가해서 설명해야 100점이라고 했다. 좀 더 자세히 알아보자. React는 VDom을 사용한다. 그래서 map을 통해 요소를 그릴 때 처음에는 렌.. CSS in JS vs CSS bono 님의 블로그 글을 공부하며 내 식대로 요약한 것으로 모든 copyright는 bono님에게 있습니다. 한동안 많이 사용하던 styled-component가 끝발이 떨어졌다. 왜 그런지에 대해 좀 알아보자. 일단 css는 Cascading Style Sheets이란 뜻으로 폭포처럼 위에서 내려가는 식으로 스타일을 입히는 문서라는 뜻으로 과거에는 신입이나 경력이 짧은 사람에게 맡기는 경우가 많았다고 한다. 당시에는 프론트엔드 영역이 명확하지 않았던 시절이다. 지금은 웹이 점점 복잡해지고 동적 요소가 많아지면서 퍼블리셔라는 직종이 생기고 html, css만으로 화면의 모든 스타일을 제어할 수 없는 세상이 펼쳐졌다. 프론트엔드 개발자들도 CSS를 전문적으로 설계하고 다루어야 한다. sass와 같은 모듈.. 소프트웨어 개발의 기초 - OOP 1. 객체 지향 기법의 개요 객체 지향 기법의 개요 객체지향 기법은 구조적 기법의 문제점으로 인한 소프트웨어 위기의 해결책으로 사용되고 있다. 소프트웨어의 재사용 및 확장을 용이하게 함으로써 고품질 소프트웨어를 빠르게 개발할 수 있으며 유지보수가 쉽다. 복잡한 구조를 단계적, 계층적으로 표현한다. ⇒ 객체 지향 기법은 현실 세계의 개체를 기계의 부품처럼 하나의 객체로 만들어, 기계적인 부품들을 조립하여 제품을 만들듯이 소프트웨어를 개발할 때에도 객체들을 조립해서 작성할 수 있도록 하는 기법이다. 객체 ⇒ 객체는 데이터와 데이터를 처리하는 함수를 묶어놓은 하나의 소프트웨어 모듈이다. 데이터 ⇒ 객체가 가지고 있는 정보로 속성이나 상태, 분류등을 나타낸다. 속성, 상태, 변수, 상수, 자료구조라고도 한다. .. 이전 1 2 다음
