Docker를 사용해서 서버를 돌리게 되면서 healthcheck 스크립트를 Docker용으로 다시 작성해야했다. (기존에는 window 스케쥴러를 등록하여 1분마다 해당 스크립트를 돌리도록 했음) 코드 자체는 매우 간단했지만 docker에 대해 알아가면서 짜다보니 시간을 많이 잡아먹었다.서버로 api요청을 보낸 후 응답이 비정상적일 경우 컨테이너를 종료하고 다시 시작하는 healthcheck 스크립트를 작성하였다. healthcheck_docker.sh#!/bin/bash LOG_FILE="/app/healthcheck.log" TIMESTAMP=$(date +"%Y-%m-%d %H:%M:%S") HEALTH_CHECK_URLS=( "헬스체크 endpoint" ) echo "$TIMESTAMP - St..

Light House (before) : Loading Properly size images : 이미지를 적절한 사이즈로 압축하여 로드 타임 최적화 ㄴ 실제 사용되는 너비보다 2배 큰 사이즈로 width, height를 지정하는 것이 적절함 ex) 사진이 차지하는 픽셀이 120x120이라면 240으로 지정 how to solve? CDN(Contents Delivery Network) : 소비자와 가까운 곳에 컨텐츠 서버를 두는 기술 Image CDN(image processing CDN) : CDN + 이미지를 가공해서(처리 과정을 거침) 사용자에게 전해줌 > imgIX라는 이미지 CDN 서비스를 사용할 수 있음 > unsplash같은 사이트에서 사진을 가져올 경우 파라미터 width, height 조..

인트로 라이브러리 없이 캐러셀을 구현하려고 합니다. 현재는 앞 뒤로 움직이는 버튼이 없이 자동으로 이미지가 오른쪽에서 왼쪽으로 스와이프 되는 모습입니다. 오른쪽에서 왼쪽으로 넘어가는 애니메이션이 없을 때는 버튼을 통해 이동할 수 있었으나 애니메이션을 추가했을 때 원하는 동작을 얻지 못해 제거하였습니다. 버튼은 다음에 추가할 예정입니다. 동작 모습 코드 전체코드 더보기 import { TMDB_IMG_URL, CAROUSEL_DELAY, CAROUSEL_LENGTH_LIMIT, CATEGORY, TRANSITION_TIME, } from '../../Assets/ConstantValue'; function Carousel() { const [imgArr, setImgArr] = useState(null);..

인트로 함수형 컴포넌트 렌더링 순서에 대해 다뤄봤습니다. 클래스 컴포넌트의 생명주기 클래스 컴포넌트의 생명주기에 대해 알고 가면 더 쉽게 이해할 수 있습니다. 📌 생명주기 순서 컴포넌트 실행 constructor() 실행 : 렌더링(DOM 생성) 이전에 수행되는 생성자 메서드 render() 실행 : 미리 구현한 HTML을 화면상에 보여줌 componentDidMount() 실행 : 렌더링이 수행된 이후에 실행됨 컴포넌트에 변화가 있을 때 componentDidUpdate() 실행 update가 발생하는 경우 props가 변경된 경우 state가 변경된 경우 부모 컴포넌트의 리렌더링 foreUpdate 강제로 변경하는 경우 컴포넌트가 제거될 때 componentWillUnmount() 실행 클래스형과 함..

인트로실행 컨텍스트 내용 본 지도 오래됐고 스터디 발표 준비를 하기 위해서 실행 컨텍스트를 다시 한번 펴봅니다표라던가.. 뭐가 좀 많네요...실행 컨텍스트를 알면...실행 컨텍스트를 한 번 알면 자바스크립트가 왜 그렇게 동작하는 이해할 수 있습니다.식별자 바인딩, 호이스팅이 발생하는 이유, 클로저 동작방식, 비동기 처리 동작 방식... 등실행 컨텍스트에 대해 알고 나면 실행 컨텍스트를 몰랐을 때는 예측할 수 없었던 동작들을 예측할 수 있게 됩니다. 처음 읽었을 때는 정말 어지러웠지만 알고 나니 매우 유용한 친구였습니다.소스코드 타입에 따른 실행 컨텍스트 생성전역 코드- 전역에 정의된 함수, 클래스 등의 내부 코드는 포함X전역 실행 컨텍스트함수 코드- 함수 내부에 중첩된 함수, 클래스 등의 내부코드 포함X..

인트로 부트캠프 advanced 과제 진행 중 advanced에서도 또다시 도전하기 과제가 있더라고요. 키보드 방향으로 자동검색(drop down) 항목을 선택할 수 있도록 하는 거였습니다. 과제가 생각보다 빨리 끝났기 때문에 도전해 봤습니다. 키보드로 드롭다운 선택할 수 있게 해주는 라이브러리가 있었지만 직접 ref를 사용해서 해보기로 했습니다. 결과 어떻게든 구현은 할 수 있었습니다. 컴포넌트에 ref를 넘겨야 해서 forwardRef를 써야 하더라고요. 고정된 틀에서 구현을 해야 해서 그런지 더 헷갈리고 복잡했습니다. 코드 자동검색 목록의 경우 객체를 사용하여 임시로 완성되어 있습니다. css의 경우 styled-Component로 적용하였습니다. //자동검색을 위한 임시 목록들 const dese..

인트로오늘은 portal에 대해서 알아보겠습니다. 너무 힘들어서 별 말없이 바로 시작하겠습니다.. 나 파이팅..왜 사용하나요?createPortal을 사용하면 자식을 원하는 위치에 렌더링 시킬 수 있습니다. 여기서 자식은 react로 렌더링 할 수 있는 모든 것을 말합니다. createPortal을 사용하면 어떤 컨테이너에 있든 'escape'가 가능합니다.또한 이벤트 버블링 문제를 해결할 수 있으며 Z-index 관리가 편하다 등의 장점이 있습니다.createPortal(children, domNode)createProtal을 사용해서 portal을 만들 수 있습니다.  import ReactDOM from 'react-dom';//컴포넌트// return 내부{ ReactDOM.createPorta..

인트로 이메일을 클릭했을 때 복사하는 기능을 만들어봤습니다. Clipboard API를 사용해서 아주 간단하게 해결할 수 있었습니다. Clipboard: writeText() 인자로 넣어준 텍스트 문자열을 시스템 클립보드(복사한 데이터를 저장해줌)에 저장합니다. read()나 readText()를 사용해서 저장한 문자열을 다시 읽을 수 있습니다. 전체코드 //컴포넌트 함수 내부 const copyEmail = async (email) => { await navigator.clipboard.writeText(email); alert("이메일 복사에 성공했습니다"); }; //return { copyEmail("당신의 이메일"); }} > email : 당신의 이메일 결과 강제로 내 이메일 심기 완료