ImFe's study

교내 웹 프로젝트를 Netlify에 배포 후 deploy failed가 떴다.  Base directory레포지터리는 모노레포 형태이다. 프론트랑 백엔드 레포를 분리했어야했는데..백엔드 서버는 Heroku에 따로 배포 할 예정이여서 Netlify엔 프론트엔드만 배포한다. Base directory에 프론트 폴더를 입력해준다  Build command말 그대로 빌드 명령어이다. package.json에 명시된 빌드 명령어를 적어주자  publish directory빌드 결과물이 배포되는 위치를 적어준다  설정 후 다시 배포해주면 된다   3:54:01 AM: Error: error:0308010C:digital envelope routines::unsupportednode버젼이 맞지 않을 경우 발생하는 문..

React Native에서 작업하며 expo-location API를 사용하려던 중 에러 발생. 사용중인 IOS 기종으로 expo를 접속하면 붉은 창에 에러 상세정보가 쓰여져 있다 expo install expo-location yarn 버젼이 낮아서 발생하는 문제였다. yarn upgrade expo 앱을 다시 실행하면 정상적으로 동작한다.

리액트에서 JSX로 배열을 통해 UI를 그려준다면 요소에 key속성(prop)을 넣어주어야한다. 리액트는 key속성을 이용하여 컴포넌트와 돔 요소간의 관계를 생성하는데, 라이브러리는 이러한 관계를 통해 컴포넌트가 재렌더링되어야하는지 판단한다. 배열이 static하지 않은 이상 배열의 인덱스값을 key속성으로 지정하는것은 권장되지 않는다. 리액트가 재렌더링 할 요소를 판단함에 있어 혼란이 생길 수 있기 때문. 키는 유니크할 필요는 없다. 형제 요소들 사이에서만 유니크하면 된다. 글의 제목이 입력되어있는 title배열을 받아와 map으로 뿌려주는 목적을 가진 JSX코드이다 { // map()의 두번째 인자는 반복문이 돌 때마다 0부터 1씩 증가함 title.map(function(title, i) { ret..

웹 앱을 위한 스켈을 만들던 중 뭔가 이상한 점을 발견했는데 최 상단바(뒤로가기, 네비게이션)컴포넌트와 캐러셀 슬라이드 컴포넌트를 불러온 후 Wrapper의 제일 상위 자식에게 margin-top을 주면 그 마진이 Wrapper를 넘어갔다. 왜 마진이 부모 요소를 넘어가지..? .. 코드는 대강 이런식이였고 원래 두 컴포넌트가 딱 붙어있어야 하지만 최상위 자식요소의 margin-top이 부모 요소를 밀어내면서 기본 배경색인 회색이 드러났다. 검색을 해 보니 자식요소에게 부여한 margin-top 속성이 부모 박스를 밑으로 떨어지게하는 버그라고 한다. 해결 방법은 부모 요소에 overflow:auto 속성을 주거나 자식 요소에 position:relative 속성을 주면 해결된다고 하는데 직접 해본 결과 ..

보호되어 있는 글입니다.

Styled Component말고도 Sass도 한번 써봐야겠다 싶어서 npm으로 설치하였더니(로컬) 해당 오류가 발생했습니다. node-modules를 삭제하고 npm install을 해봐도 해결이 안돼서 검색을 해보니 버젼을 낮춰서 깔아야 하는 듯 합니다. 현재 node-sass의 버전은 6.0.1입니다. node의 버전은 14.16.0입니다. www.npmjs.com npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, pr..