개발story

useRef 사용 예시 useRef는 함수형 컴포넌트에서 DOM 노드를 참조할 때 사용합니다. 예를 들어, 특정 버튼을 클릭할 때 focus가 이동하도록 하거나, 스크롤 위치를 저장하여 나중에 해당 위치로 되돌아갈 때 등에 사용할 수 있습니다. MaxAge와 Expires 옵션 MaxAge: 쿠키의 수명을 초 단위로 설정합니다. Expires: 쿠키의 만료 날짜를 설정합니다. 설정하지 않을 경우, 쿠키는 브라우저가 종료될 때 자동으로 삭제됩니다. 따라서 MaxAge나 Expires 옵션을 설정하지 않으면 브라우저가 종료될 때 쿠키가 삭제되기 때문에, 다시 방문했을 때 이전의 쿠키 정보가 유지되지 않습니다. 순수함수 순수함수란, 같은 인자에 대해 항상 같은 값을 반환하며, 외부에 영향을 미치지 않는 함수입..

this 가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요? "this"는 자바스크립트에서 사용되는 특별한 예약어로, 현재 실행되고 있는 함수가 속한 객체를 참조하는 데 사용됩니다. "this"의 동작 원리는 다음과 같습니다: 전역 공간에서 "this"를 사용하면 전역 객체(window)를 참조합니다. 함수 안에서 "this"를 사용하면 해당 함수를 호출한 객체를 참조합니다. 객체의 메서드에서 "this"를 사용하면 해당 메서드를 호출한 객체를 참조합니다. 브라우저 저장소에 대해서 차이점을 설명해주세요(local storage, session storage, cookie) Local Storage는 HTML5에서 도입된 저장소로, 클라이언트 측에..

HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요 HTTP는 인터넷 상에서 데이터를 주고받을 수 있는 프로토콜 중 하나이며, 웹 브라우저와 웹 서버 간에 데이터를 주고받는 데에 주로 사용됩니다. HTTP는 클라이언트와 서버 사이의 요청과 응답에 대한 규약을 정의하며, TCP/IP 기반으로 동작합니다. HTTP 메시지 구조는 크게 요청 메시지와 응답 메시지로 나눌 수 있으며, 요청 메시지는 요청 라인, 헤더 필드, 빈 줄, 메시지 본문으로 이루어져 있습니다. 응답 메시지는 상태 라인, 헤더 필드, 빈 줄, 메시지 본문으로 이루어져 있습니다. position 을 어떻게 사용하는지 알려주세요 position은 CSS에서 사용되는 속성 중 하나로, 요소를 배치하는 방법을 ..

프레임워크와 라이브러리 차이점 프레임워크는 개발자들이 웹 어플리케이션을 구축할 때 사용하는 구체적인 방법론과 제약사항을 제공하는 도구이며, 라이브러리는 개발자들이 필요할 때 호출하여 사용하는 함수 또는 모듈의 집합입니다. 프레임워크는 보통 애플리케이션의 전반적인 아키텍처를 제공하고, 라이브러리는 좀 더 구체적이고 특정한 기능을 수행합니다. 캐시의 장단점 및 활용 캐시는 데이터나 자원을 미리 저장해 놓는 것입니다. 이렇게 저장해 놓으면 다음에 같은 데이터나 자원을 요청할 때는 저장된 것을 사용하여 속도를 높일 수 있습니다. 이는 성능 향상에 도움이 될 뿐만 아니라 서버의 부하를 줄일 수 있습니다. 하지만 캐시에는 저장 용량의 한계와 최신 데이터 유지 등의 단점도 있습니다. - 브라우저 캐시: 이미지, 스크..

Hoisting 이란? - 자바스크립트에서 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 현상을 의미합니다. 이를 통해 코드 실행 전 변수 및 함수가 메모리 공간을 확보하고, 이후 코드에서 해당 변수와 함수를 참조할 수 있게 됩니다. TDZ란? - JavaScript에서 let과 const로 선언된 변수가 스코프 내에서 선언된 위치에서부터 초기화되는 지점까지 일시적으로 사용할 수 없는 상태를 말합니다. 이는 변수의 스코프와 초기화 시점을 고려해야 하는 중요한 개념이며, let과 const를 사용할 때 생기는 문제점을 방지하기 위해 도입되었습니다. parameter와 argument의 차이에 대해 설명해주세요. - parameter와 argument는 함수에서 매개변수와 전달인자를 가리키는 용..

웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요. - HTML 코드를 파싱 -> DOM 트리 생성 -> (CSS 스타일 시트와 결합하여) 렌더 트리 생성 -> 렌더링(레이아웃 배치 -> Paint) 웹페이지가 브라우저에 렌더링되는 과정은 크게 4단계로 나뉩니다. 1. HTML 파싱 (Parsing) 브라우저는 웹페이지의 HTML 코드를 받아서 파싱합니다. 파싱이란, HTML 코드를 이해하고 브라우저가 이해할 수 있는 구조로 변환하는 과정입니다. 2. DOM 생성 (DOM Tree Construction) 파싱된 HTML 코드를 기반으로 브라우저는 DOM(Document Object Model) 트리를 생성합니다. DOM은 웹페이지의 계층적인 구조를 나타내며, 웹 페이지의 모든 요소를 포함합니다. 3...

versel은 리액트파일을 배포하기에 용이하지만 json-server를 배포할때 read-only라서 db.json을 수정하지 못해 500 error가 발생한다. 따라서 versel로 리액트파일을 배포하고 glitch로 json-server를 배포하는게 쉽다. 가짜 REST API인 json-server를 glitch로 배포하는 방법 1. https://glitch.com/ 에 접속해서 로그인 한 후 새 프로젝트 시작을 클릭한다. 2. GitHub에서 가져오기를 클릭한다. 3. https://github.com/jesperorb/json-server-heroku.gitURL 입력에 붙여넣고 확인을 클릭 4. URL을 라이브 사이트로 가져오려면 공유 버튼을 클릭한다. 참고자료 https://github.c..

프로젝트를 진행하면서 이미지 최적화를 하기 위하여 Next.js에서 지원하는 컴포넌트를 사용하기 위하여 공부하면서 정리 해보았다! 컴포넌트란? 는 HTML의 태그에서 확장되어 built-in을 최적화하는 Next.js에서 지원하는 이미지 컴포넌트이다. 먼저 왜 사용해야 하는지 부터 알아보자! 예를 들어 태그를 사용했을때 모바일 뷰에서 렌더링된 크기는 360 x 240px이지만 브라우저에서 서버로부터 받은 이미지의 크기인 고유 크기는 2400 x 1598이며 이것이 이미지 원본 크기이며, 파일 크기는 344kB이다. 크고 무거운 이미지를 요청하고 작은 크기로 표시했기 때문에 비효율적인 것을 예시로 확인 가능하다. Next.js 없이 이미지 문제를 해결하려고 시도한다면? 리사이징 문제 : 서버에 디바이스 별..

// deep copy : 깊은복사 // shallow copy : 얕은복사 let number1 = 1; let number2 = number1 // 1) number2에는 1이라는 값이 들어간다. - 깊은복사 // 2) number2에 number1 자체를 넣는다. - 얕은복사 number2 = 2; console.log(number1, number2); // 1) number1: 1, number2: 2 - 깊은복사 // 2) number1: 2, number2: 2 - 얕은복사 const human = { name: "사람1", age: 19, }; let superHuman = human; // 1) superHuman = { name: "사람1", age: 19, }; - 깊은복사 // 2) ..

next.js에서 react query 적용 레퍼런스 https://devkkiri.com/post/f14703ea-a105-46e2-89e8-26282de36a3a json-server 설치 npm i -g json-server json-server 실행 json-server --watch db.json --port 5000 // 3000번 제외하고 사용