분류 전체보기 (14) 썸네일형 리스트형 [Typescript] 타입스크립트의 자료형(type) "타입"스크립트인데 타입은 알아야지! 참고로 ' : '을 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 '타입 표기'라고 한다.(Type annotation) 기본 타입 ◻ String : 변수의 타입이 문자열인 경우 let str: string = 'hello'; ◻ Number : 변수의 타입이 숫자인 경우 let num: number = 2023; ◻ Boolean : 변수의 타입이 참/거짓인 경우(true/false | 1/0) let isOkay: boolean = false; ◻ Object : 원시 타입(string, number, boolean, bigint, symbol, null, undefined)이 아닌 나머지의 경우 let obj: object = { name: 'NAME',.. [Typescript] 타입스크립트, 왜 쓰는가? 자, 이제부터 타입스크립트에 대해 공부하기로 해보자. 타입스크립트란? 타입스크립트는 자바스크립트의 슈퍼셋( superset)인 오픈소스 프로그래밍 언어이다. 슈퍼셋이라고 하면 어렵게 느껴질텐데 자바스크립트의 장점 + 단점을 보완하여 만든 언어라고 이해하면 된다. ( Typescript == Javascript + type ) 참고로 타입스크립트 파일은 컴파일 단계 혹은 바벨에서 자바스크립트 소스코드로 변환 후 출력 된다. Javascript Typescript 동적타입 언어 정적타입 언어 인터프리터 언어 컴파일 언어 독립적으로 사용가능 자바스크립트에 의존적임 (자바스크립트로 컴파일된 후 실행) 좀 더 유연함 (타입에 제한을 받지 않으므로) 더 나은 구조와 간결함, 일관성, 재사용성 .js 확장자 .ts .. [Javascript] Debounce와 Throttle 차이점 💡 들어가기 전에 Debounce, Throttle에 쓰이는 함수에 대해 알아보자. ◾ setTimeout(() => { ... }, time) : 함수의 실행을 예약하는 타이머 기능. time은 밀리초 단위로 기입해야한다. (1000 = 1초) ◾ clearTimeout(target) : 타이머의 실행을 제거하는 기능. setTimeout()을 변수에 담고 target에는 해당 변수명이 들어간다. Debounce와 Throttle 모두 자바스크립의 이벤트를 최적화 하는 방법이다. 예를 들어 코드 내에 스크롤 이벤트에는 api를 요청하는 함수가 연결되어 있고, 사용자가 마우스 스크롤을 했다고 생각해보자. 사용자는 체감할 수 없겠지만 이 행동으로 인해 수많은 스크롤 이벤트가 발생된다. 즉 아래 gif 중 .. [Project] MOVIE찾냥?! 후기 🚀 프로젝트에 대하여 오픈 movie API를 활용한 영화 트레일러 사이트를 제작. [MOVIE찾냥?!]라는 웹사이트명과 컨셉은 팀원 모두 고양이를 좋아해서 쉽게 정해졌다. ◻ 오픈 API 사이트 Details Get the top level details of a movie by ID. developer.themoviedb.org 2023년 3월 20일 ~ 2023년 3월 26일 ( 총 일주일 ) GitHub - Frontend-TEAM1/React_Movie_Trailer_project: 리액트 _ 무비 트레일러 프로젝트 입니다. 리액트 _ 무비 트레일러 프로젝트 입니다. Contribute to Frontend-TEAM1/React_.. [네트워크] 주소창에 'www.google.com'을 입력하면 어떤 일이 일어날까? 인터넷 창을 열고 주소창에 URL을 입력하면 해당 주소를 가진 화면을 보는게 당연한 일인 요즘 시대를 살아가면서, "나는 개발자다"라는 마음가짐과 함께 어떻게 보여주는지? 궁금증에 대한 탐구를 해보자. 웹 브라우저 주소창은 현재의 주소를 보여주는 영역이기도 하고, 사용자의 입력을 받는 영역이기도 하다. 만약 사용자가 입력한 텍스트가 검색어라면 브라우저는 검색 엔진에 텍스트를 넘겨 검색 결과가 뿌려진다. 검색어가 아닌 URL 주소를 입력한다면 브라우저는 네트워크 호출을 수행하게 되는데, 지금부터 입력~화면 랜더링까지 네트워크 호출 과정을 알아보자. 1️⃣ Redirect URL 주소가 입력이 되면 Redirect의 유무를 가장 먼저 확인한다. 만약 있다면 리다이렉트가 진행되고, 없다면 그대로 해당 요청에 .. [운영체제] 프로세스와 스레드 (Process & Thread) Process란? 프로세스란 컴퓨터에서 실행 중인 프로그램이며, 하드 디스크에 있는 프로그램이 메모리에 로드되면 프로세스가 된다. 프로세스는 CPU의 스케줄링 대상이 되는 작업과 거의 같은 의미로 쓰인다.(정확하게는 스레드 단위로 스케줄링 된다) 일반적으로 하드 디스크(HDD/SDD)에 있는 프로그램(.exe)을 실행하면 실행을 위해 메모리 할당이 이루어지고, 프로그램이 메모리에 로드되면 프로세스가 되는 인스턴스화가 일어나고, 이후 운영체제의 CPU 스케줄러에 따라 실행한다. 인스턴스화란 말이 어렵다면 간단하게 실행시키는 것이라고 이해하면 된다. 이해를 돕기 위해 예를 들면 게임(프로그램)을 다운로드하고 게임 실행파일을 더블클릭하여 실행시키면 프로세스가 되는 것이다. 또한 하나의 프로그램이 여러 프로세스.. [React] react-query 파헤치기 웹 페이지를 보면 큼직한 레이아웃을 제외하고는 전부 백엔드로부터 받아오는 데이터를 화면에 표현하는 것일 거다.(물론 그렇지 않은 웹페이지들도 존재한다.) 그럼 데이터는 항상 백엔드에게 다시 요청해야할까? 정답은 NO ! 상태 관리 라이브러리(Redux, Recoil, Mobx 등)로 중복되는 데이터 요청에 한해서는 효율적으로 관리가 가능하다(전역 상태 관리로 props drilling도 피할 수 있다). 모두 훌륭한 라이브러리지만 백엔드 데이터들을 관리하기에는 적합하지 않은 점들이 있다. 그렇다면 상태관 리를 효율적이게 하면서 동시에 백엔드 데이터를 관리하기에도 용이한 라이브러리는 없을까? React-query란? React-query는 React Application에서 데이터 관리와 상태 관리 두마리.. [React] state 최적화를 해보자 (랜더링 최적화, memoization) 들어가기에 앞서, React를 사용하다보면 state를 알게되고 useState를 사용하여 쉽게 화면을 동작할 수 있다는 점에 신났을 거다. 그러다보면 state가 곧 변수가 되고, state 남발로 필요 이상의 비용이 발생하고 있었다는 점을 뒤늦게 깨닫는다. 이 게시글이 눈에 들어오는 지금! 이 맘때가 딱 깨닫고 신경써서 개발하려는 시기일 것이다 :) state나 hooks에 대한 개념은 [React] 리액트 State와 Hooks란 무엇인가?를 읽고 오면 도움이 될 것 같다. 컴포넌트가 리랜더링 되는 조건 >> 전달받은 props가 변경될 때 >> 부모 컴포넌트가 리랜더링될 때 >> 자신의 state가 변경될 때 리랜더링을 하면 컴포넌트를 reflow + repaint함에 따른 브라우저 성능 저하가 .. 이전 1 2 다음
