레이블이 리액트인 게시물을 표시합니다. 모든 게시물 표시
레이블이 리액트인 게시물을 표시합니다. 모든 게시물 표시

9.17.2020

Toy project with React + TypeScript + Firebase - LinkBook

 


LinkBook



User Experience


  • User can login or sign up with email and password.
  • User can login via Google or Github account.
  • User can create, read, update, delete links.
  • User can assign title and related tags(keywords) when creating or updating link items.
  • User can sort links by created(or updated)time by clicking arrow button.
  • User can filter their links by a tag keyword.

Preview





P.S.


  • Skills that I used
    • React (create-react-app)
    • TypeScript
    • Firebase
    • gh-pages
  • If you find any bug on this website, please let me know.
  • Contact Info
    • swimmingkiim@gmail.com
Share:

9.11.2020

How to start your React Native project


 


What is React Native?


React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, IOS, Web and UWP by enabling developers to use React along with native platform capabilities. - wikipedia

First, you need these on your labtop


  • node(higher than v.12)
  • npm(higher than v.6)
  • If you want to run a simulator on your labtop,
    • Xcode(if you're using Mac)
    • Android studio(If you're using Windows or Linux)
  • An Iphone or android phone(you need install Expo application, I recommend this method)
  • npm install -g expo-cli

Two ways to make React Native project


  1. Expo
    • It's like a create-react-app for React Native version. Basic environment settings come along with itself.
    • PROS
      • convenient
      • no need to do all those complex settings
      • you can text on Iphone(If you have the actual Iphone) without buying a Mac.
    • CONS
      • It's hard to use files and packages made with native languages. (you have to eject if you want to use them)
  2. React Native CLI
    • If you use a React Native CLI method, you can customize your project setting.
    • PROS
      • You can use packages that using native files.
      • It's pretty much up to you, so you can optimize your environment settings as you like.
    • CONS
      • It is very very complicate to setup things right.
      • If you don't have Mac, it is difficult to run your app in an IOS environment.

P.S. If your app don't need to use native files, I recommend you to use Expo over React Native CLI. It will save so much of your time.

Make a project file using Expo


  1. First, you need to sign up on an Expo website.
  2. Then, open a terminal, go to your directory that you want to create a Expo project.
  3. Type expo init [new project name] into your terminal.
  4. Expo will require you to select things such as "choose between blank or minimal or TypeScript version etc...", so make your choice.
  5. Now, It depends on what device you want to run a test.
    • IOS DEVICE
      • Go into your project directory by cd [new project name].
      • expo login and type your username and password.
      • Then, npm start or expo start .
      • Get your IOS device and go to expo application and login.
      • If your IOS device and your laptop are using the same wifi, then your new project name will come up to your IOS device.
    • ANDROID DEVICE
      • Go to your project directory like IOS DEVICE did.
      • Type npm start or expo start into your terminal.
      • Then, your expo web page will be automatically open on your default browser.
      • On the left-bottom, there will be a QR code.
      • Get your ANDROID DEVICE and go to expo application, login, and finally scan the QR code with your device.
    • SIMULATOR
      • Like ANDROID DEVICE, just type npm start or expo start.
      • Then, it will open a browser, you can find button for SIMULATOR above the QR code.
      • Like I said at first, you need to install Xcode or Android studio and make sure that your simulator is working before you do the expo.


If there's any wrong information, please let me know : D I will fix it.
Share:

8.31.2020

React create-react-app에 대한 간단소개

 

React란?

  • 웹 프레임워크, 정확히는 프론드엔드 쪽에서 쓰이는 프레임워크이다.
  • 프레임워크는 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다. - 나무위키 왈
  • 정의가 직관적으로 이해가 잘 안 된다. 그냥 내 편의대로 해석하자면 웹 프론트엔드 개발을 붕어빵 만들기에 비유하면 프레임워크라는 붕어빵 틀을 가져다 사용하는 것이라고 생각한다. 여러개의 유용한 붕어빵 틀을 적절하게 사용하여 보기 좋고, 맛도 좋은 붕어빵 한 봉지를 완성시키는 것이다. (즉 프레임워크 개발을 위한 도구상자라는 것)
  • Facebook에서 만들었다.
  • Angular.js와 Vue.js랑 함께 많은 인기를 얻고 있는 프레임워크다.
Share:

6.11.2020

[웹 기초] 클린코드(Clean Code)의 개념과 주의해야 할 포인트(Feat. React에서 구체적인 실천 방법)

클린 코드라는 말은 전부터 이곳 저곳에서 들어본 적이 있다. 공부해야지 하면서도 그동안 미뤄왔었는데, 최근에 어떤 계기로 코드를 깔끔하게 쓰는 것이 매우 중요하다는 것을 절감했다. 그래서 어제부터 오늘까지 클린 코드에 대해 구글링으로 조사했다. 이 글에서는 조사한 것들을 요약 정리하려고 한다. 내가 배운 것을 까먹지 않기 위해 복습하는 것이기도 하고, 다른 분들도 참고하면 좋을 것 같아서 블로그 글로 적는다.

Share: