분류 전체보기
-
error: internal/modules/cjs/loader.js:883개발/삽질 기록 2020. 12. 14. 09:58
리액트 프로젝트를 복사해서 다시 사용하는데 이런 에러가 발생했다면. internal/modules/cjs/loader.js:883 이전에 사용한 프로젝트의 node_modules에서 만든 경로랑 꼬여서 생긴 문제일 확률이 높다. 이럴때는 모듈 별로 수정하는 방법이 있겠지만 간단하게 node_modules 폴더를 모두 날리고 다시 설치하는게 빠르다. rm -rf node_modules rm -f package-lock.json yarn cache clean yarn install
-
visual code definition 찾고 돌아가기개발/삽질 기록 2020. 12. 13. 16:59
visual code로 작업을 하다보면 어떤 클래스의 정의를 찾고 나서 이전 페이지로 돌아가고 싶은 경우가 있다. Jetbrain계열 IDE만 사용하다 visual code로 들어와서 헤맸는데 이번 포스트에 간단히 정리한다. 거의 게임체인저 급의 단축키임이 틀림 없다. Mac 기준 정의 찾기: command + 마우스 클릭 이전 페이지로 돌아가기: control + - Window 기준 정의찾기: control + 마우스 클릭 이전 페이지로 돌아가기: Alt + 왼쪽 방향키
-
scss개발/react 2020. 12. 13. 15:50
Syntactically Awesome StylesheetS 의 준말로 기존 css보더 더 편하게 스타일링 할 수 있는 언어다. css에 있는 모든 기능을 포함하고 여기에 더해 변수랑 내부에서 제공하는 함수도 사용할 수 있기 때문에 개발자들의 반복적인 작업을 확 줄여준다. 5년 전에 간단히 홈페이지 만들면서 css를 쓰고 불편하다고 느낀후 지금까지 손댄적이 없었는데 지금은 scss 라는 언어로 더 쉽게 스타일링 할 수 있게 된 것 같다. 이번포스트에서는 scss를 react에 적용하는 방법을 간단히 소개한다. 1. scss 로더 추가 scss는 확장 기능이므로 새로 css로 transformation 해주는 기능이 필요하다. 별도의 로더를 설치하고 스크립트를 실행할 수 있으나 여기선 webpack에 로더..
-
webpack개발/react 2020. 12. 13. 15:10
webpack 은 자바스크립트로 짠 애플리케이션의 모듈 관리용 툴이다. 애플리케이션에서 필요한 모듈의 의존성을 관리하고 프로젝트용 코드를 만들어준다. 예로 리액트 자바스크립트에서 필요한 babel, style-loader, css-loader 같은 스타일용 로더, 애플리케이션의 시작위치를 정하는 entry, 디버깅용 devtool 설정, 서버 관리까지 모두 webpack을 이용해서 관리가 가능하다. 짜치는 일들을 하나로 묶어서 관리해주는 라이브러리니 배워두면 프로젝트 관리할 때 크게 도움이 될 것 같다. 1. Configuration webpack.config.js 파일을 통해서 webpack에서 관리하고 싶은 설정을 추가할 수 있다. 아래 코드는 튜토리얼 프로젝트에서 추가한 webpack 설정 코드다...
-
localStorage개발/react 2020. 12. 11. 18:00
리액트의 localStorage는 Android의 SharedPreference나 iOS의 UserDefaults 처럼 애플리케이션 단위로 key-value 값을 저장할 수 있는 라이브러리다. 아래 코드를 보면 getItem 함수에 key값을 넣어서 값을 받아오고 setItem 함수에 key 값을 넣어서 값을 업데이트한다. 아래 코드를 보면 JSON 라이브러리를 사용해 변환하는 과정이 있는데 이 이유는 localStorage에서는 string의 형태로만 저장이 가능하기 때문이다. 그래서 일반 텍스트를 사용하는 것이 아니면 모두 JSON을 이용해 값을 변환해서 저장해야한다. 배열 같은 값을 저장한다면 어차피 변환하는 과정이 필요하기 때문에 항상 써두는 것도 나쁘지 않을 것 같다. class App exte..
-
Props개발/react 2020. 12. 11. 18:00
props는 리액트에서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 사용하는 기능이다. 아래 그림처럼 Header가 App 안에 포함되어 있을 때 App에서 Header에게 title과 subtitle을 전달하게 되는데 이를 props를 이용해서 할 수 있다. 1. 데이터 전달 class App extends React.Component { constructor(props) { super(props); } render() { const title = '아는개발자' const subtitle = '리액트를 공부해봅시다' return ( ) } } 상위 컴포넌트의 render() 함수에서 하위 컴포넌트를 리턴할 때 내부에 key와 value로 전달한다. Header 컴포넌트에 subtitle로 전..
-
state개발/react 2020. 12. 11. 18:00
state는 리액트 컴포넌트 내에서 사용할 변수를 관리하는 역할을 한다. 예로 간단하게 정수 값을 표시하고 1씩 증가시키고 감소시키는 버튼이 있다고 하자. 아래와 같은 기능을 제공하는 앱이라면 컴포넌트중 누군가는 현재 화면에 표시되는 값을 들고 있어야 한다. 1. state 관리 이 값은 컴포넌트내의 state 변수에서 관리한다. 아래 코드를 보면 App 컴포넌트의 생성자에서 state를 만들고 그 안에 counter라는 값을 초기화 하는 것을 볼 수 있다. 그리고 render() 함수에서 현재 state 값을 참조해 counter 값을 보여주고 있다. class App extends React.Component { constructor(props) { super(props); this.state = {..
-
item decoration개발/안드로이드 2020. 12. 6. 14:25
recycler view를 사용할 때 item 간의 간격을 다르게 주고 싶을 때가 있다. 예를 들어 a타입과 b타입의 아이템 사이의 간격은 상하 10dp, b타입과 c타입의 간격은 상하 5dp 이런식으로 설정하거나 더 보편적으로는 마지막 아이템인 경우에는 간격을 좀 더 띄워서 넣으려고 하는 경우가 있다. 이때 가장 빠르게 떠오르는 방법은 recyclerview의 adapter에서 position별로 margin을 주는 경우인데 이렇게 하면 안된다. recyclerview에서 자체적으로 position을 관리하기 때문에 내가 보고 있는 recyclerview에서 관리하고 있는 position이 다르다. 그래서 나는 분명히 제대로 준것 같은데 실제로 보면 다른 item에 margin이 들어간다. 이 부분이 ..