공부 기록일지📚

브라우저란 동기적(Synchronous)으로 HTML, CSS , Javascript 를 해석하여 해석한 내용을 화면에 보여주는 소프트웨어이다. 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript를 처리한다. 이것은 script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있다는 것을 의미한다. 그래서 꼼수로 body 태그의 끝쪽에 script태그를 위치시켜라 하는 게 이 이유라고 생각합니다. HTML5부터는 script의 어트리뷰트로 defer/ async를 제공하고 있기 때문에 해당 문제를 해결할 수 있습니다. 렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다. 🤸‍♀️한 문단으로 간단하게 설명 사용자가 ..

Q. 프로토타입이 뭔가요? 그리고 프로토타입 상속은 어떻게 작동하나요? 프로토타입: 부모의 유전자가 자식에게 유전되는 것처럼부모 객체의 정보가 프로토타입이라는 유전자에 저장되고 자식 객체는 그 프로토타입을 참조한다.extends와 super를 써서 상속받을 수 있다. Q. Ajax에 대해 가능한 자세히 설명하세요. AJAX 탄생배경 Ajax는 HTTP의 TP(Transfer Protocol)의 대전제인 "사용자가 URL을 요청할 때에만 서버에서 해당 페이지를 꺼내준다"의 한계때문에 탄생했습니다. 즉 , 브라우저가 웹 서버에 무엇인가 요청하려면, 페이지를 이동해야만 하는데 그런 식으로 웹페이지를 이동하는 방식으로 만들어버리면 유저 사용성이 많이 떨어지는 한계가 있었습니다. 그렇기 때문에 구글은 HTTP규약..

🔥🔥 표시: 개인적으로 어렵게 느낀 질문 체크 Q. React는 Framework인가요, Library 인가요? 이 둘의 차이는 무엇인가요? React는 라이브러리입니다. 라이브러리와 프레임워크의 차이는 제어 권한을 누가 가지고 있으냐 입니다. 라이프러리는 사용자(개발자)가 권한을 가지고 있으며 프레임워크는 반대로 프레임워크가 권한을 가지고 있습니다. 리액트로 만든 어플리케이션의 제어를 사용자가 API를 호출함으로써 제어할 수 있기 때문에 React는 라이브러리라고 볼 수 있습니다. Q. React가 무엇인지 간단히 설명할 수 있나요? React는 SPA(Single Page Application)을 위한 사용자 인터페이스(UI)를 구축하는데 사용되는 오픈 소스 JavaScript 라이브러리입니다. Re..

🙋‍♂️메타태그란? - 웹 페이지의 제목이나 이미지, 간단한 설명을 검색엔진에 알려주는 역할을 합니다. Q. 왜 CRS에서 SEO가 어려울까요? 우선 CSR이 검색엔진최적화(SEO)가 어려운 이유는 미리 html을 만들어두는 것(SSR에서는 미리 만들어서 그걸 보내주죠)이 아니라 요청이 들어온 다음에 html을 생성하는 방식이고, CSR을 적용한 SPA들이 하나의 페이지(html파일)만 존재하기 때문에 크롤링할 데이터가 없어서 SEO가 어려운 것이죠. 리액트는 SPA라 html파일이 하나 뿐입니다. 그렇기 때문에 사실은 하나의 Meta tag밖에 가질 수 없습니다. (*create-react-app으로 만든 폴더에 public폴더의 index.html로 가보면 head태그 내부의 meta태그를 확인할 수..

🔥🔥 표시: 개인적으로 어렵게 느낀 질문 체크 🔥🔥Q.자바스크립트의 특징은 무엇인가요? (싱글 스레드), 싱글 스레드와 멀티 스레스의 장단점은 무엇인가요? 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다. 또한, 자바스크립트 엔진은 기본적으로 하나의 쓰레드에서 동작합니다. 하나의 쓰레드(= 싱글 stack)에서 동작한다는 의미는 동시에 하나의 작업만 할 수 있다는 것을 의미합니다. 싱글 스레드의 장점은 스레드 간의 자원 공유가 없기 때문에 그에 대한 동기화에 대해 신경쓰지 않아도 되는 점과 스레드 간의 context switching이 일어나지 않으므로 오버헤드를 방지할 수 있다는 점입니다. 단점은 여러개의 cpu를 활용할 수 없습니다. 멀티스레드의 장점은 프로세스의 자원과 상태..

깃허브 → 내 PC 로 브랜치 내용 덮어쓰기 [문제상황] 로컬과 원격의 main 레포 작업 내용이 뒤엉켜서 pull로 땡겨온다 해도 로컬의 main에서 commit을 해놨기 때문에 변경사항이 존재함 즉 땡겨와도 보내도 컨플릭트가 불가피한 상황 -> 제가 원했던 건 가장 최신화된 main브랜치의 내용을 로컬 main으로 가져오기만 하면 되는 것이라서 로컬 main의 이전 데이터가 날라가도 상관이 없었습니다. 즉, 깃허브에 있는 원격 main 브랜치의 내용을 가져와서 로컬 저장소의 main 브랜치에 덮어쓰고 싶은 상황 👉방법 (vscode에서 bash사용, 운영체제: window) *평소에는 sourcetree를 사용하나 git 명령어로 하는 것이 더 편리하여 아래와 같은 방법으로 해결하였습니다. *여기서 ..

React.memo는 함수형 컴포넌트를 최적화할 수 있다. (클래스형에는 적용되지 않음) 사용방법은 아래와 같이 해당 컴포넌트를 react.memo로 wrap해주면 된다. import React from 'react'; import MyParagraph from "./MyParagraph'; const DemoOutput = (props) => { console.log('demooutput Running'); return {props.show ? "this is new!" : ""} }; export default React.memo(DemoOutput); //리액트 메모를 원하는 해당 컴포넌트에 wrap한다. 😎memo의 역할은 무엇인가요? React.memo는 인자로 들어간 컴포넌트에 어떤 props..

전반적으로 필요한 상태가 아니라 해당 컴포넌트에만 필요한 상태관리는 리덕스가 아니라 useState를 사용하는 것이 맞다. 기본 리덕스 용어 state (상태) - 앱을 구동하는 소스, 특정 시점의 앱 상태를 나타냄 view - 현재 상태를 기반으로 화면에 보이는 UI, 해당 상태를 기반으로 렌더링됨-> UI는 새 상태를 기반으로 다시 렌더링된다. action - 사용자 입력을 기반으로 앱에서 발생하는 이벤트 및 상태에서 업데이트를 발생시킨다. -> 동일한 상태를 공유하고 사용해야 하는 여러 구성 요소가 있는 경우, 특히 해당 구성 요소가 app의 다른 부분에 있는 경우 단순성이 무너질 수 있다. JS의 객체와 배열은 기본적으로 모두 변경 가능하다.(mutable) 하지만 리덕스의 리듀서(reducer)..