분류 전체보기

error cmake cache
React native 2023. 8. 29. 10:32
사용하고 있는 드라이브의 용량이 부족해서, home/디럭테리에 있는 .gradle 폴더의 위치를 변경하고 빌드를 하니, 아래와 같이 오류가 발생하고 있었다. 해당 오류는 기존의 라이브러리를 컴파일 하던 파일이 이동하면서 기본의 파일을 못하고 있는 것 같았다. > Configure project :react-native-reanimated No AAR for react-native-reanimated found. Attempting to build from source. Android gradle plugin: 7.4.2 Gradle: 8.0.1 WARNING:Software Components will not be created automatically for Maven publishing from An..
아토믹 디자인 패턴의 재사용성을 위한 고려 사항
시스템 2023. 8. 28. 20:35
아토믹 디자인 패턴은 디자인 요소들을 컴포넌트 단위로 구성하여 이를 조합하여 사용하는 것이 중요한 컨셉인 만큼, 가장 최소 단위인 아톰단계의 컴포넌트에서의 조합성과 재사용성이 얼마나 잘 구현되었는지가 중요하다고 할 수 있다. 예를 들면 html에서 공간을 나눌 때 사용하는 div태그는 박스 구조의 웹 구조를 구현할 때 사용할 수 있는 가장 기본적인 단위로서 여러 속성을 사용한다. 가장 기본적으로는 사이즈, 패딩, 마진, 위치, 백그라운드 색상, 백그라운드 이미지 등등을 사용하여 그 하위에 여러 컴포넌트를 위치시킨다. 해당 요소를 아토믹 디자인 패턴으로 구현한다면 Box컴포넌트로 그 역할을 구현할 수 있을 것이다. 하지만 아토믹 디자인 패턴으로 컴포넌트를 구성한 이상, 해당 컴포넌트에 디자인 속성을 넘겨줄..
Next.js 개요 및 프로젝트 구조
Next.js 2023. 8. 28. 03:26
Next.js는 server-side rendering등 여러 편의 기능을 지원하는 React 프레임워크이다. 회사에서 다른 분이 Next.js로 프로젝트를 진행하는 것을 보면서, React를 사용하여 기능을 구현해야 여러 기본 기능들을 구현하기 위해서는 서드파티 라이브러리들을 적절히 활용해야 하며, 프로젝트 시작 시 프로젝트 설정을 위해 여러 라이브러리를 설치하는 등 여러 선행 작업 들을 진행해야 한다. 이를 간단히 얘기해보자면, 스타일링을 위해서는 styled-component나 tailwindCSS를 설치하고, 라우팅 기능을 위해서는 React-Router라이브리러리를 설치해야 한다. 해당 작업에는 그리 오래 걸리는 작업이 아니지만 여건 번거로운 것이 사실이다. Next.js에서는 기본적으로 초기 ..
Next.js 13에서 tailwindcss를 사용하여 동적 스타일링 컴포넌트 구성하기
Next.js 2023. 8. 27. 11:59
회사에서는 react.js + styled-component를 활용한 아토믹 디자인 패턴을 사용하고 있어서, 커스텀 컴포넌트를 구성하고 스타일 속성을 객체 형태로 생성하여 이를 활용하고, 문맥에 맞게 디자인 속성 값을 다양하게 적용하여 컴포넌트의 재사용성과 조합성을 강화하고 있다. 하지만 tailwindcss에서는 동적으로 className을 변경하여 적용하는 것을 권장하고 있지않다. 예를 들면 다음과 같은 코드 구성을 사용할 수 없다는 것이다. TestComponent에서와 같이 colorLevel을 전달받아 bg-red-{colorLevel}의 값을 동적으로 생성할 수 없다. const TestComponent = ({ colorLevel }: { colorLevel: String }) => { co..
Next.js 13에서 tailwindcss가 적용되지 않는 오류 해결
Next.js 2023. 8. 26. 23:07
Next.js 13을 사용할 때, tailwindcss를 사용하고 있는데, next.js에서 만들어준 기본 파일 이외에는 tailwindcss가 적용되지 않는 일이 있었다. 코드 구성은 다음과 같고, 아래 파일은 /src/app/test/page.tsx 에 위치시켰다. import Section from "@/src/component/Section"; export default function Page() { return ( header ); } 그리고 Section 컴포넌트에서도 tailwindcss를 사용해서 디자인을 구성했는데 실제 컴파일 후 결과화면을 보니 전혀 적용되지 않고, head태그에도 tailwind가 보이지 않고 있었다. 원인을 찾아보니, tailwindcss가 적용되기 위해서는 tai..

티스토리툴바