React15 [React] React에서 setTimeout 매서드로 스플래쉬(Splash) 구현하기 기업협업중이다 😂 React Native로 모바일 앱을 많이 구현하지만 아직 RN은 미숙하기때문에.. React.js 로 Splash 구현을 해 보았다. 현재 프로젝트에서는 앱으로 들어가면 바로 login -> home 으로 갈 수 있게 구현해야 했다. 그래서 splash는 login.jsx에 구현하였다. 1. HomeSplash.jsx 만들기 import React from 'react'; import * as S from './HomeSplash.style'; const HomeSplash = () => { return ( ); }; export default HomeSplash; 2. Splash 넣을 컴포넌트 가서 추가해주기 import HomeSplash from '../Home/HomeComp.. 2023. 4. 4. [React] KAKAO MAP API이용 (카카오맵) 여전히 프로젝트 중이다. 위치를 맵에 표기하기 위해 카카오 api를 구현해 보았다. 지도안에서 검색까지 되는 기능은 아니고, 정해진 위치를 가준으로 주변이 보이게 해 보았다. https://apis.map.kakao.com/web/guide/ 구현했던 순서대로 나열해 보겠다 1. 카카오 developers에 가서 로그인 후 프로젝트 중인 app 을 추가한다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 해당 app의 키들 중 JavaScript키를 public/index.js 파일에 .. 2023. 3. 8. [React] Styled component (props) 1-2 (적용) Styled component 를 이용해서 각 다른 css 효과를 주기위해 버튼 3개를 만들어 보면서 각각 다르게 적용해 보았다. props를 이용해서 해보았다.... 어렵ㄷㅏ... 😂 바로 적용한 코드 적고, 그 밑에주석으로 설명을 좀 덧붙여 보았다. Practice.js (자식 컴포넌트) import styled, { css } from 'styled-components'; const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; border: 1px solid lightgray; font-size: 1rem; line-height: 1.5; color: ${p => p.color || 'gray'}; background: .. 2023. 2. 26. [React] Styled component Styled component를 자습했다... 솔직히.. 왜쓰는지 모르겠다. 가장 최근 5년간 가장 인기있는 라이브러리라는데... 왜..? .. 다 이유가있겠지... 일단 내 손에 안익어서 그런가보다 하고... 그냥 냅다 정리부터 해본다. ㅠ 현업에서 일하는 친구도 스타일 컴포넌트를 쓴다고 한다.. 일단 className을 지정안해도 되고 손에익으면 너무 편리하다고하는데..? 공부나하자..ㅠ Styled Component css, Sass에서는 별도의 css, sass 파일을 생성하여 js파일에 import해서 사용했지만, 스타일드 컴포넌트는 스타일링을 할 때 ES6의 Tagged Templeate Literal 문법을 이용하여 js파일 안에서 선언해서 사용할 수 있다. 적용 방법 : styled 객체에.. 2023. 2. 26. [React] useState 조건부 렌더링 조건부 렌더링 사용하기를 간단하게 해 보았당 :) 구현해야 하는 것 const Review = () => { const [open, setOpen] = useState(false); const reviewOpen = () => { setOpen(!open); }; useState 를 이용해서 false 일때는 text가 안보이게, true때 보이게 설정하였다. 배송도 빠르고 정말 좋아요. {!open ? ( "" ) : ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에도 필요하면 또 여기서 시킬 것 같아요. )} 더보기 ▼ 삼항 연산자를 이용하였다. !open ? 일때 ture 이면 " " ( 빈 문자열)을 반환, false 이면 ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에.. 2023. 2. 22. React) useEffect 앞에 Side Effect글과 이어서 useEffect에 대해정리해보겠다. https://hayley-0616.tistory.com/17 이제 useEffect 차례다.. 학습목표는 이것이었다.. - React 에서 Side Effect의 올바른 발생 시점 알기 - useEffect의 사용법 알기 - 조건부로 Side Effect 발생시키기 - Rendering & Effect Cycle 알기 - Clean Up Effect 알기 과연 나는 다 알았을 것인가.. 🙈😑🙈 React 에서 Side Effect의 올바른 발생 시점은 - 렌더링을 Blocking 하지 않기 위해서 렌더링이 모두 다 완료되고 난 후 실행할 수 있어야 한다. - 매 렌더링마다 실행되는 것이 아니라 내가 원할 때만 조건부로 실행할 수.. 2023. 2. 2. 이전 1 2 3 다음
