목록REACT (8)

xtring.dev

[Cypress] Next.js에서 E2E(End-to-End) Test 시작하기 - Cypress 👾

Cypress 👾 Ref. Testing | Next.js Testing | Next.js Learn how to set up Next.js with three commonly used testing tools — Cypress, Jest, and React Testing Library. nextjs.org https://docs.cypress.io/guides/overview/why-cypress Why Cypress? | Cypress Documentation What you'll learn What Cypress is and why you should use it Our mission, and what we believe in Key Cypress features Types of tests Cypr..
Front-End/Testing 2021. 11. 30. 15:20
(deprecated)[FE] 🌬tailwindcss로 더 빠른 페이지 만들기(with React)

Ref. 📗 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 최근 React 와 함께 사용하는 스타일 라이브러리/프레임워크가 정말 다양해졌습니다. 대표적으로 styled-components, emotion, Tailwind css 등이 있는데 오늘은 Tailwind 에 대해서 알아보려고 합니다! 먼저, Tailwind 의 장점은 tailwind 홈페이지에서 볼 수 있듯이 Rapidly build modern websites without ever leaving your HTML. "HTML을 떠나지 않고도 ..
Front-End/Styling 2021. 3. 18. 04:02
[React] eject가 필요하다면 - npm run eject

요즘은 큰 문제가 없다면 React 프로젝트를 CRA 진행하곤 합니다. eject를 하게 되면 해당 프로젝트에 숨겨져 있는 모든 설정을 밖으로 추출할 수 있으며 이를 통해서 webpack과 babel의 자유로운 세팅이 가능합니다. 🍭 제 경우 외부 모듈을 추가하는데 있어 eject이 필수였기 때문에 사용하게 되었습니다. 사용방법 사용방법은 간단합니다. $ npm run eject 명령어 실행 후 ? Are you sure you want to eject? This action is permanent.(y/N) 라는 물음이 나오면 y를 누르고 Enter를 쳐줍니다. 만약, eject 실행 전 git을 통해 변경사항을 저장하지 않으면 This git repository has untracked files o..
Front-End/React 2021. 2. 3. 12:32
[Styling] Ant Design과 styled-components 함께 사용하기 : Ant Design + styled-components (based React)

styled-components를 사용하며 Ant Design를 사용해야하면 아래와 같이 사용해보세요. 기존의 기본 Tag들과 styled-components를 함께 사용하는 방식과 같습니다! 필요에 의해서 사용할 수도 있겠지만 이렇게 사용하는 경우는 크게 없을 것 같네요 🤓 Antd의 class에 일일히 접근해서 모든 스타일을 바꾸는 것 보다 root의 index.css에서 전역으로 Antd 클래스의 스타일을 Tune 해놓은 다음에 사용하는 것이 좋을 것 같습니다! 😎 (저만의 생각입니다..ㅎㅎ)
Front-End/Styling 2021. 1. 10. 22:27
[React] 프로젝트 디렉토리 구조 도대체 어떻게 잡아야 되나요? - 고민하지 마세요🙃

지난 시간동안 다수의 React 프로젝트를 진행하면서 프로젝트를 빌드해 갈때마다 디렉토리 구조에 대해서 고민했습니다. 어떤 방법으로 디렉토리 구조를 잡을지는 언제나 어려웠으면 최선, 최고의 선택을 위해 고민하게되었습니다. 이 아티클에서는 해당 문제에 대해서 고민하며 얻게된 제 경험과 알아온 것들을 정리해보았습니다. 먼저, React 공식 페이지에서는 어떻게 프로젝트 디렉토리 구조를 잡으라고 하는지 살펴볼까요? Ref. https://ko.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.reactjs.org React 프로젝트를 구조화하는 권장 방법이 있습니까? React..
Front-End/React 2021. 1. 10. 21:11
[React Native] RN으로 만든 프로젝트를 Play Store(Android)에 올리기

React Native로 개발한 앱을 Play Store에 업로드하기 위해서 Android 앱을 Build해봅시다. 1. PlayStore 개발자 등록하기 먼저 구글 Play에서 developer 계정을 생성하고 등록합니다. developer.android.com/distribute/console?hl=ko Google Play | Android Developers Google Play Console로 앱과 게임을 게시하고 Google Play에서 비즈니스를 성장시키세요. 앱의 품질을 개선하고, 사용자층과 소통하고, 수익을 창출하기 위한 여러 기능을 활용할 수 있습니다. developer.android.com 개발자 계정을 등록할 때 약 5만원의 등록비가 필요합니다... 2. Android 서명키 생성하..
Front-End/React Native 2020. 10. 29. 13:18
[React] 코드 분할(Code Splitting) - React 더 잘 사용하기

https://ko.reactjs.org/docs/code-splitting.html 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org Code Splitting은 왜 필요할까? 최근 높은 인터넷 속도와 좋은 프로세서가 일반화 되면서 웹서비스를 이용하는데 발생하는 불편한 점들을 잘 인식 못 할 수 있습니다. 그리고 웹 서비스가 배포되어질 때 모든 코드들은 하나의 번들로 묶여(번들링) 집니다. 서비스가 비교적 가벼운 편이라면 큰 문제가 없겠지만 프로젝트가 덩치가 커지고 전달해야하는 데이터의 양이 커지게 되면 성능적 문제가 발생하게 됩니다. 그래서 개발자는 사용자가 위와 같은 불편함을 느끼지 못하도록 하는 것이 큰 문..
Front-End/React 2020. 6. 29. 21:25
[React] Functional Component에서 Hooks를 사용하자. (useState, useEffect)

React Hooks는 Functional Component에서 Class-type Component의 LifeCycle의 동작 방식을 가능하게 해줍니다. Hooks는 React 16.8에서 새롭게 추가되었습니다. 그리고 Class 작성 없이 state와 React의 특성을 사용하게 해주었습니다. Hooks를 사용하기 위해서는 반드시 지켜줘야하는 몇가지 규칙이 존재합니다. 그리고 자동으로 이 규칙을 강요하게 해주는 linter plugin이 존재합니다. Rules of Hooks Only Call Hooks at the Top Level Hooks를 사용할 때는 꼭 맨 위에서 호출하라! Hooks는 loops, conditions, nested functions 안에서 호출하면 안됩니다. 대신 React..
Front-End/React 2020. 6. 24. 16:45
Prev 1 Next