-
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이라는 컴포넌트를 보고 […]
-
Reactjs 2020‧07‧15
컴포넌트 안에서 method 호출 or arrow 함수 호출 (feat. this 이슈)
예를 들어 클릭 이벤트에 state 의 값을 변경하려고 함수 호출하거나 메서드를 호출한다.ES6 문법의 arrow 함수 방식으로 호출할 경우는 증가 버튼을 클릭하면 onClick으로 handleInc 인 arrow 함수 호출하여 state 값을 변경하는 예제였다.이 것을 ES6 문법이 아닌 예전 방식으로 코딩하면 아래와 같다. constructor 안에서 이벤트 메서드를 this.handleInc = this.handleInc.bind(this); 이런식으로 this를 바인딩 해줘야한다.그렇지 않으면 number 가 undefined […]
-
Reactjs 2020‧07‧15
props (부모 컴포넌트에서 자식 컴포넌트로 데이터 전달)
자식 컴포넌트가 부모 컴포넌트로 부터 데이터를 받아와서 처리해야할 경우가 생긴다.우선 부모 컴포넌트에서 자식 컴포넌트 쪽으로 데이터를 전달하기 위해 전달하려는 속성을 추가한다. ChildComp 에 userName 의 값을 'insik'으로 전달했다.이제 자식 컴포넌트인 childComponent.js 를 생성하여 아래 코드를 삽입한다. this.props.userName 을 통해 부모로 받은 값을 노출한다.위 코드 중에는 defaultProps가 있다. 이 것은 부모 컴포넌트에서 props를 전달하지 않았을 때 […]