Toy project with React + TypeScript + Firebase - LinkBook

 

LinkBook

---

• Archive web links that you want to keep
• Try it yourself :D

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

Read More

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.

Read More

I made a new portfolio website with React

I made new portfolio website

---

About a while ago, I built a personal portfolio website. I already had one, but it was just not look nice to me. SO, I decided to build another one. Again, I kept carried on with the concept of "Swimming Pool". But this time I worked differently.

• First, I built chunks of vanilla JavaScript code on repl.it, which later became the React components of this project.
• This process helped me a lot. I learned so much from making thing with vanilla JS.
• Then, when I was working on React project, I divided the previous code into components , templates (layout of the each section), and pages (combines components and templates).
• First, I thought this structuring is annoying, but it really did its job when I was refactoring this project. This big structure made me easy to find where I need to fix.

I Just LOVE web page that has its own concept

---

Yes I do. So I spent a lot of time building sea wave, bubbles and swimming rainbow fish. It can be look like little bit old fashion to someone, but whatever, I love it and that's it : D

here is the preview of my portfolio website.

What I've learned from this project

---

1. how to convert vanilla JavaScript code(mostly DOM) to React states and hooks etc.
• and realize how difficult that can be
2. how to make CSS animation and JavaScript animation
3. learned how to use svg tag(I used this skill to make a sea wave)
4. learned how to use color palette from pinterest properly(since I'm suck with colors)
5. A importance of mobile view
• learned that I need to test a lot with different device width, and adjust font-size and ratio etc.

Read More

React와 Redux를 연결하는 법(공식문서 참조)

공식문서를 기반으로 React와 Redux를 연결하는 법을 공부했다. 그 내용을 공유하고자 한다.

P.S. 아래의 글은 이 링크를 많이 참조했다.

Read More

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

 

React란?

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

Read More

Today Swimming Learnd - 2020.08.30 : 바닐라 자바스크립트로 돌아가기

 React를 하면서 나의 기본기가 많이 부족하다는 것을 느꼈다. 그래서 시작한 것이 바닐라 자바스크립트로 코드 조각 만들기 프로젝트이다. repl.it에 따로 code-sample이라는 폴더를 만들어두고 기본적인 컨셉들을 하나씩 구현하는 중이다.

바닐라 자바스크립트로 카드 슬라이더와 파도, 물방울 애니메이션을 만든 다음, 똑같은 기능을 React 싱글 페이지로 만들어 보았다. 똑같은 것을 바닐라 자바스크립트와 React로 만들어 본 결과 느낀 점은 "바닐라 자바스크립트가 더 편한데?"이었다. 복잡하지 않은 것들이어서 그랬는지도 모른다. 개인적으로 위 세가지 기능을 React로 만들 때는 state를 만들고 DOM을 직접 건드리지 않으면서 애니메이션 조절하는데 많은 시간을 투자했다.

Read More

optimistic update에 관한 장단점

optimistic update에 대해 찾아 보게 된 것은 현재 진행하고 있는 토이 프로젝트 때문이었다. 토이프로젝트에서 우선 server랑 db없이 state management만으로 CRUD 기능을 만들어보았다. 그 후 server db에 저장할 필요성이 있었기 때문에 state 상태와 server db의 상태를 sync 맞추기 위해 구글링 하던 중, 크게 두가지 방향이 있다는 것을 알아냈다.

Read More

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

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

Read More