본문 바로가기

전체 글

 (150)
리액트 면접 질문 대비 자료 SPA란 싱글페이지 어플리케이션. 기존의 웹페이지는 유저의 요청에 대해 서버에서 이를 해석한 후 랜더링을 담당했습니다. 압축과 캐싱을 통해 속도 문제를 개선했지만, 여전히 불필요한 트래픽이 낭비됩니다. => 리액트의 장점 뷰렌더링을 브라우저가 담당하도록 하고, 서버에서는 데이터만 전송해줍니다. 처음 웹페이지만 서버가 제공하고, 나머지 페이지는 브라우저에서 로딩해줍니다. 새페이지로 갈 경우, html을 요청하는 것이 아니라, 필요한 데이터만 받아서 렌더링을 진행합니다. 라우팅 주소에 따라 다른 뷰를 보여주는 것을 Routing이라고 합니다. react-router를 설치하여 해당 기능 실행. https://thebook.io/006946/ch16/01-02/ 여기 그림 참고하면 이해가 빨라요! 코드스플리팅..
프론트엔드 면접 대비 (2) 디바운싱 & 쓰로들링 디바운싱 연달아 호출되는 함수 중 가장 마지막(혹은 가장 처음) 함수만 호출되도록 한다. 예를 들어 검색어를 적을 때, search를 누르기전 이미 검색 결과에 대해 조회가 되야한다고 치자. 키보드는 연속 타이핑이기때문에, 마지막으로 검색어를 완성했을 때에만 결과를 보여주고자 한다. (그렇지 않으면 각 input에 대해 ajax 전송이 이뤄지므로 비효율적이다.) let timer; document.getElementById('jsInput').addEventListener('input', function (e) { if (timer) { clearTimeout(timer) } timer = setTimeout(function () { console.log(e.target.value)..
해시-해시테이블 장점: 데이터 관리에 유용하며 빠르다. (각각 고유한 키값을 가지므로 바로 접근 가능) 단점: 리소스를 낭비한다. 데이터 - 해시함수 - 해시테이블 의 구성으로 이루어짐. 충돌에 대처하는 방법 1. 체이닝. 해당 인덱스의 값이 이미 차있다면, 그 값의 뒤로 넣어준다. 즉, 리스트의 형태로 만든다. 2. Linear Probing 체이닝일 경우 남은 테이블의 낭비가 심하다. 넣으려는 데이터가 차 있으면 다음 셀에 넣어준다. ( e.g. 123 -> 1은 안되니까 2로 넣어주자) 3. Table resizing 데이터가 들어오는데 들어갈 자리조차 없다면! 참고 https://www.youtube.com/watch?v=xls6jEZNA7Y
부스트코스 정리 SPA 공부시 초점 MV* 모델이 등장하면서 어려워짐. e.g. 투두리스트 객체 지향에 대해 공부하기. (Java의 객체 지향 등) JavaScript view에 대해 깔끔하게 template 짜기. Asynchronous Component Routing history API 다루기. Template 개선 template literal 활용 `${data.name}`; Spread operator 배열 합치고, 복제시. let previousData = [1,2,3]; let newData = [...previousData, 4, 5] immutable 객체 생성에 유용하다. Destructuring - Array 데이터를 변수에 할당하기 용이. let previousData = ["apple","ora..
프론트엔드 찾아볼 내용 (꼭!) DNS Resolution, CDNContent Delivery Networks 사용, 여러 호스트 이름을 통한 리소스 요청 성능 향상 HTTP 헤더 (Expires, Cache-Control, If-Modified-Since) 스티브 사우더스의 규칙 전부 (고성능 웹사이트) PageSpeed, YSlow, 크롬 개발자 도구 Audit, 크롬 개발자 도구 Timeline에서 보여주는 문제를 해결하는 법 작업을 서버에서 해야할 때와 클라이언트에서 해야할 때 구분 캐시, 프리 페칭pre-fetching 및 지연 로드 기법 네이티브 자바스크립트. 직접 바닥부터 코드를 작성해야 할 때 혹은 다른 사람의 코드를 가져다 써야 할 때를 아는 것. 그리고 두 작업의 장점과 단점을 평가할 수 있는 능력 최신 MVC 자바..
프론트엔드 면접 질문 공부 (1) 다음 주에 잡힌 면접에 앞서서 부랴부랴 면접 질문들을 공부했습니다. 이 포스팅은 아래의 링크 내용을 다시 제가 적은 노트입니다. https://velog.io/@tmmoond8/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EC%9D%B8%ED%84%B0%EB%B7%B0-%ED%9B%84%EA%B8%B0-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC-%EC%9E%91%EC%84%B1-%EC%A4%91 프론트엔드 개발자 인터뷰 후기 (면접 질문 정리) 최근 프론트엔드 경력자 면접을 봤습니다. 리액트를 사용하는 프론트엔드 개발자를 구하는 자리기에 리액트 관련 질문을 ..
리액트 4. #4.1 데이터 얻기 https://developers.themoviedb.org/ 영화 사이트 만들 페이지 : Get Now Playing, Get Popular, Get Top rated a. axios를 이용해서 request한다. axiox? axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행합니다. 내부적으로 AXIOS는 직접적으로 XMLHttpRequest 를 다루지 않고 “AJAX 호출”을 할 수 있습니다. (출처: https://velog.io/@rohkorea86/%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%B0%A8%E..
리액트 3. styles #3.1 스타일 적용법 style. 어떻게 적용하지? style sheet에 따로 빼내는 것 OK. 하지만 컴포넌트를 이용하는 것의 요점은 어플리케이션의 부분 부분을 캡슐화하는거라구! 이런 형태는 해당 폴더로 가서 index.js 파일을 들여다보게 해준다. 근데 이렇게 했을때 클래스 네임 다른 component에서 겹치면 에러날건데... CSS를 global이 아닌 local로 관리하는 방법 없을까? #3.1 CSS local module 요렇게 이름이 랜덤하게 생성된다! 어떻게 할까? 아래 보자! Header.module.css로 변환 .navList 등과 같이 클래스명 정하기. import는 js처럼 멋지게! className은 styles 이라는 object에서 navList 변수 가져와서 지정하자..

티스토리툴바