#styled-component

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

리액트 라우팅을 이렇게 하는게 맞는지 모르겠습니다..

안녕하세요 독학 하고 있는 학생입니다.. 작은 프로젝트로 혼자서 홈페이지를 만들고 있습니다. 우선 로그인 페이지부터 만들고 있는데, 로그인페이지에는 아이디찾기 비밀번호찾기 등등 많은 페이지가 들어가더라구요.. 그래서 리액트 라우터를 공부하고 적용시켰습니다. 코드는 아래와 같습니다. 이렇게 해도 제가 원하는대로 로그인페이지에서 아이디 찾기 페이지로 이동하고 하는 것은 맞는데 App.js에 이렇게 주저리주저리 원하는 것을 다 넣어두면 나중에 전체적으로 페이지를 완성시켰을 때 App.js에 너무 방대한 내용이 들어가지않나..? 싶더라구요.. 그래서 중첩된 라우트도 찾아서 공부했는데 크흡..암만해도 적용이 안됩니다.. 그래서 그냥 이대로 홈페이지를 계속 만들어도 되는지,,아니면 저의 고민을 해결할 방법이 중첩된 라우트가 맞는지 알고싶습니다.. 맞다면 다시 공부해야겠죠 ㅜ.. 답변부탁드립니다 (_ _) import "./App.css"; import { Route, Routes } from "react-router-dom"; import WigTemplate from "./components/wigtemplate"; import FindId from "./components/findId"; import FindPwd from "./components/findPwd"; import SignIn from "./components/signIn"; import NotFound from "./components/notFound"; function App() { return ( <Routes> <Route path="/" element={<WigTemplate />} /> <Route path="/findId" element={<FindId />} /> <Route path="/findPwd" element={<FindPwd />} /> <Route path="/signIn" element={<SignIn />} /> <Route path="*" element={<NotFound />} /> </Routes> ); } export default App; ---------------------------------------------------------- import React from "react"; import styled from "styled-components"; import WigLoginButton from "./wigLoginButton"; import WigHeader from "./wigHeader"; import WigInput from "./wigInput"; import WigFind from "./wigFind"; const WigTemplateContainer = styled.div` height: 100vh; display: flex; align-items: center; justify-content: center; `; const WigTemplateBlock = styled.div` width: 500px; height: 600px; background: #d0ebff; border-radius: 80px; `; function WigTemplate() { return ( <WigTemplateContainer> <WigTemplateBlock> <WigHeader></WigHeader> <WigInput></WigInput> <WigFind></WigFind> <WigLoginButton></WigLoginButton> </WigTemplateBlock> </WigTemplateContainer> ); } export default WigTemplate; ------------------------------------------------------- import React from "react"; import styled from "styled-components"; import { RxDividerVertical } from "react-icons/rx"; import { Link } from "react-router-dom"; const FindBlock = styled.div` display: flex; justify-content: center; `; const ABlock = styled(Link)` color: black; font-size: 0.9rem; text-decoration: none; `; function WigFind() { return ( <FindBlock> <ABlock to="/findId">아이디 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/findPwd">비밀번호 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/signIn">회원가입</ABlock> </FindBlock> ); } export default WigFind;

타입스크립트 'value' is possibly 'null' 에러 옵셔널체이닝으로 해결안되는 이슈

import DateRangePicker from "@wojtekmaj/react-daterange-picker"; import { useDispatch } from "react-redux"; import { dateFetch } from "components/feature/FetchSlice"; import styled from "styled-components"; type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; export default function CustomCalendar() { const dispatch = useDispatch(); const [value, onChange] = useState<Value>([new Date(), new Date()]); return ( <CalendarBox> <Calendar>조회 기간</Calendar> <StlyedDateRangePicker onChange={onChange} value={value} onCalendarClose={() => { dispatch( dateFetch({ startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), }) ); console.log(value); }} /> </CalendarBox> ); } <StlyedDateRangePicker>는 styled component로 만든 DateRangePicker 라이브러리 컴포넌트입니다. DateRangePicker 에서 날짜 2개를 선택하면 value라는 배열에 Date 객체 2개가 들어갑니다. 그리고 onCalendarClose 함수가 동작하면서 redux로 만들어놓은 startDate, endDate 객체에 각각 date를 toISOString() 처리한 값이 할당되는 로직입니다. 날짜를 선택하기 전에는 value={value}의 value 배열요소인 Date객체 값이 null 값이니까 type ValuePiece = Date | null; 타입지정을 해줬습니다. startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), 근데 위 코드의 value[0], value[1] 에러가 나더라구요. 'value' is possibly 'null'.ts(18047) Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date | [ValuePiece, ValuePiece]'. Property '0' does not exist on type 'Date | [ValuePiece, ValuePiece]'. null 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ

styled-component을 사용할 때 많은 props는 어떻게 해결하시나요?

안녕하세요, 개인 프로젝트를 진행 중에 궁금한 점이 있어 현직의 선배님들께 여쭤보고 싶어 질문을 남깁니다! 현재 React 프로젝트에서 styled-components를 CSS-in-JS로 사용하고 있습니다. 하지만 styled-components를 사용하면서 많아지는 props로 인해 JSX의 복잡도가 높아지는 것 같아 고민이 생겼습니다. 개인 프로젝트에서 사용하고 있는 FlexContainer라는 Flex 스타일(정렬방향, 간격)을 적용하는 컴포넌트입니다. const FlexContainer = styled.div<FlexContainerProps>` display: flex; flex-direction: ${({ col }) => (col ? 'column' : 'row')}; gap: ${({ gap }) => gap && `${gap}rem`}; `; <FlexContainer> 컴포넌트를 '내부 컨텐츠 정렬'을 위해 확장한 <FlexContainerAlign>입니다. const FlexContainerAlign = styled( FlexContainer )<FlexContainerAlignProps>` justify-content: ${({ justifyContent }) => justifyContent}; align-items: ${({ alignItems }) => alignItems}; `; <FlexContainerAlign>을 확장하여 추가적인 style을 적용할 수 있는 <FlexContainerStyle>입니다. const FlexContainerStyle = styled( FlexContainerAlign )<FlexContainerStyleProps>` background-color: ${({ background }) => background && theme.colors.grey}; ${({ styles }) => styles && { ...styles }}; `; FlexContainerStyle 컴포넌트를 사용했을 때 아래처럼 많은 props로 인해 복잡해집니다. <FlexContainerStyle justifyContent="space-between" alignItems="center" background gap={1} styles={{ padding: '1rem 1.5rem', borderRadius: '0.5rem', }}></FlexContainerStyle> 혹시 styled-components를 실무에서 사용하실 때 많은 props를 깔끔하게 정리할 수 있는 팁이 있을까요?

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

nextjs styled-component ssr 에러

모든 분들이 격어보셨을 에러에 대해 해결이 되지 않아 질문 드려봅니다. 아래 참고를 통해 nextjs ssr에서 styled-component가 적용되게 시도했습니다 (현재 app router 방식을 사용하고 있습니다) 하지만 동일하게 했을 때 여전히 아래와 같은 오류가 떴습니다. babel, swc 둘 다 시도 했을 때 동일 했고 혹시 제가 놓지고 있는 부분이 있을까요? 4번까지 진행했습니다. nextjs styled-component typescript 오류 : Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component 참고 : https://dev.to/rashidshamloo/using-styled-components-with-nextjs-v13-typescript-2l6m#5

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,,,) 두서없이 적은 글 죄송합니다. 도움 주시면 감사하겠습니다.

styled-components 모듈 관리는 어떻게 하는게 효율적인가요?

리엑트에서 프로젝트 하실 때, styled-components 로 만들어진 모듈 관리는 보통 어떤식으로 하시나요? GPT 한테 물어보니까, 아래와 같은 답변을 얻을 수 있었는데, 컴포넌트 기반 구조 components: UI 컴포넌트를 저장하는 폴더입니다 Button: 버튼 컴포넌트 index.js: 컴포넌트 로직 styles.js: styled-components 스타일 Card: 카드 컴포넌트 index.js styles.js -------------------------------------------------------- 저는 현재 프로젝트에서, Header.jsx : 헤더 컴포넌트 StyledHeader.js : 헤더 styled-components 로 관리하고 있습니다. styled-components 에 대한 모듈 관리의 일관성은 생산성 측면에서 중요하다고 생각하는데, 다들 프로젝트에서 어떤식으로 관리하시는지 궁긍합니다!

Nextjs 에서 부분적으로 FOUC 가 발생하는 것 같습니다.

안녕하세요. 오늘도 Next의 심오함에 허우적대고 있는 주니어 프론트엔더 입니다. Next 에서 디자인관련 프레임워크와 라이브러리로 Ant-Design 과 Styled-components를 선택하여 프로젝트를 진행하는 중입니다. 그리고 방식은 기본 Antd의 컴포넌트를 import 하여 필요 부분만 Styled-components로 덮어 커스텀하는 방안으로 택하였습니다. 이전에 Next는 기본적으로 서버에서 html을 생성하려는 경향이 있기에 css-in-js는 가끔가다 hydrating 과정으로 인해 스타일이 적용되지 않는 부분만 먼저 보여진다고 들었습니다. 그래서 현재 next 13을 사용하고 있어 (app routing 방식이 아닌 구 버전인 pages routing 방식을 사용하고 있습니다.) next.config.js에서 styled-components를 인식하게 도와주는 설정 코드를 작성하였습니다. - 해당 설정은 최하단에 첨부하였습니다. 문제는 FOUC 관련 이슈가 일부 컴포넌트에만 나타납니다. Button컴포넌트와 Input컴포넌트를 위와 같은 스타일 방식으로 제작을 하였는데, 페이지가 리프레쉬가 되면 Button 컴포넌트는 기존 styled-components의 커스텀을 유지하지만, Input 컴포넌트는 styled-comopents의 커스텀을 입히기 전의 Ant-Design의 기본 디자인으로 렌더링되는 문제가 발생하였습니다. 그래서 제가 진행했던 FOUC 관련 설정에 문제가 있는지 궁금하여 질문을 드리려고 합니다!

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

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

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

안녕하세요. 경력 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. 개인프로젝트] 를 매일 반복하며 이직을 준비하고 있습니다. 이대로 계속 이직을 준비하면 될지, 아니면 다른 무언가를 더 준비해야할 지, 앞으로의 이직 준비 방향에 대해 알려주시면 감사하겠습니다. 추가로 혹시 이력서 피드백 해주실 수 있는 분 계시면 말씀 부탁드립니다... 서류에서 계속 떨어지다보니 개발자 입장에서 피드백을 꼭 받아보고 싶습니다...!

Next.js app router 다크모드 깜빡 거림 문제

혹시 next app router에서 다크모드 설정 깜빡거리는 현상 해결해 보신 분 계신가요? 테마는 로컬스토리지에 저장해서 초기에 보여줍니다. Next 14 + styled-components 사용중입니다. 기존 page router에서는 _document.tsx에서 script 태그 dangerouslySetInnerHTML 사용해서 DOM요소 렌더링 이전에 로컬스토리지 저장된 모드 가져와서 관련 코드 실행 되게 끔 해서 깜빡임 현상을 해결했었습니다. app router에서 layout.tsx에 Script태그 이용해서 똑같이 적용하면 DOM요소가 렌더링 되고나서 실행이 되어서 기존 다크모드설정 후 새로고침 시 깜빡거리는 문제가 발생합니다ㅠㅠ 기존에 _document.tsx랑_app.tsx에 작성된 코드들은 layout.tsx에서 관리하는 걸로 알고 있는데 동작 방식이 다른 건지 기존과 다르게 동작합니다.. 여러 옵션을 사용해봐도 똑같네요... 관련 자료도 너무 없어서 nextjs github issue 뒤져보니까 똑같지는 않지만 비슷한 문제를 겪고 있는 issue가 있던데 해결이 안 된 거 같더라구요.. 이러한 상황에는 어떻게 해야할까요..? 개인 프로젝트고 해결이 된다면 정말 좋겠는데, 면접에서 이렇게 해결하지 못한 상황에 대해서는 어떻게 말해야할지도 고민입니다..

next.js CSS라이브러리 선택

안녕하세요. 취업준비를 하며 사이드 프로젝트로 next.js를 공부중입니다. css-in-js 가 편해서 styled-component를 프로젝트에 활용해왔는데 최근 app router 방식 (13, 14) 에서는 아직 css-in-js 를 ssr 환경에서 지원하지 않지만 stylex는 가능하다는 말에 swc > babel 로 변경하고 stylex를 쓰던 중 문제가 발생하였습니다. 'use server' 코드에서는 async 만 export 가능한데 swc를 채택한 next.js 에서 babel을 고려하지 않아 async 를 못 알아보고 에러가 난다는 것입니다. ( 추측입니다... ) 결국 많은 경험이 도움이 될 것이라는 긍정적인 마인드와 함께 css-in-css 라이브러리를 배워보고자 합니다. 혹시 next.js 프로젝트를 진행중인 선배님들은 어떤 css라이브러리를 사용중이신가요?

웹뷰 전역 레이아웃 스타일 관련 질문드립니다 !

안녕하세요 ! 웹 프론트엔드를 공부하고 있는 뉴비입니다. 현재 웹뷰(?) 프로젝트를 진행하고 있는데요 ! Nextjs와 styled-components를 이용해 개발하고 이를 PWA를 적용해 모바일에서 실행 가능하도록 하는것이 목표입니다. 페이지 작업 도중 개발자 도구의 각 모바일 기기 환경에서 레이아웃이 달라지는 문제가 발생하고 있는데요 ! 예를 들어, 아이폰 SE환경 (width 375px) 에서는 페이지의 컨텐츠가 얼마 없음애도 불구하고 y축 스크롤이 생기는 문제, 이보다 큰 기기인 아이폰 14 pro (width 430px) 등에서는 아래쪽 여백이 너무 많아 허전한 느낌이 듭니다 ㅠㅠ 이를 해결하려면 어떤 식으로 접근해야 할까요 ? 현재 globalCss는 캐치테이블(https://app.catchtable.co.kr/)의 Wrapper div를 참고하여 대강 적용해둔 상태입니다 .. !

React로 Table 만드는 것에 대한 질문입니다!

회사에서 Fetching 한 데이터를 위에서 가공 후에 Table Component에 주입을 하는 로직을 개발을 했습니다. 만약 데이터(행)가 100개이고 열의 개수가 9개일 경우 900개의 데이터를 주입을 하면 될 것으로 생각을 했고, 렌더링 속도에 문제가 없을 것으로 예상을 했습니다. 근데 렌더링 시 약 3초 정도의 연산 속도가 걸리게 되었고 console을 찍어보니 객체 안에 다른 많은 값이 있는 것을 알게 되었습니다. 1. Table에 가공된 데이터를 주입 시에 어떤 형식으로 데이터를 주입을 시켜야 할까요? 2. 만약 Table에서 하나의 Column 값만 바꾸고 싶다면 테이블 전체 렌더링이 아닌 다른 어떤 방식을 사용하실 건가요? 3. TableDataType도 맞게 작성을 했는지 잘 모르겠습니다. 4. 추측 상으로 Styled Component도 렌더링 속도 저하의 문제가 되는 것 같은데 렌더링 속도 저하 원인에 대한 정확한 이유를 아직 파악하지 못했습니다. (주입하는 데이터 형식의 문제인 것 같은데 1번과 이어지는 질문이기도 합니다)

스타트업 프론트엔드 1년차 이직 고민

안녕하세요 스타트업에 다니고 있는 프론트엔드 1년차 개발자입니다 최대한 빨리 이직을 준비해서 가고 싶은데 방향성을 어떻게 잡아야 할 지 모르겠어서 조언을 구하고자 이렇게 글을 올립니다 프론트엔드가 회사에 저 혼자여서 사수 없이 회사에서 운영하는 서비스가 2개여서 2개의 웹사이트을 배포하여 서비스를 운영하고 있습니다. 제가 회사에 들어와서 웹사이트를 만들 때 사수도 없고 대표님도 개발에 대한 지식이 없으셔서 기획-디자인-개발까지 2-3달만에 만들라고 하시더라구요 (개발하고 배포까지 1-2달 걸렸습니다) 그래서 제가 비전공자이고 막 부트캠프를 졸업했어서 정말 기초적인 것들로 작업을 했습니다 (사용한 프론트 기술스택은 React, styled-components,recoil(atom만) 등을 썻구요
소셜로그인, 반응형 작업, lighthouse로 성능 최적화도 진행해보았습니다) 1. 프론트엔드 공고를 보면 nextjs,typescript,redux 혹은 react-query가 거의 필수적으로 들어가는 것 같은데 
이거를 다 완벽하게 배우고 적용시켜서 이력서에 적어내기에는
시간도 너무 오래걸릴 것 같고 코딩테스트나 cs면접 준비도 해야하는데 현실적으로 불가능할 것 같아서
 선택과 집중을 하고 싶은데 어떻게 준비를 해야할까요?
 nextjs,typescript,redux 혹은 react-query가 들어간 간단한 사이드 프로젝트를 하나 만들어서 이력서에 적어내면 될까요?
 2. 제가 만든 사이트를 이력서에 적어서 냈을 때 인사담당자 분들이 꼼꼼히 살펴보실까요? 그러면 리팩토링을 하는게 좋을까요? 3. 자세하게 좀 들여다보면 모든 부분에서 많이 부족한 것 같은데 이직을 해도 될까 싶습니다ㅠㅠ 
현재 제 실력에서 어떤 부분을 추가하거나 정리해보면 큰 장점이 될까요?
 4. 현재 포괄임금제 + 최저보다 적은 연봉(식대제외)을 받고 있는데 제 경력으로 이직할 때 연봉을 어느정도까지 부를 수 있을까요?
 구체적인 수치와 협상방법을 알려주실 수 있을까요? 주절주절 얘기가 많았네요 읽어주셔서 감사합니다 답변해주시면 정말 너무 감사드리겠습니다ㅠㅠ

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

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

radio 버튼 클릭시 변경하는 form 값이 한박자 늦게 변경되는 문제가 있습니다.

radio버튼에서 onClick으로 react hook form에 있는 값을 바꾸고 있습니다. styled-compontent에서 props값을 전달하면 될것 같은데 한 박자 늦게 바뀝니다. 제 생각에는 랜더링이 onClick이 반영되기 전에 실행되고 있는 것 같은데 한 박자 늦게 랜더링을 시키는 방법이 따로 있는 걸까요? 아니면 styled-component의 props를 버튼 클릭했을 때 연동시킬 수 있는 방법이나 키워드가 따로 있나요?

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

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

styled-components props 사용 시 prefix ($)

리액트 프로젝트를 진행하고 있고, styled-components 을 사용해 스타일링하고 있습니다. 저번 프로젝트에는 뜨지 않았던 prefix ($)를 붙이라는 warning 메세지가 뜨는데 $ 를 붙이는 것에 대해서 어떻게 생각하시나요? 주니어 개발자라 동향을 따라가는 게 좋을 것 같아 질문 남깁니다...!

개발 공부를 어떻게 하는게 좋을까요? (feat. 프로젝트)

얼마 전 Next.js로 개인 프로젝트를 진행했습니다. 그런데 프로젝트를 진행해보며 제가 어떤 방식으로 개발 공부 뱡향성을 잡아야하는지 혼란스러워 질문드립니다 ,, 🙏 처음 Next.js 쓸 때는 복붙 ,, 같은 기능도 복붙해서 파일 여러 개 만들기를 하고, 서버 컴포넌트와 클라이언트 컴포넌트에 대해 잘 알지 못한채로 프로젝트를 했었습니다. (+ 상태관리나 ,, 이런 것도 아예 모르고 개발했었습니다 ,,) 이번에 제대로 공부해서 기능을 구현해보고 싶어 다시 시작해서 완성했습니다. 그런데 제가 작성한 코드를 다 이해하며 작성했지만, **제가 작성한 코드가 좋은 코드인지? 에 대한 의문이 생겼습니다.** 그래서 팀 프로젝트도 참여해보며 같은 프론트 팀원 분의 코드를 확인해보며 좋아보이는 부분은 참고도 했지만, 이 방법도 한계가 있었습니다. 더 잘해보고 싶어 빨리 보여져야하는 이미지는 이미지를 미리 로드한다거나, next/image로 이미지 최적화를 하고 최대한 코드 중복을 줄이고자 공통 컴포넌트들을 만들기 위해 노력하긴 했었습니다. (나중에 스토리북 이라는 라이브러리를 알게되어 이걸 사용해보지 못한게 아쉽긴 했습니다.) 그래도 많이 부족한거 같아 어떻게 더 나은 개발을 해야할지 잘 모르겠습니다 ,, 첫 프로젝트에서는 부트스트랩 외에는 사용해보지 않아 이번에 제대로 다양한 기술을 써보고자 시도도 해보았습니다. (> 서버 상태 관리를 위해 tansack query도 사용해보고 클라이언트 상태 관리를 위해 recoil을 사용하고, 스타일링에는 css in js가 궁금해 styled components, 직접 어느정도 깔끔한 디자인을 하고싶어 피그마 툴을 이용해보았습니다. 소셜 로그인도 넣어보고 몽고 db 사용하며 데이터베이스도 연결해보았는데 ,, 막상 완성하고 나니 제가 많이 부족하다는 생각이 들었습니다.) 🤔 제가 작성한 코드가 좋은 코드인지 ,, 더 나은 성능을 위해 어떤 개발을 하면 좋은지와 같은 부분은 제가 어떻게 학습하는게 가장 좋은 방법일까요? 또한 어떤 것을 더 배워서 적용해보는게 좋을까요? ,, (제가 생각했을 때 프로젝트를 완성은 했지만, 제 프로젝트의 매력적인 점이 없는거 같아 너무 아쉬운거 같습니다.)

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

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

react에서 Nextjs 마이그레이션

Nextjs마이그레이션 작업을 진행할려고하는데, 사실 막막한 부분이 여러가지가 있습니다. 첫번째는 CSS-in-JS인데 기존 react프로젝트의 styled-component로 제작되어 있는데, 제가 알기론 CSS-in-JS의경우 서버컴포넌트에선 현재 작동하지 않는걸로 아는데 보통 이럴경우 어떻게 진행하나요? 대체방안으로 따로 다른 CSS 라이브러리 등을 이용하는지 궁금합니다 두번째는 데이터 패치관련된 부분인데 Nextjs에서 fetchAPI 부분을 Nextjs에 맞게 캐시와 revalitate옵션을 제공해주는 형태로 제공해주는데, 기존에 프로젝트는 axios를 사용중인데 이것 또한 변경을 해야되는지 궁금하네요 현재 서버렌더링과 클라이언트 렌더링으로 나눠놓긴했는데 나누고보니 상당히 이슈가 많을걸로 예상되어 질문드립니다

기존 프로젝트 리펙토링 관련

안녕하세요 현재 React와 Express로 웹 개발을 하고있는 학생입니다. 프로젝트를 하나 둘 진행 할 때마다 점점 배우는게 많은데요, 예를들어 첫번째 프로젝트에서는 JS를 사용하고 css를 파일 하나에 몰아 관리하며 커밋 메세지 컨밴션이나 브랜치 전략을 제 나름의 방식대로 정하고 했다고 한다면 두번째 프로젝트는 TS를 사용하게되고 Styled-Component를 통해서 스타일을 관리하게 되었고 커밋 메세지나 브랜치 전략 또한 조금더 일반적으로 바꾸어 진행하게 되었습니다. prettier과 eslint도 적극적으로 사용했구요 두 프로젝트 모두 현재 배포되어 있는 상태이고 지속해서 개발하고 있는 상황일 때 첫 번째 프로젝트 전체를 리펙토링(ts를 적용하거나 styled-component 도입 등)하거나, 커밋 컨밴션과 브랜치 전략을 새로 구성하는것이 맞을까요? 아니면 별다른 리펙토링 과정 없이 원래 해왔던 대로 계속 진행해도 상관없을까요?

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

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

프론트엔드 준비 1년 시점에서 백엔드 공부해봐도 좋을까요?

안녕하세요. 프론트엔드 준비한지 1년정도 된 병아리입니다. HTML/CSS/JS는 퀄리티는 좋지 않지만 클론코딩, 인터렉티브 페이지 등 구현은 자주했었고 프로젝트는 바닐라JS로 한번 진행해봤습니다. React는 한달 바싹 공부하고 3개월짜리 프로젝트를 진행해보았습니다. React는 state, 기본hook, styled-component등 거의 기본문법만 사용하고 구현하였습니다. 현재 JS는 DeepDive책을 읽으며 객체지향, 프로토타입 등을 공부하고 있고 React는 상태관리 Redux 등을 공부하고 있습니다. 우연한 기회에 강의를 무료로 듣게 되었는데 웹 접근성, 프론트엔드 A to Z 두가지가 있습니다. 위 두가지는 끌리지않아서 백엔드쪽을 보니 간단한 API를 만드는 자바스프링 강의가 있더라구요. 두번의 프로젝트를 진행하면서 힘들었던점이 백엔드 지식이 전무하다보니 의사소통이 걸려서 아직 서버와의 통신에 대한 지식도 부족하고 프론트쪽을 구현하면서 이렇게 서버와 연결하면 정상적으로 구동이 될까?라는 의구심이 끊임없이 들었던터라 들어보려합니다. 자바는 생활코딩으로 경험해보았고 스프링은 경험이 없습니다. 프론트에 더욱 집중하는것이 좋은지, 백엔드도 어떻게 구현되는지 찍먹해보는게 좋은지 조언을 구하고 싶습니다.

emotion 주로 어떤 방식으로쓰이나요?

css in js 방식 중 emotion에 css 타입이있고 styled-component같이 styled타입이 있는데 주로 어떤 방식으로 쓰이나요?

프로젝트에서 색상 관리는 어떻게 하시나요?

프론트인데 어쩌다 보니 디자인도 살짝 걸쳐서 보고 있습니다. styled-component에서 DefaultTheme { color : { red : ~~ ; blue : ~~; } , ...} 을 통해 관리하려고 하는데요, 네이밍이 고민됩니다.. 밝은 순서부터 어두운 순으로 red-0, red-1 이런 식으로 정하려고 했는데 같은 계열의 색이 추가될 때마다 계속 나머지 값들도 수정해줘야 하는 것 같아서요. 혹시 색상 관리 방법에 대한 노하우가 있을까요?

Next.js13 스타일링 어떻게 하시나요?

보통 저는 styled-component 를 주로 많이 사용했는데 이번에 app route 방식을 경험해볼겸 사이드플젝 하나 하려하는데 styled-component 는 안되는게 이것저것 많더라구여 다들 어떻게 하고계신가요?? 그리구 현업에서 Next 13 다들 마이그레이션 하시는 분위기인가요?

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

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