React
[Next.js] Hydration을 알아보자
회사에서 Next.js 기반의 프로젝트를 맡게 되어 태스크를 처리 하던 중, Hydration의 원리가 궁금해져 공부와 함께 기록을 남긴다. # Hydration이란? 참조 : Monica Powell article Keeping Server-Side Rendering Cool With React Hydration The purpose of this article is to share some helpful things to keep in mind to render a seamless experience as a Server-Side Rendered (SSR) site transitions from a window-less (server) environment to a browser. aboutmonic..
[Project] 솔로몬 온순이의 점심 판결
프로젝트가 마무리되어 기록하기 위한 정리 글입니다. (프로젝트 기간: 7일) # 프로젝트 배경 (1) 개인 웹 Front-End단에서 리액트 공부를 하고 싶었고, 특히 hooks와 styled-componets를 사용해 보고 싶었던 터라 이를 이용한 간단한 웹사이트를 구현해 봐야겠다고 생각했다. (2) 팀 나의 경우, 요새 대세로 떠오른 FonFon, forest-mt 같은 심리테스트 웹사이트를 만들고 싶었지만, 팀 회의 결과 이미 나와있는 아이템을 따라 하기보단 새로운 콘텐츠를 만드는 것이 나을 것 같다는 결론을 내렸다. 그에 따라 다른 아이템을 고민하던 중 대학생들을 위한 점심 추천 서비스를 만들자는 아이디어가 나왔고, 최종적으로 현재 재학 중인 상명대의 마스코트 고양이인 온순이를 판사 컨셉으로 하여..
[React] React Hooks란 무엇인가?
[React] React Hooks란 무엇인가? (React 버전 : 16.12.0, 글쓴날 : 2020.02.24) * 이 글은 React Hooks에 대한 단순 소개 글입니다. * 글의 내용은 공식 홈페이지 Hooks 문서를 기반으로 공부하여 작성하였습니다. * React 버전 16.8.0 이상, React Native 버전 0.59 이상부터 Hooks를 지원합니다. React Hooks란? 1) Hooks 소개 기존 React 컴포넌트들이 작성되던 방식인 Class의 형태는 사람과 기계 양측 모두에게 좋지 않은 점들이 있었고 끊임없이 React 개발자들에게 문제를 야기해왔다고 합니다. 하지만, function을 이용한 함수형 React 컴포넌트에서는 state를 관리하기 어려운 큰 문제점이 있었고 ..
[Troubleshooting] React, create-react-app으로 프로젝트 시작 시 템플릿 생성이 안되는 문제
[Troubleshooting] React, create-react-app으로 프로젝트 시작 시 템플릿 생성이 안되는 문제 (글쓴날 : 2020.02.23) * React Hook 공부를 위해 React 프로젝트를 생성하다 발생했습니다. 문제 해결 과정 1) 원인 파악 기존에 설치되어 있던 create-react-app이 최신 버전이 아니었고, 설치할 당시 -g 옵션으로 전역 설치했었습니다. * 에러 메시지 A template was not provided. This is likely because you're using an outdated version of create-react-app. Please note that global installs of create-react-app are no lo..
[React Native] React Navigation 설치 및 사용법
[React Native] React Navigation 설치 및 사용법 (React Navigation 버전 : 5~, 글쓴날 : 2020.02.07) * React Navigation V5 이전의 createAppContainer가 deprecated되었습니다... ㅠ.ㅠ 1. React Navigation 설치 1) React Navigation 패키지 설치 npm install @react-navigation/native * npm 및 패키지 설치에 관해 궁금하시다면 ☞ [Node.js] npm 소개와 설치 및 사용법 2) 의존 패키지 설치 npm install react-native-reanimated react-native-gesture-handler react-native-screens re..