[엘리스 SW 엔지니어 트랙 2기 / TIL] Day 04 - 반응형 웹사이트

1. 오늘 공부한 내용  📝

• Transform (rotate, scale, skew, translate)
• Transition(property, duration, timing-function, delay)
• Animation
• prefix 접두사

2. 어려웠던 내용  🤯

• 3일차 이론 수업에 배웠던 내용이지만 지금까지 flex만 주구장창 써오다가 grid.. 좀 헷갈린다.
• 하지만 배워놓으면 그 동안 flex container만 계속 만들던거보다는 더 좋은 코드를 짤 수 있을 것 같다.

3. 궁금한 내용 / 부족했던 내용  🧐

• 현업에서는 transform을 쓸 때마다 prefix 접두사를 일일이 사용하나? 더 효율적인 방법은?
• 박건후 코치님께서 이런 prefix를 처리해주는 tool이 있다고 했던 것 같은데 찾아봐야겠다..

4. 느낀 점 🤔

Animation은 사용하기 쉽지만 이쁘게 잘 사용하기는 어려운 것 같다. 그리고 미디어쿼리는 지금까지 웹 개발을 해오면서 크게 신경쓰지 않고 PC 화면에만 맞춰서 개발했었는데 모바일이나 태블릿 화면에 맞춰서 개발하는 것도 요새는 필수라고 코치님께서 말씀해주셨다. 생각해보면 당연하다. 나도 스마트폰으로 많은 웹사이트를 들어가는데 PC 화면 크기에만 맞춰져서 모바일에 최적화되어 있지 않다면 사용자 입장에서 이용하기가 꺼려질 것이다. 

 

오늘 실습 내용은 크게 어렵지 않아서 여기서 끝! CSS는 배운 내용을 반복 숙달하는게 중요한 것 같다.

 

내일은 GIT, 다음 주부터는 자바스크립트를 배우게 되는데 일주일 먼저 수업을 듣고 있는 서울분들을 보면 어려워하시는 분들이 많은 것 같다. 뒤쳐지지 않을려면 다음 주 수업도 또 열심히 들어야겠다. 

 

+ 다음 주부터 팀 프로젝트 스터디도 시작되는데 정말 바빠질 것 같다..

+ 코테 너무 어렵다.. 그래도 4개월 동안 꾸준히 하면 뭐라도 되지 않을까'

 

아 그리고 실습 강사님께서 정말 좋은 얘기를 해주셨는데

다음과 같은 구조(A > B > C)로 코드가 짜여졌을 때 에러가 생기면 디버깅을 어디서부터 시작하냐는 질문을 했는데 나는 작은 부분부터 찾아가는게 쉬울거라고 생각해서 C라고 대답했는데 코치님은 A라고 하셨다. 그 이유는 A가 작동하지 않으면 B, C도 작동하지 않기 때문이다. 만약 A에 에러가 있다면 C를 계속 고쳐봐야 잘 작동하지 않는다. 그래서 가장 큰 A부터 B, C는 주석 처리 해놓고 디버깅을 시작하고 잘 작동한다면 다음은 C만 주석 처리하고 B를 살펴본다. 여기서도 문제가 발생하지 않는다면 당연히 C에서 문제가 발생한 것이다!

그리고 C부터 디버깅을 시작하는 것은 또 다른 문제가 있는데, C를 고치다가 원래 문제가 아닌 다른 문제가 발생할 수 있기 때문이다. (이건 맞췄다.) 괜히 문제가 아닌 부분을 건드리다가 잘되는 것도 안되게 만들 수 있다는 것이다.

 

왜 이런 얘기가 갑자기 나왔는지는 지금 생각나지 않지만 이런 내용 너무 유용한 것 같다!