스스로TIL

html vs javaScript vs React vs JSX 작성방식 차이 html JavaScript React JSX Virtual DOM JSX 해당 div와 button이 동시에 업데이트 됨 React 해당 button만 업데이트됨 Component

사이트 구조홈화면 ABOUT MEPROJECTCONTACT

자바스크립트는 에러에 대해 너무 관대하다. 타입스크립트를 통해 이러한 에러를 잡을 수 있고 사전에 방지할 수 있다. javascript이 에러로 인식하지 않는 에러 타입을 중복해서 지정해줄 필요가 없음! 타입 재사용 가능!화살표 함수인 경우readonly가 쓰인 인수는

인자의 타입과 함수의 반환타입을 알려줌. 마우스를 올렸을 때 뜨는 타입에 대한 정보.함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 오버로딩이 발생함call signature을 작성할 때 들어올 인자의 확실한 타입을 모를 때 사용concret

객체지향 언어에서는 클래스 내에서 어떤 프로퍼티나 메서드에 접근할 수 있는 지 접근 제한자, 접근 제어기능을 제공하는 경우가 많음Javascript의 디폴트값은 public 상태이다. 누구나 접근할 수 있는 상태이며 기본적으로 모든 프로퍼티와 메서드는 public 상태

상속 시, property 추가 시 차이점type 키워드는 interface 키워드에 비해 좀 더 활용할 수 있는 게 많음. 더 flexible함interface는 오로지 객체의 모양을 타입스크립트에게 설명해주는 용도로만 사용됨. 객체지향 프로그래밍의 개념을 활용해서

상품리스트페이지에서 상세페이지로 이동 처리 시켜야 한다. 태그를 이용할수도 있지만 이렇게 하면 페이지를 매번 새로 불러오게 된다. 반면 SPA로 구현하기 위해서는 페이지를 매번 새로 불러오는 것이 아니라 변경되는 부분만 새로 그리도록 해야한다. 열심히 구글링을 한 결과

다른 출처의 리소스 요청을 제한하는 2가지 정책: SOP & CORSCORS 정책을 지키지 않고 보낸 리소스 요청에 대한 에러Cross-Origin Resource Sharing한 출처에서 실행 중인 웹이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에

프로젝트를 진행하다 보면 코딩보다도 github 사용법 때문에 시간을 허비하는 경우가 상당히 많다. 말 나온 김에 오늘 발생했던 github 관련 이슈들을 정리하고 가련다. files changed > hstack 브랜치 풀리퀘스트(#3) => hstack 브랜치 수

참고: 모던 자바스크립트: 선언하기 전 사용할 수 있는 varMDN Hoisting호이스팅: 변수가 끌어올려지는 현상.var로 선언한 모든 변수는 함수의 최상위로 끌어올려짐.변수의 선언과 변수에 값을 할당하는 단계를 분리한 후, 선언만 함수의 최상단으로 끌어올리는 것

github 업로드 시 제외하고 싶은 파일이 있는 경우 gitignore에 추가하면 된다. 다만 프로젝트 진행과정에서 이미 github에 올라가 있는 파일을 .gitignore에 새로 추가하고 싶은 경우가 생길 수 있다. 이때는 이미 github에서 해당 파일을 tra

출처: Next.js 공부하기 개발 단계에서부터 효율적인 운영을 위한 code transformation(compiling, bundling, minifying, code spliting) 최적화 툴을 제공함 JSX, Typescript와 같이 더 개발자-친화적인 언

FE개발을 위한 자바스크립트 오픈소스 라이브러리html/css/js로 나눠서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향함하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함. 컴포넌트로 분리하면

출처: Secrets of the JavaScript Ninja웹애플리케이션 생애주기 내 여러 단계HTML 코드가 웹페이지로 어떻게 바뀌는지JavaScript 코드 작동 순서이벤트 상호작용이벤트 루프Client-side 웹 어플리캐이션의 라이프사이클은 사용자가 브라우저

2개 이상의 각기 다른 css 문법을 동일한 요소에 선언할 경우 conflicting declarations(선언한 내용이 서로 충돌함)이 생길 수 있다. 위와같이 <h1> 태그를 각기 아래와 같이 선택하여 css를 선언했을 때 결과적으로 어떤 선언이 이기게 될까

상대단위로 em과 rem만 있는 것이 아니다. 브라우저 뷰포트의 상대적 크기(길이)를 정의하기 위한 뷰포트 단위도 존재한다. Viewport 란출처: MDN - Viewport 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사

초기 상태html 코드위 사례의 4번째 해결 방안에 만일 button요소를 더 추가하게 되면 바로 문제가 발생하게 된다. 해당 요소를 선택하여 margin-top을 다시 적용하면 된다고 생각하겠지만 이렇게 건당 처리하는 것보다 좀 더 일괄적으로 적용될 수 있는 솔루션이

Redux란 Javascript를 위한 것 state container predictable Redux를 이용해야하는 이유 predictable한 방법으로 어플리케이션의 전역상태를 관리하기 위해 Redux Toolkit Redux의 몇 가지 단점을 보완하기 위

TanStack Query 1. Motivation 기존의 많이 쓰이던 상태관리 라이브러리는 클라이언트 상태를 작업하기에는 좋으나 async나 서버 상태 작업에 최적화되어있지는 않다. 그 이유는 서버상태는 완전히 그 개념이 다르기 때문이다 > #### server

사용자 정의 줄 이름을 사용하여 열 구조를 정의하면, 그리드 아이템을 배치할 때 이 이름들을 참조하여 더 쉽게 위치를 지정할 수 있다.영역에 직관적으로 이름을 붙이므로써 시각화를 돕는다. 각각의 영역은 사각형 모양이다. 해당 아이템을 어느 그리드에 놓아야 할지, 작업해

aws 공식문서 바로가기 Amazon Route 53는 DNS(도메인 이름 시스템)를 서비스화 시킨 것. 도메인 이름을 IP주소로 변환하고, 웹 트래픽을 관리하는 데 사용된다. 1. 도메인 등록 Route 53은 도메인 이름을 등록하는 데 사용됨. 도메인을 등록하면

아마존 S3(Simple Storage Service)는 아마존 웹 서비스에서 제공하는 온라인 스토리지 웹 서비스이다. 아마존 S3는 웹 서비스 인터페이스를 통해 스토리지를 제공한다. ==> 트래픽 증가에 따른 시스템적인 문제를 덜어줌클라우드, 애플리케이션 등에 있는

개발자는 디자이너가 아티스트가 아니다. 하지만 CSS를 다루기 위해서 때때로 디자이너 또는 아티스트의 역할을 맡아야하는 경우가 종종 생긴다. 이번 단원에서는 기능적인 것 뿐만 아니라 시각적으로도 매력적인 페이지를 만들 수 있는 방법들을 알아보자. 이번 챕터에서는 다음

https://towardsdatascience.com/api-101-backdoor-to-backend-8da989e1551c https://vsupalov.com/how-backend-and-frontend-communicate/ https://www.youtu

해당 문제는 처음에 git clone을 받을 때 특정 브랜치(develop)을 clone 받아와서 생기는 문제였다. remote 업데이트 하기찾으려는 remote 브랜치가 있는지 확인하기 git config 리스트 보기 & remote.origin.fetch 가 어떤

모던자바스크립트 - 콜백함수 콜백 비동기(asynchronous) 동작은 원하는 때에 동작을 시작하도록 할 수 있으며 setTimeout이 대표적인 예시다. 실무에서 사용하는 비동기 동작은 매우 다양하다(ex. 스크립트나 모듈 로딩) src에 있는 스크립트를 읽어

클로저의 다양한 정의자신을 내포하는 함수의 컨텍스트에 접근할 수 있는 함수함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에서 정의하는 것함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수이미 생명 주기상 끝난 외부 함수의 변수를 참조

두 프로그램 간 메세지를 교환하기 위한 통신방법 중 하나클라이언트가 서버에 http 요청을 보내면 해당 서버는 클라이언트에게 데이터를 전달해준다. 통상적으로 http 통신은 클라이언트가 요청을 보내야만 서버가 응답을 해주는 방식이다. 서버가 먼저 요청을 보내는 경우는

프로토타입 자바스크립트는 프로토타입 기반의 언어다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 복제(참조)한다. 결국 '상속'과 비슷한 개념이라고 볼 수 있다. 1. 프로토타입 개념

react.dev의 생명주기(https://react.dev/learn/lifecycle-of-reactive-effects모든 리액트 컴포넌트는 동일한 생명주기 과정을 거친다.컴포넌트가 화면에 추가될 때 마운트된다새로운 props나 state가 있을 경우 컴

참고자료이진트리는 계층적 트리구조로 되어있다. 첫 번째 item이 root node가 되고 그 다음 추가적인 값들은 root node의 자식으로 들어간다. 대신 규칙이 있다. root node의 왼쪽 자식은 항상 부모보다 작은 값이어야한다. 또 오른쪽 자식은 부모보다

네트워크란, 무언가와 무언가가 그물망처럼 무언가에 의해 연결되어있는 상태 + (무언가를 운반하기위한)움직임점 - node선 - link 네트워크란, 무언가와 무언가가 그물망처럼 무언가에 의해 연결되어있는 상태 + (무언가를 운반하기위한)움직임⥥⥥컴퓨터와 컴퓨터가 그물망

14. 2계층의 역할과 개요 1계층의 역할 ⇨ 케이블이 연결되어 있는 기기에 대한 신호 전달 2계층부터 상위계층의 역할 ⇨ 데이터를 보내기 전에 (충돌이 나지 않기 위해) 어떤 일을 할지, 데이터가 도달한 후에 어떤 일을 할지 : 신호가 닿는 범위에서의 데이터 전송

스위치의 역할 => MAC 주소 필터링을 통해 수신처가 다른 프레임이 동시에 스위치에 도달해도 충돌을 일으키지 않게 교통정리를 해줌! BUT 수신처가 같은 프레임이 동시에 도달한다면???그 역할을 하는 것이 Buffering(버퍼링)!버퍼일시적으로 데이터를 기록해둘