React & React Native (16) 썸네일형 리스트형 웹 게임을 만들며 배우는 React 가위바위보 & 로또 추첨기 가위바위보 ✌🏻✊🏻🖐🏻 Before We Begin - 시작하기전 프로젝트 생성 명령으로 'rspname'이라는 리액트 프로젝트를 만들어준다. 1. 리액트 프로젝트를 생성하는 create-react-app을 -g 글로벌 옵션으로 설치 npm install -g create-react-app 2. rspgame이라는 프로젝트를 생성 (※리액트앱은 대문자로 네이밍을 할 수 없다고 계속 에러를 던져서 소문자로 변경해주었다.) create-react-app rspgame 리액트의 LifeCycle 일생기 컴포넌트가 실행되거나 업데이트되거나 제거될 때 특정한 이벤트들이 발생된다. (componentDidMount(), componentDidUpdate() 등등) 더보기 https://www.youtube.com/.. [토이프로젝트] XD디자인 와이어프레임부터 출시까지 -3 오늘로서 마지막 XD수업을 마치게 되었다. 5회차 끝 (짝짝짝👏🏻) 👾 로직구현은? 현직 개발자지만 전직 디자이너 출신이라 시각적인 효과나 사용자 경험(UX)에 비중을 크게 두는 편이라 이 앱의 본질을 자꾸 흐린다는 생각을 (버스타고 오는 출근길에) 했다. 그래서 self 감정앱의 효과적인 로직을 생각하면서 (욕심쟁이 알고리즘 분할정복 알고리즘) 그럴 필요 없이 아래와 같은 브런치글을 참고해서, 이미 나와있는 심리테스트의 로직을 따와 재정립하면 될 것이라 생각한다(!) https://brunch.co.kr/@theciriz/13 [리액트]따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기2 YouTube 구독 기능을 만들어보자 1. Subscriber Model 만들기 - MongoDB의 userTo, userFrom 스키마 만들기 (Model → Subscriber.js 파일 생성) 2. Subscribe Button UI 만들기 /* 단순한 예로 이렇게 만들어서 function을 줄 순 있지만 직관성을 위해 컴포넌트화 시켜준다. */ 이렇게 Sections → Subscribe.js 페이지를 생성하여 Subscribe를 컴포넌트화해서 VideoDetailPage.js에서 import 해준다. 3. 데이터베이스에서 구독 정보 가져오기 Subscribe의 컴포넌트에서 useEffect hooks를 사용해 이 유저의 구독 정보를 가져오고 싶다면, VideoDetailPage에서 Video.w.. [리액트]따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기1 #3 비디오 업로드 FORM 만들기1 REDUX EXTENSION 리덕스란 무엇인가? → 언제나 공식문서 참고하기. ※ Fundemental 부터 시작 https://react-redux.js.org/tutorials/quick-start Quick Start | React Redux react-redux.js.org What is Redux? 리덕스는 무엇인가? 리덕스는 패턴이자 라이브러리이면서 "액션"이라는 이벤트를 사용하여 성능 상태를 업데이트한다. 리덕스는 전체 어플리케이션에서 상태를 위한 중앙집권된 저장소 역할을 해주는데, 예측가능한 형태로 상태가 업데이트가 되는 규칙을 세워준다. 리덕스는 "글로벌" 상태관리를 위해 쓰이면서 항상 필요한 것은 아니기때문에, 필요에 따라 알맞게 사용하면 된다. R.. [토이프로젝트] XD디자인 와이어프레임부터 출시까지 -2 리액트 네이티브 개발 디자인 → 개발 단계 순으로 스텝 바이 스텝 진행을 하려 했으나, 내가 원하는 리액트 네이티브 라이브러리 + 로티 애니메이션 등을 확인하고 싶어 링크와 소스들을 모아봤다. 🐻 Lottie Animation 로티 이미지는 에어비앤비에서 제공하는 오픈소스 라이브러리로서 벡터 애니메이션을 웹, 앱에 적용할 수 있다. 리액트 네이티브에도 적용가능! 애프터이펙트로 작업후 JSON형식으로 추출하여 개발에서 적용할 수 있게 해준다. https://lottiefiles.com/ Free Lottie Animation Files, Tools & Plugins - LottieFiles The world’s largest online platform for the world’s smallest anim.. [토이프로젝트] XD디자인 와이어프레임부터 출시까지 -1 🌷 개요 강남아이티아카데미학원에서 6월 19일부터 어도비 XD과정을 시작하면서 (매주 토요일, 총 5일) 개인 포트폴리오 작업으로 평소에 개발해보고 싶었던 self 보석 감정앱을 만들어보기로 했다. 어도비 XD 디자인 가이드 웹 1920 상단바에 유의하여 세로 975사이즈로 작업한다. 카카오페이지 : 모바일 사이즈 애플페이지 : 적응형 대부분 모바일 first 로 작업을 한다. 태블릿 1024 1024 x 768 사이즈 🦄 UX 과정 ① 로그인 페이지는 원활한 메인 페이지 진입을 위해 없애기로 한다. ② 재미를 느낄 수 있을만한 요소 (interactive 디자인 || 심리테스트)등 을 추가한다. ③ 아이콘은 직접 제작 (일러스트레이터가 이상적이지만 XD에서 기본 제공하는 선이 마음에 들어 그대로 진행한.. [리액트]따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기2 무비앱 시리즈 #9 좋아요 버튼 만들기 Basic Hooks 리액트 훅스의 기본 문법 중 상태변화를 다루는 useState ▶ Stateful 상태적인 값과 그 값을 업데이트 할 수 있는 기능이다. 첫 렌더링 시 반환되는 값은 첫 파라미터로 넘겨진 값과 같다. initialState setState(newState) → 새로운 상태 값을 받고 컴포넌트의 재렌더링을 연결해준다. re-렌더링이 이러지는 동안, useState에 의해 반환되는 첫번째 값이 가장 최신의 상태로 주어진다. 만약 업데이트된 함수가 같은 값을 반환하면 렌더링은 완전히 건너뛰어진다. 조화 과정 🍧 리액트에서는 뷰를 업데이트 할 때 "조화 과정을 거친다" 라고 표현을 하는데, 이는 데이터 변화가 있을 때 뷰가 변형하는 것처럼 보이지만, .. [리액트]따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기1 1강부터 8강까지 학습목표 다양한 API를 활용하는 법을 배운다. 1. 먼저 깃헙에서 보일러플레이트가 되는 압축 파일을 받거나 클론을 해준다. https://github.com/jaewonhimnae/boilerplate-mern-stack jaewonhimnae/boilerplate-mern-stack Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX - jaewonhimnae/boilerplate-mern-stack github.com server → config → keys.js 에는 분기처리를 해준다. if (process.env.NODE_ENV === 'production') { module.exports = require('./pro.. 이전 1 2 다음
