본문 바로가기

전체 글

(54)

실전 프로젝트 - 내돈내여 광고 없는 알맹이로 가득 찬 정보를 찾고 싶으시다면 유저들이 내 돈으로 여행하고 인증하는 내돈내여를 써보세요! 광고 없는 여행 후기 내돈내여로 떠나기 ✈️ Back-End Github 👀 Front-End Github 👀 🧑🏻‍💻👩🏻‍💻 팀원 소개 서비스 개요 내 돈내고 내가 여행하는, 진정성있는 국내 단기 여행 정보 공유 플랫폼 서비스 서비스 아키텍쳐 Front-end node.js, 사용자 요청에 따른 각기 다른 웹사이트를 보여줄 수 있도록 동적 웹 호스팅이 가능한 EC2와, 리버스 프록시로서의 역할을 하며 서버가 SSL 요청을 처리하는데 드는 비용이 없는 nginx를 이용해 데이터 보안을 위해 https 환경으로 끊김없는 서비스를 제공 할 수 있고 많은 레퍼런스를 가진 PM2를 통한 무중단 배포를 ..

20221105 React Hooks - Custom Hooks 커스텀 훅 Hook의 규칙 React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함) 구성 요소의 최상위에서만 호출할 수 있음 조건문, 반복문 안에서 못 씀 Custom Hook - 두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리 함. - 중복된 코드를 발견하면 재사용이 가능한 함수로 만들어서 중복을 제거할 수 있음. - 커스텀 훅 내부에서 다른 훅들을 자유롭게 조합가능(필요한 인터페이스와 기능 추가 가능) - 커스텀훅 내부에서 커스텀 훅이 가지는 스테이트와 이펙트는 완전히 독립적이기 때문에 재사용이 아주 좋음 use0000 처럼 반드시 맨 앞에 use라는 단어를 붙여서 다른 개발자들이 Hook이라는 걸 알 수 있게 해줘..

20221104 React Hooks - useReducer Hook의 규칙 React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함) 구성 요소의 최상위에서만 호출할 수 있음 조건문, 반복문 안에서 못 씀 useReducer - useState의 대체함수 - 콜백 대신 디스패치를 전달 할 수 있기 때문에 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화 할 수 있음 - useReducer를 사용할 때 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호 reducer : state를 업데이트 해주는 역할 dispatch: state 업데이트를 위한 요구 action: 요구의 내용 디스패치로 액션(요..

20221103 React - 가상돔 (Virtual DOM) DOM(Document Object Model) 웹페이지에 들어가 있는 구조들을 트리형태로 구성한 것 Virtual DOM (VDOM) 가상돔 UI의 이상적인 또는 "가상"적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념. 이 과정을 재조정(Reconciliation)이라고 함. - 리액트는 가상돔을 사용해서 실제돔을 조작하는 것을 빠르게 만들어 줌 - 가상돔은 실제돔과 같은 내용을 담고 있는 복사본 복사본: 실제 돔이 아닌 자바스트립트 객체 형태로 메모리 안에 저장되어 있음 (실제 돔이랑 똑같은 엘리먼츠 속성을 가지고 있음) - 브라우저 문서에 직접적으로 접근 불가 리액트는 두가지 가상 돔을 가지고 있음 1. 렌더링 이전 화면 구조를 나..

20221102 React Hooks - useMemo, useCallback Hook의 규칙 React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함) 구성 요소의 최상위에서만 호출할 수 있음 조건문, 반복문 안에서 못 씀 useMemo, useCallback 성능 문제를 개선하기 위해 사용 useMemo는 특정 결과값을 재사용할 때 사용 useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 memoization (메모이제이션) 컴퓨터 프로그램이이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다. - 자주 필요한 값을 캐싱해 두어서 그 값을 다시 계산하는게 ..

20221025 Meta og 태그로 카카오톡, sns 공유시 미리보기 만들기 Meta og 태그 - 카톡이나 SNS URL 공유시 미리보기 만들어 주는 태그 미리보기로 보여지는 이미지는 카카오톡 기준 가로 : 400px, 세로 : 210px가 최적 HTML 파일

20221024 input type="file" 용량 제한하기 1. 프로젝트에 사용자가 동영상 업로드를 하려며 백엔드와 서로 동영상 크기를 200메가로 제한 할 수 있도록 하기로 하였음. 2. 폼데이터를 포스트로 보내는데, 등록버튼을 눌렀을때 200메가가 넘으면 알럿으로 알려줄 수 있도록 코드를 짜봄. 3. 콘솔찍어봐가며 파일 사이즈가 킬로바이트로 나온다는 걸 확인하고, 200메가를 킬로바이트로 바꾸고 maxFileSize로 선언해준 다음 비디오의 사이즈가 maxFileSize보다 클 경우 알럿창으로 알려줌. (등록불가) // 동영상 200MB 크기 제한 const [errorMsg, setErrorMsg] = useState(false); const [isSuccess, setIsSuccess] = useState(false); const validateSelec..

20221008 video 사용하기 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video : 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, 요소가 사용자 경험에 좀 더 적합합니다. developer.mozilla.org src : 재생할 비디오의 주소 width : 요소의 너비 height : 요소의 높이 loop : 반복 재생 poster : 사용자가 비디오 데이터를 사용할 수 없는 경우 이미지 파일의 주소를 권장 preload : 음악을 재생하기 전에 모두 불러올지 지정 (value: auto, metadata, none)..

이전 1 2 3 4 5 6 7 다음

티스토리툴바