본문 바로가기

👇🏻보리 노트 카테고리👇🏻62

타입스크립트 왜 씀? 자바스크립트에 익숙해질 쯤... 갑자기 타입스크립트가 내 인생에 들어왔다..타스 강의 들으면서 느낀점) 엥 이거 왜 쓰지.. 너무 불편하다 자스가 더 편한데 왜 타스 쓰지? 라는 생각밖에 안 들었다. 도대체 왜!!!! 개발자들이 타입스크립트는 쓰는가...에 의문을 품고 끄적여본다.. 👊🏻❓타입스크립트가 뭔데타입스크립트는 마이크로소프트에서 개발한 자바스크립트의 상위 확장자(Superset) 프로그래밍 언어타입스크립트는 자바스크립트에 정적 타입 시스템을 추가하여 개발자의 생산성과 코드 품질을 높이는 것을 목표로 한다.실행 전 검사를 통해 타입 안정성 확보한다.자동으로 변수의 타입을 추론한다.👊🏻자바스크립트 VS 타입스크립트1. 타입 시스템자바스크립트: 동적 타입 언어로, 변수의 타입을 명시적으로 정의.. 2024. 5. 23.
웹페이지가 렌더링되는 과정 ✨웹 페이지 렌더링 과정HTML 파싱 및 DOM 트리 생성:브라우저는 수신한 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다.(DOM 트리는 HTML 문서의 구조를 나타내는 트리 구조)CSS 파싱 및 CSSOM 트리 생성:브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다.(CSSOM 트리는 CSS 규칙과 속성을 나타내는 트리 구조)렌더 트리 생성: 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다.(렌더 트리는 실제로 화면에 표시될 요소들의 구조)레이아웃 계산:브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산한다.페인팅:브라우저는 레이아웃 정보를 바탕으로 실제 화면에 요소들을 그린다. 2024. 5. 23.
브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어날까? DNS 조회:사용자가 브라우저에 www.google.com을 입력하면, 브라우저는 해당 도메인의 IP 주소를 알아내기 위해 DNS(Domain Name System)에 쿼리를 보낸다.DNS 서버 검색:브라우저는 운영체제에 등록된 DNS 서버에 DNS 쿼리를 전송한다.(DNS 서버는 도메인에 해당하는 IP 주소를 반환)IP 주소 획득:DNS 서버가 www.google.comIP 주소를 찾으면 해당 IP 주소를 브라우저에게 전달한다.서버 연결:브라우저는 획득한 IP 주소를 사용하여 웹 서버에 TCP/IP 연결을 시도한다.HTTP 요청:브라우저는 웹 서버에게 HTTP GET 요청을 보낸다.(이 요청에는 브라우저의 사용자 에이전트 정보와 다양한 헤더가 포함될 수 있음)서버 응답:웹 서버는 브라우저의 요청에 대한.. 2024. 5. 23.
비동기 처리 방법 3가지 !비교! ❓비동기 처리(asynchronous processing)프로그램이 작업을 시작한 후에 완료되기를 기다리지 않고 다른 작업을 계속 수행할 수 있게 해주는 프로그래밍 기법✨비동기 처리 방법 3가지1. 콜백가장 기본적인 비동기 처리방식 비동기 작업을 완료한 후 호출되는 함수 여러 개의 중첩된 콜백을 사용하면 가독성이 떨어짐setTimeout(), 이벤트 처리 함수 등…function fetchData(callback) { setTimeout(() => { callback("data received"); }, 1000);}fetchData((data) => { console.log(data); // "data received"});2. Promise콜백 지옥과 같은 문제를 해결하기.. 2024. 5. 20.
i-Konnect 회고록...🫂 https://github.com/BestSprinters/i-Konnect GitHub - BestSprinters/i-Konnect: i-Konnecti-Konnect. Contribute to BestSprinters/i-Konnect development by creating an account on GitHub.github.comhttps://i-konnect.netlify.app/ i-Konnect당신의 아이돌을 커넥팅 해보세요: 추억의 아이돌 조공 후원 서비스i-konnect.netlify.app 개발기간 | 24.04.27 ~ 24.05.08 약 2주동안 진행되었던 프로젝트가 끝이 났다. 기초 프로젝트였음에도 꽤나 난이도 있는 프로젝트였다. 발표 날 전까지는 못 느꼈었는데 우리 팀 정말 팀.. 2024. 5. 18.
이벤트 루프와 태스크 큐 ❓자바스크립트를 멀티 스레드처럼 사용하는 방법이 뭔가요? 이벤트 루프에 대해서 설명해주세요.위의 면접 질문을 받고 새하얗게 기억잃은 나... 뭣도 모르고 자바스크립트 면접 내용 달달 외워서 갔던 나...를 반성하며 이벤트 루프를 조지겠다는 생각으로 쥰내 파봤다.✨이벤트 루프와 브라우저 환경자바스크립는 싱글 스레드로 동작한다. 싱글 스레드: 한 번에 하나의 태스크만 처리한다는 뜻 비동기 로직은 이벤트 루프를 통해 처리된다.힙객체가 저장되는 메모리 공간콜 스택함수 호출 시 실행 컨텍스트가 생성된다.함수를 호출하면 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행하지 .. 2024. 5. 18.
React 기초 세션 특강을 듣고... 이정환 강사님 React 기초 세션 특강주제 : React 기초일시 : 4월 8일(월) 오후 7시 ~ 8시30분(1.5h)리액트는 왜 만들어지게 되었을까?리액트의 설계 의도는 무엇일까?web의 눈부신 발전과 리액트의 탄생기술이 어떤 시대적인 배경에서 어떤 문제를 해결하기 위해 탄생했는지 알아야 한다.90_00: 읽기 전용 기반의 웹 서비스가 대부분오늘날: 사용자와 실시간으로 상호작용하는 서비스들이 대세, read-write 기반의 웹 서비스-> 현대 웹서비스 개발에서 화면 업데이트(인터렉션) 구현의 중요성이 매우 높아짐JQuery바닐라 js 기반으로 DOM을 직접 수정하는 방식으로 동작함.크로스 브라우징 이슈를 해결하고자 만들어짐.쉽고 빠르게 다양한 업데이트를 구현하기에는 무리가 있었음.리액트화면 업데이.. 2024. 5. 18.
당근마켓 현직자 특강을 듣고... 주제 : 개발자의 메타인지강사 : 김준비 당근마켓🥕 안드로이드 엔지니어(전 네이버 엔지니어)성장! 그거 어떻게 하는 건가요?지피지기 백전불태 부지피부지기 매전필태메타인지를 통한 성장 전략 길라잡이좋은 개발자는 어떤 개발자일까?❓일 잘 하는? 개발 잘 하는?난 개발도 중요하다 생각하지만 자신의 일을 책임감 가지고 일하는 개발자가 더 중요하다고 생각했음. 일 잘 하는 것 안에 개발이 속해있다고 생각함.개발은 못하는데 일은 잘 함? -> 아님❓빠르게 개발? 안정적인 개발빠르지만 안정적이게 개발하는 것이 중요하지만, 난 좀 빠르게 개발을 하고 그 뒤에 안정적인 부분을 보완하는 식으로 개발하는 것 같다. 회사마다 케바케가 있는 것 같음 -> 스타트업은 빠르게를 선호하는 편, 유저가 많고 영향력이 큰 곳은 안정.. 2024. 5. 18.
반응형

티스토리툴바