현재 Styled-Component를 쓰는 프로젝트를 진행하고 있다. 익숙한듯 익숙하지 않은 신기한 문법.편한 방식이지만 처음부터 제대로 쓰긴 어려운 것 같고 입문자 기준 조금 생소한 부분에 대해서 정리해봤다. attr 속성 추가하기말 줄임 ellipsis 처리를 한 곳에는 항상 title 속성을 추가해주는 버릇이 생겼다.구현해야 할 기능에 따로 명시된 건 아니지만 나는 넣어주는 편.const TitleText = styled.p.attrs(props => ({ title: props.hoverTitle}))`... .attrs()는 기본 속성을 설정해주는 문법이다.hoverTitle prop을 title 속성으로 변환하여 attr 속성으로 추가해줬다. hover 처리하기도메인 내용을 빼느라 코드..
티스토리챌린지
오늘 인텔리제이로 특정 브랜치를 pull 받다가 설정이 충돌 난건지 프로젝트 구조가 갑자기 깨졌다. .env.gitignore.jsconfig.jsonpackage.jsonpackage-lock.jsonREADME.mdExternal LibrariesScatches and Consoles 브랜치를 받고 나서 인텔리제이 프로젝트 구성에 남은 잔해들... src, node_modules, public 등의 디렉토리가 보이지 않는다.소스코드도 전혀 인식하지 못하고 파일을 검색해도 찾을 수 조차 없었다. 하지만 파일 탐색기로 실제 프로젝트를 열면 멀쩡히 존재하는 파일들.인텔리제이가 프로젝트의 루트 디렉토리를 인식하지 못한다. 어떻게 해결할 수 있을까?IntelliJ 설정 확인하기우선 인텔리제이 설정을 확인해보..
첫 회사에서 개발을 시작했을 때, 소장님께서 "로그는 꼭 필요할 때만 남기는 게 좋다"라는 조언을 들었다. 그래서 나는 그 이후로 로그를 남길 때 정말 신중하게 접근하는 편이 되었다. 그런데 지금 회사는 분위기가 완전히 다르다. 협업하는 사람들이 굉장히 많고, 그들 모두 로그를 적극적으로 남긴다. 뭐가 맞고 뭐가 틀리다라고는 할 수 없겠지만 한 가지 문제가 있다. 너무 많은 로그 속에서 내 로그를 찾는 일이 쉽지 않다는 것이다. 화면이 렌더링 되는 순간 후루룩 쌓이는 로그들... 그렇다고 남의 로그를 지우는 것도 예의는 아닌 것 같다. 지금은 임시 방편으로 마운트 시점에 console.clear() 라인을 적어서 내 로그만 볼 수 있게 해뒀다. 혹시 이렇게 로그를 남기는 습관이 든 분들은 남의 로그도 ..
업무에서 첨부파일 업로드 솔루션을 적용하는 도중 드래그앤드롭을 구현하게 됐다.라이브러리를 써야할 정도로 다양한 기능이 필요한 것은 아니여서 html5에서 제공하는 드래그앤드롭 API를 사용했다. 아주 간단하게 기능만 동작하는 코드를 가져왔다. State 및 상태 관리const [files, setFiles] = useState([]);useEffect(() => { console.log(files);}, [files]);files가 변경될 때마다 로깅한다. 드래그 앤 드롭 이벤트 핸들링// 드래그 중일 때 이벤트 발생const handleDragOver = (e) => { e.preventDefault(); e.stopPropagation();};// 파일을 드래그 영역 위에 떨어트렸을 ..
객체/배열 변환const obj = { a: 1, b: 2, c: 3 };const entries = Object.entries(obj);console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]const newObj = Object.fromEntries(entries);console.log(newObj); // { a: 1, b: 2, c: 3 } 배열 중복 제거const arr = [1, 2, 2, 3, 3, 4];const unique = [...new Set(arr)];console.log(unique); // [1, 2, 3, 4] Math.floor() 대신 정수 구하기 (정수 변환)console.log(~~4.2); // 4console.log(5.7..
자바스크립트 내장 객체인 Intl에는 국제화를 지원하는 기능들이 포함되어 있다.날짜나 통화같이 국제적으로 형식이 다른 데이터들을 Intl API를 이용해서 포맷해보자. Intl.NumberFormat()NumberFormat 메소드는 숫자를 특정 지역에 맞는 형식으로 자동으로 변환해준다.const cost = 1267900;// 원화(KRW)로 변환const krw = Intl.NumberFormat("ko-KR", { style: "currency", currency: "KRW" }).format(cost);console.log(krw); // ₩1,267,900// 달러(USD)로 변환const usd = Intl.NumberFormat("en-US", { style: "currency", curre..
개발을 하면서 디버깅이나 로깅을 할 때 console 객체의 log, warn, error 메소드를 보통 많이 쓴다.가장 많이 사용하는건 console.log()와 console.error().하지만 생각보다 더 많은 메소드들이 있었다. 이번 포스팅에서는 console 객체의 메소드들에 대해서 살펴보고 다양한 상황에 잘 활용할 수 있도록 공부해보려고 한다. console.log(), console.info()console.log("String");console.log("Number: ", 123);console.log("Object: ", { name: "youngdev", age: "30" }); 일반적인 로그 메세지를 출력할 때 사용하는 log() 메소드이다.가장 많이 사용한다. console.inf..
프론트로 리액트 프로젝트를 잠깐 진행할 일이 있어 인텔리제이에서 환경을 세팅하다 발생한 문제.업무용 PC에서 node를 설치한 후에 node -v 명령어를 통해 노드 버전을 확인하고 있었다. 신기하게도 VSC에서는 node가 잘 인식되지만 인텔리제이에서는 터미널에 아래와 같은 에러가 발생했다. node : 'node' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 그냥 node를 인식하지 못하고 있는듯 했다.이런 경우는 빈번했기 때문에 나는 먼저 환경변수 설정을 체크했다. 환경변수 체크 1. 윈도우 검색에서 [시스템 환경 변수 편집] 검색 후 실행2. 고급 ..
