취취취 이것은 취업에서 나오는 소리야

div태그한줄 차지span태그컨텐츠 크기만큼 공간차지img태그src는 속성 페이지주소는 속성 값닫는 태그는 없음a태그href 속성 사용하여 링크삽입ul,li,ol 태그ul은 unorder listli은 order listol은 숫자input,textarea 다양한 입력

절대 단위: px, pt 등상대 단위: %, em, rem, ch, vw, vh 등기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 (px 사용) 사용자가 브라우저의 기본 글꼴 크기를 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로

예)

1.자식 셀렉터header > div {} 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택<p> 요소의 자식인 <div>요소는 선택되지 않음후손 셀렉터header div {} 첫 번째로 입력한 요소의 후손을 선택<header>요소의 자식인 &lt

display: flex는 부모 요소에 적용하여 자식 박스의 방향과 크기를 결정함.기본 레이아웃부모인 main에 display:flex 속성 적용 시 부모요소에 적용하는 Flexbox 속성들속성 값flex-direction : row 인 경우flex-direction

자바스크립의 타입에 대해서 배웠다. 각 타입은 고유한 속성과 메서트를 가지고 있다.정수와 음수 실수를 표현할 수 있다. type0f 연산자로 해당값이 숫자인지 확인가능하다.예)typeof 100; // 'number'typeof -100; // 'number'산술연산자

주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정됨조건식은 if뒤에 있는 소괄호()에 입력함동치연산자 (===) 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환. !==는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면

함수는 두가지 방식으로 선언될 수 있다고 하는데 두 방법은.. 함수를 선언하고, 함수를 표현하는차이인데..호이스팅이 되냐안되냐의 차이라고 한다. 아직은 함수를 안배워서 모르겠지만. 함수를 선언한것과 변수에 함수를 할당했다 라는 것 까지만 이해 하기로 했다. ^^나의 답

하~ ㅋㅋㅋㅋㅋㅋfor문은 아래와 같은 형식으로 이루어져 있음.1부터 5까지의 수를 모두 더하는 코드를 for문으로 구현한다면 ?for문 내부에 num변수를 할당하고변수 num이 5보다 작거나같은지 확인2의 결과가 true면 코드를 실행!(result = result

문제임의의 값을 입력받아 타입을 리턴해야 합니다.입력인자 1 : anything임의의 값출력string 타입을 리턴해야 합니다.1ex) 'string', 'number', 'boolean', 'object', 'array', 'undefined', 'null', 'fu

객체는 키와값으로 이루어져있음.아래 객체에서 user는 키, lia는 값으로 이해하면 된다.dot notation : user.name user.age 이렇게 사용가능bracket notation : user'name' key를 따음표('', "", \`)로 감싸주어야

CLI(Command-Line Interface)기본적인 명령어/ 여러 명령어들이 있음.pwd: 현재 위치 확인하기mkdir: 새로운 폴더 생성하기cd: 폴더에 진입하기touch: 파일 생성하기cat: 파일의 내용을 터미널에 출력하기rm: 폴더나 파일 삭제하기ls: 특

할당될 때는 변수에 값(value) 자체가 담김 (number, string, boolean, undefined, null, symbol)원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값 자체가 복사되어 전달원시 자료형은 변경 불가능한 값(immutable valu

spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용함. rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있음. 파라미터 개수가 가변적일 때 유용 구조 분해(destructing) 배열 디스트럭처링을 사용하

총 10개의 주제에 50개의 문제가 있었다.주제01_Introduction.js02_Types-part1.js03_LetConst.js04_ArrowFunction.js05_Scope.js06_Types-part2.js07_Array.js08_Object.js09_Sp

HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 ModelDOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있음.DOM을 이용하여 HTML Element를 추가DOM을 이용하여 HTML

고차함수 왜쓰는지? 추상화를 통한 효율성 증대 특징 변수에 할당(assignment)할 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다. 다른 함수의 결과로써 리턴될 수 있다. 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의

클래스는 객체를 만들기 위한 설계도입니다. 이 설계도에는 객체가 가지고 있는 속성과 메서드가 정의되어 있습니다. 즉, 클래스는 객체의 구조를 정의하는 템플릿 역할을 합니다.인스턴스는 클래스를 이용하여 만들어진 객체를 말합니다. 예를 들어, 클래스는 자동차를 만들기 위한

자바스크립트 내장 메서드가 어떻게 콜백(Callback) 함수를 활용하는지동기: 특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것’비동기: 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것setTimeoutclearTi

react project 생성 >npx create-react-app@latest 폴더이름 컴포넌트 만들기 React에서 컴포넌트는 JSX로 작성되며, JSX는 JavaScript를 확장한 문법입니다. 컴포넌트 함수는 JSX 코드를 반환하는 방식으로 작동합니다. 한

React에서는 state를 다루는 방법 중 하나로 state 변수는 React에 의해 함수가 끝나도 사라지지 않습니다.useState 불러오기useState를 컴포넌트 안에서 호출 React의 useState 훅을 사용하여 isChecked라는 상태 변수를 선언하고

UI는 "사용자 인터페이스"를 의미하며, 시각적인 디자인과 요소에 집중합니다. 예를 들면, 버튼, 아이콘, 레이아웃 등이 UI에 해당합니다. UI는 사용자가 제품 또는 서비스를 직관적이고 효과적으로 사용할 수 있도록 돕습니다.UX는 "사용자 경험"을 의미하며, 사용자가

액션(Action): 액션은 애플리케이션에서 상태 변경을 위해 발생하는 이벤트입니다. 액션은 일반적으로 JavaScript 객체로 표현되며, 최소한의 필수 속성인 type을 가져야 합니다. type은 액션의 종류를 나타내는 문자열입니다. 예를 들어, "ADD_TODO"

뒤돌면 까먹을 나를 위해,,,확실히 내가 쓴 블로깅은 내가썼기 때문에 이해가 잘된다. 하지만 너무.. 피곤한일이긴 하다. 그래도 어쩌겠어? 해야지. https://codesandbox.io/s/react-usestate-7gw2k9?file=/src/App.j

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier

먼저 firebase에 로그인하고 웹앱을 만들어준다.1\. Firebase SDK를 프로젝트에 설치 -> npm install firebase2\. Firebase 초기화이떄 env사용 그다음 로그인페이지, 회원가입페이지에서 필요한 함수들 불러와서 작업해주면 끝 ! 로

React 프로젝트에서 사용 시이미 있는 React 프로젝트에 설치 시npm install --save typescript @types/node @types/react @types/react-dom @types/jestReact 프로젝트를 새로 만들 시npx creat

기존 프로젝트를 새로운 Git 저장소에 올릴 때 로컬 Git 저장소 초기화:프로젝트 디렉토리로 이동해당 디렉토리에서 Git 저장소를 초기화모든 파일을 스테이징 영역에 추가:프로젝트의 모든 파일을 Git 스테이징 영역에 추가초기 커밋 만들기:변경 사항을 커밋GitHub에

링크복사 기능

어던다른 함수에 있는 요청으로 값이 변경될때 컴포넌트 재렌더링이 일어나면서 좋아요 함수도 재생성되는게 문제라서 그걸 유즈콜백이 막아준다. 좋아요 함수는 좋아요 값이 변할때만 재생성되게 하겠다고 하는역할임

메인페이지 배경이미지 때문에 로딩이 느려져서 이미지 관련해서 성능을 개선해보겠다. 차세대 형식을 사용해서 jpg형식을 webp로 변환하여 모두 절감하였다.

객체지향 프로그래밍은? 데이터와 이를 처리하는 함수를 객체로 묶어 설계하는 방식입니다. 객체는 속성(데이터)과 메서드(함수)를 포함하고있다.그럼 왜쓰는가 ~ ?

양방향 데이터바인딩 일단 양방향 데이터바인딩은 ui데이터변경을 감시하는 왓처와 자바스크립트안에서 데이터변경을 감시하는 왓처를 통해 ui와 프로그램안에 데이터를 자동으로 동기화해주는 것이라함. 코드로 예를 들어보자 ! 그러니 두번 쓰이게 되고 잦은 업데이트가 있는 프

async 비동기함수를 선언해주고await 프로미스를 반환할때까지 기다려주는 역할아래에서는 post 요청작업을 기다리고 요청작업은 프로미스를 반환하게 된다.이후 정상처리 됐다면 아래 코드를 실행한다.try / catch 성공인 경우 실행실패인 경우 실행 try / t

웹소켓이뭐지

타입스크립트를 왜 ? 컴파일러를 통해 자바스크립트 -> 타입스크립트로 변환해주는 컴파일 과정에서오류를 발견할수있음.브라우저는 자바스크립트를 이해함. 자바스크립트는 런타임때 오류 발생. 때문에 타입스크립트는 빨리 오류 발견가능.s

✅ readonly 사용하기readonly 키워드를 사용하여 변수나 속성을 읽기 전용으로 만들 수 있음이는 변수나 속성을 선언한 후에는 값을 수정할 수 없도록 함readonly를 사용함으로써 변수나 속성의 값을 변경할 수 없으므로, 불변성을 유지할 수 있다.하지만 Ja

✅ unknown 변수의 타입을 미리 알지 못할 때 unknown사용 만약 api에서 응답받아오는데 타입이 뭔지 모르면 ? ✅ void ✅ never if 안에서는 string형의 name 반환 else if 안에서는 number형의 name 반환 else 안에서는 never형의 name 반환 ⇒ 즉, 제대로 인자가 전달되었다면 else로 올 수 없음

call signature 타입을만드는 방법아래와 같이 사용할 수 있음.

호출 스택이 비어 있는지 여부를 확인하는 것이 바로 이벤트 루프이벤트 루프는 호출 스택 내부에 수행해야 할 작업이 있는지 확인하고, 수행해야 할 코드가 있 다면 자바스크립트 엔진을 이용해 실행한다. 한 가지 알아들 점은 '코드를 실행하는 것과 '호를 스펙이 비의 있는지

useRef 기본 설명 useRef는 함수형 컴포넌트에서 DOM 요소에 접근하거나 값을 저장할 때 사용되는 훅임. useRef를 호출하면 Ref 객체를 반환함. Ref 객체는 .current 프로퍼티를 가지며, 여기에 초기값이 저장됨. 이 객체는 컴포넌트의 생애주기

리액트에서 컨텍스트(Context)는 전역적으로 데이터를 공유할 수 있는 방법을 제공함.최상위 컴포넌트에서 생성된 데이터를 트리 구조의 모든 하위 컴포넌트들이 필요할 때 접근 가능하게 함.일반적인 데이터 전달 방식인 props drilling을 대체하여, 여러 컴포넌트

코딩과제가 있어서 겸사겸사~ 1. Expo CLI 설치 혹은 (관리자문제) 2. Watchman 설치 (Mac용) 먼저 Homebrew를 업데이트 그 다음 Watchman을 설치 3. Expo 프로젝트 생성 최신 Expo 앱을 생성 폴더명을 입력하고 프로

1. EC2 인스턴스 설정 및 서버 배포 EC2 인스턴스 생성 AWS Management Console에 로그인 후, EC2 서비스로 이동 새로운 EC2 인스턴스를 생성 인스턴스 유형 선택 키 페어 생성 및 다운로드 (SSH 접속을 위해 필요) 네트워크 설정에서 보안 그룹 설정 서버 코드 준비 및 배포 EC2 인스턴스에 SSH로 접속 서버 코드 ...

데이터베이스에 존재하는 모든 테이블을 표시notes 테이블의 구조 표시notes 테이블의 모든 데이터 표시SQLite 셸 종료! 이렇게 데이터를 확인할수있다~! 근데 포스트맨이 더편한듯

aws 배포하러가기 기술선택 과정과 이유 처음에는 "백엔드를 어떤 방식으로, 어떻게 선택해야 할까?" 라는 고민에서,,익숙한 JavaScript를 사용하여 백엔드를 구축하고자 했습니다. Node.js 환경 선택 JavaScript를 사용할 수 있는 환경으로 N

자주 사용하는 배열 메서드와 사용 사례 1. map 사용 사례: 데이터를 변환하여 새로운 배열을 생성할 때 주로 사용됩니다. 예를 들어, API에서 가져온 데이터를 변환하여 UI에 렌더링할 때 사용됩니다. 2. filter 사용 사례: 특정 조건을 만족하는 요소들

벨로그에서 원하는 포스트를 검색하고 최신순으로 정렬된 결과를 보고 싶었습니다. 그러나 벨로그는 무한 스크롤 방식을 사용하여 검색 결과를 제공하기 때문에, 모든 결과를 가져오려면 스크롤을 끝까지 내려야 합니다. 벨로그에서 공식 API를 제공하지 않기 때문에, 직접 크롤링