🎆 오늘 한 것
- 테일윈드 스터디
- 스터디 피드백 정리
- 이듬 강의 html 다 보기
- 알고리즘 빅오 표기법 공부
- 리덕스 강의 보기
- 타입스크립트 찍먹
🙄 오늘 하려고 했는데 못한 것
- deep dive 24장 클로저
✨ 테일윈드 피드백 관련..이지만 마크업에 대한 이야기가 더 많은
테일윈드는 슬슬 감이 좀 오나? 싶은 상태긴 한데 웹접근성, 웹표준 이런 거 다 따지려니 머리 터지겠고 헷갈린다ㅠㅠ 흐이잉 피드백 이것저것 받았는데 유익했음
🎇 전체 선택자는 되도록 지양하자
문제의 내 css... 전체 선택자에 트랜지션 넣어놓은 게 내가 생각해도 성능 이슈 생길 것 같아 여쭤봤더니 역시나였다. 허허😅
그냥 필요할 때만 쓰는 게 낫다고... 하나하나 다 적용시키기 귀찮다고 이렇게 넣지 말자...
그리고 오늘 새삼 알게 된거
body * {
transition: all 0.3s;
}위처럼 * 가 요소 전체를 선택하겠다는 의미니 '특정 태그 내부의 요소 전체'로 범위를 줄일 수도 있다.
그냥 무지성으로 전체에 적용할 땐 별표~ 하고 쓰고 있었는데 생각해보니 넘 당연한 걸 이제와서 깨닫다니 나에게 놀라울 따름...🙄!!!
🎇 글자가 크다고 h 태그 쓰는 거 제발 그만...!
이런 것만 보면 왠지 '영화, TV 프로그램을 무제한으로.'가 제목일 것 같은 느낌이 들죠? 그치만 제목으로 쓰는 건 좋지 못한 습관이다.
그도 그럴 게 이 메인 영역에서 저 문장은 제목이 아니다. 워드 같은 문서로 생각했을 때 저게 카테고리의 제목이면 읽는 사람 띠용 먼소리? 싶을 것... 제목은 따로 주고 시각적으로 안 보이게 해주면 된다.
머리론 알지만 글자가 크기만 하면 왠지 저게 제목 같고 그렇다.. 디자인적 관점에서만 보는 거 제발 멈춰!!!🤚🤚
<h2 class="sr-only">넷플릭스 멤버십 등록 또는 재시작</h2>
<div class="flex flex-col items-center my-48 text-center">
<p class="mb-24 text-sTit-l md:text-sTit-2xl">
영화, TV 프로그램을 <br />무제한으로.
</p>
<p class="mb-24 font-bold text-sTxt-l md:text-sTxt-xl">
다양한 디바이스에서 시청하세요. <br class="sm:hidden" />언제든 해지하실 수
있습니다.
</p>
</div>이렇게 바꿨다 그래서. 테일윈드에서는 sr-only 라는 속성을 처음부터 제공해준다.
위의 코드가 정답은 아님 바로 밑에 이어서 적을 것임
🎇 br 태그 대신 span을 써보는 것은?
일할 때 이걸로 고민 많이 했더랬다. 처음엔 줄바꿈이 있는데 화면이 작아지면 이 줄바꿈을 없애고 한 줄로만 써줘야 더 예쁠 때가 많았음.
나는 일할 때 이것저것 생각해보고
<p class="mb-24 font-bold text-sTxt-l md:text-sTxt-xl">
다양한 디바이스에서 시청하세요. <br class="sm:hidden" />언제든
해지하실 수 있습니다.
</p>br 태그를 반응형으로 숨기는 식으로 줄바꿈을 없앴다.
근데 오늘 피드백 들으면서 알게 된 건 여기에 span을 써도 문제가 없다는 것이다.
엥 그러네?
<p class="mb-24 font-bold text-sTxt-l md:text-sTxt-xl">
<span>다양한 디바이스에서 시청하세요.</span>
<span>언제든해지하실 수 있습니다.</span>
</p>이렇게 span 태그로 묶어놓고 화면 크기에 따라 블록 요소, 인라인 요소로 바꾸면 되는 것임... 생각도 못해본 발상이라 띠용! 했음.
br...함께해서 더러웠고 다신 만나지 말자.(농담입니다 필요할 땐 써야죠)
🎇 반복문 돌려서 객체 만들기
어제 나를 괴롭히던 것 등장...
내가 원하는 것.
array = [ { customSpacing1 : "1px" }, { customSpacing2 : "2px" }, { customSpacing3 : "3px" } ..... ]이런 식으로 키 값의 이름과 뒤의 픽셀 값을 ++ 시키는 것...
테일윈드 스터디 전까지 해결해보려고 아침에 일어나서 부리나케 짱구 굴려가며 이 코드 썼다.
const array0to600 = Array(601)
.fill("0")
.map((_, i) => {
const key = {};
key[`cSpacing${i}`] = `${i}px`;
return key;
});
const cSpacing0_600 = { ...array0to600 };
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
spacing: cSpacing0_600,
},
},
plugins: [],
};결과적으로 이게 좋은 방법은 아님...ㅋㅋㅠㅠ 모 여러 각도로 접근해본 걸로 만족...
하여튼 내가 이걸 원했던 이유
- 기존 테일윈드 스타일을 덮어씌우지 않고 나만의 새 익스텐드를 만들고 싶었다.
- 애매한 간격을 전부 다 새로 선언하자니 귀찮았다.
- 사실 이게 제일 큰 이유인데, 시행착오 겪으면서 만들었다가 스타일 덮어띄우면서 크기를 다 새로 지정하자니 가슴이 갑갑해지더라...ㅎ; 덮어씌우면 내 프로젝트에 이미 지정해놓은 간격들도 다 달라지니까ㅠ 첨부터 계획을 잘 짜야돼 이래서...
- 그냥 한 번 해보고 싶었다.
ㅎㅎ...
const px0_10 = { ...Array.from(Array(11)).map((_, i) => `${i}px`) };카카오 FE 기술 블로그 들어가보니 이런 식으로 js를 사용해 수치를 싹 맞출 수 있다고 소개해놨더라.
근데 이 방식은 기존 스타일을 덮어씌우고 새롭게 정의하는 것임. 내가 원하는 건 여기에서 이제 클래스 이름도 다 다르게 설정해야 되는 것이다.
여기서 문제가 생겨버림.
'저게 맵으로 밸류 싹 다 지정해주는 것인 건 알겠다. 근데 키 값은 어케 변경하지....?ㅜ'
다시 위의 코드 가져와봄
const array0to600 = Array(601)
.fill("0")
.map((_, i) => {
const key = {};
key[`cSpacing${i}`] = `${i}px`;
return key;
});
const cSpacing0_600 = { ...array0to600 };- 0을 601개 가지고 있는 어레이를 생성하고
- 맵을 써서 내부의 요소 인덱스값을 뽑고
( _ , i )<- 이 부분 key라는 오브젝트를 생성해서key[어쩌고]로 key 값을 다 설정,- 그 key 값에 value를 지정
${i}px<- 이 부분 - 그리고
key라는 오브젝트를 리턴함
그럼 이제 array0to600 라는... 0부터 600까지의 값을 가진 거대한 배열이 완성된다.😅
이제 그 배열을 스프레드 연산자로 펼친 것을 cSpacing0_600라는 상수에 넣어줌
그리고 이 cSpacing0_600를
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
spacing: cSpacing0_600,
},
},
plugins: [],
};익스텐드로 확장시키면 완성이다!
한 줄 한 줄 써가면서 보니까 정말 무식한 방법이다. 그치만 이걸로 js 공부도 제법 됐음...뿌듯ㅎㅎ;;
✨ redux toolkit
뭐 한 것도 없는데 리덕스 툴킷이요? 갑자기요? Yes.
🎇 createSlice / configureStore
createSlice : 이전에 쓰던 유즈리듀서랑 비슷하지만 더 확장된 기능
configureStore : createStore 보다 간편한 스토어 생성 기능
import { createSlice, configureStore } from "@reduxjs/toolkit";
const initialState = { counter: 0, showCounter: true };
const counterSlice = createSlice({
name: "counter",
initialState, // 객체 디스트럭처링
reducers: {
increment(state) {
state.counter++;
// 엥 기존 스테이트는 절대로 변경하면 안된다고 하지 않았음?
// ㅇㅇ 근데 이건 그렇게 보이기만 하는 거지
// 기존 스테이트를 변경시키는 게 아니고
// 자동으로 새로운 상태 객체를 생성 후
// 모든 상태를 변경 못하게 유지, 그리고
// 변경한 상태는 변하지 않도록 오버라이드함
},
decrement(state) {
state.counter--;
},
increase(state, action) {
state.counter += action.payload;
// 그놈의 payload가 뭔지 늘 궁금했는데 드디어 나옴
},
toggleCounter(state) {
state.showCounter = !state.showCounter;
},
},
});
const store = configureStore({
reducer: counterSlice.reducer,
// reducer: { counter: counterSlice.reducer },
// 슬라이스가 다수일 때는 객체로 작성해야 되지만
// 지금은 하나 뿐이기 때문에
});
export const counterAction = counterSlice.actions;
// 액션을 내보내고 직접 사용될 컴포넌트에서 불러오면 됨
export default store;const dispatch = useDispatch();
const incrementHandler = () => {
dispatch(counterAction.increment());
// useDispatch hook 사용해서 함수 호출
};
const increaseHandler = () => {
dispatch(counterAction.increase(10));
// { type: SOME_UNIQUE_IDENTIFIER, payload : 10 }
};
const decrementHandler = () => {
dispatch(counterAction.decrement());
};
const toggleCounterHandler = () => {
dispatch(counterAction.toggleCounter);
};사용될 컴포넌트에서 액션을 호출한 모습
🎆 내일 할 것
- 알고리즘 배열과 오브젝트 성능 평가 파트 다 보기
- 리덕스 지금 보는 파트 다 보기, 리액트 복습 한 번 조져주기
- deep dive 24장 클로저
- 영화 한 편 보기
- 여유 되면? 타입스크립트 조금 보기
📌 킵해놓을 todo
- preload / modulepreload / prefetch 공부... 언제하지?
- deep dive 19장 프로토 타입
📚 이번 주 개인 목표
- 일요일까지 과제 1 테일윈드로 완성 완성 후 궁금한 점 질문하기 ✅
- 야무쌤 강의 html 파트 다 보기 / 여유되면 css 파트도 최대한 보기 ✅
- 리덕스 지금 보는 파트 다 보기
- 알고리즘 빅오 표기법 공부 ✅
- 미뤄놓은 프로토타입과 클로저 뽀개기
- 회고조 분들과 약속한 거 지키기(공부만 하면 너무 힘드니까 각자 영화 한 편 보고 이야기 나누기)
일단 계획 잡아놓고 안되면 다음 주에 하는 걸로...
📝 오늘의 일기
맥한테 배신 당했다. 배신..? 배신이라고 하는 게 맞나ㅋㅋㅋㅋㅋㅋㅋ 하여튼...윈도에선 아이콘 이렇게 보여서 빛이나 폭죽 이런 걸로 맞추고 있었는데 어제 간만에 맥북 켜서 이것저것 보는데 맥에선 이 이모지가...완전 못생긴 거임...??? 충격과 공포..............
몰라 이미 이 양식으로 279406927번 글 썼는데 어쩔 것임...ㅠㅠ 그냥 줏대있게 가겠어.
아 너무 졸릴 때 리덕스 툴킷 강의 봤더니 머리에 하나도 안 들어온 것 같음 어쩌냐... 어쩌긴 다시 봐야지....
📌 오늘 강사님께서 추천하신 책
제프리 젤드만의 웹표준 가이드 : 꼭 봐라는 아니고 볼 사람은 봐라 느낌
