Toy project with React + TypeScript + Firebase - LinkBook

 LinkBook Archive web links that you want to keepTry it yourself :DUser 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...

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...

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...

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