공부 기록일지📚

면접 준비를 하면서 정말 생각보다 너무 많이 모른 채로 무작정 코드를 작성했구나 반성하게 된다. 면접 질문 중 리액트 선정 이유에 대해서 설명하였는데 리액트의 단방향 데이터 바인딩 덕분에 흐름을 파악하기 쉽다는 장점을 들었을 때 팀원 중에서 "리액트는 그러면 단방향 데이터 바인딩만 하고 양방향은 안되냐"는 질문을 하셨다. 내가 알기론 양방향 데이터 바인딩이 되지만 주로 단방향 데이터 바인딩인 것으로 알고 있어서 제대로 대답하지 못했다! 또한, 데이터 바인딩과 이벤트 전파에 대한 추가 질문을 던지셨는데 내가 생각했던 리액트의 단방향 데이터 바인딩은 state를 props로 내려주는 것만 생각하고 있었어서 이벤트와 직접적으로 연관이 있는 줄은 몰랐다. (이건 제대로 찾아봐야 할 거 같다 데이터 바인딩에서 "..

https://42place.innovationacademy.kr/archives/9784 AWS S3, CloudFront로 리액트(프론트) 배포하기 0. 들어가기 전에 0-1. 사전 준비 체크 리스트 리액트 프로젝트가 cra 나 vite 를 통해 리액트 프로젝트가 이미 만들어져있어야 합니다.aws 계정을 미리 만들어 둡니다.처음이라면 branch 를 따거나 fork 42place.innovationacademy.kr https://leehwarang.github.io/2022/09/11/frontend-deploy.html 배포 하면서 배우는 CSR(React)과 SSR(Next.js) - 이화랑 블로그 배포 하면서 배우는 CSR(React)과 SSR(Next.js) CSR(Client-Side Re..

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

REST (Representational State Transfer) API 먼저 REST란 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다. RESTFUL API란 REST의 원리를 따르는 API를 의미합니다. 하지만 REST기법을 사용했다 하여 모두가 RESTful 한 것은 아닙니다. REST API의 설계 규칙을 올바르게 지킨 API만이 RESTful하다 말할 수 있으며 모든 CRUD 기능을 POST로 처리 하는 API 또는 URI 규칙을 올바르게 지키지 않은 API는 REST API를 ..

목차 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는 비동기 작업을 처..