annyhpk.log

React

[원티드] 프리온보딩 프론트엔드 챌린지 7월 - 사전과제

1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR은 영어 그대로 클라이언트 측 자원을 이용하여 브라우저에서 자바스크립트로 페이지를 직접 렌더링하는 것을 의미합니다. 모든 작업이 서버가 아니고 클라이언트에서 처리됩니다. - CSR 렌더링 순서 HTML load -> DOM -> JS load -> AJAX or Fetch API -> data load -> Update -> 추가 리소스 -> DOM 반영(layout - paint - composite) - CSR의 장점 서버의 부하를 줄일 수 있다. 사용자의 입력에 빠르게 반응한다. - CSR의 단점 SEO(검색엔진최적화)가 제대로 이루어지지 않을 수 있다. 구글 검색엔진은 처리가 가능하다. ..

Javascript

실행 컨텍스트, variable environment, lexical environment 개념

실행 컨텍스트 (Execution Context) - 전역 실행 컨텍스트 : 태그를 마주치면 생성. 실행시 필요한 정보들이 담겨있다. - 함수 실행 컨텍스트 : 함수 단위 실행 환경, 함수의 호출로 call stack에 쌓이게 된다. variable environment : 모든 식별자에 대한 정보를 담고 있는 객체. 라이프 사이클 : 실행 컨텍스트 생성시 생성 -> 실행 컨텍스트 제거시 제거 lexical environment : 유효한 식별자들에 대한 정보를 담고 있는 객체. 라이프 사이클 : 실행 컨텍스트 생성시 생성 -> 스코프 체인이 유지되는 동안 존재 ※ lexical environment 객체는 가비지 컬렉터에 의해 제거됩니다. 예제 function outer() { var a = 10; f..

Javascript

[typescript] event.target에서 value 프로퍼티를 못 찾는 에러 해결방법

문제 상황 : 타입스크립트 초기 세팅 후 event.target에서 value프로퍼티를 찾지못하는 에러 발생 const 무언가하는핸들러 = (event: React.ChangeEvent) => { setValue(event.target.value); // value 부분이 빨간줄이 쳐지고 value프로퍼티를 찾지 못 한다는 에러발생! ... } 처음 시도한 방법 : HTMLInputElement로 다운 캐스팅하여 시도해 본다. const 무언가하는핸들러 = (event: React.ChangeEvent) => { setValue((event.target as HTMLInputElement).value); // 여전히 value 부분이 빨간줄이 쳐지고 value프로퍼티를 찾지 못 한다는 에러발생! // 하..

nodejs

노드 서버 forever 사용기

# 이 글은 초보 개발자의 단순 문제 해결을 경험한 글로써 얻어갈 정보가 거의 없습니다. 1. 문제 발생 토이 프로젝트(프론트 부분)에서 Kakao api를 통해 fetch 데이터를 받아오던 부분을 간단한 노드 서버(fastify)를 만들어서 git page -> node server -> kakao api -> node server - git page 순으로 api 키값을 숨기고 프론트에서는 단순한 요청을 통해서 데이터를 받아오게 할 계획을 하였습니다. 무료플랜으로도 1개의 컨테이너를 항상 켜두기 기능이 생긴 구름 IDE를 통해 노드 서버를 만들었습니다. 그런데 서버를 실행 시키고 컨테이너를 종료하니 네트워크 요청 실패 에러가 발생하였고 터미널을 종료해도 서버가 꺼지지 않기 위해서는 백그라운드 실행을 ..

Web

[html] <img> 태그 이미지 로딩 지연 시키기

1. 지연로딩을 시키는 이유 1. 많은 이미지, 용량이 큰 이미지 로딩 2. 이미지 로딩중 - [웹 페이지 로딩 상태, 유저 인터렉션 X] 3. 유저 이탈 확률 증가 우선 화면을 그리는데 집중하고 나중에 이미지를 로딩 시키자 라는 방법론 2. HTML 이미지 태그 속성 으로 지연 시키기 //다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다. - loading="option" 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. eager(기본값) : 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. lazy : 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 스크롤링을 하다가 이미지를 보게 될 것으로 충분히 예상 가..

Web

[HTML] html 태그로 Toggle, Auto complete 구현

- Toggle 기능 - 결과물 - HTML 삽입 미리보기할 수 없는 소스 - 코드 - 오늘의 메뉴 김치찌개 배추김치 계란후라이 시금치무침 백미밥 & - Auto complete 구현 - 결과물 - HTML 삽입 미리보기할 수 없는 소스 - 코드 - 좋아하는 프로그래밍 언어는?

Web

브라우저(크롬) 단순 탐색(작동 원리) 살펴보기

1. Chrome의 멀티프로세스 아키텍처 Chrome 브라우저는 크게 5가지의 프로세스를 가지고 있고, 그 아래 여러 작업 스레드를 가지고 있습니다. 각 프로세스는 별도의 작업을 하지만 두 프로세스간 통신이 필요하다면 Inter Process Communication (IPC)를 이용합니다. 이렇게 프로세스를 분리하면 하나의 프로세스가 무응답 상태에 빠지더라도 어플리케이션의 다른 부분을 수행하는 프로세스들은 종료할 필요가 없어 해당 프로세스만 재시작할 수 있습니다. 예를 들어 Chrome 브라우저의 여러 탭이 열려있다면 각 탭은 각각의 프로세스로 동작하기 때문에 무응답 상태의 탭이 생겨나도 다른 탭에는 영향을 주지 않습니다. Browser Process : 주소창, 앞으로 뒤로 버튼을 포함한 Chrome..

Javascript

JS 함수형 프로그래밍 _map, _filter 함수 만들어보기

1. 함수형 프로그래밍이란? 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다. 명령형 프로그래밍에서는 상태를 바꾸는 것을 강조하는 것과는 달리, 함수형 프로그래밍은 함수의 응용이 강조된다. 다형성을 높이고 부수 효과를 최소화 하는 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임 순수 함수 : 부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수. 외부의 상태를 변경하지 않는 함수. ※ 함수형 프로그래밍은 계산량이 많을수록 더 나은 성능을 보여준다. 2. each 함수 만들기 map함수와 filter함수의 매개변수로 iterable list(data)와 콜백 함수를 받아서 각 요소별로 실행해줄 함..