엉망진창 코딩 공부

새롭게 제작한 웹 페이지를 배포하게 되었다. 기존에 배포했던 경험은 Github Page를 이용해서 호스팅을 진행한 뒤, 커스텀 도메인을 연결하는 방식을 사용했다. 하지만, 실무에서 이용되는 웹 페이지인 만큼 현재 가장 많이 사용되고 있는 웹 페이지 배포방법을 사용하자! 라는 생각으로 React로 만든 웹 페이지를 배포하는 다양한 방법에 대해서 정리해 보기로 했다. 1. Netlify Netlify는 정적 웹 사이트나 앱을 무료로 호스팅할 수 있게 해주는 클라우드 플랫폼이다. 정적 파일을 저장하고 CDN(Content Delivery Network)를 통해 사용자에게 빠르게 제공된다. 또한, 서버리스 컴퓨팅 및 엣지 컴퓨팅의 서비스와 기능을 제공하여 프론트엔드의 코드와 함께, 버전제어, 구축 및 배포되는..

이후 15주차에서 17주 까지는 회고프로젝트를 진행하였습니다. 회고 프로젝트 링크 : https://github.com/KimKyungYun/final-project

React Native란? React Native는 Facebook에서 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크다. 기존 android studio와 다르게 JavaScript와 React를 이용하여 ios와 Android 플랫폼에 모바일 앱을 만들 수 있도록 도와준다. 실제 네이티브 UI컴포넌트(네이티브 코드를 사용한 UI)를 사용하여 앱을 개발하기 때문에 성능과 UX를 향상시킬 수 있다. 앱의 코드를 공통으로 사용하여 ios와 Android 모두에서 동작할 수 있도록 한다. 이로 인해 동일한 코드베이스를 유지하면서 여러 플랫폼에 앱을 배포할 수 있다는 장점이 있다. 장점 네이티브 컴포넌트를 사용하기 때문에 성능이 좋다. React 컴포넌트를 기반으로 개발하기 때문에 재사용성이 높다. 앱을..

react-query는 서버의 값을 가져오거나 캐싱, 업데이트, 에러를 핸들링하는것에 도움을 주는 라이브러리다. React Query 기능 서버, 클라이언트 데이터를 분리 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. 동일 데이터 여러 요청이 들어오면 한번만 요청 (중복 허용 시간 조절 가능) 비동기 과정을 선언적으로 관리 useEffect를 사용한 api선언에 대한 문제점을 해결할 수 있다. 무한 스크롤 초기 설정 react-query를 사용하기 위해서는 초기 세팅이 필요하다. index.js파일 내부에 QueryClient를 이용해 초기 옵션들을 설정해주고, QueryClientProvider로 감싸주어야 한다. 세부적인 옵션의 내용들은 공식문서를 참고하는게 좋다! ..

REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐이고 REST를 기반으로 API를 구현한것이 REST API이다. REST는 자원, 행위 ,표현의 3가지 요소로 구성된다. 자체 표현 구조로 구성되어 REST API만으로 HTTP요청의 내용을 이해할 수 있다. 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. REST API 설계원칙 URI는 리소스를 표현하는데 집중하고 행위에 대한 정의는 HTTP요청 메서드를 통해 하는것이 중심 규칙이다. 1.URI는 리소스를 표현해야한다. 리소스를 식별할 수 있는 이름은 동사보다 명사를 사용하고 이름에 get같은 행위에 대한 표현이 들어가면 안된다. #bad GET/getTodos..

호출 스케줄링 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후 호출되도록 함수 호출을 예약하기 위해 타이머 함수를 사용하는것을 말한다. setTimeout, setInterval을 사용하여 타이머를 생성하고, clearTimeout, clearInterval을 이용하여 타이머를 제거한다. 타이머 함수는 만료되면 콜백함수를 호출한다. setTimeout은 한번 호출되고, setInterval은 타이머가 만료될 때 마 다 반복 호출된다. JS엔진은 싱글스레드 동작이기 때문에 비동기적으로 처리된다 setTimeout 두 번째 입력받은 시간(1/1000초)로 단 한 번 동작하는 타이머를 생성한다. setTImeout(func | code[,delay, param1...]); // 1초(1000ms) 후..

제가 브라우저와 DOM,HTML에 대해 공부했던 내용입니다. 참고하실분은 참고해주세요~! 브라우저의 렌더링 과정 1. HTML,CSS,JS, 이미지,폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합아여 렌터 트리를 형성한다. 3. 브라우저의 JS 엔진은 서버로부터 응답된 JS를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환,실행한다. JS는 DOM API를 이용해 DOM,CSSOM을 변경할 수 있다. 변경된 후 다시 렌더 트리로 결합된다. 4. 렌더 트리를 기반으로 HTML요소의 레이아웃을 계산하고 브라우저 화면에 HTML요..

Set 객체는 중복되지 않는 유일한 값들의 집합이다. 배열과 유사하지만 값을 중복하여 사용할 수 없고 순서에 의미가 없으며 인덱스로 접근이 불가능하다. set을 사용하면 교집합, 합집합등 수학적 특성을 이용할 수 있다. const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} const set2 = new Set('hello'); console.log(set2); // Set(4) {"h", "e", "l", "o"} 요소의 개수 확인은 Set.prototype.size프로퍼티를 사용하여 얻을 수 있다. const set = new Set([1, 2, 3]); console.log(Object.getOwnPropertyDescr..

1. ES6이전의 모든 함수는 사용 목적에 따라 명확한 구분이 없었다. 호출 방식에 제약이 없고 프로토타입 객체를 생성했다. 이러한 문제를 해결하기 위해 ES6에서는 함수를 사용 목적에 따라 세 가지 종류로 구분했다. 일반 함수는 함수 선언문이나 표현식으로 정의한 함수이며 ES6이전의 함수와 차이가 없다. 2.메서드는 ES6이전에는 정확한 정의가 없었지만, 이후 메서드 축약 표현으로 정의된 함수를 나타내는 것으로 인스턴스를 생성할 수 없다. 따라서 메서드는 생성자함수로 호출할 수 없다. const obj = { x: 1, // foo는 메서드이다. foo() { return this.x; }, // bar에 바인딩된 함수는 메서드가 아닌 일반 함수이다. bar: function() { return thi..