소개
안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.
저서: 코어 자바스크립트
유튜브 채널: FE재남
아티클 및 인터뷰 영상:
원티드) 신입 개발자, 뭘 공부해야 하죠? https://www.wanted.co.kr/events/22_02_s01_b01
인프런) To. 주니어 개발자 https://www.inflearn.com/pages/for-junior-developers-20211207
벤처이몽) 벤처/스타트업 시니어 개발자와 주니어 개발자의 솔직담백 토크쇼 https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
바닐라코딩) 프론트엔드 개발자 취업 마인드셋 https://youtu.be/zX68pyoLctI
강의
전체10수강평
게시글
질문&답변
2024.03.28
gnb 를 이렇게 수정해 봤어여
부모 토글기능 추가: 좋네요. 제가 뭐라고 할 게 있을까 싶습니다 ㅎㅎ zustand로 active 관리: 이부분은 갸우뚱합니다. 굳이 상태관리가 필요한 영역인지 모르겠군요. url path만으로도 active 상태를 알 수 있으니까요. routes 구현방식: 저는 gnb의 이상적이거나 보편적인 방식이 무엇인지는 모릅니다. 그저 제 강의 내용에 알맞은 형태를 고안하고 구현한 것 뿐이에요.
- 0
- 1
- 38
질문&답변
2024.03.25
css 만으로 아코디언 애니메이션을 적용할 경우, 다른 libary들은 코드로 그부분들을 해결해주고 있는걸까요?
withkey님께서 충분히 설명을 잘 해주셨습니다만, 추가로 예시를 들어보겠습니다. 연속하는 두 아코디언 아이템 A, B가 있다고 합시다. A의 실제 높이는 80px , B의 실제 높이는 100px 입니다. transition을 3초 간 주었다고 해보죠. max-height를 100px로 특정 각 컨텐츠의 height가 정해져있지 않기 때문에, transition의 판단기준은 100px가 됩니다. 즉 3초간 0px -> 100px 또는 100px -> 0px로 변화할 것입니다. 그렇다면 A는 전부 열리거나 닫히는 데에 3 x 80/100 = 2.4초 가 걸릴 것입니다. 나머지 0.6초 동안은 멈춰있게 되겠죠. (실제로는 easing함수가 적용되기 때문에 완전히 멈춰있지는 않을 것이지만, 여기서는 편의상 이 시간동안의 변화는 무시하고, 멈춰있는 것으로 간주합시다) 열릴때는 먼저 2.4초동안 높이가 변하고, 나머지 0.6초를 대기하는 반면 닫힐때는 0.6초를 대기하다가 이후 2.4초동안 높이가 변할 것입니다. 반면 B는 전부 열리거나 닫히는 데에 3초 가 걸립니다. 멈춰있는 시간은 없습니다. 따라서 A가 열려있는 상태에서 B를 클릭하는 동작에 대해 A는 0.6초를 대기 하다가 이후부터 닫히는 반면 B는 3초 전체 에 걸쳐서 열리게 됩니다. 0.6초는 제법 짧은 시간이라서 부자연스러운 느낌이 그렇게까지 크진 않습니다. max-height를 200px로 특정 A는 전부 열리거나 닫히는 데에 3 x 80/200 = 1.2초 가 걸립니다. 1.8초 동안은 멈춰있게 됩니다. 반면 B는 전부 열리거나 닫히는 데에 3 x 100/200 = 1.5초 가 걸립니다. 1.5초 동안은 멈춰있게 됩니다. 따라서 A가 열려있는 상태에서 B를 클릭하는 동작에 대해 A는 1.8초를 대기했다가 1.2초만에 닫히는 반면 B는 1.5초동안 열리고, 1.5초 대기합니다. 즉 처음 1.5초 동안은 A는 그대로 있는 상태에서 B만 높아지다가 1.5초 시점부터 1.8초까지는 A와 B 둘 다 아무런 변화가 없이 정지 해 있고, 1.8초 이후부터는 B는 그대로 있는 상태에서 A만 줄어들 것입니다. 따라서 '덜컥거리는' 느낌이 강하게 들게 됩니다. 이런 현상은 max-height와 실제 높이의 차이가 클수록 더욱 선명하게 드러나겠네요.
- 0
- 4
- 173
질문&답변
2024.03.25
class 자동완성 방법은 없을까요?
다음 내용을 참고하시면 될 것 같습니다. https://github.com/JedWatson/classnames/issues/300 다만 매번 .css.d.ts 파일을 생성해야 동작하므로 딱히 좋아보이진 않네요. 혹시 더 나은 방법을 알고 계시는 분은 여기에 공유해 주시면 좋겠네요!
- 0
- 2
- 94
질문&답변
2024.03.25
프로젝트 배포
본 강의는 연습 전용으로, 배포는 염두에 두지 않았습니다. 질문자님의 컴퓨터를 서버로 사용하시면 가능은 합니다만, 컴퓨터가 계속 켜져 있어야 하고, 속도도 느립니다. 상용 서비스에 배포하시려면 다른 방법을 찾아보셔야 해요.
- 0
- 1
- 34
질문&답변
2024.03.22
css 만으로 아코디언 애니메이션을 적용할 경우, 다른 libary들은 코드로 그부분들을 해결해주고 있는걸까요?
강의중에 언급했습니다만, 각 아코디언의 높이를 정확히 특정해주지 않아서(못해서) 그렇습니다. js로 높이값을 계산해서 각각에 부여해주면 예쁘게 동작할거예요.
- 0
- 4
- 173