공부 기록일지📚

⭐리액트의 클래스형 & 함수형 컴포넌트 ? 리액트 컴포넌트는 클래스형 컴포넌트 또는 함수형 컴포넌트로 작성될 수 있습니다. 둘의 가장 큰 차이점은 상태값과 LifeCycle을 가질 수 있느냐 없느냐 입니다. 클래스형 컴포넌트는 상태값을 가질 수 있고, 리액트 컴포넌트의 생명 주기 함수를 작성할 수 있습니다. 함수형 컴포넌트는 이 모든 일을 할 수 없습니다. 하지만 리액트 버전 16.8부터 훅(Hook)이 등장하면서 함수형 컴포넌트에서도 상태값과 생명 주기 함수 코드를 작성 할 수 있게 되었습니다. LifeCycle Method는 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다. *컴포넌트 라이프 ..

목차 useRef Hook ref가 하는 일, 예시 제어 컴포넌트와 비제어 컴포넌트 useEffect Hook useEffect 의 종속성(의존성 배열) 예외 사항 side Effect 가 무엇인가? clean-up 함수를 통해 디바운싱(debouncing)구현하기 [전제조건] 리액트 hook이기 때문에 당연히 함수형 컴포넌트(클래스형) 안에서만 사용할 수 있습니다. ref는 참조(reference)를 뜻합니다. 리액트에서는 ref 라고 부릅니다. useRef는 어떤 값이는 저장할 수 있는 자바스크립트 객체이다. 리액트가 렌더링할 때마다 동일한 객체를 넘기기 때문에 값이 변경되어도 리렌더링이 발생하지 않는다. ref 가 하는 일 ? 다른 DOM 요소에 직접 접근해서 그것들로 작업할 수 있게 해준다. ( ..

Basic Rules 최대한 타입은 좁은 범위로 작성 타입 추론을 적극 활용할 것 타입스크립트에서 타입을 빼면 올바른 자바스크립트 코드여야 한다. 타입 명시 자리를 잘 알고 있어야 한다. 원시타입 명시할 때, 대문자가 아니라 소문자로 써야한다. string과 String은 다르다. 💛콜론 뒤에 타입, 타입 별칭(에일리어스), body가 없는 function, 제네릭, 인터페이스, as, enum, declare, readonly 등은 TS코드에서 JS코드로 변환 시 사라진다. Implicit Types vs Explicit Types (암시 타입 vs 명시 타입) 암시 타입(Implicit Types)은 타입스크립트에게 해당 데이터의 타입을 추론할 수 있도록 타입을 명시하지 않는 방법을 말한다. (TS가..

들어가기 전에... 🤸‍♀️자바스크립트의 특성 -C나 Java와 같은 C-family 언어(클래스 기반 객체 지향 언어)와는 구별되는 특성 Prototype-based Object Oriented Language Scope와 this 동적 타입(dynamic typed) 언어 혹은 느슨한 타입(loosey typed)언어 동적인 언어 JS 예시 [1,2,3,4] + false // '1,2,3,4false' //출처: 노마드코더 결과가 미쳤다. 우선 두 타입이 전혀 다른 형태인데 연산은 왜 된것이며 연산이 됐다쳐도 배열은 어디가고 false는 string형태로 배열의 마지막 요소에 붙어있다. (차라리 에러를 던져주세요..) 런타임에러가 왜 최악의 에러일까? 런타임 에러란 콘솔 안에서 일어나는 에러이다. ..

[JS 기본 지식] 자바스크립트는 함수를 변수처럼 이용할 수 있다. 함수 선언문에도 해당함 b는 a의 콜백함수가 되겠네요. 콜백함수(callback)를 대충 지금 당장에 호출되는 것이 아니라 나중에 호출될 인자로 전달된 함수..정도로 이해하면 될 거 같습니다. function b() { console.log("b called"); } function a(another){ console.log("a started"); another(); // "b called" console.log("a ended"); } 자바스크립트에서 비동기 처리를 다룰 수 있는 방법은 여러가지가 있습니다. 주로 callback, Promise, async/await 를 활용합니다. 👾 Promise Promise는 비동기 작업을 처..

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태그를 확인할 수..