728x90 Frontend28 Styled-components VS Tailwind 회사내에서 Styled-components로 구성된 작업물이 있어 코드를 살펴보니..흠...이거 굉장히 귀찮은데라는 생각이 들었음..테일윈드에 벌써 익숙해져 그렇게 느꼇을지도 모른다.인수인계문서에 styled-components를 채택한 이유가 적혀있지 않았고 이전 담당자도 정확히 모르는 것 같았다 과연 이 프로젝트에서 어떤 장점이 있길래 사용하게 됐는지 알아보려고 한다. 작년을 기점으로 테일윈드의 점유율이 더욱더 많아지고 있다.styled-components의 경우 사용하는 사람만 계속 사용하는 느낌...줄지도 늘지도 않는 우선 styled-components는 css-in-js로 자바스크립트 안에서 css를 작성하게된다. 그럼 css-in-js의 장점인 유지보수, 컴포넌트와, 재사용성이 높아지는 .. 2025. 7. 3. zustand를 상태관리 라이브러리로 선택한 이유 vue에 비하면 react는 상태 관리 라이브러리가 정말 많다.Vue에는 Vuex라는 사실상 공식 솔루션이 있고, Composition API 이후로는 Pinia가 자연스러운 대안으로 자리 잡고 있지만React는 최소 떠오르는 것만 5개였다... 리액트에 포함된 Context Api를 물론 최적화해서 쓸 수 있는 방향도 있다.하지만 팀으로 작업을 하다보면 빼먹을 수도 있는 부분이 생기고 아무래도 개인으로 하는 것보다는 사이즈가 큰 프로젝트이다보니 안전한 방향으로 갈 수 있는 라이브러리를 도입하기로 했다. 이러한 기준을 두고 라이브러리를 선택하기로 했다. 러닝 커브가 낮고 직관적인 API협업 시 구조 파악이 쉬울 것필요 시 확장성 확보 가능타입스크립트와 궁합이 잘 맞을 것Next.js 환경에서도 안정적으로.. 2025. 5. 28. 과제 테스트 회고 - 4일간의 테스트동안 나는 과연 뭘 얻었나 4일동안 개발 가능한 테스트를 과제로 전달받았다.가장 고민이 많았던 부분은 알집을 풀어서 해당 알집들의 파일을 트리로 구현하는 것이였다.최적화를 어떻게 해야될 지 코드 짜는 와중에도 제법 시간을 할애했던 것 같다. 이 부분을 제외한 다른 부분은 사실 큰 어려움이 없었다.번들사이즈를 최소화하고 초기 렌더링 시에 불필요한 렌더링 안하게 하고 최대한 빠르게 유저가 볼 수 있도록 했다. 트리 최적화 방식 고안depth가 굉장히 깊을 경우를 고려해서 root 경로에 있는 폴더와 파일만 보여주기로 결정했다.Viewport 기준으로 렌더링 하는 방식도 추가로 고려했어야함폴더 클릭 시 그때 그때 하위 파일들을 보여줌 → Lazy loading한번 클릭한 폴더의 하위 파일은 caching{ { name: "fo.. 2025. 5. 16. 시멘틱(Semantic)이란? - 그럼 div는 언제 쓰지? 시멘틱이라는 단어는 프론트엔드 개발자라면 한 번쯤은 들어봤을 단어다의미론적이라는 단어보다는 보통 시멘틱 태그라는 말이 더 익숙하다. 시멘틱이란 the meaning of a piece of code 코드 조각의 의미를 말한다. 즉 시멘틱이란 무엇이 보여지느냐보다는 어떤 목적 혹은 역할을 하는지를 의미한다. 단순 프론트엔드 개발에만 속하는 것이 아닌 컴퓨터 공학 전반에서 쓰이는 개념이다. 함수이름이나 변수이름을 지을 때 다들 고민하는 이유는 "어떻게 하면 더 함수의 기능을 파악하기 쉬울까?" 라는 고민에서 나온다. 이것도 시멘틱 고민의 일종이다 다음 마크업이 시멘틱 마크업의 대표적인 예라고 할 수 있다.다음의 두 태그는 보여지는 것은 동일하다. 하지만 그 의미가 다르다고 할 수 있다. h1태그를 사용하면.. 2025. 5. 2. Frontend Challenge: February Edition 참가 후기! (javascript, css) + winner 선정!!!😆 dev.to 프론트엔드 챌린지 참가후기! + Winner 선정!메일을 확인하다 눈에 띈 Dev.to의 Frontend Challenge!!항상 글은 자주 읽어왔지만 이렇게 챌린지가 있는 건 또 처음 알았다!게다가 시간도 넉넉하게 남아 참을 수 없었다!!! 챌린지 내용은제공되는 HTML구성은 변경 불가능하고 js, css로만 변경가능한 챌린지였다제법 재밌을 거 같아 바로 시작! 전체적인 틀안에서 구조변경이나 레이아웃 변경은 불가능햇다하지만 자바스크립트로는 가능하기때문에하나의 html이지만 주제별로 분리하는 것이 UI/UX측면에서도 편리할 것 같아 분리하는 것으로 정했다. 분리한 페이지들을 라우터로 연결하는 것이 나을까..싶다가도 그렇게까지는 큰 의미가 없을 것 같아네비게이션 바를 만들고 display n.. 2025. 3. 7. Netlify 환경변수(.env) 설정하기 배포는 에러없이 잘 됐는데 화면이 안보이길래 콘솔을 확인해보니Installations: Missing App configuration value: "projectId" (installations/missing-app-config-values).환경변수 에러가 낫구나당연함~~ .env파일은 git에 안 올렸으니까..이렇게 테스트 서버가 중요하다!!!테스트 서버가 있었으면 바로 알았을텐데~~~~그리고 빌드하기전에 환경변수 확인하는 습관가지기 netlify에서 환경변수 넣는건 너무 쉽다 Site configuration - environment variables 환경변수별로 하나씩 넣거나 여러개 한 번에 넣을 수 있음!import file로 환경변수가 많아서 여러개 한 번에 넣음환경변수명=값 형식으로 넣어주면.. 2025. 2. 14. 이전 1 2 3 4 5 다음 728x90 반응형
