본문 바로가기
728x90

프론트엔드5

코드잇 프론트엔드 단기심화 마무리 회고 이제 코드잇 단기심화가 끝난지 거의 3주가 지나간다.그 사이에 나는 취업을 하게되었고 수료 막바지에 취업을 하게되어 타이밍 좋게 수료하면서 마무리를 할 수 있게되었다!이력서에 작성하지는 않겠지만 내일배움카드 지원하는대 있어서 수료를 못하게되면 나중에 안 좋을 수도 있으니...되도록 수료를 하고 싶긴했었다. 여튼 코드잇 단기심화에 협업형태로 참여했는데 정말 최악의 경험이였음 물론 진리의 사바사 케바케겠지만!!! 나에게 일어나면 그게 백퍼센트 확률의 경험이 되는게 아니겠어요? 우리팀 같은 경우에는 중간에 디자이너가 탈주를 하질 않나백엔드 1명은 역량이 부족한대 그걸 프론트 탓으로 돌리질 않나 ㅋㅋㅋㅋㅋㅋ 다른 백엔드 분은 정말 좋았음~~ 사실 나는 다른 프로젝트도 있는 편이고 이미 경력이 있어서 안해도 그.. 2025. 7. 11.
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.
728x90
반응형