개발 연습 블로그

보호되어 있는 글입니다.

요소는 왜 요소의 자식 요소여야만 하는가? 는 목록을 나타내는 태그이다. 그리고 은 순서가 없는 목록을 나타내는 태그인데, 태그로 구성된 목록을 한데 담는 컨테이너 역할을 한다. semantic HTML의 필요성을 예시를 들어 설명해보아라. 잘 모르겠습니다.

UseRef가 필요한 상황을 예시를 들어 설명해주세요 UseRef는 리렌더링이 필요없지만 변경가능성이 있거나 확실시된 변수가 리렌더링된 후에도 값이 유지되야 할 때 사용된 HOOK을 말한다. 쉽게 말해, 겉으로 드러나지 않는 값이지만 경우에 따라 자주 바뀌는 경우에 사용할 수 있는 것이다. 예를 들어, 조건부 리렌더링이 필요한 상황, 페이지에 접속할 때 회원인지, 비회원인지, 혹은 관리자인지 등을 체크한다던지, 그런 상황에 쓰일 수 있다. Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해주세요. 쿠키에서 MaxAge와 Expires 모두 쿠키의 유효기간을 설정하는 옵션이다. 전자는 초 단위로, 후자는 만료 날짜를 정하는 것으로, 이것들이 설정되지 않은 쿠키..

require와 import차이점을 설명해주세요. 각각 어떤 상황에서 쓸 수 있나요? require는 CommonJS에서 사용하는 모듈을 불러오는 키워드이다. 이 경우 모듈을 호출할 때 확장자와 경로를 전부 명시해야한다. import는 ES6부터 사용하고 있는 새로윤 모듈 로드 방식이다. 다른 패키지에 있는 메소드와 변수 등을 가져오는데 쓸 수 있으며 모듈의 경로나 확장자를 따로 명시할 필요가 없다. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요 const는 중복 선언과 재할당이 불가능할 뿐 새로운 값을 할당하는 것은 가능한 변수 타입이다. 그러므로 배열, 객체를 const로 선언했을때, 여기에 요소나 속성을 추가할 수 있는 것이다.

this가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요? 대부분의 객체지향언어에서 this는 생성한 인스턴스 객체를 지칭한다. 그러나 자바스크립트는 어디에서든 this를 사용할 수 있다. 함수와 객체의 구분이 느슨한 자바스크립트에서, this는 이 둘을 구분할 수 있는 실질적이며 유일한 기능이다. 자바스크립트에서 this는 함수를 호출할 때 함께 결정된다. 평소 코드에서 어떤 부분이 가장 큰 차이가 생기는지는 잘 모르겠다...... 브라우저 저장소에 대해 차이점을 설명해주세요.(로컬, 세션, 쿠키) 로컬 스토리지는 클라이언트의 컴퓨터에 지역적으로(로컬)하게 저장되는 방식을 말한다. 브라우저를 종료해도 로컬 스토리지에 저장된 데이터는 삭제되지 않..

프레임워크와 라이브러리의 차이점에 대해 설명해주세요. 프레임 워크는 개발에 있어 필수적인 코드와 알고리즘 따위를 제공하여 애플리케이션 전체 구조를 결정하는데 사용한다. 라이브러리는 목표하는 기능을 수행하기 위한 함수와 로직들의 집합이며 원하는 기능을 손쉽게 활용하고 구현하기 위해 사용한다. 캐시의 장단점과 어떤 부분에 활용되는지 설명해주세요. 캐시는 데이터를 빠르게 활용할 수 있는 임시 저장소를 의미한다. 일반적인 메모리 저장소보다 접근이 빠르지만 그만큼 용량의 압박이 있으며, 데이터 자체를 관리하는 것이 아니라 복사하여 저장하기에, 원본 데이터의 변경에 맞춰 관리해야한다. 프론트엔드에서 캐시를 사용할 수 있는 2~3가지 영역을 제시해주세요. 이미지, CSS 요소, JS 등을 캐싱하여 웹 속도를 향상시킬..

호이스팅이란? 자바스크립트에서 함수가 실행될 때, 함수 내 선언한 변수나 함수의 값들을 전부 유효범위의 최상단에 선언시킨 것처럼 순서를 바꾼 것을 의미한다. 코드를 동작하기 전에 이미 선언된 변수나 함수들이 저장되기 때문에 코드 상에서 선언문보다 호출문이 앞서 있어도 동작하는데는 오류가 없다. TDZ란? TDZ는 시간상 사각지대의 약자로, let, const, var 중 let과 const가 호이스팅을 거치는 도중 들어가는 에러를 의미한다. 초기화가 완전히 끝나기 전가지 TDZ에 들어간 이 변수타입들을 사용하려면 referenceError를 겪게 된다. 이는 초기화 순서에 따라 생기는 것이며 var는 이 TDZ가 생기지 않아 코드상에서 에러를 일으킬 위험이 있다. parameter와 argument의 차..

웹 페이지가 브라우저에 랜더링되는 과정을 설명해주세요. 1. 사용자의 브라우저가 웹 서버에서 HTML, CSS 따위의 파일을 받아온다. 2. 브라우저별로 작동되는 랜더링 엔진에서 HTML 파일을 분석해서 DOM Tree로, CSS 파일을 분석해서 CSSOM Tree를 생성한다. 3. 생성된 두 Tree를 합쳐 Render Tree를 생성한다. 이 Tree가 실제 화면에 랜더링하는데 쓰일 것이다. 4. 브라우저에 존재하는 자바스크립트 엔진이 DOM API를 이용해 각 요소들의 크키와 위치를 결정하고 배치하는데, 여기서 최적화를 위해 리플로우와 리페인트를 진행한다. 리플로우는 레이아웃 계산을 다시 하는 것이며, 리페인트는 새로운 Render Tree를 바탕으로 다시 페인트를 진행하는 것이다. 5. 레이아웃이..

✔️ [FE] 끝없는 CORS 에러 이거 좀 풀어주실래요? 처음으로 벡엔드와의 협업에서 겪은 에러, CORS 정책 문제로 올바른 API에 정확한 양식으로 데이터를 요청하고 전송했지만 계속해서 문제가 발생하였다. 벡엔드에서도 처음 겪은 이슈로, 이것을 해결하기 전까지 진정한 협업이 불가능했다. 하던거 할게요. 벡엔드에서 처음 겪는 이슈를 프론트엔드에서 해결해줄 수도 없는 노릇, 일단 페이지 구조를 짜거나, 로컬 데이터를 활용하여 이슈가 없는지 등을 확인하며 우선순위가 급한 작업들을 임시방편으로 진행하였다. 회고 엄밀히 말해 벡엔드 측의 휴먼에러이자 트러블 슈팅이지만 여기에 따로 적은 이유는, 이것이 내가 협업에서 처음으로 겪은 문제였다는 것이다. 이 문제를 겪으면서 내가 빠르게 깨달은 것은. 내 작업 순서..

✔️ [FE] 리액트 쿼리의 능동적 활용 리액트 - 쿼리 이슈 메인화면에서 카테고리를 누를 때 마다 GET을 해오는 과정이 능동적으로 진행되 질 않아 상당한 고생을 했다. 메인화면에 처음 들어올 때 전체 리스트를 받아오는 GET하고 부분항목을 받아오는 GET의 구 조가 달라 문제 발생 해결 전체용 GET을 받아오고 그 다음 카테고리용 GET은 enabled를 false로 체크 , 이후 버튼을 누 를 때 비로소 발동하도록 하여 useQuery의 발동 을 원하는 때에 발동시키도록 조절했다. 화면에 랜더링되는 ITEM들은 useState로 일괄 관리하였기에 처음엔 전체GET을 저장, 이후엔 리 스트 리셋 후 부분GET을 저장시키는 방식으로 화 면 새로고침을 하지 않고 진행했다. 회고 코드를 다시 살펴본 결과,..