허도경, limewhale

React에서 이미지를 사용해야 할 때 해당 이미지가 public폴더에 있는지 src폴더에 있는지, 또는 jsx파일에서 사용하는지 css에서 사용하는지에 따라 경로 설정하는 방법이 달라 처음 경로를 설정할 때 혼란스러운 경험이 있을 수 있습니다. React에서 이미지를 사용하는 방법을 정리해 보았습니다. 어느 폴더에서 관리하는 게 좋은가? 📂 public webpack에 의해 관리되지 않습니다. (minify되지 않고, content hash가 포함되지 않습니다. 대신 원본이 build폴더에 복사됩니다.) public 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수를 사용해야 합니다. 경로가 잘못 되었거나 파일이 없을 경우 컴파일 단계에서 에러가 발생하지 않고, 404 에러가 발생합니다. CRA 문..

토스에서는 한글로 코딩을 하고 있다는 말을 듣고 찾아보게 되었는데 실제로 한글로 코딩을 진행하는 것 같았습니다. 한글로 코딩을 한다는 생각을 해보지 않았던 저로서는 한글로 코딩이 된다고??라는 사실이 더 충격이었던 것 같습니다. 한글 코딩을 찾아보면서 장, 단점을 생각하게 되었는데 어떠한 것이든 장점과 단점이 존재하기 마련이지만 명확한 코딩 컨벤션이 정의되어 있는 상황에서 작업을 진행한다면 단점보다는 장점이 더 많을것 같다고 생각하였습니다. 아래는 토스에서 정의한 세종대왕 프로젝트(한클 코딩 컨벤션) 입니다. 한글 코딩에 관심이 있다면 한번쯤 가벼운 마음으로 읽어봐도 좋을 것 같습니다. 세종대왕 프로젝트 (한글 코딩 컨벤션) 한글 코딩? 어려운 도메인 용어에 대해 변수명을 정할 때, 어색한 영어보다 이해..

1. Responsive Web 반응형 웹이란 태블릿, PC, 모바일 등 다양한 디바이스의 해상도로 접근할 때 불편함이 없는 서비스를 제공하기 위해 디바이스에 맞는 해상도에 따라서 레이아웃과 스타일에 최적화를 해주어 사용자에게 편의성이 높은 UI 화면을 제공합니다. 1-1. Media Query CSS 2.1부터 미디어 타입으로 단말기 종류에 따라서 다른 스타일을 적용시키는 것이 가능했는데 기기의 특성을 정확히 판단하기가 어려워 많이 사용되지는 않았습니다. CSS 3은 미디어 타입을 개선하여 구체적인 조건을 필요한 스타일을 적용할 수 있도록 확장하였는데 이를 미디어 쿼리라고 합니다. Syntax only|not only : 뒤의 조건에서 만 not : 뒤의 조건을 제외한 미디어 타입 all : 모든 미디..

Iframe에서 youtube 동영상을 플레이(노출)시킬 때, 해당 영상이 종료되면 여러 광고 영상들이 노출되는데 일반 기업에서는 광고 영상보다는 자신들의 회사 영상같이 기존 영상과 연관되어 있는 동영상이 노출되기를 원하게 됩니다. 그럴 경우 아래처럼 영상 url 뒤에 옵션 인자를 붙여주게 되면 관련 동영상이 노출됩니다. 💡 영상 종료 후 관련 영상이 노출되게 하는 방법 youtube/embed/동영상주소?rel=0 해당 url뒤에 ?rel=0 을 붙여주면 동영상이 종료된 후에 관련 동영상이 변경됩니다. 매개변수 값을 기본값인1로 설정하면 플레이어에 관련 동영상이 표시됩니다. 매개변수 값을0으로 설정하면 플레이어에 관련 동영상이 표시되지 않습니다. 대신rel매개변수를0으로 설정하면 방금 동영상이 재생된 ..

요즘은 다양한 웹 환경에서 스크롤 이벤트를 요청하는 경우가 이전에 비해 굉장히 많아졌습니다. 오히려 아무런 동적 애니메이션 효과나 이벤트가 없는 정적인 웹 화면이 무언가 심심하고 이상하게 생각되기도 합니다. 리엑트에서 스크롤 이벤트를 구현하는 방법은 사용자(유저)가 스크롤 이벤트를 발생시키는 지 확인하고 스크롤이 발생한다면 이벤트를 적용하는 방법이 가장 일반적으로 생각하는 방법입니다. 이를 위해서 scroll 이벤트를 이용하여 해당 값을 가져오게 됩니다. 하지만 실제로 이렇게 적용해보면 굉장히 많은 문제점이 발생됩니다. - 스크롤 이벤트를 바로 적용한 경우 useEffect(() => { window.addEventListener('scroll', handleScroll); return () => { w..

반응형 웹 테블릿과 스마트폰에서도 인터넷을 사용할수 있게 되자 각 기기 화면 크기에 따라서 사용자들에게 최적화 된 화면을 재공하기 위해 웹 페이지의 사이즈가 '재조정' 되는 것을 말합니다. react-responsive 셋팅 npx create-react-app 작업폴더명 ※ 작업폴더 이름을 react-responsive로 하면 오류가 나니 라이브러리 이름과 다르게 만들어야 합니다. cd 작업폴더명 (작업폴더로 이동) npm install react-responsive npm install @types/react-responsive (typescript를 사용하는 서비스이기 때문에 아래 모듈도 설치 해줍니다. useMediaQuery 문법 const 변수명 = useMediaQuery ({ query :..

데이터를 처리할 때 단순 텍스트를 화면에 보여줄때도 있지만 숫자(Number) 형태의 값을 처리할 때도 상당히 많습니다. 가장 대표적인게 금액인데 금액은 다른 숫자 데이터와 다르게 가독성을 위해서 숫자의 3자리 수 단위마다 콤마(,)를 추가해서 표현해 주곤 합니다. 콤마를 표현하기 위해서는 다양한 방법들이 있는데 여러 방법 중에서 코드도 간단하고 심플하면서 정규식이기 때문에 아래 방법을 사용하면 좋을 거 같아서 아래 방법을 추천합니다. 1. 콤마 변환 function CommaFormat(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } // Number Type 전달 CommaFormat(12345) // '12,345' // Stri..

스크립트를 작성하다 보면 이벤트에서 currentTarget과 target이 구분되어 존재하는 것을 알 수 있습니다. 분명 차이점이 존재하기 때문에 두 개가 구분되어 사용되는 데 그 차이점을 알아보려고 합니다. 💡 currentTarget과 target의 차이점 currentTarget : 이벤트 리스너가 달린 요소 target : 실제 이벤트가 발생하는 요소 좀 더 쉽게 이해하기 위해 예시를 통해서 알아볼게요. Click!! const currentTarget = document.getElementById('event-wrap'); currentTarget.addEventListener('click',(event)=>{ console.log('currentTarget : ', event.currentT..

React를 공부하다 보면 useMemo와 useEffect의 기능이 비슷하면서 다르다고 느끼는데 그 차이점을 처음에 정확히 이해하기가 쉽지 않습니다. 그래서 두 기능의 차이점을 알아보고 어떠한 상황에서 두 기능을 각각 사용하는지 정리해보려고 합니다. useMemo와 useEffect의 기능을 공식 문서에 정의되어 있는 내용을 다시 한번 살펴볼게요. useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 공식문서에 보면 useMemo는 [메모이제이션된 값을 반환합니다. “생성(create)” 함수와 그것의 의존성 값의 배열을 전달하세요. useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산할 것..

디자이너에게 전달받은 디자인을 GUI 작업을 할 때 많이 사용되는 부분 중 하나가 X(닫기) 버튼입니다. 이걸 모두 이미지로 관리하자니 모양이나 크기만 조금 다를 뿐인데 리소스 관리적인 부분에서 상당히 비효율적인 부분이 발생하게 됩니다. 이때 X(닫기) 버튼을 이미지가 아닌 CSS로 만들어서 관리하면 이슈 대응도 편리하고 리소스적인 부분도 중복되지 않아서 효율적입니다. CSS로 X 버튼을 만드는 방법입니다. 첫 번째 방법 : content: "\00d7"를 활용 가상 선택자(before, after)에 content: "\00d7"; 만 추가해주면 아주 간단하게 X 버튼이 만들어 집니다. 크기는 font-size로 조정하면 되고 크기를 키울수록 굵기가 자동으로 굵어집니다. 다만 이 방법은 굵기의 세밀함을..