헬리_storage

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

사용이유 : 코드의 재사용쉬움 (우리의 입맛대로 만들 수 있음) 그냥 함수를 하나 만듦 1. 원하는 이름 짓기 2. 원하는 기능을 함수 안에 구현 해주면 된다. (매개변수와 리턴 값도 마음대로 정할 수 있다) ** 컴포넌트 내부에 있던 로직을 커스텀 훅이라는 함수로 빼주는 역할을 한다! + 커스텀 훅 안에서 다른 React Hook들을 자유롭게 사용할 수 있다는 장점도 있다! + 커스텀 훅을 사용하는 컴포넌트마다 커스텀 훅이 가지는 state와 effect는 완전히 독립적인이기 때문에 재사용성이 아주 큼!!! 이름을 마음대로 지어도 되지만, 커스텀 훅 도 React의 hook 이므로 'use' 라는 키워드를 사용해야함 => 실수를 하더라도 리엑트 자체에서 콘솔에 경고를 잘 띄워줌 (오류 방지용) 1. ..

기업협업중 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); }..

🙋🏻‍♀️ 위코드에서의 2차 프로젝트를 마쳤다 🙋🏻‍♀️ 정말이지.. 1차때보다 더 어려운 예시 홈페이지들이 많았고, 그 중 우리는 cgv를 참고로하는 프로젝트를 진행하게 되었다. ' 영화관 예매 서비스 컨텐츠 ' 우리 small box의 회고를 시작하겠다 . CGV : 다양한 장르의 영화와 경험을 상영함으로써 관객에게 관람환경 뿐만 아니라 그 이상의 서비스와 감동을 전달 함으로써, 다양한 즐거움과 특별환 경험을 통해 total lifestyle을 선도하는 종합 생활문화 공간 제공 을 한다면 small box ‘독립영화, 즉 신선한 장르와 특별한 소재를 좋아하거나 입문하고자 하는 관객에게 영화를 선보이자 ’ 라는 목표를 두고 다양한 장르에서 보다 감성적인 인디영화에 포커스를 두어 주 매니아층 그리고, 다..

매일매일이 새롭당 : ) 하핳 이 전 포스팅에서는 인터넷 연결 확인 및 경고 모달을 띄웠다면, 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..

여전히 기업협업중 ,,! 아직도 home을 끝내지 못했다... 😂 useState를 사용해서 map을 돌린 데이터에있는 이미지a 를 누를 때 이미지b 로 바뀌는 것을 하는데, 하나를 선택하고 다른것을 선택할 때 이미지가 다시 초기화 되지 않는다거나, 모두 눌리거나 하는 상황이 발생.. 왜 코드는 매번 할때마다 새로울까 😂 그래서 다시 고친 후 정리를 해 보겠다... 오늘 정리할 내용은 1. map 매서드를 쓴 후 아이콘을 각각 눌렀을 때 상태변경 관리 2. 캐러샐을 움직일 때 해당 데이터를 가진 marker가 지도 중앙으로 오면서 이미지도 변경되기 이다. 이전에 했던 코드에서 추가된 것이 있어서 혹~ 시나 참고 하시려면 https://hayley-0616.tistory.com/44 [React] 네이버 ..

지난 포스트에 Marker 누를때 해당 정보를 가진 캐러셀이 맨 첫번 째 슬라이드로 보이게 하는 것을 정리 했었는데 (참고) https://hayley-0616.tistory.com/43 [React] 네이버 지도 API 이용 + Slick 캐러셀 띄우기 기업협업 중이다.. 여전히 Home을 맡았는데, 홈 자체가 네이버 지도를 불러와서 각각 Marker 를 클릭하면 그 Marker(가게) 의 정보가 담긴 캐러셀이 나오게 해야했다! 처음에 했을때는, Marker를 누르면 hayley-0616.tistory.com 이번에는, Marker을 눌렀을 때, 해당 데이터 같이 불러오는 캐러셀도 보이기 + 센터 좌표 바뀌기 를 해 보았다. 정리를 또 해 보겠다.... 이번에도.. 어려웠다... 지도 api.. 정말 ..