본문 바로가기

개발공부_Blog154

TypeScript는 구조적 타입 시스템을 따른다. 타입 시스템? 언어에서 사용할 수 있는 아주 여러가지 값들을 어떤 기준으로 묶어서 타입으로 정할지 결정하고 또 코드의 타입을 언제 검사할지 그리고 어떻게 검사할지 등의 우리가 프로그래밍 언어를 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계다. 동적 타입 시스템 ( 코드를 실행하고 나서 변수의 타입을 유동적으로 결정 ) 정적 타입 시스템 ( 코드 실행 전 변수의 타입을 고정적으로 결정 ) 점진적 타입 시스템 JavaScript 타입 시스템의 특징 (1) JavaScript는 동적 타입 시스템을 따른다. 기본적으로 변수나 함수의 타입들을 미리 정하지 않는다. 어떤 특정 타입과 연결되지 않으며, 런타임 중에 값이 수정될 수 있다. 이때 모든 타입의 값으로 할당과 재할당이 가능하며, 작업 중 타입에.. 2023. 12. 22.
TypeScript의 타입 체크는 JavaScript 런타임에 영향을 주지 않는다 Effective- TypeScript - Intro Effective TypeScript 책으로 스터디를 했다. 책을 읽고 정리한 내용은 아래에 따로 적어두었다. 블로그 시리즈는 읽으면서 중요하다고 크게 깨달은 부분, 엄청 와닿은 몇 개의 주제를 뽑았다. [ ✨Effective-TypeScript Book-study 요약✨ ] [BOOK-STUDY] Effective TypeScript | Built with Notion Effective TypeScript fun-blog.notion.site TypeScript로 프로젝트를 예전에 한 번 해봤는데 그 때는 그저 어찌저찌 타입을 끼워맞추는 식으로 에러와 함께 프로젝트를 진행했었다. ( 정말 괴로웠었다ㅠㅠ ) 이후 타입스크립트는 조금 멀리, 하게 되었었.. 2023. 12. 22.
HTTP란 😎HTTP란 HTTP는 웹 브라우저가 웹 서버로부터 리소스를 요청/응답 받기 위한 프로토콜이다. 본문 : https://www.notion.so/fun-blog/HTTP-649695ea89b545cd8dc71b9319cdd6aa 웹브라우저와 서버의 데이터 전송과정 웹은 여러 계층의 스택 구조로 이루어져 있다. 때문에 웹 브라우저의 HTTP 요청이 웹 서버에 도착하기까지 많은 컴퓨터와 머신 사이를 지나간다. 웹 브라우저는 사용자의 요청을 HTTP메세지로 작성한다. 이후 TCP/IP 프로토콜을 사용하여 웹 서버까지 HTTP메세지를 전달하고, 웹 서버에서는 요청을 받아 다시 HTTP응답 메세지를 보낸다. HTTP응답 메세지는 TCP/IP 프로토콜을 통해 웹 브라우저에 전달되고, 브라우저는 HTTP메세지를 해석.. 2023. 11. 28.
web browser의 구조와 rendering engine web과 web browser? web은 인터넷에 연결된 정보 공간이다. web browser는 web에 있는 HTML문서 등의 데이터들을 사용자가 볼 수 있고 상호작용 할 수 있도록 도와주는 소프트웨어이다. Google Chrome, Mozilla Firefox, Microsoft Edge, Safari 등이 있다. 사용자의 요청을 받아 web server와 통신할 때 URL과 HTTP를 사용하며, 요청의 결과인 HTML을 받아 사용자에게 보여준다 ⇒ 웹 페이지(사이트)를 보여주거나 웹 서버와 통신하는 역할을 한다. Web browser 구조 Rendering engine 사용자가 화면을 보기까지의 간단한 과정을 설명해보면 web browser가 사용자의 요청을 입력받아 네트워킹으로 HTTP요청을 보낸.. 2023. 11. 26.
web은 프론트엔드 개발자에게는 기본이다. 부트캠프로 개발을 처음 접했을 때, 그저 react와 새로운 것을 배우는 것에만 집중했던 것 같다. 하지만 그보다 더 중요한 기본이 있다는 걸 뒤늦게 깨닫게 된다. 프론트엔드 개발자는 web개발을 한다. 나는 생각했다. '그럼 내가 개발하는 web은 뭔데?' web은 뭘까?... 답이라고 할 만한 답변이 나오지 않았다. 공부는 어떤 목적이 있을때 가장 빛을 바라는 것 같다. 무작정 '개발자 될거야' 라며 공부하는 게 아니라, 내가 무엇을 개발할 것인지에 대해 정확히 알고 그 목적에 맞는 공부를 해야 하지 않을까 싶다. Web은 무엇? web은 world wide web과 같은 의미로 인터넷에 연결된 정보공간을 뜻한다. 컴퓨터 과학자인 Tim-berners-Lee가 만들었다. web은 HTTP를 사용해 w.. 2023. 11. 26.
next/image의 config설정 Image컴포넌트에서 S3안 url이안된다? AWS-S3에 이미지를 업로드 해서 프로젝트에 사용하려고 했다. 업로드를 완성하고 url을 받아와 image컴포넌트의 프로퍼티인 src에 주소를 넣었더니, 아래와 같은 에러가 발생하고 이미지가 보이지 않았다. 문제의 원인은 이러했다. 호스트 주소가 next.config.js에 구성돼있지 않다며 이미지를 렌더링 할 수 없다는 에러였다. 즉, 정의되는 않는 URL의 호스트 이름을 사용해 next/image에 전달했다는 것이다. 이에 대한 해결방법은 config파일에 URL을 추가해주면 해결된다. Error: Invalid src prop () on `next/image`, hostname "s3.ap-northeast-2.amazonaws.com" is not c.. 2023. 9. 12.
API, 다른 앱의 기능이나 데이터를 가져다 쓸 수 있게 해준다. API는 응용프로그램 프로그래밍 인터페이스 쉽게 말해서, 다른 앱의 기능이나 데이터를 가져다 쓸 수 있게 해 주는 방법을 의미한다. 내가 원하는 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 그리고 어떠한 데이터를 제공 받을 수 있을지에 대한 규격들을 API라고 한다.ㅇ 인터페이스(Interface) 어떤 기계간의 장치끼리 정보를 교환하기 위한 수단이나, 방법을 의미한다. 인터페이스(interface)는 컴퓨터 시스템끼리 정보를 교환하는 공유 경계를 의미한다, 터치 스크린과 같은 일부 컴퓨터 하드웨어 장치들은 인터페이스를 통해 데이터를 송수신 할 수 있으며, 마우스나 마이크론 폰과 같은 장치들은 오직 시스템에 데이터를 전송만 하는 인터페이스를 제공한다. API의 세 가지 .. 2022. 11. 20.
Javascript _이벤트타입 마우스 이벤트 click 마우스 버튼을 클릭했을 때 dbclick 마우스 버튼을 더블클릭 했을 때 mousedown 마우스 버튼을 눌렀을 때 mouseup 누르고 있던 마우스 버튼을 놓았을 때 mousemove 마우스 커서를 움직였을 때 mouseenter 마우스 커서를 html요소 안으로 이동했을 때 버블링X mouseover 마우스 커서를 html요소 안으로 이동했을 때 버블링 됨 mouseleave 마우스 커서를 html요소 밖으로 이동했을 때 버블링 X mouserout 마우스 커서를 html요소 밖으로 이동했을 때 버블링 됨 키보드 이벤트 keydown 모든 키를 눌렀을 때 발생한다 keypress 문자 키를 눌렀을 때 연속적으로 발생한다 keyup 누르고 있던 키를 놓았을 때 한 번만 발생한다.. 2022. 11. 11.
스프레드 문법( ... ) 집합체인 값들을 개별값으로 푼다. 스프레드 문법 ( ... ) 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법의 결과는 값이 아니다. 아래 예제의 ...[1,2,3]로 펼친 요소들인 1 2 3 은 값이 아니라 값들의 목록이다. 이는 스프레드 문법이 값을 생성하는 연산자가 아님을 뜻한다. 따라서 스프레드 문법의 결과는 변수에 해당할 수 없다. // 개별요소로 분리함 console.log(...[1,2,3]) // 1 2 3 console.log(...'hello') // h e l l o // 일반객체는 스프레드 문법의 대상이 될 수 없다 console.log(...{a:1, b:2}) //typeError: Found non-callable @@iterator 문법의 결과물은 값의 목록을 사용.. 2022. 11. 9.

티스토리툴바