본문 바로가기

분류 전체보기

styled-components 기본 사용법 & ProviderTheme & globalSetting & motion-framer와 사용하기
Language & Framework/React.js 2022. 4. 17. styled-components 기본 사용법 & ProviderTheme & globalSetting & motion-framer와 사용하기 styled-components는 리액트에서 사용되는 대표적인 CSS in JS 라이브러리다. 어쩌고 저쩌고.. 이런 쓸데없는 설명은 여기저기 써있으니 패스하고 내가 styled-components를 사용하게 된 계기는 다음과 같다. ( 어제 처음 써봄 ㅎ ) 1. 클래스명 짓기가 귀찮다. BEM 규칙에 따라 지으면 되지만 그것도 귀찮다. 2. styled-components를 사용하다가 scss or css로 전환하는 건 러닝커브가 없으나 scss or css를 사용하다가 styled-components를 사용하면 러닝커브가 존재한다. 미리미리 대비해 놓으면 나중에 더 편하지 않을까? 3. 모듈식 개발을 하면 css 파일 여기저기 돌아다니며 수정해줘야 하는데 너무 귀찮다. '귀찮다'라는 말이 두번이나 ..
framer motion으로 라우터 전환 시 애니메이션 구현하기
Language & Framework/React.js 2022. 4. 15. framer motion으로 라우터 전환 시 애니메이션 구현하기 이런 생각을 하기 귀찮거나 나의 CSS 스킬이 갓 태어난 밤비 다리처럼 흔들흔들하다면 라이브러리 설치 후 사용도 좋은 방법입니다. react-transition-group 이라는 라이브러리를 설치하시면 간단한 애니메이션 부여하기 쉽습니다. 쉬운건 아니고 패턴만 아시면 됩니다. - 음지의 1타강사 코딩애플님(사랑해요) 코딩애플님의 명언을 떠올리며 갓 태어난 밤비처럼 흔들리는 다리를 붙들고 react-transition-group으로 라우터 전환 애니메이션을 구현하려고 했다. 근데 안 된다. 왜 안되지? 어제 하루를 온전히 react-transition-group 사용법 연구에 바쳤는데 결국 실패했다. 지연시간을 주는 것까지는 되는데 이상하게 css transition이 적용이 안되고 뻣뻣하게 넘어간다. 외..
리액트 warning : Cannot update a component (``) while rendering a different component (``). To locate the bad setState() call inside ``, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
Language & Framework/React.js 2022. 4. 14. 리액트 warning : Cannot update a component (``) while rendering a different component (``). To locate the bad setState() call inside ``, follow the stack trace as described in https://reactjs.org/link/setstate-in-render  일단 결론부터 말하자면 https://github.com/facebook/react/issues/18178#issuecomment-595846312 해당 주소로 접속하면 문제가 있는 코드를 탐색하는 방법을 안내하고 있다. 앞에 react- 어쩌고 저쩌고 표기되어 있으면 그냥 정상 코드, 붙어있지 않은 친구들이 문제 있는 아이들이니 확인해주면 된다. 해당 글을 대략적으로 읽어봤는데 v16부터 추가된 경고 메세지이며 당장 문제를 발생시키지는 않지만 어떤 방법을 사용해도 해당 경고 메세지를 제거할 수 없다면 추후 호환에 문제가 될 수 있으니 리액트 v15를 사용할 것을 권고하고 있다. 물론 지금은 이미 리액트 v18까지 나온 상태이니 옛날 얘기다. 나의 경우 event.js는 확인해보니 emitter에 관..
react-draggable을 이용해서 드래그 앤 드롭 구현하기
Language & Framework/React.js 2022. 4. 12. react-draggable을 이용해서 드래그 앤 드롭 구현하기 코딩 애플에서 리액트를 배우며 뼈대만 만들어 놓은 쇼핑몰이다. 당장 어떤 기능을 추가해볼지 마땅히 생각이 나지 않던 차에 최근 본 상품 목록이 스크롤 위치나 화면 크기에 따라 몹시 거슬린다는 사실을 알게 됐다. mouse move 이벤트를 이용하여 직접 만들어봐도 되겠지만, 예전에 자바스크립트에서 구현해본 결과 그다지 마음에 들지 않았고 이번에는 라이브러리를 활용해보기로 했다. https://www.npmjs.com/package/react-draggable react-draggable React draggable component. Latest version: 4.4.4, last published: 8 months ago. Start using react-draggable in your project..
React v18에서 나오는 에러 "ReactDOM.render is no longer supported in React 18"
Language & Framework/React.js 2022. 4. 4. React v18에서 나오는 에러 "ReactDOM.render is no longer supported in React 18" 현재 리액트를 사용하면 콘솔창에 "경고: ReactDOM.render는 React 18에서 더 이상 지원되지 않습니다. 대신 createRoot를 사용하세요. 새 API로 전환할 때까지 앱은 React 17을 실행하는 것처럼 작동합니다. 자세히 알아보기: https://reactjs.org/link/switch-to-createroot ”라는 경고 메세지가 계속해서 노출된다. ./src/index.js 파일을 확인하면 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; React..
바닐라 자바스크립트로 드래그앤 드롭 장바구니 만들기(웹개발 기능 대회 문제)
Language & Framework/실습 2022. 3. 31. 바닐라 자바스크립트로 드래그앤 드롭 장바구니 만들기(웹개발 기능 대회 문제) 코딩애플에서 심심하면 도전해보라고 올려놓은 문제인데, 사실 3주 전에 시도했다가 "강해져서 돌아오마.."를 시전하고 이제서야 만들었다. 사실 답안을 참고해서 만들어도 됐겠지만 그건 자존심이 허락하지 않았고 그렇다고 막히는 걸 계속 붙잡고 있기엔 내가 시간이 별로 없으니 잠시 뒤로 미뤄놓게 되었다. 사실 만드는 것보다도 내가 꾸준히 집중해서 코딩을 할 수 있는 환경이 아니다보니 계속 흐름이 끊겨서 뭘 하고 있었는지 다시 파악하는 게 더 어려웠다 ^^.. 그래도 처음 시도했을 때는 날 꽤나 괴롭게 만들었던 녀석이기 때문에 기억 보존을 위해 기록을 남긴다. 문제 조건은 다음과 같다. 1. JSON 파일을 이용하여 동적으로 HTML 생성 (상품 목록) 2. 검색창에 제품 이름을 입력하면 해당 제품만 필터링. 3..
드림코딩 브라우저 101 완강 후기
Language & Framework/실습 2022. 3. 30. 드림코딩 브라우저 101 완강 후기 그래도 이제 자바스크립트 좀 만지작거려 봤다고 혼자서 다 만든 뒤에 강의를 봤는데, 엘리님의 코드를 보고 내 코드를 보니 진짜 답이 없다는 생각이 들어 모두 지우고 새로 작성했다. 아주 유익한 강의였지만 내재화하려면 갈 길이 멀고도 험난한 것 같다.. 특히 리팩토링은 삼일간 붙잡고 있었으나 이게 한컴 타자연습을 한 건지 강의를 들은 건지 분간이 되지 않아 일단 뒤로 미뤄놨다. 그리고 자바스크립트 초보자에게 적합한 강의는 포트폴리오 만들기가 아니라 브라우저 101 강의인 것 같다. 둘 중 하나만 듣는다면 무조건 브라우저 101 강의를 듣는 걸 추천하고 둘 다 들을 거라면 html, css는 부분까지만 포트폴리오 강의를 진행 후 브라우저 101 강의를 완강하고 나머지를 만드는 방식으로 들을 것을 추천한다. ..
자바스크립트로 간단한 투두리스트 만들기.
Language & Framework/실습 2022. 3. 28. 자바스크립트로 간단한 투두리스트 만들기. 자바스크립트 초보들이 모두 거쳐간다는 투두리스트. 사실 만든 지 좀 됐는데 요즘 블로그에 글 올릴 시간은 커녕 코딩할 시간도 없어서 허덕이던 터라 미루고 미루다 이제야 올린다.. 작성하고, 지우고, 남은 할 일 개수를 카운트하는 아주 기본적인 기능만 가진 투두리스트다. HTML / CSS To Do List + You have 4 pending tasksClear All * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ font-family: "Noto Sans KR", sans-serif; &:..

티스토리툴바