728x90 프론트엔드4 Styled-components VS Tailwind 회사내에서 Styled-components로 구성된 작업물이 있어 코드를 살펴보니..흠...이거 굉장히 귀찮은데라는 생각이 들었음..테일윈드에 벌써 익숙해져 그렇게 느꼇을지도 모른다.인수인계문서에 styled-components를 채택한 이유가 적혀있지 않았고 이전 담당자도 정확히 모르는 것 같았다 과연 이 프로젝트에서 어떤 장점이 있길래 사용하게 됐는지 알아보려고 한다. 작년을 기점으로 테일윈드의 점유율이 더욱더 많아지고 있다.styled-components의 경우 사용하는 사람만 계속 사용하는 느낌...줄지도 늘지도 않는 우선 styled-components는 css-in-js로 자바스크립트 안에서 css를 작성하게된다. 그럼 css-in-js의 장점인 유지보수, 컴포넌트와, 재사용성이 높아지는 .. 2025. 7. 3. 과제 테스트 회고 - 4일간의 테스트동안 나는 과연 뭘 얻었나 4일동안 개발 가능한 테스트를 과제로 전달받았다.가장 고민이 많았던 부분은 알집을 풀어서 해당 알집들의 파일을 트리로 구현하는 것이였다.최적화를 어떻게 해야될 지 코드 짜는 와중에도 제법 시간을 할애했던 것 같다. 이 부분을 제외한 다른 부분은 사실 큰 어려움이 없었다.번들사이즈를 최소화하고 초기 렌더링 시에 불필요한 렌더링 안하게 하고 최대한 빠르게 유저가 볼 수 있도록 했다. 트리 최적화 방식 고안depth가 굉장히 깊을 경우를 고려해서 root 경로에 있는 폴더와 파일만 보여주기로 결정했다.Viewport 기준으로 렌더링 하는 방식도 추가로 고려했어야함폴더 클릭 시 그때 그때 하위 파일들을 보여줌 → Lazy loading한번 클릭한 폴더의 하위 파일은 caching{ { name: "fo.. 2025. 5. 16. 포트폴리오03 - styled components는 버린다. 일 년 만에 작업하는 포트폴리오 이번엔 정말 이직을 해야 하기 때문!!!! 다시 이어서 해보자고 오 작년의 나 제법 잘 해뒀네? 칭찬해....작년에도 진심이긴 했구나 하지만 페이지 전반에 메뉴가 없어서 이동이 약간은 불편하다고 느꼈다. 포트폴리오 사이트에서 얼마나 이동하겠어~?라고 할 수 있지만 없는 것보다 낫지 않겠는가 기존의 작업하던 코드를 보니 styled components를 사용했었다. 작년에는 학습용으로 사용하기는 했었다만 굳이 포트폴리오에 적용할 이유는 없어 보인다. 유지보수가 엄청나게 많은 사이트도 아닐뿐더러 6페이지 정도밖에 안 되기 때문에 클래스 이름 겹치기도 힘듦 이번달 안으로 빠르게 완성해야 하기 때문에 scss로 작업을 전환했다. 오 여기에 마침 적절한 메뉴가 있네 너 헤더로 승급.. 2023. 12. 2. 포트폴리오02 - 깔끔한 UI는 역시 어렵다 여백의 미라는 말이라도 있을만큼 디자인에 있어서 여백은 참 중요한 것 같다. 1px 2px이 다른데 직접 만들려니,, 참으로 어려워서 결국에는 구글링의 힘을 빌렸다. 기준은 최대한 따라하기 좋으면서도 내눈에 깔끔한 것으로 Davina씨 감사합니다 https://dorota1997.github.io/react-frontend-dev-portfolio/ Davina Griss | Front-end Developer dorota1997.github.io 타이핑 애니메이션은 다른 프로젝트에서 구현한 적이 있어 손쉽게 가져왔다. 과거의 나에게 감사하다. 물론 그때도 내가 구현하진않았다. 애니메이션은 쉽지않다 .typewriter span { overflow: hidden; /* Ensures the content.. 2022. 12. 26. 이전 1 다음 728x90 반응형
