
리액트의 가장 중요한 개념 중 하나인 컴포넌트. 컴포넌트의 영어 뜻은 "요소, 부품" 이다. 말 그대로, 컴포넌트는 하나의 부품이다. 이 부품들이 있으면, 어디에든 끼워 조립하기 쉽고, 부품만 고치면 되니까 유지보수도 편리하다. 실습준비 필요한 파일 필요한 파일들은 create-react-app의 기본 파일들을 기준으로 한다. - index.html : 이 파일의 root라는 아이디를 통해 모든 컴포넌트들이 로드된다. - index.js : app 컴포넌트를 index.html 의 root로 렌더링시키는 역할을 한다. - app.js : app 컴포넌트다. 이 안에 많은 컴포넌트들을 만들 예정. 컴포넌트의 종류는 function으로 시작하는 함수형 컴포넌트와, class로 만들어지는 클래스 컴포넌트로 나..

삼항연산자는 조건문을 축약해서 쓰는 것으로 유명하다. 맛보기 function normalOne(num) { if (num > 0) { return "0보다 크다" } else { return "0보다 작다" } } normalOne(3);//0보다 크다 function ternary(num) { return ((num > 0) ? "0보다 크다" : "0보다 작다"); } ternary(3);// 0보다 크다 확 줄었다. 문법 조건 ? 조건이 true이면 반환 : 조건이 false면 반환 활용 - 결과를 변수에 할당 시키기 const ranNum = 5; let varAfter = ranNum > 4 ? "true" : "false"; console.log(varAfter); //true - 한 조건에 ..

웹 접근성이란? 모든 사람들에게 평등한 웹 이용을 위해, 웹 접근성이 만들어졌다. 보통 사람들과 달리 웹 이용에 불편함을 겪는 사람들(장애인, 노약자 등)은 웹의 접근성이 떨어진다. 이를 위해 스크린리더기, 마우스스틱 등 보조기기를 이용하는데 보조기기가 읽게 하기 위한 방법들을 통해 웹 접근성이 좋게 해야 한다. 웹 표준과 웹 접근성의 차이는? 웹 표준은 웹 접근성을 지키기 위한 표준이다. 어떤 웹 브라우저를 사용하던, 모바일, 태블릿 등 어떤 화면 사이즈에서 웹을 이용하던 어려움 없이 이용하도록 하는 표준 이다. 이는 W3C라는 국제 웹 표준화 단체에서 발표한 자료들에 기반해 만들어진다. 웹 표준을 지킨 웹은 아래와 같은 장점을 가진다. 웹 표준을 따라 효율적으로 짜여진 코드는 코드의 양도 줄고 동시에..

처음 자바스크립트를 배울 땐 정말 기본의 정석의 형태를 배우기 때문에 화살표 함수를 접하고 머릿속에 물음표가 떴다. 이젠 많은 코드들에서 화살표 함수를 이용하기 때문에 익숙해질 필요가 있어 적어본다. let forArrow = (a, b) => (a + b) ; forArrow(1, 2);// 3 이 표시는 ES6에 새로 나온 함수 표현식이다. 이 함수는 아래의 함수와 같다. let forArrow = function(a, b){ return a + b; } forArrow(1, 2); 화살표의 왼쪽엔 매개변수를, 화살표의 오른쪽엔 함수의 내용을 넣는다. 함수의 내용이 여러줄이면 아래와 같이 적는다. let forArrow = (a, b) => { let sum = a + b; return sum;//여..
- Total
- Today
- Yesterday
- 리액트 라우터
- 리액트 컴포넌트
- 10989 파이썬
- react router
- nextjs 스크롤
- 카페음료테스트
- vscode venv
- NextJS
- 글래스모피즘 구현
- 화이팅
- 움직이는 글래스모피즘
- css 글래스모피즘
- 파이썬 flask
- getserversideprops redirect
- nuxt 공식문서
- 리액트
- Til
- 리액트 파라미터 넘기기
- 파이썬 크롤링
- nextjs 파라미터 넘기기
- 파이썬 정렬
- 글래스모피즘 애니메이션 구현
- css marquee
- nuxt 공식문서 한글
- 자바스크립트
- next.js 리다이렉트
- bs4 크롤링
- 백준 10989 파이썬
- dvd 효과
- 리액트 스크롤
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |