태그 목록
- 전체보기(114)
- 백준(7)
- prisma(5)
- NEXTSTEP(4)
- nextjs(4)
- TDD(3)
- PlanetScale(3)
- axios(3)
- MVC(2)
- hydration(2)
- invalidateQueries(2)
- jest(2)
- e2e-test(2)
- hydration-error(2)
- ps(2)
- styled components(2)
- React-Portal(2)
- git(2)
- 객체(2)
- cookie(2)
- DP(2)
- react-query(2)
- react hook form(2)
- js(2)
- CRUD(2)
- reactjs(2)
- model(2)
- mongodb(2)
- GSAP(2)
- lexical scope(2)
- cypress(2)
- 참조 데이터 depth(1)
- 백준 1931 JS(1)
- API Endpoint 차이(1)
- Dev Server has been initialized using an options object that does not match the API schema(1)
- promise(1)
- import(1)
- useModal(1)
- 순수함수(1)
- CommonJS ES(1)
- options.allowedHosts[0] should be a non-empty string(1)
- Prisma CRUD(1)
- Git 전략(1)
- API(1)
- ORM(1)
- setInterval 최적화(1)
- npm(1)
- schema(1)
- Analysis paralysis(1)
- push(1)
- framework(1)
- library(1)
- 26043(1)
- Scope Chaning(1)
- restful api(1)
- 팀프로젝트 회고(1)
- react spring(1)
- 골드2(1)
- queue(1)
- 호이스팅(1)
- scema prisma code formatter(1)
- 강준님(1)
- next-step(1)
- named export(1)
- 백준 2749(1)
- Proxy(1)
- react router dom(1)
- 백준 1639 JS(1)
- npm 모듈 만들기(1)
- 11286(1)
- 백준 9471(1)
- 쿠키(1)
- 백준 11650 JS(1)
- duplicated status code(1)
- Interceptor(1)
- 골드1(1)
- schema prisma prettier(1)
- 11279(1)
- 4889(1)
- PlanetScale 사용법(1)
- 10845(1)
- setQueriesData(1)
- Factory Pattern(1)
- memoization(1)
- 도메인 분리(1)
- validation(1)
- Commit Convention(1)
- dynamic export(1)
- 도메인(1)
- DeepCopy(1)
- axios interceptor(1)
- conflict 해결(1)
- children type(1)
- React(1)
- JS 클린코드 5기(1)
- 1328번(1)
- 트리쉐이킹(1)
- status code(1)
- 피사노 주기(1)
- route 차단(1)
- image preLoad(1)
- 동적 라우팅 optional rendering(1)
- git amend(1)
- 골드3(1)
- yarn.lock(1)
- redux-react(1)
- React Spring Proxy(1)
- 동적인 ESLint 설정(1)
- multipart/form-data(1)
- props drilling(1)
- python(1)
- 프레임워크 라이브러리 차이점(1)
- PlanetScale 환경설정(1)
- reactjs img preload(1)
- export default(1)
- export(1)
- useParams(1)
- domain(1)
- react-modal(1)
- graphql(1)
- 경주게임(1)
- styled component(1)
- ESLint(1)
- webpack(1)
- 10799(1)
- 내가 만든(1)
- git flow(1)
- 1158(1)
- endpoint(1)
- 10덕any(1)
- next/link(1)
- redux-toolkit(1)
- 플래티넘(1)
- 백준 10422 JS(1)
- 유효성 검증(1)
- 회고록(1)
- slidingwindow(1)
- github action(1)
- object.freeze(1)
- PlanetScale 설정(1)
- Husky(1)
- Junah(1)
- ReactJS GSAP(1)
- ECMA Script Module(1)
- 소프트코딩(1)
- regex(1)
- cacheTime(1)
- promise.allSettled(1)
- di(1)
- pscale(1)
- 비동기 병렬 처리(1)
- Spread연산자(1)
- useMemo(1)
- pnpm-lock.yaml(1)
- this(1)
- 양방향 바인딩(1)
- 상태관리 도구(1)
- memoizing(1)
- nvm(1)
- vercel deploy(1)
- 비즈니스 로직(1)
- DeepCopy depth(1)
- 오버 엔지니어링(1)
- useCallback(1)
- 상수관리(1)
- 그리디(1)
- 협업(1)
- tailwindCSS(1)
- React18(1)
- ReactNode(1)
- refactor(1)
- Invalid options object(1)
- 백준 1912 JS(1)
- C(1)
- 트러블슈팅(1)
- 백준 2559 JS(1)
- 번들링(1)
- array(1)
- 1927(1)
- 관계형데이터베이스(1)
- atcoder(1)
- 웰-노운(1)
- CJS(1)
- React Spring Boot(1)
- code splitting(1)
- pq(1)
- useLocation(1)
- ReactJS setInterval(1)
- cookie path(1)
- 하드코딩(1)
- RDBMS(1)
- next js(1)
- lazy export(1)
- getQueryData(1)
- code splitting named export(1)
- test className(1)
- 우선순위큐(1)
- SyntaxError: Cannot use import statement outside a module(1)
- webapi(1)
- 큐(1)
- 백준 10814 JS(1)
- 우아한테크코스프리코스(1)
- module not found(1)
- Tailwind React(1)
- this bind(1)
- redux(1)
- closure(1)
- createPortal(1)
- allSettled(1)
- 3차원 배열(1)
- OS(1)
- scope(1)
- Object.freeze depth(1)
- staletime(1)
- 노마드코더(1)
- python constant(1)
- error415(1)
- npm i --no-shrink-wrap(1)
- ci(1)
- React.memo(1)
- 참조(1)
- testcode(1)
- linebreak-style(1)
- NextJS GSAP(1)
- branch convention(1)
- refactoring(1)
전체보기 (114)백준(7)prisma(5)NEXTSTEP(4)nextjs(4)TDD(3)PlanetScale(3)axios(3)MVC(2)hydration(2)invalidateQueries(2)jest(2)e2e-test(2)hydration-error(2)ps(2)styled components(2)React-Portal(2)git(2)객체(2)cookie(2)DP(2)react-query(2)react hook form(2)js(2)CRUD(2)reactjs(2)model(2)mongodb(2)GSAP(2)lexical scope(2)cypress(2)참조 데이터 depth(1)백준 1931 JS(1)API Endpoint 차이(1)Dev Server has been initialized using an options object that does not match the API schema(1)promise(1)import(1)useModal(1)순수함수(1)CommonJS ES(1)options.allowedHosts[0] should be a non-empty string(1)Prisma CRUD(1)Git 전략(1)API(1)ORM(1)setInterval 최적화(1)npm(1)schema(1)Analysis paralysis(1)push(1)framework(1)library(1)26043(1)Scope Chaning(1)restful api(1)팀프로젝트 회고(1)react spring(1)골드2(1)queue(1)호이스팅(1)scema prisma code formatter(1)강준님(1)next-step(1)named export(1)백준 2749(1)Proxy(1)react router dom(1)백준 1639 JS(1)npm 모듈 만들기(1)11286(1)백준 9471(1)쿠키(1)백준 11650 JS(1)duplicated status code(1)Interceptor(1)골드1(1)schema prisma prettier(1)11279(1)4889(1)PlanetScale 사용법(1)10845(1)setQueriesData(1)Factory Pattern(1)memoization(1)도메인 분리(1)validation(1)Commit Convention(1)dynamic export(1)도메인(1)DeepCopy(1)axios interceptor(1)conflict 해결(1)children type(1)React(1)JS 클린코드 5기(1)1328번(1)트리쉐이킹(1)status code(1)피사노 주기(1)route 차단(1)image preLoad(1)동적 라우팅 optional rendering(1)git amend(1)골드3(1)yarn.lock(1)redux-react(1)React Spring Proxy(1)동적인 ESLint 설정(1)multipart/form-data(1)props drilling(1)python(1)프레임워크 라이브러리 차이점(1)PlanetScale 환경설정(1)reactjs img preload(1)export default(1)export(1)useParams(1)domain(1)react-modal(1)graphql(1)경주게임(1)styled component(1)ESLint(1)webpack(1)10799(1)내가 만든(1)git flow(1)1158(1)endpoint(1)10덕any(1)next/link(1)redux-toolkit(1)플래티넘(1)백준 10422 JS(1)유효성 검증(1)회고록(1)slidingwindow(1)github action(1)object.freeze(1)PlanetScale 설정(1)Husky(1)Junah(1)ReactJS GSAP(1)ECMA Script Module(1)소프트코딩(1)regex(1)cacheTime(1)promise.allSettled(1)di(1)pscale(1)비동기 병렬 처리(1)Spread연산자(1)useMemo(1)pnpm-lock.yaml(1)this(1)양방향 바인딩(1)상태관리 도구(1)memoizing(1)nvm(1)vercel deploy(1)비즈니스 로직(1)DeepCopy depth(1)오버 엔지니어링(1)useCallback(1)상수관리(1)그리디(1)협업(1)tailwindCSS(1)React18(1)ReactNode(1)refactor(1)Invalid options object(1)백준 1912 JS(1)C(1)트러블슈팅(1)백준 2559 JS(1)번들링(1)array(1)1927(1)관계형데이터베이스(1)atcoder(1)웰-노운(1)CJS(1)React Spring Boot(1)code splitting(1)pq(1)useLocation(1)ReactJS setInterval(1)cookie path(1)하드코딩(1)RDBMS(1)next js(1)lazy export(1)getQueryData(1)code splitting named export(1)test className(1)우선순위큐(1)SyntaxError: Cannot use import statement outside a module(1)webapi(1)큐(1)백준 10814 JS(1)우아한테크코스프리코스(1)module not found(1)Tailwind React(1)this bind(1)redux(1)closure(1)createPortal(1)allSettled(1)3차원 배열(1)OS(1)scope(1)Object.freeze depth(1)staletime(1)노마드코더(1)python constant(1)error415(1)npm i --no-shrink-wrap(1)ci(1)React.memo(1)참조(1)testcode(1)linebreak-style(1)NextJS GSAP(1)branch convention(1)refactoring(1)
변화에 강한 styled-component 코드 작성하기
네? 값이 바뀔 수 있다구요? 디자이너님과 함께 메인 페이지 작업을 시작했다. 결론부터 말하자면 디자인은 총 5번이 바뀌었다. 어흑... 첫 디자인 변경당시, 하드코딩 된 값들을 제거하는 작업을 하며, 디자이너님과 소통하는 과정에서 아래의 사실을 깨닫게 되었다. >1. CSS에 대한 값은 정해져있다. 요구사항(figma)과 일치하는 CSS 값으로 코드를 작성할 것. 다만, 그 요구사항은 상황에 따라 변할 수 있다. 요컨대, 정확한 수치가 주어져있지만, 그 수치가 언제든 바뀔 수 있다는 뜻이다. 모순과 같은 이 상황을 어떻게 해결할 것인가? 소프트 코딩 가장 먼저 생각난 해결책은 소프트 코딩이다. 자주 변할 수 있는 부분(넓이, 높이, 색상 등)을 Constant 파일에 선언해두고 import해 전역적으로 관리하는 방법이다. constant/navigation.ts shared/contentWrapper.tsx > 단순히 p
2023년 3월 14일
·
0개의 댓글·
1