-
AWS, Reactjs, Server 2023‧10‧04
YN0028: The lockfile would have been created by this install, which is explicitly forbidden.
aws codebuild 를 진행하던 중 나온 오류이다. 기존 npm 으로 빌드를 하는 방식에서 yarn으로 바꾸면서 생긴 오류인데 위 내용은 lockfile을 생성하면 안된다는 의미의 오류이다. Aws codebuild - build project - buildspec 안에 빌드 커맨드가 있는데 yarn install 이 있기 때문이였다. yarn install 을 동작 시킬 때 기존에 yarn.lock 파일이 없다면 생성하게 되는데 이 때 생성을 […]
-
Javascript, jQuery, Reactjs, Tools 2022‧07‧15
js - 채널톡 삽입(커스텀 버튼, 뱃지 카운트, 서포트봇 양식 연동)
요즘 채널톡(https://channel.io/)을 이용해서 웹사이트에 채팅 상담을 하는 기능을 만드는 데 기본 제공하는 스크립트를 넣어 아래처럼 버튼 설치 및 설정을 통해 쉽게 구현할 수 있다. 그러나 이렇게 삽입을 하면 아래 이미지처럼 기존 웹사이트의 최상위 레이어로 위에서 생성한 버튼이 고정 노출되게 된다. 하지만 웹사이트 개발할 때 기존 웹사이트 ui/ux 맞게 채널톡 버튼을 만들고 싶고 거기에 채팅 메시지가 […]
-
Reactjs 2022‧04‧20
react jsx 스타일을 조건 넣어 인라인으로 처리
기존에 리액트로 작성할 때 인라인으로 스타일을 넣고 조건에 맞춰 값을 넣은 적은 있었다. 예를들어 state 에 abc 값이 있으면 0, 없으면 100%의 width로 지정한다고 할 때, 이렇게 쓸 수 있다.그런데 이렇게 되면 강제로 width를 꼭 이 곳에서 처리되게 된다. 다른 css 파일들에서 이 영역에 스타일을 붙였다면 그 스타일들은 무시되고 위에 인라인으로 처리된 것이 적용될 것이다. […]
-
Reactjs 2021‧04‧09
`value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
리액트에서 input 요소에 value 값을 데이터를 가져와 넣는 형식으로 구성했다면 콘솔에 아래와 같이 오류가 빨갛게 뜬다. 그래도 번들링은 이상없이 된다. 그렇지만 우리는 이 빨간색이 저주스럽지 않은가? 당연히 없애고 싶은 개발자의 마음이니까~ 이렇게 코드를 작성했는데 value에 보면 this.state.companyCode 값을 가져와 넣도록 되어 있다. 바로 이 부분이 잘못된 것이다. 없을 경우에 대해서도 처리를 해주자 value={this.state.companyCode} 를 value={this.state.companyCode […]
-
Reactjs 2021‧01‧07
react, vue - Uncaught SyntaxError: Unexpected token < (흰 화면 이슈)
매번 SPA로 프로젝트를 진행할 때 마다 나를 괴롭히는 에러 메시지 ㅠUnexpected token '<' 지금까지 vue.js 로 구축하거나 react.js 로 구축하여 프로젝트를 번들링 후 배포하고 나면 종종 발생하는 에러라서 이 것 때문에 많은 대응책을 마련해 왔다. 원인을 살펴 보자면 배포하고 접속하면 index.html이 브라우저의 캐시 상태이기 때문에 배포 바로 이전 버전의 index.html 이다. 그 안에 번들링한 js파일을 […]
-
Reactjs 2020‧12‧23
this.props.history.push 이동시 파라미터 같이 보내기
보통 이렇게 이동할 링크를 push() 안에 넣어 쓴다. 하지만 사용자 토큰 정보나 결제 정보 또는 게시물의 일련번호 등 다음 페이지로 넘어갈 때 파라미터를 가지고 넘어가야할 때 push를 써서 이동할 때는 아래처럼 이용한다. 위 처럼 전달할 파라미터를 담아 보내면 된다. 객체 형식으로 보내도 된다.그리고 전달 받는 페이지에서는 아래처럼 불러온다. 이렇게 불러오면 getParams안에 전달받은 파라미터가 담아져 있다. […]
-
Reactjs 2020‧10‧27
iOS에서 뒤로 가기 전환시 스크롤링 포지션 이슈 (route, scrollTop)
최근에 react.js 로 구현된 어플리케이션에서 페이지 이동 후 뒤로 가기 위한 행동을 하면 스크롤 포지션이 엄하게 바뀌는 경우를 대처하기 위해 이런 저런 방법을 찾아 본 뒤 원인을 찾게 되었다. iOS에서 앵커 태그(a) 가 아닌 이동일 경우에 생기는 이슈인 듯 하다.예) this.props.history.push('/main');리액트 라우터를 이용해 페이지가 전환되었을 경우 생기는 데 기존 프로젝트에 보니 route에 scrolltop이라는 컴포넌트를 보고 […]