일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 객체
- 실행컨텍스트 실행과정
- CORS
- html
- 실행컨텍스트스택
- 실행컨텍스트 동작과정
- Mini Node Server
- 노마드코더
- css
- .env
- 로컬상태
- state hook
- styled-component
- npm 에러
- 전역상태
- useRef역할
- 실행컨텍스트란
- 개발일기
- 실행컨텍스트 면접
- 고차함수
- 그래머인유즈
- 알고리즘
- 실행컨텍스트자바스크립트
- 개발공부
- .current
- 영어
- CLI
- 실행컨텍스트콜스택
- Block
- 영어공부
- Today
- Total
목록분류 전체보기 (47)
오늘도 삽질중
JSX규칙 1. JSX에서 여러 엘리먼트를 작성하고자 하는 경우 opening tag와 closing tag로 감싸주어야한다. ERROR : Adjacent JSX elements must be wrapped in an enclosing tag. const posts = [ { id: 1, title: "Hello World", content: "Welcome to learning React!" }, { id: 2, title: "Installation", content: "You can install React via npm." }, { id: 3, title: "Practice", content: "Practice React via npm run start" } ]; export default fun..
Create React App이란? create react app 하기전에 터미널을 통해 준비해야할것 프로젝트 파일만들기 Create React App이란? Create React App은 리액트 SPA(single page application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다. create react app 하기전에 터미널을 통해 준비해야할것 1. git --version git --version 2. git --version git --version 3. npm --version npm --version 프로젝트 파일만들기 만들고 싶은 폴더를 생성후, 그 폴더 안에서 Create React App을 생성한다. Create React App은 npx라는 명령어를 활용하여 만들어준..
DOM이란? HTML에 JavaScript 적용하기 DOM구조를 조회 돔 메소드 연습 CRUD(create , read ,update, delete) (ex 간단 투두리스트, 유효성검사) DOM (Document Object Model) -HTML요소를 Object처럼 조작할 수 있는 모델이다. 즉 자바스크립트를 이용하면 DOM으로 HTML을 조작할 수 있다. (HTML을 조작한다? DOM을 위해 웹 개발자들이 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들었다. 이렇게 만들어진 구조를 이용해 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들수 있다.) -자바스크립트는 다양한 일을 할 수 있지만, 웹 페이지를 제어하기 위한 목적으로 오랜기간 사용되었다. HTML에 JavaScript 적용하..
구조 분해할당(Destructing) - 배열과 객체의 속성을 해체하여 그 값을 개별 변수로 받는방법 예시 const arr = [1,2,3] const [first, second, third] = arr let x,y,z [x,y,z] = arr; 예시 let x, y, z; [x, y] = [1, 2]; console.log(x, y); // 1 2 [x, y] = [1]; console.log(x, y); // 1 undefined [x, y] = [1, 2, 3]; console.log(x, y); // 1 2 [x, , z] = [1, 2, 3]; console.log(x, z); // 1 3 // default value [x, y, z = 3] = [1, 2]; console.log(x, y..
Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을때에 사용한다. function sum (x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers)//6 Spread 연산자는 ...을 통해 사용할 수 있다. MDN을 통해 Spread 연산자 설명을 보면 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0 개 이상인 인수 (함수로 호출할 경우)또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있다. 라고 되어있는데 아래 콘솔로그를 보는것이 더 이해하기 쉬울것이다. 위처럼 arr를 Spread 연산자로 콘솔로그를 찍어보면 배열이 아닌 ..
21.9.6 월요일 😁 -오늘은 아침부터 객체 코플릿을 풀었다. 음.. 저번에 개념을 잘 다져 놨다고 생각했었는데 막상 문제를 푸니 헷갈리는 부분이 꽤 있었다. 특히 for in을 사용할 때 key값만이 변수 선언이 된다는 점. value값을 알고 싶다면 key값을 이용하여 나타내야 한다는 점을 꼭 기억하자! 21.9.7 화요일 🙂 - 오늘은 css셀렉터 규칙, 그리고 flexbox를 중점적으로 배웠다. css는 왜 이렇게 헷갈리는 것일까? 내용을 이해하기에는 그리 어렵진 않았지만, 한 번에 많은 정보가 들어와서인지 뒤돌아서면 까먹고 헷갈리기 일수이다. - 오늘 처음 FIgma라는걸 사용해 목업(실물 크기의 모형)을 만들어보았다. 대략적인 박스 모습만 구현하면 되지 생각하고 오른쪽 트위틀러의 모습을 왼쪽..
기본 스타일링을 제거하는 CSS 코드의 예시 태그는 기본 스타일에 약간의 여백이 있다. width, heigth 계산이 여백을 포함하지 않아 계산에 어려움이 있다. 브라우저(크롬,사파리)마다 기본 스타일이 조금씩 다르다. 이 모든 문제들을 아래의 코드를 적용시키면 기본 스타일링을 제거하여 디자인한 대로 레이아웃 구현 가능 * { box-sizing: border-box; } body { margin: 0; padding: 0; } flexbox로 레이아웃 잡기 flexbox로 레이아웃을 잡는다 = 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다. 🤜 display : flex - 부모박스 요소에 display : flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법 기본값으로, dis..
html ... css #label.center{...} // id가 label이며서 동시에 class가 center인 엘리먼트를 선택한다. 셀렉터 h1 {} div {} 전체 셀렉터 * {} Tag 셀렉터 section, h1 {} ( 쉼표(,) 는 section 과 h1을 다중으로 선택한다) ID 셀렉터 #only {} class 셀렉터 .widget {} .center {} 후손 셀렉터 header h1 {} 자식 셀렉터( 후손 셀렉터와의 차이를 반드시 기억하자) header > p {} 인접 형제 셀렉터 section + p {} 형제 셀렉터 section ~p {} html ... css #label.center{...} // id가 label이며서 동시에 class가 center인 엘리먼트를 ..