print 기능을 이용하게 되어 정리할 겸 기록~ 컴포넌트 전체코드 주의할 점 : react는 spa이기 때문에 document.body의 innerHTML을 변경해놓게 되면 새로고침을 해야한다. 하지만 새로고침을 하면 state는 초기값으로 돌아가게 되는데 이를 원치 않을 경우, 현재창이 아닌 새창에서 열기를 하면 된다. 그럼 현재의 돔트리에는 아무 수정이 없기 때문에 괜찮음!
print 기능을 이용하게 되어 정리할 겸 기록~ 컴포넌트 전체코드 주의할 점 : react는 spa이기 때문에 document.body의 innerHTML을 변경해놓게 되면 새로고침을 해야한다. 하지만 새로고침을 하면 state는 초기값으로 돌아가게 되는데 이를 원치 않을 경우, 현재창이 아닌 새창에서 열기를 하면 된다. 그럼 현재의 돔트리에는 아무 수정이 없기 때문에 괜찮음!
네 그렇게 하기 싫었던 제이쿼리를 하게되었습니다. 정말 제이쿼리 직관적이긴 한데 너무 무겁고 옛날 스타일이고… 아무튼 제이쿼리 페이지네이션을 맡게 되어서 정리할 겸 올립니다. 일단 페이지네이션을 여러페이지에서 사용할 거라 함수로 만들었고, 프로젝트 구조에 맞춰 append 하기 때문에 주석처리 해놓은 부분은 자신의 프로젝트 구조에 맞춰 바꾸면 됩니다. 페이지네이션 코드 (param: append할 tableId, 전체데이터 수, 테이블에 나타낼 데이터 수, […]
퍼블리싱을 받았는데, noscript와 script 태그를 사용한 부분이 있었다. 문제는 리액트에선 두 태그를 사용하기가 까다롭다는 것… 그래서 아예 html파일을 만들고, 해당 파일을 iframe으로 렌더링하기로 했다. html 예시 iframe을 이용해 렌더링하는 법
회원가입 할 때 주소를 입력받아야 해서 카카오 우편번호 api를 사용하게 되었다. 어어어어어엄청 쉽다. 설치 사용
슬라이더 구현에 react-id-swiper 라이브러리를 사용하게 되었다. 자동재생을 멈추고 다시 재생시키는 컨트롤 기능을 구현해야하는데 문서를 찾아봐도 react에서 인스턴스 생성하는게 없었고, useRef를 이용해도 계속해서 null값만 들어왔다. 그러던 중, github에서 해답을 찾았다. (출처 : https://github.com/kidjp85/react-id-swiper/issues/20) 나도 해당코드를 사용해서 메소드로 자동재생을 컨트롤 할 수 있었다. 사용예시
문자열 replace는 특정 값을 지정한 값으로 바꿔주는데, 문자열 전체를 바꿔주진 않는다. 처음 해당하는 변수만 바꿔주고 실행을 멈춘다. 그렇다고 for문을 다 돌리기엔 코드 가독성이 안좋아서 정규식으로 하는 방법을 찾았다. 이렇게 하면 된다! 혹시 안의 값이 소대문자 구문이 필요하지 않으면 gi를 넣으면 된다.
섹션마다 스크롤 이벤트를 더해야해서 custom hook으로 만들어봤다! 노마드 코더와 다른 점은 element가 정해진 지점에 오게되면 true를 반환해서 해당 컴포넌트에서 스타일을 더하게된다. (이건 각자 css에서 정하면 된다 나같은 경우는 fade in) useScroll 사용예시
api로 받은 데이터에 \n이 포함되어있는데, 받은 그대로 렌더링을 하면 줄바꿈이 되지 않는다. 그럴 땐 \n을 기준으로 split하여 배열을 생성하고, 렌더링 하면된다.
자바스크립트에서 빈 객체를 체크하는 법 빈객체는 null, undefined, length로 체크를 할 수 없기 때문에 객체의 속성을 배열로 만드는 Object.keys()함수를 사용해서 빈 객체를 체크한다. 사용예시
프로젝트를 진행하는데 api마다 axios의 headers를 import해서 사용하였다. 그런데 그렇게 사용하다보니 axios가 header를 매번 update하지 않아서 authorization이 제대로 되지 않았다. 예를 들면, 로그인 하기 전의 token value를 가지고 있어서 로그인 하고 나서 새로고침 하기 전까지는 authorization이 undefined or null 값이 들어가게 되었다. 그래서 막 찾다보니 axios.interceptor로 이슈를 해결할 수 있었다. interceptor는 axios가 request가 발생할 때마다 작동하게 […]