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

카테고리 없음 2025. 3. 14. 16:13

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

카테고리 없음 2025. 1. 22. 22:45

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

카테고리 없음 2025. 1. 20. 20:19

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

카테고리 없음 2024. 7. 16. 18:11

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

카테고리 없음 2024. 7. 14. 13:24

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

카테고리 없음 2024. 7. 14. 13:23

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

카테고리 없음 2024. 7. 13. 01:46