범위가 넓다보니 모르는 것들이 계속 정리하게 된다.
이벤트 등록/해제
- 이벤트 추가하기 - addEventListener()
- 이벤트 제거하기 - removeEventListener(
NPM
Node Package Manager
자바스크립트 라이브러리를 설치하고 관리하는 패키지입니다.
ESLint
자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다.
prettier
일관적인 코드 스타일을 유지할 수 있게 도와주는 툴이다.
이름처럼 코드를 더이뻐지게 도와준다(가독성이 좋아지게)
CI/CD
Continuous Integration/
Continuous Delivery
개발 단계를 자동화하여 더욱 짧은 주기로 고객에게 제공하는 방법입니다.
지속적인 통합, 지속적 배포를 의미합니다.
통합지옥 (integration hell)을 해결하기위한 솔루션입니다.
E2E 코드
사용자 입장에서 테스트하는 것이다.
웹 접근성
장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장
Sementic Mark up
헤더/푸터에 <header>와 <footer> 사용
메인 컨텐츠에 <main>과 <section> 사용
독립적인 컨텐츠에 <article> 사용
최상위 제목으로 <h1> 사용
순서가 없는 목록으로 <ul>과 <li> 사용
내비게이션에 <nav>사용 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리하다.
웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다.
단순한 div, span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 좋다.
웹 서비스의 사용성을 개선하기 위해 고민해 봤던 부분이 있는지? 구체적인 사례와 경험 설명
개발자 도구를 활용하여 네트워크 디버깅을 통해 첫화면 속도를 빠르게 뛰우려고 노력해보았습니다.
번들 사이즈와 코드스플리팅을 통해 이를 해결했습니다.
또한 리패치 횟수를 줄이기 위하여 리액트 쿼리를 활용하여 캐싱하였습니다.
REST API는 프론트가 선택하는 것이 아닌 백엔드가 컨트롤 하는 자원이어서
GraphQL을 통해 오버패칭과 언더패칭을 막아보려고 했습니다.
OverFetching: 필요 이상의 데이터가 옴
UnderFetching: 필요 이하의 데이터가 와서 여러번 요청을 해야함
이 직무로 지원한 이유?
20살 때 대학교 경험이후로 코딩에 관심을 갖게 되었습니다.
본격적으로 소프트웨어 프론트에 관심을 갖게 된 것은 스티븐 잡스 자서전을 읽고 난 후였습니다.
미술작품도 어떠한 생각을 갖고 만들었는지 알았을 때 재미가 있듯이 아이폰은 저에게 그런 존재였습니다. 그때부터 프론트 사용자경험을 개선하는 것에 관심을 갖게 되었습니다.
이 직무로 지원했을 때 하는 일에 대해서 얼마나 조사 및 이해를 하고 왔는지?
코딩 관련된 업무를 하려고 생각을 했고,
조사는 구글과 유투브를 통해 알아보았습니다.
그리고 okky라는 사이트를 통해 프론트 업무가 무엇이고 장단점 연봉등을 알아보았습니다.
이직하려는 회사의 직무에서 기대하는 부분과 기여할 수 있는 부분?
저는 8살부터 컴퓨터를 하루에 4시간이상 씩 하고 살아왔습니다 그래서 UX가 상당히 많은 부분이 장점이라고 생각합니다. 그래서 남들보다 UX가 까다롭고 불편함을 잘 느낍니다.
블로그에 정리하는 것을 자주하는 편인데 이런 부분이 빠르게 배운 것을 숙지할 수 있다고 생각합니다.
그리고 해외 강의나 Github들을 만지면서 코드리뷰 하는 것을 좋아하는데 다양한 최신정보들을 모와서 가져올 수 있다고 생각합니다.
실제로 프로젝트일때 팀원분들에게 많은 정보를 가져다주곤 했습니다.
모듈 번들러
모듈은 분리된 파일이라는 의미이며 한 파일에 전부를 쓰는 것보다 분리해서 여러 파일에 사용하는 것이 유지보수에 용이합니다.
export와 import 로 주고 받으면서 사용합니다
번들링은 묶는다는 의미입니다.
조금 더 나은 성능, 속도를 만족하기 위해 다양한 JavaScript 프레임워크가 등장하였으며, 웹 사이트를 구축하기 위해 필요한 파일들이 점점 많아집니다.
이렇게 많은 모듈을 하나로 묶는 과정은 쉽지 않으며, 변수 또는 함수 이름이 중복되는 경우 그리고 모듈간 종속성 때문에 배포하기 전부터 수많은 문제가 발생합니다.
모듈간 종속성이란 예를 들어 설명하자면, A.js 파일은 B.js를 import 하고 B.js 파일은 C.js 파일을 import 하고.. 이렇게 모듈끼리 서로 종속되는 것을 의미하며, 모듈 간 종속성이 복잡한 경우 어떤 모듈에서 문제가 발생했는지 추적하는 것도 쉽지 않습니다.
하나의 파일로 병합하더라도 병합하는 과정에서 발생하는 문제를 해결하는데 상당히 많은 시간을 소모하게 되므로 상당히 비효율적입니다.
모듈 번들러는 위에서 언급한 모든 문제를 해결하여 짧은 시간에 최상의 성능을 위해 애플리케이션을 최적화하는 개발 도구입니다. 모듈 번들러의 핵심 작업은 여러 JS 파일을 하나의 결합하여 단일 파일을 만드는 것입니다. 따라서, Chrome과 같은 브라우저는 하나의 단일 파일을 로드함으로써 애플리케이션이 동작합니다.
React Hooks는 무엇이고 어떤 장점이 있나요?
React hook이 나오기 전 까지는 리액트 life cycle을 사용하기 위해서 Class를 사용해야 됐었지만 많은 애로사항이 있었습니다. 이런 것을 해결하려고 나온 것이 React-hook입니다. 나중에 비교해 놓은 것을 보시면 알겠지만 코드가 많이 간결해지고 보기도 편해집니다.
리액트 훅이란?
리액트 훅은 간단하게 설명해서 클래스 형식의 리액트 컴포넌트에서만 할 수 있었던 state관리나 라이프사이클등을 함수 형태 컴포넌트에서도 사용할 수 있게 만들어주는 기능입니다.
Props Drilling이란 무엇이고, 어떻게 해결할 수 있는지 설명해주세요.
Props Drilling이란 DOM 부모가 자식 하위컴포넌트로 Prop을 내려주는 것이 반복되는것을 말합니다.
이를 통해 의미없는 여러 코드들을 작성해야하고, props를 추척하기 어려워 유지보수도 어려워집니다.
리렌더링시 props로 내려주는 DOM 요소들이 리렌더링이 되기 때문에 비효율적입니다.
이를 해결하기 위해서는 React에서는 Context API등을 제공하며,
여기에서 업데이트 된 Redux 같은 상태관리 라이브러리로 해결 할 수 있습니다.
코딩 컨벤션
팀원들끼리 코딩을 작성할때 방법을 통일하는 것을 말한다.
함수형 프로그래밍
입출력이 순수해야합니다. (순수함수)
부작용(부산물)이 없어야합니다.
함수와 데이터를 중점으로 생각합니다.
사이드이펙트 없이 순수함수만으로 작성하여서 통제하는 프로그래밍이다.
함수형 프로그래밍(FP)은 프로그래밍하려는 문제를 함수들의 정의와 조합을 통해서 해결하는 프로그래밍 방법입니다. 조금 바꿔 말하면 함수의 개념을 최우선적으로 사용해서 모든 문제를 해결하는 프로그래밍 기법입니다.
객체지향에서 제시했던 예제 코드와 달리 객체가 가진 기능을 사용하지 않고 오롯이 함수를 정의하고 함수를 조합함으로써 결과를 만들어냈음을 알 수 있습니다. Car는 정의하지 않고 JSON 값과 함수를 정의하고 사용할 뿐입니다.
https://www.zerocho.com/category/JavaScript/post/576cafb45eb04d4c1aa35078
함수형 프로그래밍 vs 객체지향 프로그래밍
객체지향 프로그래밍
객체지향 프로그래밍(OOP)이란 프로그래밍하려는 대상을 하나의 객체(사물)로 정의하는 설계 방법으로 객체의 관점에서 구조를 만들고 사용하는 방법입니다. 조금 더 구체적인 설명을 덧 붙이자면 단순한 자료 구조(변수)를 넘어서 기능(메서드)을 포함한 형태로 객체를 사용하는 프로그래밍입니다.
결과적으로 객체지향 프로그래밍은 객체를 정의(변수와 메서드)하고 객체를 생성해서 만들어진 객체를 사용하는 것을 의미합니다
예시
객체지향 프로그래밍과 함수형 프로그래밍이 가지는 차이점은 설계의 관점이 다르다는 점입니다. 객체지향은 "객체" 중심의 설계를 하는 반면 함수형은 "함수" 중심의 설계를 한다는 것입니다.
// 객체지향 프로그래밍
car.start();
car.moveTo(10);
// 함수형 프로그래밍
start(car);
moveTo(car, 10);앞서 보여드린 함수형 프로그래밍 예제에서 한 가지 빠졌다고 이야기드렸던 부분은 바로 불변함(Immutable)입니다. 스프레드 연산자를 이용하면 손쉽게 불변성을 가진 코드를 만들 수 있는데요. 예제 코드를 통해 불변성을 포함한 코드를 만들면 다음과 같은 코드를 만들 수 있습니다.
