쩡이 개발공부 블로그

↓border의 시계방향으로 빛나는 애니메이션이 있으면 좋겠다라는 요청이 있었다. 처음에는 단순하게 'border에 애니메이션을 주면 되지 않나?'라고 생각했는데 큰 착각이었다..! 결론만 말하자면, 그라데이션 또는 애니메이션 효과를 준 큰 박스를 뒤에 깔고 넘치는 부분을 가리는 것이다. (항상 회사에서 참고했던 레퍼런스는 노션에 정리해두는데 정신이 없었나 안적었다 ㅜ) 보통 더 큰 box를 만들거나 :after, :before 요소에 적용시키는 것 같았는데, 나는 :after 속성에 적용시키는 방법을 선택했다. [ 가상 요소 ] 내용의 일부만 선택해 스타일을 적용할 때 사용한다. 가상 클래스와 구분하기 위해 클래스 이름 앞에 콜론 두개(::)를 붙여 표시한다. 콜론 하나(:)만 붙여도 브라우저에서는 가..

history API (MDN) 브라우저에서 페이지 로딩을 하면 세션 히스토리를 갖는다. 세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다. 메소드가 많지만 내가 사용할 건 replaceState라 해당 메서드에 대해서만 간단하게 정리해보려고 한다. replaceState history를 수정한다. (주소 목록에 추가하지 않기 때문에 뒤로가기 버튼이 활성화되지 않는다.) history.replaceState(stateObj, title[, url]) stateObj는 자바스크립트 객체이다. history.state에 저장되어 사용할 수 있다. title은 대부분의 브라우저가 무시하는 값이라 빈 문자열 또..

특정 탭을 클릭하면 탭에 해당하는 내용 부분으로 스크롤이 이동했으면 좋겠다는 요구사항이 생겨서 기록 겸 적어보려고 한다. 리액트에서는 특정 컴포넌트에 어떤 동작을 수행하고 싶을 때 useRef를 사용할 수 있기 때문에 useRef를 사용했다. 짧은 예시) const ScrollExample = () => { const scrollRef = useRef(null); const onClickToMove = () => { scrollRef.current.scrollIntoView({ behavior: 'smooth', }) } return ( 이 곳으로 이동 클릭 ! ); }; *scrollIntoView 는 특정 앨리먼트 위치로 스크롤을 이동시켜주는 내장 메서드이다. 옵션으로 - block (수직 요소에 대..

회사에서 클린 아키텍처 구조를 사용하고 있는데 공부할 겸 간단하게 정리해보려고 한다 .. 클린 아키텍처 클린 아키텍처는 '추상화 개념'으로써 관심사를 분리시키고 의존도를 낮추는 것에 목적을 둔 아키텍처이다. 이렇게 했을때의 이점은 의존도를 낮추고 서로에게 주는 영향을 감소함으로써 유지보수의 용이성을 향상시킨다. 기본적인 원리는 종속성 규칙(Dependency Rule)을 지키는 것이다. 각 코드의 종속성은 외부에서 내부로 안쪽으로만 가리킬 수 있고, 고수준 정책(High level policy)이 저수준 정책(Low level policy)의 변경에 영향을 받지 않도록 하는 것이다. 여기서 의미하는 수준(Level)은 입/출력과의 거리를 의미하는 것으로, 고수준 정책은 보통 UI 또는 인터페이스와 거리가..

개발 환경에 배포해서 테스트를 해야 확인이 가능한 작업이 있었다. 그래서 push 하고 난 후 배포를 했는데 처참히 실행되지 않아버렸다 .... 기억하기 위해 Git push 했던 것을 되돌려야 하는데 사실 처음 해봐서 기록용 ...! 1. 먼저 git log를 확인한 후 커밋 해시를 찾는다. 2. git reset --hard 명령어를 사용한다. git reset --hard commit 3. 되돌아간 상태에서 다시 push 하면 끝! git push -f origin develop **여기서 -f 플래그는 강제 푸시를 수행하는 것을 의미한다. 아직도 기억할게 많다..!

일단 스와이퍼 사이트는 이곳이다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 중간 배너를 만들어야하는데 회사에서 이미 Swiper를 사용하고 있어서 이걸 이용해서 만들었다. 일단 홈페이지에 너무 친절하게 예시와 코드가 나와있어서 크게 어려울 건(?) 없었다. 우선 슬라이드에 보여줄 아이템들을 만들어준다. const items = [{ id: 1, imgSrc : imgSrc1, },{ id: 2, ..

어떤 함수를 실행시킨 결과를 보내야 하는데, 큐가 받는 형식에 맞게 수정을 해서 보내야 한다. 함수 실행 결과는 아래처럼 나온다. { productNo : number; Items : ItemModel[]; start: string; end: string; execTime: string; } 여기서 같은 productNo를 가진 아이템들을 합치고, 시작 시간과 종료 시간을 비교해서 넣어줘야 한다. 이제 reduce를 사용해 acc 배열 순회하면서 중복 productNo를 가진 항목들을 병합하여 최종 데이터를 생성한다. const Data = messageList.reduce((acc, item) => { let isEdit = false; for (let i = 0; i < acc.length; i++)..

useState를 사용해서 API 호출 결과를 관리하려고 했는데, 브라우저가 먹통(?)이 돼버렸다... 상태 변경 후에 업데이트 돼야 하는 컴포넌트가 렌더링 되지 않아서 그런가 싶었다.. 사수분께서 MobX를 사용하면 될 것 같다고 말씀해주셔서 도움을 받았다 ..! MobX 주요 개념 Observable State (관찰받고 있는 상태) - 상태의 변경이 있으면 MobX에서 관찰하고 있다가 어느 부분이 바뀌었는지 파악한다. Computed Value (연산된 값) - 기존의 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값으로 성능 최적화를 위해 사용된다. 어떤 값을 연산할 때, 연산에 기반되는 값이 바뀔 때만 새로 연산하고, 바뀌지 않았다면 기존의 값을 사용한다. Reactions (반응) - ..