#tailwind

자기주도적인 개발이 너무 어렵습니다.

안녕하세요.🙇‍♂️ 올해 3월에 부트캠프를 수료하고 취업준비를 하고있는 프론트엔드 지망생입니다. 부트캠프를 통해 js, react, vue, tailwind, zustand등의 스택을 주로 사용하며 프로젝트를 만들었습니다. 부트캠프를 진행하면서 react에서 useEffect훅은 컴포넌트의 생명주기 사이 ~때에 사용한다, 페이지 라우팅 기능을 사용하려면 리액트 라우터 같은 라이브러리를 활용해서 써야한다, 테일윈드가 현재 개발시장에서 가장 많이 쓰이는 CSS 라이브러리다 이런 정도로 기술스택들이 학습되었습니다. 이제 부트캠프도 수료하고 혼자 공부하는 시간이 찾아왔는데 어떤것 부터 어느정도 까지 손을 대야할지 감이 잡히질 않습니다. 1. 어떤것 부터 해야하는지 예를 들어 현재 저에게 가장 부족하다고 생각하는 스택은 next 프레임워크, zustand 외의 전역 상태관리(recoil, redux), 필수 개발 외의 인프라적인 스택?(Storybook, monorepo, sentry, jest )이라고 생각하는데 이 지식들의 우선순위를 정하는 방법과 이 외에도 개발자 시장에서 반드시 장착하고 있어야 하는 필수 스택에 무엇이 있는지를 알고싶습니다. 2. 어느정도 까지 손을 대야할지 예를 들어 React 같은 경우엔 하나의 프로젝트를 만드는 역량까진 가능해졌지만 프로젝트 안에서 퀄리티 있는 디자인 패턴이라던지, 사용해보지 못한 수많은 리액트 메서드들을 딥다이브 해봐야 할 거 같은데, 어느정도 까지 공부해야 너무 깊게 들어가지 않고, 현재 개발시장에서 경쟁력 있는 지식을 쌓았다고 할 수 있는지의 경계를 모르겠습니다. 강사님의 강의에서 벗어나 혼자서 주도적인 학습을 진행하려고 하니 시간낭비를 하게 될 거 같고, 겉햝기 식으로 공부하는 나날을 보내게 될까 심적으로 큰 부담이 됩니다.. 현업 개발자님들의 조언을 듣고싶습니다!!🙇‍♂️🙇‍♂️🙇‍♂️

프론트엔드 이직 준비로 어떤 것들을 하는게 좋을까요?

안녕하세요. 경력 2년차 프론트엔드 개발자입니다. 이전에 두 개의 회사에서 프론트엔드 개발자로 일했는데 불행하게도 두 회사 모두 임금체불로 인해 퇴사를 하게 되었습니다. 그래서 이번에는 50인 이상의 규모를 가진 회사로 이직하는 것을 목표로 이직을 준비하고 있습니다. Next.js, React, Typescript @tanstack/react-query, Context API, Recoil Vanilla-extract, emotion, styled-components, tailwind-css, Sass 위와 같은 스킬들을 공부 및 경험해보았고, Vanilla-extract, tailwind-css를 제외한 스킬들은 실제 업무에서도 활용하였습니다. 현재 저는 [1. 코딩테스트, 2. 기술블로그, 3. 개인프로젝트] 를 매일 반복하며 이직을 준비하고 있습니다. 이대로 계속 이직을 준비하면 될지, 아니면 다른 무언가를 더 준비해야할 지, 앞으로의 이직 준비 방향에 대해 알려주시면 감사하겠습니다. 추가로 혹시 이력서 피드백 해주실 수 있는 분 계시면 말씀 부탁드립니다... 서류에서 계속 떨어지다보니 개발자 입장에서 피드백을 꼭 받아보고 싶습니다...!

Nextjs with tailwind기반 ui라이브러리 질문

프론트엔드 취업전인 학생입니다. Rollup으로 라이브러리 번들 관련하여 질문입니다. 제작 현시점은 사용자가 컴포넌트를 import 하였을때 사용자가 tailwind.config.ts에 node_module경로의 제 라이브러리를 경로를 설정해야 스타일이 적용이 되는상황입니다. 개발자도구 element에는 텍스트상 적용이돼있는데 해당 방법말고는 못찾았습니다. 개발자분들의 좋은의견 부탁드립니다. 아래는 현재 rollup.config.js입니다.

react 모바일웹 헤더가 Safari 상단 url 바 가림 현상

React / typescript / tailwindcss 헤더를 fixed / sticky로 고정을 해서 크롬에서는 잘 적용됬는데 아이폰 safari 브라우저에서 설정 - 단일탭으로 하고 들어가면 첨부파일처럼 상단 URL 바를 제 헤더가 가려버리는 현상이 나옵니다. index.html에 아래 속성도 추가된 상태입니다ㅠㅠ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 저와 비슷한 현상인 분 계실까요??

프론트엔드 지망생. 한심하지만 길어진 공백. 잃어버린 공부 방향성. 조언이나 의견 부탁해도 될까요 ?

안녕하세요. 커리어리에서 자주 질문하면서 현직 개발자분들의 다양한 의견을 듣고 많은 도움을 받고있는 취준생입니다. 그 중엔 가끔 쓴소리하시는 분들도 계시지만 그런 부분들이 진심으로 제 고민거리에 대해 생각해주시는 거 같아 오히려 믿을만한 이야기구나 하고 받아들이는 경우도 많네요. 본론부터 말하자면 공부방향을 제대로 잡지 못하는 듯 하여 현업 분들이나 저와 같은 취준생 위치에 있는 분들의 다양한 의견을 듣고 싶습니다. 저는 국비를 수료 후 근 1년 가까이 개발에 손을 놓아 공백이 있습니다. 수료 후 5개월 정도는 만들어 진 협업 포폴로 이력서를 내면서 알고리즘 공부하고 간간히 그렇게 보냈구요. 그후 6~7개월 정도는 금전적인 문제로 공장,업체 단기알바 등을 하며 아예 공부에 손을 놓게 되었습니다.. (구차한 변명이지만 별 수없죠. 후에 면접 기회가 생겨도 이 공백에 대한 답변은 이렇게 할 수밖에 없을듯해요.) 아무튼 현재 다시 마음을 다잡고 배워왔던 것들을 복습하며 공부에 다시 전념하고 있습니다. 1~2달 전부터 쇼핑몰 프로젝트 하나를 만들고 있고요 (서버리스 서비스를 이용해서 db 연동하고 혼자 만들고 있습니다). 추가로 JS DeepDive 정독하면서 좀 중요하다 싶은 개념은 노션에 따로 정리해두고 다시 읽어보면서 눈에 익히고 있습니다. 그리고 기술면접 대비 질문들도 인터넷에서 찾아보면서 마찬가지로 노션에 정리하고 있고요. 네트워크 부분을 정확히 짚고가고 싶어서 인프런에 속성정리된 네트워크 강의 정독했습니다. 추가로 제가 next.js 로 공부했는데 react 기반 프레임워크지만 react와는 또 사소한 여러 차이점이 있는 거 같아 (ex. 페이지 라우팅 방식, csr 과 ssr 등) 유데미에 근본강의로 불리는 강의 (redux 도 같이 배우는) 구매해서 듣고 있습니다. 얼마전에는 타입스크립트 강의를 완강했는데 그 때쯔음부터 뭔가 내가 제대로 하고 있는게 맞나? 의문이 들고 있습니다. 스스로 불가피한 공백은 만들어 버렸지, 제대로 배포되는 프로젝트도 없지, 그렇다고 나이가 적은 것도 아니지 (아직 30은 아니지만 곧이라...)..이런 불안감들이 계속 머리속에 멤도니 잡생각이 많이 나고, 그러다보니 뭔가 열심히 공부는 하는데 확신이 안 섭니다. 객관적으로 보면 스스로에 대한 결핍이 좀 심해진것도 같구요. 며칠 전에 프로젝트 하다 z-Index 문제로 몇 시간을 chatgpt, 구글링을 하며 씨름하다 보니 아..css도 아직 모자란가? 라는 생각이 들어서 풀강의로 잘 정리된 css 강의도 하나 들을까? 이런 생각도 하고...css 생각하다보니 sass도 배워야 할 거 같고..그렇게 찾아보면 요즘 편리하게 tailwind 도 많이 쓴다는데 이것도 배워야겠지? ..막 그냥 바람결 제대로 만난 갈대마냥 막 흔들거려요. 글을 훑어보니 너무 제 감정에 치우쳐서 막 휘갈긴거 같네요. 긴 글 정독하기 싫은분들도 많으실 듯 하여 간략히 정리해 보겠습니다. 1. 현재 국비 수료 후 공백이 1년 넘게 있으나, 그 공백기는 개인사정? (금전문제) 등의 이유로 딱히 개발부분에 있어 뭔가 월등히 노력한 부분을 어필할 게 없음 2. 제대로 배포되고 있는 프로젝트도 없는 상황에 현재는 쇼핑몰 개인 프로젝트 하나 하고 있음 (서버리스로 DB 연동, 개인 프로젝트) 3. 그 밖에 유데미의 react 핵심강의 듣고 있고, js deepDive 정독, 기술면접 대비 질문들을 노션에 정리하며 관련 개념들을 상기하며 공부 중 (알고리즘은 따로 공부 안하고 있습니다. 혹 이 부분 중요하다 생각되시면 의견부탁드립니다.) 4. 현재 목표는 올해 안에 최소 2개의 프로젝트를 배포과정까지 끝내고(1개는 가능하면 협업으로) 연말 쯤 부터 이력서 미친듯이 넣고자 함. (현재 최종목표는 중소기업입니다. 워라벨, 연봉 크게 안따지고 최소한 배우고 성장할 배경이 되는 기업을 목표로 두고 있습니다. 중소에 그런 기업이 별로 없겠지만요..) 뭘 더해야 할까요? 그리고 이 상황에 백엔드 공부하는 건 좀 어리석은 짓인가요? (백엔드 기반 지식도 어느정도 필요하다고 하는데 전 그 정도를 모르겠어요) 여러분의 솔직한 의견 부탁드립니다. (걍 개발자 때려쳐라. 넌 답없다. 같은 솔직발언도 괜찮습니다. 제가 우둔하고 고집머리는 쎄서 그런 말 들어도 쉽게 포기 못하는 성격이지만...모르죠. 여러 사람들이 같은 식의 답변을 한다면 또 되새겨서 다시 생각해 볼 수도 있고요. 지금이 갈림길인 거 같습니다. 마음을 제대로 다잡고 영끌하던지, 아니면 그러고싶지는 않지만 포기해야하는지)

css에서 % 단위

만약 어떤 요소의 width를 % 단위를 사용하면 부모 요소의 width를 기준으로 한 퍼센트 값이 적용되잖아요. 그런데 부모 요소가 width가 지정되어 있지 않고 하위 컴포넌트들을 감싸기만 해서 유동적인 width를 가지는 상황이고 부모의 부모 요소가 고정된 width를 가지는 상황이라면, 부모의 부모 요소의 width를 기준으로 퍼센트 값이 되는건가요? react와 tailwind를 사용한 예시로 다음과 같은 html 구조가 있다고 할 때, 저는 {item}을 감싸는 div의 width에서 %를 쓰면 <div className="flex items-center w-full gap-[30px]"> 요소의 width를 기준으로 될 줄 알았는데 <div className="w-full overflow-hidden"> 요소를 기준으로 한 값이 적용되는 거 같더라구요. 원래 css의 %단위가 무조건 직계 부모의 값을 기준으로 하는게 아니라 직계 부모의 값이 고정된 값이 아니면 더 상위의 부모들 중 고정 값인 요소를 기준으로 하게 되는 건가요?

모노레포 프로젝트에서 tailwind intellisense

최근 시작한 프로젝트에 pnpm + turborepo 구성으로 모노레포 구조를 도입하여 진행중에 있습니다. packages/tailwind-config 에 tailwind에 대한 패키지를 구성하고, 다른 프로젝트에서 해당 패키지를 import해 사용중입니다. 이 때, tailwind css가 정상적으로 적용은 되나, tailwind intellisense 익스텐션이 작동을 안하는 문제가 있습니다만, 혹시 해결 방법이 있을까요 ?

요즘 들어 많이 보이는 형태의 UX/UI 레이아웃 디자인을 지칭하는 용어가 있을까요?

안녕하세요. 최근에 쇼핑몰이나 온라인 서비스를 브라우저로 서칭하다보면 자주 보이는 형태가 있는데요. 모바일 크기인데 데스크톱이든 태블릿이든 상관없이 스마트폰 크기 하나만 지원하는 제품이 많이 보이더군요. 스마트폰보다 큰 화면에서 접속하면 양 옆이 footer 역할을 하는 형태의 제품 레이아웃을 보이기도 합니다. 반응형 대신 모바일 디자인만 고려하면 된다는 점에서 관심이 생겼는데, 이러한 레이아웃 디자인을 부르는 명칭이나 용어가 있을까 해서 질문 드립니다. Tailwind CSS를 접하면서 모바일 우선(Mobile-first)이라는 용어는 알고 있습니다. 그렇다면 저런 형태는 모바일 온리(Mobile-only)라고 부르는 걸까요? 특정 사이트를 언급해도 되는지 모르겠지만, 링크 걸어보고 문제 시 알려주시면 수정하겠습니다. - 페이브릴 https://fabrill.co.kr - 밸런스 https://www.balance.site - 모두의셔틀 https://www.modooshuttle.com - 팬심 https://fancim.me 조금 더 넓은 범위의 레이아웃을 보여주는 - 모요 https://www.moyoplan.com

NextJS 14 project 시작 단계에서 에러가 발생했어요... 최대한 빠른 답변 부탁드립니다.

npx create-next-app 라는 명령어로 프로젝트를 시작했는데요. 아무것도 건들이지 않은 상태에서 app/layout.tsx 파일을 클릭했는데 맨 위에 에러가 발생해져 있더라구요.. 내용을 보니깐 Parsing error: __classPrivateFieldGet(...).at is not a function eslint 이런 에러가 있고 해당 에러가 tailwindcss.config.ts 파일 맨 윗줄에도 발생해져 있습니다. 어떻게 해야하는 건가요..?

현업에서 사용되는 프론트엔드가 궁금합니다.

안녕하세요, 독학으로 개발을 배워 풀스택으로 스타트업 파트타임 및 개인 프로젝트를 하고 있는 대학생입니다. 프론트엔드는 여전히 명확한 기준이 없고 기술이 계속해서 발전 중이라 개발자마다 기준과 사용하는 프레임워크/라이브러리가 상이한 것으로 알고 있는데요, 큰 가닥으로는 react 같은 CSS-in-JS, tailwind 같은 atomic CSS, BEM 규칙 같은 전통적인 방법 이렇게 3가지로 나뉘는 것 같습니다. 최근 프로젝트에 tailwind를 도입하였는데, 프로젝트 규모가 커질수록 반복되는 스타일을 컴포넌트화 하기에도 한계가 있고, 일관성이 떨어져서 불편하다고 느꼈습니다. 그럼에도 tailwind에서 자주 사용하는 일부 유틸리티 클래스는 여전히 편리한 점과 매력이 정말 많다고 느꼈는데요, 예를 들어 버튼에 마진 하나 주기 위해 새로 클래스를 정의하는 것보다 mb-4로 간단하게 끝낼 수 있다는 것은 가독성을 매우 올려주었습니다. 저는 현재 tailwind에서 자주 사용하는 margin, display 등의 유틸리티 클래스만 별도로 만들어서 간단한 spacing을 할 때에는 atomic css를 사용하고, 컴포넌트와 스타일링은 기존 방식의 클래스 기반 css를 사용 중입니다. 혼자 독학하여 코드를 짜다보니, 결과물은 그럴싸하지만 너무 임의의 방법을 채택한 것이 아닌가..? 라는 생각이 들어 질문을 드립니다. js 를 사용하지 않고 프론트엔드 작업을 하는 경우 현업에서는 어떤 방식을 사용하고, 제 방법에서 발생할 수 있는 문제가 무엇인지 궁금합니다ㅠㅠ 감사합니다!

프론트엔드 취준생의 고민을 들어주세요

안녕하세요. 3개월간 프론트엔드 부트캠프 수료후 독학 + 사이드 프로젝트 진행하고 있는 27세 취준생입니다. 디자이너였기에 눈에 보이는 것과 사용자경험을 만드는 것이 흥미롭고 뿌듯함을 느꼈고 그래서 프론트엔드에 흥미가 생겨 커리어전환을 하기로 했었습니다. 백엔드 쪽도 흥미가 있어서 먼저 프론트로 공부 및 취업 후 백엔드도 차차 공부해나가려고 했어요. 다행히 전 공부하고 새로운 것을 익히는 것을 좋아하기에 개발자가 적성에 맞는다고 생각합니다. 후에 학점은행제나 방통대를 다니면서 컴공에 대해서 공부를 하려는 목표도 있습니다. 요즘 시장이 좋지 않아서, 특히 프론트엔드는 많이 힘들더라고요. 채용시장을 보니 일반 기업들은 백엔드 직군과 자바를 사용하는 개발자를 많이 뽑는 것 같더군요. 그래서 아예 자바 백엔드 교육을 국비로 듣고 그쪽으로 취업을 해야할까 하는 생각도 듭니다… 물론 프론트도 제대로 해보지 않은 상태에서 분야를 바꾸는 것이 좋지 않다고 생각하지만 향후를 생각하면 시간을 좀 투자하더라도 백엔드로 진입하는 것이 유리하지 않나 생각도 드네요… 공부할 의지는 있고 열심히 할 자신도 있습니다. 독학도 나태해지지 않고 꾸준히 이어나갈 자신도 있어요. 다만 지금 방향을 잡지 못하고 있는 상태라 막막한 상태입니다. 부트캠프 커리큘럼과 교육이 좋지 못했기에 국비를 신중히 알아보고는 있으나 찾다보면 어디가 좋은지 더 혼란스럽기만 하고, 나이가 있는지라 마음이 조급해지니 판단도 잘 서지 않습니다. ㅜㅜ 어떻게 하면 좋을지 조언이나 충고 해주시면 감사할 것 같습니다. 현재 배운 언어 : 자바스크립트 스텍 : react,typescript,nextjs, tailwind, styled-component,recoil, react-query

tailwindCss ::before ::after 어떻게 사용하시나요??

안녕하세요. 질문있습니다.
 nextjs14 + tailwindCss 구조의 프로젝트를 진행중입니다.
 ::before와 ::after를 사용할 일이 많은데, tailwind에서 before 사용할 때 속성 하나하나에 before:*를 작성하는 방법 말고
 조금 더 편한 방법 없을까요??

NextJS13 모바일 구분 및 기술 문의

안녕하세요 nextjs13 으로 프로젝트를 진행할려고 하면서 문의 사항이 있습니다. 전제 조건으로 하이브리드앱으로 구현 예정이며, 웹뷰 방식으로 웹, 앱을 같이 사용할려고 합니다. (레이아웃을 웹, 앱 별도 구성 예정) 궁금한게 많아서 질문이 많이 있네요. 전문가분들 도움 부탁드립니다. 1. react-device-detect 모바일 여부를 구분하여 레이아웃을 구성할려고하는데, MobileView의 경우 use client 에서만 작동되는 것같습니다. MobileView을 사용하여 ssr 사용은 불가능한건가요? 2. style-component nextjs12 에서는 style-component를 사용되었는데 13으로 올라가면서 css-in-js방식을 사용 못하는것으로 보이며, tailwindcss, postcss를 권장하는걸로 보이는데 맞나요? 추가로 style-component 를 use client로 사용할 경우 하위에 들어가는 컴포넌트들이 다 csr 형식으로 되는게 맞는건가요? 3. RCS(React Server Components) children 으로 화면을 넘겨서 사용하는데 중간에 use client 를 사용하면 하위도 csr 형태로 인식이 되는건지 문의 드립니다. 감사합니다.

"HTML,CSS,JS에 대한 깊은 이해"가 무엇을 의미하는걸까요?

채용공고마다 있는 필수조건인데 범위가 넘 넓고 넘 주관적인거 같아서 아예 갈피가 안집힙니다 tailwind,css in js,react,vue 등을 이용한 프로젝트를 순수한 html css js로 다시 작성할 수 있는 수준인지를 물어보는것인지 MDN에 있는 html태그,css속성,js문법등을 최대한 많이 외우라는 것인지.. 컴파일러 지식을 물어보는 것인지..

Next.js에서 React Portal을 잘못 적용한건지 궁금합니다.

안녕하세요! next.js에서 모달 구현을 위해 react portal을 사용하였습니다. 그런데 제가 의도한 것과 다른 결과가 나와 코드를 잘못 작성한건지, 제가 portal에 대해 이해를 잘못 하고 있는건지 궁금해 질문드립니다. 현재 next.js 14.0.4 + tailwind 환경에서 작업하고 있습니다. // src/app/layout.tsx (사진1 첨부) // src/components/modal/ Modal.tsx (사진2 첨부) // 실제 출력 화면 (사진3 첨부) portal을 사용하면 같은 body 태그안에 있는 형제 컴포넌트의 z-index의 영향을 받지 않는다고 알고 있는데, 첨부한 사진과 같이 <body> 안 형제 컴포넌트 하위에 위치한 컴포넌트의 z-index의 영향을 받고 있습니다. portal로 출력할 부분을 children으로도 받아보고, 포탈 컴포넌트 안에서도 작성해보고 했는데 모두 동일한 결과가 출력됩니다. 포탈 컴포넌트에도 z-index를 적용해줘야 하는건지, 제가 코드를 잘못 작성한건지 알고 싶습니다. 감사합니다!

프론트엔드 개발자가 되고싶어요..

안녕하세요 저는 대학교4학년 재학중인 학생입니다. 공대생이지만 컴퓨터쪽은 아니구요 저는 노마드코더를 통해서 공부를 시작했습니다 제가 할수있는건 html,css,javascript,typescript,react정도가 있습니다 상태관리는 recoil을 사용해봤고, 스타일링은 styled-components랑 tailwindcss를 사용해봤고 지금은 거의 tailwindcss만 사용중입니다. 핑계라면 핑계일수도 있겠지만 저는 아직 한번도 cs, 알고리즘 공부를 해본적이 없습니다 그냥 코딩을 하는게 좋아서 이 쪽 꿈을 꾸게되었습니다 그래서 막 알고리즘 cs공부 같은건 하지않고 매일 뭔가를 만드는데만 몰두했습니다(학교 일주일에 두번 가는거빼고 평일 주말엔 코딩만 합니다) 그런데 이제 졸업을 하고 취직을 할려고 하니 이때까지 만들었던 것들은 포트폴리오로 제출하기에는 사실 너무 그때그때 만들어보고싶거나 구현해보고 싶은거 위주로 하다보니 지금부터 새로 만들어야할거 같구요.. 이제 cs, 알고리즘도 공부를 시작해야할거같은데 어디서부터 어디까지 공부를 해야할지도 잘 모르겠고 입사를 하기위해서 무엇을 준비해야할지도 잘 모르겠네요 사실 cs,알고리즘을 공부할수록 이게 필요한건지도 잘 모르겠고 제가 좋아하던게 멀어저만 가는거 같아요.. 프로젝트 하나 더 제대로 만드는게 좋을거 같기도 하고 잘 모르겠어요 어떻게 해야할지.. 물론 대기업을 가면 좋겠지만 아니여도 괜찮아요 그냥 코딩을 계속해서 할 수있고 배울게 많은 곳이면 좋을거 같은데 어떻게 준비를 해야할까요..? 긴글 읽어주셔서 감사합니다!!

프론트엔드 이직은 어떻게 준비하나요?

안녕하세요! 6개월차 프론트엔드 신입입니다. 사실 이직을 바로 생각하는건 아니고 지금있는 회사에서 1년은 넘기고 이직이나 중고신입으로 대기업에 가고싶습니다 하지만 여러가지 준비는 해야하는걸로 생각이 들고, 어떻게 하면 좋을지 여기서 앞서나간 선배님들의 조언을 듣고자합니다. 현제 제 상태는 이렇습니다. 컴퓨터공학 22년 차석졸업 계약직 인공지능강사 6개월 현직 프론트엔드 개발자 해커톤 수상 4회 (1등 2회, 2등 1회, 3등 1회) 교육부 장관상 1회 소프트웨어 특허 1개 소프트웨어 저작권 9개 경험) 소프트웨어 동아리 회장, 교내 연구생 알고리즘) 프로그래머스 레벨3 외국어) 영어 프리토킹 스택) sveltekit(현직),nextjs,tanstack-query,redux-rtk,playwright,tailwind,css,styled-compnent,sotrybook,mocking service worker 취업을 할때는 대회에서 상을 받았던 이력으로 회사에서 좋개 봐줘서 빠르게 입사했지만, 대기업에 중고신입이나 이직은 많이 다를거 같아 고민입니다. 따로 토이프로젝트나, 오픈소스 기여를 하면 좋다는걸 알지만 개인적으로 회사에서 프로젝트가 재미있어 기존 회사 코드 성능 향상에 몰두하고있습니다. 회사코드를 보고 다듬고 동료들과 커뮤니케이션하는게 좋아, 자진해서 거의 15시간정도 회사 일만하고 있지만 정작 나중에 되서 다른회사 지원하면 안좋게 보이까 걱정도 조금됩니다 그래서 이곳에서 도움을 구하고자합니다 긴글 읽어주셔서 감사합니다

TailwindCSS 는 왜 '프레임워크'인가요?

Scss 는 css 전처리기라고 불리고 styled-components 는 (CSS in JS 개념) 라이브러리 인데, Tailwind CSS 는 왜 '프레임워크'라고 불릴까요? 라이브러리와 프레임워크의 차이에 대해서는 알겠는데, Tailwind 는 어떤 이유로 '프레임워크'라고 불리는지 잘 모르겠습니당! ㅜㅜ

CSS 프레임워크를 현업에서 적절하게 사용하는 부분이 궁금합니다.

안녕하세요. 이번에도 도움만 받는 주니어 프론트엔드 개발자 입니다. 금일의 고민은 css 프레임워크의 활용입니다. 그동안은 CSS 적응력을 기르기 위해서 구성되어있는 bootstrap이나 mui 말고, styled-components, tailwindcss 정도로 개발을 진행해왔습니다. 이 부분이 더 커스텀하기에 용이하기도 해서 말이죠. 이번에 현업에서 개발을 들어가게 되었는데, 빠른 진행력을 위해서 어느정도 레이아웃까지는 CSS 프레임워크의 간편함을 빌려야되겠다는 생각이 문득 들게 되었습니다. 여기서 궁금한 부분은 CSS 프레임워크를 사용하여 다른 컴포넌트까지 빠르게 만들 수 있으나, 기획과 디자인의 용도에 맞는 커스텀 제작에 어려움을 겪을 수도 있을 것 같고 또한, 용량으로 인해 사용자 경험이 저하될까봐 우려가 됩니다. 하지만, 속도도 포기할 순 없단 말이죠? 선배 개발진분들의 현업에서 빠른 UI 제작을 위한, 그리고 모든 요구사항과 최대한의 최적화를 고려한 CSS 활용에 대한 팁을 듣고 싶습니다. 괜찮으시다면, css 프레임워크를 추천을 해주시면 더욱 감사할 것 같습니다 :) 감사합니다. 아! 참고로 Nextjs 를 사용하여 제작할 예정입니다. next 초기 설정에서 tailwindcss 를 밀어주는 느낌이 없지 않아 있어서 마음이 흔들립니당

TailwindCSS는 현업에서 잘 안쓰나요?

Styled Components랑 SCSS도 써보고 했지만 TailwindCSS 한 번 맛보고는 저는 무조건 개인 프로젝트할 때 TailwindCSS를 쓰는데요, 정말 편해서 아주 애용하는 기술입니다. 그런데, 채용 공고에서 보이는 대부분의 기업이 Styled Components가 1순위고 그 다음은 Emotion이나 SCSS더라구요. Tailwind를 거의 본 적이 없습니다. Styled Components나 SCSS를 현업에서 사용하시는 분들은 TailwindCSS에 대해서는 좀 부정적인 이미지가 있는 건가요? 면접 볼 때마다 TailwindCSS에 대한 질문을 받곤 하는데, Styled Components 쓰는 기업 상대로 '나는 Tailwind가 너무 좋더라 이런 좋은 점이 있다' 이런 얘기하니까 괜한 얘기나 하고 있는 거 아닌가 하는 고민만 자꾸 드네요.

TailwindCSS가 Next.js Pre-Rendering 에서 동작하지 않아요

Next.js 13.4 에 App directory 를 사용 중입니다. Pre Rendering 된 결과물에서 보면 TailwindCSS 가 적용되어있지 않네요. 원래 동작이 이런건지? 아니면 별도의 설정 방법이 있는건지 궁금합니다. https://shubhamverma.me/blog/server-side-rendering-of-tailwind-css-styles-in-next-js 이 방식을 사용해봤는데 되지 않네요 ㅜ

여러분의 회사에서는 어떤 CSS 라이브러리를 사용하시나요?

Q. 회사에서 어떤 CSS 라이브러리를 사용하고 계시며, 장점과 단점을 알려주실 수 있나요? Q. 반응형 웹사이트와 유지보수의 관점에서, 어느 css 라이브러리를 선택하는 것이 좋을까요? 회사에서 웹사이트를 개발 중인 신입 프론트엔드 개발자입니다. 기존에 Vue로 작성된 레거시 코드를 React로 마이그레이션하고 있습니다. 기존 코드의 스타일링은 css 파일을 import하는 방식으로 사용되었습니다. 이를 React로 변경했을 때, 클래스명이 중복되는 문제가 있어서, css-module을 사용하는 중입니다. (참고로 디자인은 정해져있는 상태입니다.) 앞으로 웹사이트를 반응형으로 제작해야하고, 기능을 추가해야합니다. 또 추후에 다른 사람이 코드를 보고 디자인을 수정해야하는 상황이 올 때, 쉽게 변경할 수 있게 만들고 싶습니다. 제가 익숙한 css 라이브러리는 Tailwind인데, 이 라이브러리는 클래스명이 복잡성이 있고, className이 길어질 수 있다는 단점 때문에, 일부 개발자들이 기피한다고 들었습니다. 제가 선택할 라이브러리를 앞으로도 회사에서 계속 사용하게 될 것 같은데, 어떤 것이 프로젝트 진행에 도움이 될 지, 혹시나 선택한 라이브러리가 걸림돌이 되진 않을지 불안합니다. 여기 계신 개발자분들은 어떤 css 라이브러리를 사용하고 계시며, 어떤 장점이 있나요?

tailwindcss와 styled component 동시에 사용하셨던 분 계신가요?

제곧내입니다. nextui 프레임워크가 예뻐보이는데 tailwind 사용하면 좀 더 편할 것 같아서 둘 다 설치했는데요, nextui의 코드 복사 후 붙여넣으니 충돌이 나더라구요 ㅠㅠ 혹시 이런 방법은 좋지 않은 방법인가요..?

박스 사이징이 고정되어있는데 바꿀 수 없나요?

간절합니다 ㅠㅠ... Next.js(Typescript)와 TailwindCSS를 활용하여 웹사이트를 만들고 있었는데 처음이라 미숙해서인지 아직 실수가 많습니다. 저기 붉은색 박스와 파란색 박스가 화면에서 100%로 되었으면 하는데 지금 계속 화면 크기를 줄이면 저 현상이 일어납니다... 아직 초보라 많이 미숙한데 해결 방법이 있나요?

style.css와 tailwindcss 관련 질문!

style.css는 모든 부분에서 잘 적용되는데 tailwindcss에서 color이나 size 등의 요소는 적용이 안되더라구요.. 제 생각엔 우선순위 문제일 수도 있을 것 같은데.. tailwindcss의 우선순위를 결정하려면 class의 우선순위도 고려해야 하나요?

tailwind를 사용중입니다. 관련된 vscode extension 추천해 주실 수 있나요?

React에서 tailwind를 사용중입니다. class를 자동으로 채워준다거나. 뭔가 참고할수 있다던가 하는 extension있나요? 이미 사용하고 있는 분들의 정보를 듣고 싶습니다.

웹 데브에서 어떤 테크스택을 사용하시나요?

하나의 웹앱을 만들 때에도 다양한 테크스택을 사용할 수 있고 어떤 테크스택을 사용하느냐는 개발 트랜드에 따라서 조금씩 바뀌는 것 같아요. 그래서 요즘 개발자 분들은 어떤 테크스택을 사용하는지 궁금해서 질문 올립니다. 프레임워크, DB, ORM, CSS 등 말그대로 개발에서 사용하는 툴들을 알려주세요 ㅎㅎ 제가 사용하는 테크스택은 (프론트에 치중되어 있습니다) 이렇습니다! - NextJS - Prisma - Tailwind - Supabase

react 오픈소스 UI 라이브러리 쓰시나요?

이번에 사이드 프로젝트에 새로 합류하게 되었는데, 전임 프론트 개발자 분이 Ant Design을 적용해놓고 가셨더라고요. 프로젝트 코드도 다 Ant Design 컴포넌트들로 적용이 된 상태입니다. 저는 사실 회사에서 이런 UI 라이브러리를 써본적은 없고 bootstrap 이나 tailwindcss로 구현된 내부 컴포넌트들 밖에 안 써봤는데요. 혹시 실제 사용하는 서비스에서도 Ant Design 같은 UI 라이브러리를 사용하는지 궁금합니다! 추가로 최근 Storybook을 잠깐 봤는데, 이거는 UI 라이브러리인가요?

Next js에서의 CSS

안녕하세요 . 현재 Nextjs랑 global.scss(_app.tsx 에 물려있는)로만 프로젝트가 이루어져있는데, 페이지랑, 컴포넌트의 개수가 많아지다보니, 페이지별 또는 컴포넌트별 또는 아예 파일별로 css파일을 분리하려고 합니다. Next js 에서 파일별로 css를 다루기 위해서는, 여러가지 방법 중. index.moduel.css 파일을 생성 . header { // 스타일작성 } index.tsx에서 "import styles from "./index.moduel.css" //임포트 <div className={styles.header}>hello</div> //스타일적용 이런식으로 사용하는것으로 알고 있습니다. 궁금한것이, 이런식으로 classname을 자체적으로 생성해주면서 , 스타일을 적용하는 방식의 경우에는 document.getElementByClassName 식의 접근은 불가한데, 1. 이를 id나 name으로 대체하고 사용하는 것인지요 ? 2. Next js에서의 파일별로 CSS를 작성하고 싶을때 어떤 것을 사용하고 계신지요?(CSS,SCSS,tailwind,styled component,,,) 두서없이 적은 글 죄송합니다. 도움 주시면 감사하겠습니다.

Next.js Image에 스타일 적용 방법

안녕하세요! Next.js Image 컴포넌트에 tailwindcss로 스타일을 씌우려고 하는데 스타일 적용 방법이 있는지 궁금합니다! Image 컴포넌트에 classname으로 적용이 안되는 것 같아서요 :)