👀인터셉터 가장 쉽게 알아보기 (✈공항 검색대?)

👉 인터셉터?인터셉터는 ✈️공항 검색대 의 역할을 한다우리는 해외로 갈 때,출국 시에 가방 검사를 통해서 위험한 물건을 체크하고입국 시에도 다시 한번 물건을 체크한다 🎈 요청(Request) 인터셉터출국 시, 공항 검색대에서는 먼저 승객의 정보를 확인한다.비행기 표를 가지고 있는가 ? 비자가 있는가 ? 금지된 물건은 없는가 ?위와 같은 기본 정보를 체크한다 이 과정은 리액트에서는서버에 요청을 보내기 전에 체크를 해주는 것과 동일과정이다 요청에 붙은 토큰을 확인하고 이를 통해 로그인 여부를 체크해준다(기본 사항인 비행기표와 비자가 있어??)서버에 보내기 전에 이상한 값이 있는지를 체크해준다(이상한 물건 없지??)🎈 응답(Response) 인터셉터입국 시, 공항 검색대에서는 위험 승객을 미리 거른다응답..

⚡ 나도 라이브러리를 만들 수 있을까? with React

준비단계설계먼저 어떤 라이브러리를 만들 것인가에 대한 설계를 한다. 나는 간단한 모달창과 버튼을 제공하는 라이브러리를 만들어 보려고 한다.기술선정다음으로는 환경을 세팅한다.환경에는 어떤 기술스택을 사용하고, JS를 통해 만들지, TS를 사용할 지 등을 결정 해야한다.최근에는 타입의 안정성을 위해 타입스크립트를 통한 라이브러리가 많아지고 있다고 해서,나도 타입스크립트와 리액트를 사용해서 만들어 보겠다.패키징다음으로 패키징을 설정한다패키징에는 주로 Rollup, Vite, Webpack을 활용하여 빌드 환경을 세팅한다Rollup라이브러리 번들링에 최적화됨사용하지 않는 코드를 제거하는 성능이 뛰어남번들의 크기를 최소화하고, 리액트 라이브러리를 만들 때 주로 사용한다Vite빠른 개발 서버를 제공Rollup을 내..

브라우저는 어떻게 화면을 만들어 낼까? (feat: 브라우저 렌더링)

👉 파싱브라우저가 코드를 읽고 이해하는 과정컴퓨터는 사람이 작성한 HTML, CSS, JS 코드를 이해하지 못한다이를 컴퓨터가 이해할 수 있는 언어로 번역하는 과정이 파싱이다번역과정을 통해 구조화된 데이터 - DOM, CSSOM으로 변환한다💡 브라우저 렌더링?"HTML, CSS, JS 코드를 브라우저가 읽어서 화면에 그리는 과정"즉, 코드를 화면에 그린다👉 요청과 응답브라우저는 필요한 리소스를 서버에 요청하고 응답을 받아 화면에 그려내는 역할을 한다서버에 요청을 하기위해 브라우저의 주소창을 제공한다주소창을 제공한다루트요청Scheme + Host 만으로 구성된 요청www.naver.com브라우저의 요청에 대해 서버는 정적파일 index.html 을 응답한다다른 정적파일 요청루트 요청 뒤에 정적 파일의..

인터랙티브 자바스크립트

목차 # 인터랙티브 자바스크립트 시작하기 asdHTML로 웹페이지의 구조를 만들고CSS 로 웹페이지를 꾸미고자바스크립트로 웹페이지 ‘동작’을 만들면 이제 웹페이지의 진짜 완성입니다. ‘동작’ 이라함은 어떤 버튼을 누르면 다른페이지로 이동하거나, 로그인창이 열리거나, 스크롤을 내리면 이미지가 나오는 등의 수많은 이벤트를 의미합니다. 기본세팅으로 js파일을 만들고 html파일과 연결 시켜서 사용합니다.실제 자바스크립트 동작 부분은 js파일에서만 작성하고요.  윗부분에 # 태그 하기-document.getElementById(‘id’) id값은 class와 다르게 고유한 한개만 부여합니다. 그래서 이 명령어를 쓰면 필요한 태그를 명확하게 할 수있습니다.(참고 : id가 지정되지 않은것은 null로 출력됩니다)..

Git - GitHub에 push와 pull 해보기

#GitHub-지금까지 작업한 모든 사항인 레퍼지토리를 외부-구글같은 곳에 저장하는 장소입니다.-깃허브 홈페이지 : https://github.com/#레파지토리 생성먼저 우측상단의 + 버튼을 눌러 새로운 레파지토리를 만듭니다.다음으로 레파지토리 이름과 설명, 공개여부를 설정하고 생성하면, 새로운 레파지토리가 만들어집니다.깃허브에서 만들어진 레파지토리는 리모트 레파지토리라고 부릅니다.반대로 컴퓨터의 레파지토리는 로컬 레파지토리라고 합니다.#로컬 레파지토리 올리기노랑박스 부분은 새로 만들기 후 올리기 / 초록박스는 이미 만든거 올리기 입니다.보시면 두 박스 모두 아래 두줄이 동일하죠 ?이 부분을 컴퓨터에서 그대로 터미널에 써주면 자동으로 깃허브에 레파지토리가 올라가게 됩니다. git remote add o..

Git - 기본 개념과 커밋의 이해

#Git 의 기본 개념 이런식으로 발표 준비를 해본적 있죠? 하지만 중간에 어떤 내용이 바뀌었고, 뭘 썻는지 보려면 모든 모든 파일을 열어봐야지만 알 수있습니다. 이를 방지하기 위해 ‘버전 관리’ 를 해야합니다. 버전관리는 파일을 시간의 순서로 정리하고 나중에 꺼내올 수 있는 시스템을 의미합니다. 관리를 하면 지난 과정을 전체 리뷰가 가능해지고, 잘못 된 부분이 발생하면 이전으로 돌아갈 수 있습니다. 새로운 시작이 가능한거죠. 컴퓨터 포맷과정과 유사하다 보면 됩니다.이런식으로 하나의 파일에 보기 쉽게 적용이 됩니다.  이는 동시협업 과정에서도 보기 좋게 해주는 역할을 하게 되죠. 또한 다른 컴퓨터로 작업물 보내기도 가능합니다. 작업물을 보낸다의 의미는 백업본을 만드는 것과 동일합니다. 백업본이 있기 때문..

유닉스 커맨드

##유닉스 커멘드#유닉스커멘트?  -마우스로 컴퓨터를 사용 → ‘graphical user interface’  [GUI]-검은화면에 키보드로 입력하는게 ‘커맨드’ = 명령어-커맨드로 컴퓨터를 사용 → ‘커맨드 라인’ 개발자들은 커맨드라인을 압도적으로 많이 활용합니다.이를 잘 활용하기 위해서는 기본 커맨드에 대해 잘 알고 있어야 겠죠? 기본 커맨드인 유닉스 부터 시작해보죠 유닉스는 1970-년대 초반에 개발된 운영체제 입니다. 소프트웨어를 개발하고 실행할 수있는 플랫폼 제공을 위해 만들어졌습니다. 당시 매우 인기가 있었고, 다양한 버전으로 발전도 했습니다. 이를 수정하기 위한 C언어도 인기를 끌었죠. 하지만 사용 및 변형에 있어서 라이센스료 지불이 있었기 때문에 GNU/LINUX , 리눅스라는 무료판이 ..

CSS 레이아웃 - Grid

##GRID 위 스타일을 만들어 봅시다 첫번째로는 , flexbox를 세개 만들고 넣어주면 되겠죠 두번째는,  width를 각각 33%로 설정하고 flex-wrap을 주면 되겠죠조금 번거로워 보이죠?플렉스는 한방향 이기 때문에 그렇습니다.그럼 양방향으로 배치를 하면 더 쉬울까요??이걸 가능하게 해주는 게 ‘그리드’ 입니다.그리드는 2차원 영역에서 왼쪽 -> 오른쪽, 위 -> 아래 방향으로 배치를 가능하게 해주죠여기서 칸을 나누는 선을 그리드 라인 각 칸 (요소배치공간) 을 그리드 셀 이라고 합니다그리드를 설정하면 각 셀에 요소 배치, 그리드 크기 조절, 사이 간격 등을 플렉스와 마찬가지로 설정할수 있습니다. 또한 모든 그리드를 채우지 않아도 가능하죠 #그리드 나누기 (기본 작성법) 가장 큰 틀인 컨테이너..

CSS 레이아웃 - FlexBox

# FLEXBOX 플렉스박스는 아주 쉽게 설명하면 ‘1차원’ 으로 배치하는 것 입니다.그래서 가로 혹은 세로 의 방향성을 먼저 정하고 요소를 배치하는 거죠가로로 배치하기로 정했다면, 가상의 화살표 위에 요소를 어디에 배치할지를 정합니다.화살표 처음 또는 끝에 위치하게 또는 양끝 중앙정렬넘치면 어떻게 배치 등등 다양한 방식의 배치 설정이 가능해 집니다.또한 요소의 크기를 유연하게 늘리거나 줄이거나 간격을 조정할 수도 있습니다.#배치방향  현재 컨테이너 박스를 크게 만들고 그 안에 div 3개를 각각 다른색으로 지정했습니다.  평소에 보던 것 처럼 블락이 적용되면서 세로로 배치가 되고 있네요. 이제 컨테이너에 display : flexbox를 줘보겠습니다.    세로로 배치가 되는 걸 볼수 있습니다.  fl..