본문 바로가기

분류 전체보기

 (254)
[React.js] 버전 호환 문제 React.js 17버전과 React Router 버전5와 결합했을 때 충돌이 생기지 않는다. React.js 18버전과 React Router 버전6와 결합했을 때 충돌이 생기지 않는다. 참고로 React Router 버전5와 React.js 18버전을 함께 사용할 경우, 예를 들어 메인페이지에서 링크 클릭후 서브페이지로 이동을 원할 시 url은 변경되나 페이지가 렌더링되지 않는 현상이 있다. 직접 겪고 당황하여 찾아봤는데 React.js 버전을 17로 다운그레이드 하거나, Switch 컴포넌트 대신 Route를 쓰고 element={}로 해당 되는 컴포넌트를 작성하는 특징이 있는 라우터 버전 6으로 라우터 버전 업그레이드를 권장하는 거같다. 또한 React.js 18버전일 경우, 타입스크립트에서 Re..
[React.js] github clone 로컬 충돌 해결 방법 초반에 리액트로 만든 레파지토리를 다른 로컬에서 clone 받았을 경우, node_modules 폴더가 없고 터미널에 아무리 npm start를 날려 봐도 react-script가 없다는 말만 계속 나오는 경우나 실행이 되지 않는 경우.. 적지 않게 당황한다. 나중에 협업을 위해 그리고 내 자신과의 협업을 위해 기록용으로 남겨두고자한다. (알아낸거라 틀린 부분도 있을 수있어서 참고 부탁드립니다!) node_modules 은 해당 로컬에만 위치하고, 깃헙에 협업을 위해 푸시할경우, 그전에 레파지토리명/.gitignore 파일 (깃이 푸시할때 무시해도 좋은 것들을 나열하는 느낌? 이부분은 더 공부가 필요) 생성후, node_modules 를 작성후에 푸시를 해주자. 이유는, node_modules는 용량이 ..
[javascript ES6] 내가 이해한 화살표 함수 화살표 함수가 분명 간단하고 사용하기 편리한건 알겠는데 자꾸 헷갈려서 기록용으로 적어보려 한다. 우선 내가 이해하기로는 function sampleFun () {} const sampleFun = () => (); 이렇게 사용될 수 있다. 단 이럴경우는 함수 내에 return 값만 있을 경우 {} 중괄호와 return이라는 용어를 생략할 수있다. 만약 return외의 값들 (변수 등등)이 들어가야 하거나 딱히 return 값이 없을 경우 아래와 같이 화살표 함수를 쓰면 된다. let count = 0; const sampleFun = () => { count = count+1; span.innerText = `Total clicks : ${count}`; }
[VSCode] 자동 formatter 플러그인 소개 https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode Prettier - Code formatter - Visual Studio Marketplace Extension for Visual Studio Code - Code formatter using prettier marketplace.visualstudio.com React.js 공부를 하는 도중 VScod 플러그인 중 JSX (Javacript를 확장한 문법으로 HTML에서 사용한 문법과 흡사)를 입력하고 저장했을 시 자동 formatter 해주는 플러그인을 발견해서 소개하고자 한다. 1. VSCode 플러그인 : Prettier - Code formatter 검색 후 ..
[Swiper.js] 멀티 슬라이더 외부 pagination과 navigation 잡기 swiper 기본 특성 상 swiper-slider 안에 pagination 과 navigation이 존재하며 기본적으로 슬라이더 안의 있는 리모트(pagination 과 navigation)들을 인식하게 된다. 디자인에서 pagination 과 navigation이 대상 슬라이더 밖에 존재해야할 UI가 있을 때 독립적인 하나의 슬라이더만 존재하면 문제가 되지 않다. 하지만 이와 같은 두개이상의 슬라이더가 있을 때 리모트는 정상 작동이 되지 않는다. 따라서 약간의 스크립트 수정이 필요하다. HTML 상시제 이러닝 모집중 자격교육(직업능력개발훈련교사) 기업현장교사 심화과정 [1단계] 온라인교육 (21시간) [2022-1]차 접수기간 상시 신청인원 112 / 9,999 교육기간 2022.01.01 ~ 202..
[onmouseenter, onmouseleave] html img에 활용하기 주의할 점은 img태그안의 마우스 이벤트를 입력한 것이기 때문에 이 이미지 태그 외의 다른 태그에 마우스 호버를 해도 변함이 없다. 즉 아래와 같이 아이콘과 텍스트가 함께 있는 블록의 마우스 이벤트를 넣고 싶다면 javascript나 jQuery로 작업을 추천한다.
[VSCode] Sass Live Complie 설정하기 SASS를 VSCode에서 사용하기 전에 몇가지 셋팅이 필요하다. 1. 어떤 파일을 컴파일 할것인가? 2. 컴파일한 css는 어떤 형태로, 어디에 저장할 것인가? 3. 오토프리픽스 즉, 브라우저 마다 지원하는 스타일로 변환을 할 것인가? 4. 컴파일시 .map 파일도 추가할 것인가? 1. 답 : 여기서는 style.scss만 컴파일 할것이다. 2. 답 : 여기서는 compressed(압축으로 기본 min 확장자명을 가진 파일)로, scss파일이 위치한 동일 선상에 저장할 것이다. 3. 답 : O 4. 답 : X .map파일은 추후 이 클래스의 스타일이 어디에 위치해있는지 보여주는 파일로 유용하게 쓰이기도 한다. [설치할 플러그인] Sass Live Sass Compiler [셋팅 방법] 왼쪽 하단 톱니바..
[github] adding embedded git repository 가 뜨고 push 되지않을 경우 기존 내 개인 레파지토리에 추가할 폴더가 생겨서 회사 깃헙 계정이 아닌 개인 이메일과 이름으로 변경후 연결했었다. 폴더를 추가한 후에 push를 날리려니 아래와 같은 경고가 떴다. 원인은 추가할 폴더 안에 .git 설정의 user.name과 맞지않았기 때문... 추가하려는 폴더는 회사 깃헙 계정으로 작업해 둔 것이기 때문에 충돌이 일어난것 같았다. 따라서 간단히 추가할 폴더 안의 .git 파일을 없애고 다시 git add . 를 날리니 정상으로 스테이징 되었다.

티스토리툴바