전체 글 (118) 썸네일형 리스트형 22.11.19 : 잘 안 되었던것, 톺아보기 1. D-Day 3일 전 reminder alert 문제 상황 1. 아래와 같이 분명 7일이 남았는데, 1일이 남았다고 alert이 떴다. 개발자 도구로 console.log를 찍어보니 1이었다가 7일 된다. 2. alert이 어떤 페이지에서는 뜨고, 어떤 페이지에서는 안 뜬다. 원인 다른 디테일 페이지들을 왔다 갔다 해보니, console.log로 서버에서 받아오는 데이터를 확인했을때, 이전에 들어오던 데이터가 잠시 들어왔다가 새로운 데이터로 바뀌는 현상을 발견했다. 해결방안 1. state에 데이터를 저장해 useEffect에서 clean up 해주기 또는 2. 리듀서를 써서 useEffect에서 clean up 해주기 3. alert 간헐적으로 뜨는 문제 -> 의존성 배열에 기한 날짜가 담긴 데이터.. 22.11.12 : FrontEnd 개발 면접 질문 공부 질문들 from 캡틴판교님 블로그 캡틴판교님 블로그에서 좋은 게시글을 발견해서 이렇게 제 블로그에 끄적여 봅니다. 아직 갈 길이 멀고도 멀었지만, 저는 아직 외우지 않고 술술 대답할 능력이 되지 않기 때문에 이전에 썼던 내용이라도 다시 한 번 찾아보면서 정리를 해보려 합니다. 질문들은 모두 캡틴판교님 블로그에서 발췌하였습니다. # 단골 질문 : 기본적으로 다 알고 대답할 수 있어야 함 1. 브라우저 저장소에 대해서 설명해 보세요. 1) 로컬스토리지 유효기간 없이 데이터를 저장. JavaScript를 사용하거나, 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라짐. 저장 공간이 셋 중 제일 크다. 브라우저를 닫았다가 열어도 데이터가 남아있다. 2) 세션스토리지 각각의 출처에 대해 독립적인 저장 공간을 .. 22.11.10 : Atomic design pattern 왜 Atomic design pattern을 사용해야 하는가? 리액트를 이용한 개발을 하면서, 가장 고민되는 것이 중복되는 코드를 어떻게 재사용 할 것인가? 였다. 큰 프로젝트 일수록 최적화된 코드 재사용이 필수적이므로, 중복되는 코드를 처음부터 재사용 가능한 컴포넌트를 이용하면 재사용 가능한 설계를 할 수 있고, 유지/보수/수정이 쉽게 가능하다. 또한 레이아웃을 이해하기가 쉬워진다. Atomic 디자인 패턴 코드 디자인 패턴 중 하나로 컴포넌트를 사용하는 라이브러리와 프레임워크에 모두 사용 가능하다. 가장 작은 컴포넌트 단위를 원자(Atoms)로 설정 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론 상위 컴포넌트는 순서대로 분자(Molecules), 유기체 (Organisms), .. 22.11.09 : SSR, CSR (TTV, TTI) 본문은 드림코딩 강의를 정리한 내용입니다. 1990년 중반까지는 모두다 Static site였다. 서버에 잘 만들어진 html 문서들이 있고 사용자가 브라우저를 통해 도메인에 접속하면 서버에 이미 배포되어있는 html 문서들을 가져와서 보여주는 형식을 사용해왔다. 문제점은 클라이언트가 페이지 내에서 다른 링크를 클릭하면 서버에서 해당 페이지의 html을 다시받아와서 페이지 전체가 업데이트 되어야 했다. 1996년, 문서 내에서 또 다른 문서를 담을 수 있는 iframe 태그가 도입되었고, 페이지 내에서 부분적으로 문서를 받아와 업데이트가 가능해졌다. 1998년, fetch API의 원조, XMLHttpRequest가 개발되어 html이 아니라 jason 같은 포맷으로 필요한 데이터만 받아올 수 있게 되었.. 22.11.09 : webpack 웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 모듈 번들러는 여러개로 나뉘어져 있는 파일들을 하나로 만들어준다는 개념으로, 주로 자바스크립트를 위한 모듈 번들러이나 호환 플러그인을 포함할 경우 HTML, CSS, 이미지와 같은 property들을 변환할 수 있다. 왜 여러 파일들을 합치는 과정이 필요할까? 그 이유는 HTTP요청 방식과 관련있다. HTTP/2에서는 하나의 커넥션에 동시에 여러 파일들을 요청할 수 있지만, 우리가 주로 사용하는 HTTP/1.1 에서는 하나의 커넥션에서 하나씩 요청을 보내야 한다. 즉 요청하는 파일들이 많을수록 비효율적이다. 요청 수를 줄이기 위한 방법이 바로 번들러이다. 왜 웹팩(webpack) 을 쓰는건가? webpack을 사용해야 하는 이유를 이해하기 위해서는 번들러가.. 22.11.08 : TCP, UDP TCP와 UDP는 데이터 전달을 담당한다. 이 둘은 포트 번호를 이용해 주소를 지정하는 것과 데이터 오류검사를 위한 체크섬이 존재하는 두가지 공통점을 가지고 있지만 정확성(TCP)을 추구할지 신속성(UDP)을 추구할지 구분하여 나뉜다. 데이터를 중요하게 생각해 확실히 주고받고 싶을 때는 'TCP(Transmisson Control Protocol)'을 사용한다. TCP는 통신하는 컴퓨터끼리 '보냈습니다', '도착했습니다' 라고 서로 확인 메시지를 보내면서 데이터를 주고받음으로써 통신의 신뢰성을 높인다. 웹이나 메일, 파일 공유 등과 같이 데이터를 누락시키고 싶지 않은 서비스는 TCP를 사용한다. 그에 반해 데이터의 신뢰성은 제쳐두고 어쨌든 빨리 보내고 싶을 땐 'UDP(User Datagram Proto.. 22.11.07 : JavaScript의 비동기 처리방식과 비동기 함수 JavaScript 비동기 처리방식 자바스크립트는 Event Loop를 이용해서 비동기 방식으로 동시성을 지원한다. 이벤트 루프 이벤트 발생시에 호출되는 콜백 함수들을 태스크 큐에 전달하고 콜스택에 쌓여있는 함수가 없을 때, 태스크 큐에서 대기하고 있던 콜백 함수들을 콜스택에 넘겨준다. JavaScript의 비동기 함수들 자바스크립트는 싱글스레드이기 때문에 한 번에 하나의 작업만 수행한다. 이를 해결하기 위해 비동기가 생겼다. 비동기란 특정 코드들의 처리가 끝나기 전에 다음 코드를 실행할 수 있는것을 뜻한다. 자바스크립트는 즉시 처리하지 못하는 이벤트들을 이벤트 루프에 모아놓고, 먼저 처리해야 하는 이벤트를 실행한다. 가장 대표적인 비동기처리 사례는 setTimeout()으로 일정시간 뒤에 함수를 실행시.. 22.11.07 : DOM (Virtual DOM vs Real DOM) DOM: 문서 객체 모델 Docomunet Object Model XML이나 HTML에 접근하기 위한 일종의 인터페이스이며, 문서 내 모든 요소에 대해 nodes와 objects로 표현하고, 접근하는 방법을 제공한다. 웹 페이지의 객체 지향 표현이며, 자바스크립트 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 이 DOM은 트리구조로 되어있어서 이해하기 쉽단 장점이 있지만, 이런 구조 때문에 부분적 수정이 필요할 때 DOM 전체가 바뀌어야하기 때문에 DOM트리에서는 속도 이슈가 발생하였고, 지속적인 DOM 업데이트는 잦은 오류, 사용자 인터페이스에 악영향을 끼쳤다. 이러한 단점을 해결하기 위해 나온것이 바로 가상돔(Virtual DOM)이다. https://youtu.be/BYbgopx44vo V.. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
