JadeCode

에러메세지 읽기. 무엇이 잘못되었고 문제가 무엇인지에 대한 첫번째 힌트이다. 에러메세지가 완벽하지 않은 경우도 있지만 제일 첫번째 에러가 생긴 이유를 알 수 있다. 에러메세지를 보면 해결을 위해 어디를 살펴봐야 하는지와 어떤 부분을 수정해야 하는지도 알 수 있다. 추가적으로 아랫부분에 스택트레이스를 살펴보면 어디에서 에러가 발생했는지 알 수 있다. 보다보면 유용한 정보가 있다. 공식문서를 살펴보는 것이 좋은 해결책이 될 수 있다. 모바일기기의 에러메세지보다 터미널의 에러메세지를 보는 것이 더 분명하다. CONSOLE.LOG이용 console.log를 이용하면 어플리케이션의 흐름을 이해하기 좋다. 값이 출력되거나 변수나 상태의 값이 출력되게 할 수도 있다. 자바스크립트로 원격으로 디버깅하기 터미널에서 m버..

스크롤뷰는 전체 UI가 렌더링 될 떄마다 안에 있는 항목을 전부 렌더링한다. 그래서 목록이 아주 길다면 성능에 문제가 생길 수 있다. 대체는 FlatList 세부기능을 확인해 보면 보이는 항목만 렌더링하고 화면 밖의 항목은 사용자가 스크롤해야 로딩 및 렌더링된다. {list.map((item: string, idx: number) => { return ( {item} ); })} FlasList로 변환하는 작업 커스텀매핑 지우고 프로퍼티로 추가한다. 데이터를 수동으로 매핑하는 대신 해당 작업을 flatlist로 전달해서 필요한 사항만 렌더링하는 방식으로 목록을 효율적으로 렌더링한다. data property 목록에서 출력할 데이터를 지정하는 역할 {list.map(()=>)} 에서 list부분 rende..

styled-components 리액트에서 처음 styled-components를 사용해보았을 때 센세이션을 느껴 react-native에서도 사용할 것이다. 스타일을 컴포넌트화 해서 다양한 곳에 사용할 수 있고 props로 값을 넘겨 다양한 스타일링이 가능하다는 장점이 있다. npm install styled-components npm install @types/styled-components @types/styled-components-react-native //TypeScript 하지만 styled-component로 코드를 작성하면 치명적인 단점이 있다. className이 해시값으로 만들어지기 때문에 스타일을 수정할 때 애를 먹는다. 그래서 babel-plugin-styled-components..

직접 자신이 가지고있는 모바일기기로 결과물을 확인해도 좋고 가상머신을 활용해도 좋다. expo는 다 지원하기 때문에 모바일 기기가 없어도 안드로이드 화면과 ios화면을 볼 수 있는 가상머신을 설치해 보자. Android 1. android Studio 설치 2. 우측 상단에 More Actions 에서 Virtual Device Manage클릭 3. device를 만들 때 Play Store아이콘이 있는 템플렛으로 디바이스를 만들어야 한다. 4. Actions 실행버튼 누르면 된다. 5. npm run start로 코드를 실행시킨 후 a를 눌러 android Emulator로 결과물 확인 IOS 1. xcode 설치 2. preference > Locations > Command Line Tools에 버..

상대경로로 import를 하면 불편한 점이 있다. 만약 파일의 경로를 수정했을 때 ../../ 의 무한지옥으로 갈 수 있다는 점이다. 그 상황을 해결하기 위해 나는 항상 상대경로가 아닌 절대경로로 설정을 하는 습관이 있다. expo로 프로젝트를 만들면 babel.config.js 와 tsconfig.json 이라는 파일이 있다. babel-plugin-module-resolver 를 설치한다. setup a custom alias for directories, specific files, or even other npm modules. npm install --save-dev babel-plugin-module-resolver https://www.npmjs.com/package/babel-plugin-..

react native //expo 설치 npm install --global expo-cli //맥북이라면 watchman 설치 brew update brew install watchman expo init my-project npx expo login --username "jiyeong" 리액트 네이티브를 사용하면 실제로 앱을 만들 수 있다. Reactjs일 경우 브라우저 돔으로 화면을 띄운다. 하지만 네이티브는 브라우저 없는 인터페이스로, 우리와 운영체제(ios,안드로이드)사이에 있다. 그래서 리액트네이티브로 앱을 만들면 ios와 안드로이드코드로 번역된다. RN은 ios와 안드로이드 코드로 번역할 수 있는 bridge역할이 있다고 말할 수 있다. 예를들어 버튼을 만들 때 react는 화면에 버튼을 ..

아이디어를 낼 때 제일 중요하게 생각했던 것은 참신함과 충분히 기간 내에 만들 수 있는 볼륨이었다. stack-overflow를 클론코딩하면서 팀원 간의 합을 맞추고 시간을 조절하는 법을 배울 수 있었다. 그리고 메인 프로젝트를 시작할 때는 서로 소통을 많이 하고자 노력하였다. 메인 프로젝트 시작과 동시에 개강을 하여 나는 두배로 바빠졌다. 하지만 둘 다 포기하려고 하지 않았고 결국 메인 프로젝트를 잘 끝낼 수 있었다. 일단 프론트엔드 팀원 2명, 백엔드 팀원 2명으로 진행된 프로젝트였다. 교내 동아리에서도 프로젝트를 진행하였는데 그때는 혼자 프론트엔드를 맡아서 하였기 때문에 이번 프로젝트에서는 어떻게 파트를 나누어야 할지 고민이 많았다. 디자이너가 없었기 때문에 초반에는 대략적인 디자인작업을 팀원 4명..

MUI button은 자동 대문자화가 된다. text-transform : "none",을 써서 해결하려했다. javascript에서는 오류가 없었지만 typescript를 쓰니 오류가났다. const ButtonStyle= { padding: paddingStyle, width: widthStyle, backgroundColor: backgroundColor || `var(--main-background)`, textTransform: "none", //오류발생 color : color, }; return ( {title} ); const ButtonStyle: React.CSSProperties = { padding: paddingStyle, width: widthStyle, backgroundCol..