보충내용

document.getElementById와 document.querySelector는 JavaScript에서 DOM 요소를 선택하는 데 사용되는 두 가지 메서드입니다.:요소의 고유한 ID 값을 사용하여 요소를 선택합니다.ID는 문서 전체에서 고유해야 합니다.: CSS

소문자 사용하기대시(-) 사용하기명확하게 작성하기일관성있게 작성하기

script 태그는 여러번 사용 가능한가? YES! HTML문서에서 여러개의 script 태그를 사용하는 것이 일반적. 서로 다른 스크립트들을 별도의 태그로 분리하거나, 특정 스크립트가 다른 스크립트보다 먼저 실행되어야 하는 경우 등에 이런 방식을 사용함.

1sudo apt-get update=> ... Done 2sudo apt-get upgrade=> y => 핑크색 화면이 뜨면서 갑자기 당황스러워짐=> Tab => Enter 3 sudo apt-get install nodejs npm => Y => 또 핑크색

서비스를 사용하는 컴퓨터나 소프트웨어를 의미Ex) 웹 브라우징을 할 때 사용자의 컴퓨터나 스마트폰, 그 위에서 동작하는 웹 브라우저 모두 클라이언트에 해당됨주로 사용자의 요청을 서버에 전달하고, 서버로부터 받은 응답을 사용자에게 보여주는 역할클라이언트의 요청을 처리하고

서버사이드 렌더링(SSR)을 사용하는 경우HTML form은 서버에서 페이지를 생성하고, 이를 클라이언트에게 전달하는 전통적인 웹 개발방식인 서버사이드 렌더링에 적합함JS를 사용하지 않거나, 최소한의 JS를 사용하는 간단한 웹 페이지에 적합간단한 데이터 전송이 필요한

파싱 개념프로그램을 분석하고 내부 형식으로 변환하는 과정내부 형식은 런타임 환경에서 실제로 실행할 수 있는 형태웹 개발에서 파싱은 주로 HTML, CSS, JavaScript와 같은 코드나 데이터를 해석하고 처리하는 과정을 의미프로그램이나 데이터를 그 구성요소로 나누고

JavaScript는 동적 타입 언어로, 변수의 타입이 런타임에 결정됨TypeScript는 JavaScript의 상위 집합으로, 정적 타입 언어임 컴파일 시 타입 검사를 수행하며 오류를 미리 발견할 수 있음React는 사용자 인터페이스를 구축하기 위한 JavaScri

애플리케이션의 상태를 중앙에서 관리하는 라이브러리스토어(Store) : 애플리케이션의 상태가 저장되는 장소액션(Action): 상태를 변경하기 위한 명령어리듀서(Reducer): 액션에 따라 상태를 변경하는 함수설치스토어 생성: store.ts 파일 생성슬라이스 생성:

Redux 쓰는 이유 Props 문법이 귀찮을 때 사용 State 변경 관리할 때 사용 하위 component에게 props를 통해 state를 전달해주고 싶을 때 모든 component를 거쳐가면 비효율적이니까 Redux라이브러리를 사용해서 전달해주면 좋음 Re

상태관리자프로그램이 동작하는데 필요한 데이터를 체계적으로 관리해줌Redux 자체는 React와 무관함JS 프로젝트라면 어디에서나 사용 가능createStoresubscribegetStatedispatch리액트에서 리덕스를 사용하기 편리하게 해줌connectuseDisp

API의 다양한 형식들 중 가장 널리 사용되는 것API가 'A가 이렇게 요청하면 B는 이렇게 응답한다'라는 약속이라면,RESTful API는 'A가 어떤 방식으로 요청하고, B는 어떤 방식으로 응답할지' 지정해놓은 다양한 형식들 중 하나임하는 일은 크게 Create,

RESTful API에서는 전송에 사용된 HTTP 메소드, URI를 통해 각 작업을 구분함이 방식은 요청의 내용을 직관적으로 알 수 있다는 장점이 있지만, 단점으로는 많은 엔드포인트를 관리해야한다는 점이 있음특정 리소스나 서비스를 접근하기 위한 서버의 경로를 의미Gra

REST API, SOAP, GraphQL, gRPC 등은 주로 HTTP 기반이었음HTTP에서는 클라이언트가 서버에게 요청을 보내고 서버가 그에 응하여 응답을 보내는 식으로 단방향 소통이 이루어짐서버가 클라이언트에게 메시지를 보내는 것은 클라이언트의 요청에 응답을 할

\-Asynchronous JavaScript And XMLAJAX 등장 이전에는 웹페이지에서의 모든 사용자 행동은 재접속을 통해 이루어짐만약 웹 사이트에 접속하기 위해 브라우저의 주소창에 URL을 입력하면브라우저가 서버에게 해당 URL로 요청을 보내고서버는 해당 웹페

Context 생성createContext를 사용하여 컨텍스트를 생성초기값을 설정할 수 있으며, 타입스크립트를 사용할 경우 타입을 지정Provider 컴포넌트 생성provider는 컨텍스트 값을 하위 컴포넌트에 전달하는 역할을 함상태와 상태를 변경하는 함수를 정의하고,

도메인과 IP 주소도메인은 각각의 IP 주소에 붙은 이름표임IP 주소는 기억하기 어렵기 때문에 '도메인'이라는 이름표를 붙였음예를 들면, google.com이 도메인, 142.250.64.78이 IP 주소임DNS(Domain Name Server)브라우저가 www.go

어제 세미나를 진행하던 중, 스터디원이 웹페이지를 만들어 배포한 후 도메인 주소를 설정하는 과정이 궁금하다고 질문했다.실제 개인 프로젝트 배포 계획이 있기 때문에, 도메인 주소 설정에 관해 알아두는 것이 도움이 될 것이라고 생각했다.공부 후 오늘 세미나 보충 내용으로

Domain Name System인터넷 도메인 이름을 IP 주소로 변환하거나, 그 반대의 변환을 수행하는 시스템사용자가 기억하기 쉬운 도메인 이름을 사용하여 웹사이트에 접속할 수 있게 해줌DNS는 도메인 이름과 IP 주소를 매핑하는 분산형 데이터베이스 시스템임사용자가

GET과 POST는 HTTP 프로토콜의 주요 요청 메서드GET은 서버로부터 정보를 조회하는 데 사용됨예를 들면, 웹 페이지 로드, 검색 쿼리 전송 등에 사용됨POST는 서버로 데이터를 제출하는 데 사용됨예를 들면, 폼 제출, 파일 업로드 등에 사용됨GET 메서드는 주로

APIApplication Programming Interface소프트웨어 간의 상호작용을 위한 규약이나 프로토콜다른 소프트웨어 컴포넌트와 통신할 수 있게 해주는 인터페이스프로토콜컴퓨터나 전자 기기들 간에 데이터를 주고받을 때 사용하는 규칙이나 표준서로 다른 시스템 간

C, Assembly 등 소수를 제외한 오늘날의 프로그래밍 언어들은 모두 객체지향 프로그래밍 개념과 기능을 포함하고, 소프트웨어 개발의 기본적인 구성 요소로 자리잡고 있음어떤 소프트웨어를 개발하는 일을 중세의 성을 쌓는 일에 비유하면,개발자는 성주이고, 그는 인부들에게

프로그램 컴퓨터에서 실행할 수 있는 파일 Window에서 .exe로 끝나는 파일들을 '프로그램'이라고 함 프로세스 프로그램이 실행되어 돌아가고 있는 상태 즉, 컴퓨터가 어떤 일을 하고 있는 상태 쾌적하게 컴퓨터를 사용할 수 있는 것은 운영체제가 여러 개의 프로세스를 함께 돌리고 있기 때문임 여러 프로세스 함께 돌리는 방법 동시적 : 프로세스 하나가...

Microsoft에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈 소스일반 자바스크립트로 컴파일되는 자바스크립트 Superset(상위 호환)으로, 2012년 10월에 처음 공개됨강한 타입 시스템은 높은 가독성과 코드 품질 등을 제공, 런타임이 아닌 컴파일

TypeScript PlaygroundTypeScript 팀에서 제공하는 온라인 에디터웹 브라우저에서 직접 TypeScript 코드를 작성하고 컴파일 할 수 있음로컬 개발 환경을 설정하지 않고도 TypeScript의 기능과 설정을 실험할 수 있어 학습에 유용함컴파일러

이미지나 비디오와 같은 대체 요소가 지정된 컨테이너에 맞춰지는 방식을 제어하는 CSS 속성fill (기본값)이미지를 컨테이너에 맞게 늘리거나 줄임원본 이미지의 종횡비를 유지하지 않음이미지가 왜곡될 수 있음contain이미지의 종횡비를 유지하면서 컨테이너 내에 전체 이미

웹에서 애니메이션은 사용자 경험 향상, 시각적 피드백 제공 등의 기능을 함애니메이션 생성은 CSS 애니메이션, JavaScript 애니메이션 두 가지 접근법이 있음브라우저가 웹페이지를 렌더링 하는 과정은 크게 Layout, Paint, Composite 세 단계임Lay

Call Stack은 오늘날 대부분의 프로그래밍 언어들에서 사용되는 개념이니 잘 알아두어야 함함수를 사용할 때마다 그와 관련된 정보들이 쌓이는 곳Call은 함수의 호출을 의미Stack은 자료구조의 Stack을 의미Queue먼저 들어온 것이 먼저 나가는 First in

함수형 프로그래밍은 객체지향 프로그래밍과 마찬가지로, 프로그래밍 코드를 작성하는 하나의 방식객체지향 패러다임과 함수형 패러다임은 서로 충돌하는 것이 아니기 때문에 이 둘 모두를 적용해서 프로그래밍을 할 수 있음여러 변수들이 사용되기 때문에 시점마다 달라질 수 있는 '상

영화 코코에서 주인공의 고조 할아버지 hector를 유일하게 기억하는 이승의 사람은 그의 딸 coco고, 만약 coco가 죽거나 hector를 잊는다면 hector의 영혼은 죽은자들의 땅에서 garbage collect가 됨Closure 이해를 위해 이 상황을 기억하고

Immediately Invoked Function Expression의 약자정의되자마자 즉시 실행되는 JavaScript Function을 의미함Self-Executing Anonymouse Funcion으로 알려진 디자인 패턴즉시 실행 함수에도 이름을 붙여 기명 즉

closet() 메서드는 DOM API의 일부로, CSS 선택자와 일치하는 가장 가까운 조상 요소를 찾는 데 사용됨현재 요소부터 시작해서 DOM 트리를 위로 탐색함주어진 선택자와 일치하는 가장 가까운 조상 요소를 반환함현재 요소 자체가 선택자와 일치하면 그 요소를 반환

React 애플리케이션에서 사용할 수 있는 강력한 리치 텍스트 에디터 컴포넌트npmyarn사용하기 쉽고 React와 잘 통합됨다양한 텍스트 서식 옵션을 제공함커스터마이징이 용이함이미지, 링크 등 멀티미디어 삽입을 지원함모듈식 구조로 필요한 기능만 선택적으로 사용할 수

req.body는 Express.js에서 HTTP 요청의 본문(body)에 포함된 데이터를 담고 있는 객체이 데이터는 클라이언트가 서버로 보내는 요청에 포함되어 있음req.body를 사용하기 위해서는 일반적으로 다음과 같은 미들웨어를 설정해야 함이 미들웨어를 설정하면,

SQL 인젝션 공격을 방지하는 안전한 방법임데이터베이스 드라이버가 이 값들을 적절히 이스케이프하고 쿼리에 안전하게 삽입함쿼리 생성 = 실제 연결된 MySQL 데이터 베이스에 해당 쿼리가 전송되어 실행됨'q'는 SQL 쿼리의 템플릿임'?' 문자는 나중에 채워질 파라미터의

Utility-First 컨셉을 가진 CSS 프레임워크프레임워크 내에 정의된 Utility Class를 사용해서 별도의 css 작성 없이 스타일링 가능프로젝트 생성TailwindCSS 설치tailwind.config.js 파일 생성tailwind.config.js 파일

팀 프로젝트를 포크해서 가져왔는데,원본을 private으로 바꿔놓으면 가져올 수 없다고해서새로운 레포지토리로 가져왔습니다.이슈까지 가져오는 코드이니필요하신 분들은 참고해서 사용하세요 :)초기에 한글 깨짐 이슈도 발생했었는데그 부분까지 해결된 최종 코드입니다.

전체 이슈 가져오는 방법입니다 ☺️