헬리_storage

드디어 Redux를 공부해본다... 그토록 어렵다고 들었던... 그래서 일단은 시작은 조심스럽게..해보쟈 ... 😣 Redux란? - 공식문서에서는 자바스크립트 앱을 위한 예측가능한 컨테이너 라고 소개한다. : 단방향 데이터 흐름을 이용해 예측 가능하고, 일관적인 상태 컨테이너의 역할을 제공하는 라이브러리 : Flux 패턴에 영감을 받은 Dan Abramov 가 개발함 : React 또는 다른 View 라이브러리들과 함께 사용할 수 있다. : Flux패턴과 혼동이될 수 있는데, Flux는 디자인패턴으로 일종의 실체가 없는 개념이다. 이러한 패턴을 쉽게 적용할 수 있도록 자바스크립트로 구현한 구현체가 Redux 이다. Redux의 3가지 원칙 1. 진실은 하나의 소스로부터 2. 상태는 읽기 전용이다 3. ..

디자인패턴 : 어플리케이션 설계 중 자주 발생하는(되풀이되는) 문제에 대한 모범답안 즉, 프로그램을 개발하면서 생기는 문제를 해결하는 모법답안을 말한다. 디자인 패턴을 사용하는 이유? - 검증된 해결책 : 이미 검증된 방식 및 방법으로 해결방안을 찾을 수 있음 -> 효과적으로 코드 개선 - 효율적인 소통방식 : 거대하고 복잡한 코드는 규모가 작을때부터 체계적인 규칙이 필요하다. -> 매번 디테일한 설명을 거치지 않고, 사전에 약속해둔 용어들로 표현할 수 있도록 해준다. -> 의미를 명확하고 효율을 높이고, 체계적인 코드를 만들 수 있음 - 유지보수 용이 : 각각 기능을 담당하는 영역을 분리(관심사별로) 헤서 관리할 수 있도록 설계됨 -> 필요한 부분만 수정 가능 - 상대적으로 코드 레벨에 가까운 디자인 ..

기업협업중 import React from 'react'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import * as S from './CallModal.style'; const CallModal = ({ detailMartList, handleModal }) => { const handleCopy = () => { alert('복사되었습니다.'); }; return ( {detailMartList[0].martPhoneNumber.replace( /(\d{2})(\d{3,4})(\d{4})/, '$1-$2-$3' )} 전화 걸기 연락처 저장하기 클립보드 복사하기 ); }; export default CallModal; 부모 컴포넌트로 ..

👀 컴퓨터 안에있는 파일 이미지를 이용해서 업로드 할 수 있는 기능을 구현해 보았다! 생각보다 간단해서 정리해 보았다 :) 이용한 것 - input type: file - useState import React, { useState } from 'react'; import * as S from './Mypage.style'; const Mypage = () => { const [uploadedImage, setUploadedImage] = useState(null); const onChangeImage = e => { const file = e.target.files[0]; const imageUrl = URL.createObjectURL(file); setUploadedImage(imageUrl); }..

매일매일이 새롭당 : ) 하핳 이 전 포스팅에서는 인터넷 연결 확인 및 경고 모달을 띄웠다면, https://hayley-0616.tistory.com/47 [React] 인터넷 연결확인 및 경고모달 기업협업 중이당...ㅎ 이 전 포스트 글과 마찬가지로, login ->home 으로 이어지는데 이 때, login 컴포넌트가 제일 처음 랜더링 될 때, 인터넷 연결을 확인하고, 만약 안되어 있는경우에는 경고모달을 hayley-0616.tistory.com 이 번 포스팅에서는 모달의 '확인'을 누른 경우 컴포넌트가 종료(?) 혹은 나가지는 로직을 구현해 보았다. 점점 새로운것을 알게되면서 적용하니 아주 신기하다눙.. 👀 Login.jsx (부모컴포넌트) 에서 선언 => props 로 NetworkCheckMo..

기업협업 중이당...ㅎ 이 전 포스트 글과 마찬가지로, login ->home 으로 이어지는데 이 때, login 컴포넌트가 제일 처음 랜더링 될 때, 인터넷 연결을 확인하고, 만약 안되어 있는경우에는 경고모달을 띄우는 로직을 구현하였다. 정말.. 기업협업하면서 여러가지를 시도하고있다... 레벨업 중.. ㅎ_ㅎ 1. 연결확인을 위한 useEffect useEffect(() => { const checkConnection = async () => { try { const response = await fetch('https://www.google.com', { mode: 'no-cors' }); const status = response && response.status; if (status === 200..

기업협업중이다 😂 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..

여전히 프로젝트 중이다. 위치를 맵에 표기하기 위해 카카오 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 파일에 ..

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

Styled component를 자습했다... 솔직히.. 왜쓰는지 모르겠다. 가장 최근 5년간 가장 인기있는 라이브러리라는데... 왜..? .. 다 이유가있겠지... 일단 내 손에 안익어서 그런가보다 하고... 그냥 냅다 정리부터 해본다. ㅠ 현업에서 일하는 친구도 스타일 컴포넌트를 쓴다고 한다.. 일단 className을 지정안해도 되고 손에익으면 너무 편리하다고하는데..? 공부나하자..ㅠ Styled Component css, Sass에서는 별도의 css, sass 파일을 생성하여 js파일에 import해서 사용했지만, 스타일드 컴포넌트는 스타일링을 할 때 ES6의 Tagged Templeate Literal 문법을 이용하여 js파일 안에서 선언해서 사용할 수 있다. 적용 방법 : styled 객체에..