TIL
02/22 ~ 02/27일 동안 사용하면서 배운 소소한 내용들을 한번에 모았다.
github_wiki에서 프로젝트를 진행하면서 작업 진행 및 배운 내용들을 확인할 수 있다.
HTML
aria
html에는 aria-OOO 속성이 있다. 이는 시각이 불편하신 분들이 스크린리더로 화면을 읽었을 때 처리를 도움주는 속성이다.
쇼핑하우에서 slide의 속성에 aria-hidden이 있었는데 aria-hidden="true"라고 속성을 주면 스크린리더기가 그 값은 읽지 않는다. 그래서 쇼핑하우의 3개의 슬라이더 중 가운데 값만 aria-hidden="false"라고 작성된 거였다. (이걸 무슨 display:none처럼 안보이게 해주는 속성인줄 알고 삽질을 좀..했다.)
CSS
-
letter-spacing : 자간을 조절할 수 있다. -값을 입력하면 가까워진다.
-
글자 수가 많아서 기존 box를 넘어가거나 줄바꿈이 될 때 "글자가 초과합..."처럼 ...으로 만드는 3종 세트
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;: 넓이를 넘어가더라도 줄바꿈을 하지 않는다.overflow: hidden;: 넘어간 부분을 숨긴다.text-overflow: ellipsis;: overflow: hidden 된 부분을 ...으로 나타낸다. -
float의 문제점
float는 부모의 width를 넘어가면 자동으로 줄바꿈이 된다...?
-
inline-block의 문제점
inline도 마찬가지로 사이에 공백이있다. 참 이상하다. 이걸해결하려면 margin을 음수로 억지로 적용하거나 부모요소의 font-size:0 을 설정해야한다고 한다.
Mixin
JS의 함수처럼 스타일을 분리해서 재활용할 수 있는 기능이 있었습니다.
Syntax
- 처음에 아래와 같은 문법으로 mixin을 만든다.
@mixin mixin이름 ($width, 변수명, ...){ // 이름: 함수명 처럼 사용 , 변수: $k 같이 앞에 $표시를 붙여서 사용
width: $width;
기타 속성
.
.
}
- 이제 적용할 element에서
include를 활용해 적용시킬 수 있습니다.
div{
@include mixin이름
}JS
JS 애니메이션
-
setInterval
콜스택 작업이 오래걸린다면 event Queue에 애니메이션 작업들이 쌓여있어서 제대로 작동 하지 않을 수 있다. 이런 상황이 발생할 경우
clearInterval과 같은 메소드를 활용해 컨트롤할 수 있다. -
setTimeout => 재귀호출
setInterval과 다르게 event Queue 에 쌓여있을 일이 없다.
-
requestAnimationFrame
시간설정 같은것들 필요없이 화면에 최적화된(VSync에 맞춰진) 애니메이션을 보여준다.
express
- res.sendFile(path [,options][,fn])
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'dist', 'index.html'));
});위의 예제로 sendFile의 역할을 살펴보면
/로 GET요청이 오게되면 path.join(__dirname, 'public', 'dist', 'index.html') 이 경로에서 파일을 읽어서 response한다.
미들웨어
Request의 분석하는 코드를 잘게 나누어서 각 미들웨어에서 일을 나누어서 처리하게 만든 것이다. 미들웨어는 파이프라인처럼 이어져있다.
- express에서 다음 미들웨어로 넘어가기 위해서는
next()를 사용하면 된다. - express의 middleware도(
use) pipe함수, fetch 처럼 작동한다. (하나가 끝난 뒤에야 뒤에 가 실행되는 동기처럼 보이는 비동기)
parcel
-
parcel은 실행이 되는 경로에 dist폴더와 cache폴더를 만든다. 이를 유의해서 express server의 경로를 설정해줘야 한다.
-
SCSS 컴파일을 위해서 node-sass 모듈을 사용 할 수도 있습니다. node-sass 모듈을 사용하면 컴파일 속도가 빨라집니다.
