print("Today-I-Learned")

📌 children 이란? children은 props의 일종으로, 컴포넌트 사이에 위치한 모든 JSX 요소를 포함한다. 여러 개의 요소를 받을 수 있다. 컴포넌트에 유연성을 제공하며, 내부에 다른 요소나 텍스트를 포함할 수 있게 해준다.  ⇒  children으로 모든 값을 받아서 표시할 수 있음. 일일이 props에 정의해서 사용하지 않아도 됨! // App.tsximport "./App.css";import UserList from "./components/UserList/UserList";import UserProfile from "./components/UserProfile/UserProfile";import { CommunityUser } from "./models/Communityuser..

📌 DOM(Document Object Model) APIDOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다.DOM을 변수에 담을 때는 $를 사용하거나 변수 뒤에 El을 붙여주는 등 엘리먼트를 구분시켜주는 것을 추천함(변수네이밍이 충돌 할 일이 없다!)💡 API는 Application Programming Interface. 쉽게 ‘주문서’라고 기억하기!  1. DOM 트리에 접근document 객체를 통해 HTML 문서에 접근 (셀렉터로 엘리먼트를 가져오는 거,,,)// ⭐해당하는 Id를 가진 요소에 접근하기document.getElementById();// 해당하는 모든 요소..

게시글 작성 폼에서 카테고리 선택하는 부분을 실제 데이터가 아닌 하드코딩으로 넣어주고 있었다.  실제 post 응답으로 받아오는 카테고리의 ID와 title (카테고리 이름)을 받아와 넣어주고 싶어서 view의 EJS 파일에서태그를 넣어주고 스크립트를 위와 같이 작성해줬다. {"message":"Internal Server Error","details":"C:\\Users\\DAYOUNG\\Desktop\\orm-camp\\node-project\\git-nanum-sup\\src\\views\\client\\posts\\postWrite.ejs:29\n 27| 카테고리 선택\r\n 28| \r\n >> 29| \">\r\n 30| \r\n 31| \r\n 32| \r\n\npost is not defi..

📌 생성자 함수 (constructor function) 객체를 생성하기 위한 함수유사한 객체 여러 개를 쉽게 만들 수 있다.일반함수와 구분하기 위해 'new' 연산자를 사용해 호출하고, 첫 번째 문자를 대문자(파스칼 케이스)로 작성한다.new 연산자- 빈 객체를 생성한다.- 새로 생성된 빈 객체는 생성자의 프로토타입을 상속받는다.- this를 새로 생성된 객체에 바인드 시킨다.- 생성자에 명시적으로 다른 객체를 리턴하지 않는 경우, this로 바인드된 객체가 반환된다. (일반적으로 생성자는 값을 리턴하지 않음)function User(name) { // this = {}; (빈 객체가 암시적으로 만들어짐) // 새로운 프로퍼티를 this에 추가함 this.name = name; this...

fatal: Unable to create 'C:/Users/내 파일경로/현재 작업 폴더/.git/index.lock': File exists.Another git process seems to be running in this repository, e.g.an editor opened by 'git commit'. Please make sure all processesare terminated then try again. If it still fails, a git processmay have crashed in this repository earlier:remove the file manually to continue.  📌 이슈상황요즘 백엔드 수업을 들으면서 노드 작업중에 터미널에서 서버실행, g..

보호되어 있는 글입니다.

📌 thisthis는 객체를 가리키는 참조 변수. 호출되는 위치에 따라 다르게 this를 정의한다.function a(){ console.log(this) }a(); // windowlet myObj = { val1: 100, func1: function () { console.log(this); }}myObj.func1(); // myObj전역 컨텍스트: this는 전역 객체(브라우저에서는 window)를 가리킨다. 함수의 'this'는 호출시점에 따라 달라진다. 일반함수는 호출 위치에 따라 this를 정의하고, 화살표함수는 자신이 선언된 함수 범위에서 this를 정의한다.const hello = { name: '이름ㅇㅇㅇ', normal..

📌 Iterable객체 (Iterable Object)Iterable 객체란 반복 가능한 객체를 의미한다. Iterable 객체에는 'for...of 반복문'을 사용할 수 있다. 1. Iterable 객체의 조건 이터레이션 [symbol.iterator] 함수를 가져야 한다. 오브젝트가 '반복' 할 수 있는 구조여야 한다. (0번부터 순차적으로 와야함) ∴ 배열, 혹은 유사배열은 대부분 이터러블 객체이다. (이외에 문자열,Map,Set 등이 있다) symbol.iterator는 'iterator'라는 객체를 반환하는데 이 iterator객체는 다음과 같은 조건을 만족해야한다.1. next() 라는 메서드를 가진다.2. next() 메서드는 done과 value객체를 반환한다. {done: Boolea..

보호되어 있는 글입니다.

프로젝트 개요• 활동 장소 : 오름캠프 내 미니 프로젝트• 기간 : 24. 08. 20 ~ 24. 08. 27• 목표 :  1. 오픈 API를 활용해 데이터 요청 및 응답 받은 데이터로 영화, 날씨 등의 화면 구현             2. 바닐라 자바스크립트로 이벤트 처리와 DOM 조작 (feat.타입스크립트..)            • 역할 : HOME 영화 / 날씨 html & css / 영화 API & Event / Todo 반응형 / 전체 UI디자인 정리기술 스택HTML / CSSvanilla JavaScriptviteVS codeGit구현기능날씨각 지역별 현재 기온 표기현재 위치의 실시간 날씨 표기 (아이콘, 최저·최고기온 등)실시간 현재 위치 수집 할 일Todo 탭에서 생성된 현재 할일 목록..