JSDoc 을 이용하여 JavaScript 파일 문서화하기
2022. 10. 23. 21:41
Basic/JavaScript
JSDoc이란? JSDOC은 Javascript 소스코드 파일에 주석 용도의 마크업 언어입니다. 주석이기 때문에 코드에 영향을 주지 않습니다. 빨간 박스 안에 있는 부분이 JSDoc입니다. // 스크린샷 기준으로 맨 윗 줄인 해당 문구를 통해 props의 자료형이 object임을 알려주고 있습니다. @param {object} props // 해당 구문을 통해서는 props.align에 어떤 속성들이 있는지 알려주고 있습니다. @param {'right' | 'center' | 'left' } props.align 아래 첨부사진과 같이 JSDoc에 param들에 커서를 두면 프로퍼티 목록을 제공합니다. 저는 타입과 프로퍼티를 가이드하옂 가독성을 높여 유지보수를 수월하게 하는 도구로 사용하고 있습니다. 공..
[JavaScript] 객체(Object)의 접근, 요소 추가
2022. 7. 31. 17:25
Basic/JavaScript
객체의 선언은 아래 코드와 같다. const tistory = { author: "cotist", date: "22/07/31", age: 8, }; tistory라는 객체를 선언을 하였다. 각 요소의 좌변은 키(key)이며 author, date, age에 해당되며 우변은 키의 값이다. 객체의 요소에 접근하는 방법은 두 가지가 있는데 콘솔 로그로 아래 코드를 보자. const tistory = { author: "cotist", date: "22/07/31", age: 8, }; // 객체의 요소에 접근하는 방법 console.log(tistory.author); console.log(tistory["author"]); 두 결과 모두 cotist가 나올 것이다. 다음은 객체를 추가하는 방법이다. 처음에..
[React Native] Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage. reject 이슈
2022. 7. 30. 19:14
Front-end/App
Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage We noticed that your app requests the user’s consent to access the contacts, but doesn’t sufficiently explain the use of the contacts in the purpose string. contactsTo help users make informed decisions about how their data is used, all permission request alerts need to explain how your app will use the requested information. To hel..
[React Native] 안드로이드 릴리즈 버전일 때 튕기는 경우(react-native-svg 라이브러리 적용 확인)
2022. 7. 30. 18:35
Front-end/App
RN단에서도 디버그버전에서도 잘 되는데, 릴리즈 버전에서 svg을 사용한 화면으로 네이게이트하면 곧바로 튕기는 경우가 있다.(에러 구문은 기억이 안남) 이 경우 react-native-svg 라이브러리를 이용하여 svg를 사용하고 아래 설정을 해놓지 않아서 그렇다. android/app/proguard-rules.pro 해당 경로로 들어가 아래 구문을 추가해주고 저장하면 된다. -keep public class com.horcrux.svg.** {*;} 출처는 교과서에.. https://github.com/react-native-svg/react-native-svg#problems-with-proguard GitHub - react-native-svg/react-native-svg: SVG library..
[React Native] Android Studio에서 안드로이드 에뮬레이터 직접 실행 시 업데이트가 안될 때
2022. 7. 30. 18:15
Front-end/App
"react-native run-android" 혹은 "react-native run-ios"을 통해 에뮬레이터를 실행하는 것이 간편하지만, 결국 릴리즈 버전을 체크하려면 네이티브단에서 실행하는 화면 단을 봐야합니다. 인텔리제이(네이티브 안드로이드 IDE) 에서 에뮬레이터 실행 시 최근에 짠 코드로 업데이트가 되지 않은 상태로 띄워질 때가 있습니다. 원인은 RN단에서 작성된 코드가 index.android.bundle 파일로 인코딩이 되지 않은 경우로 보이는데, 터미널에서 아래 명령어를 입력하여 index.android.bundle을 현재 버전으로 업데이트 시켜주면 해결이 됩니다. react-native bundle --platform android --dev false --entry-file index..
React Hooks / Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type. 에러 해결
2022. 2. 20. 20:16
Front-end/Web
Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `string` type. Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type. Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `boolean` type. 위의 에러 구문이 발생하는 원인은 리액트의 이벤트 핸들러(event handler)는 반드시 '함수' 형태로 받아야 하는데, '함수가 아닌 다른 형식'으로 받았기 때문입니다...
React Hooks / 리액트 훅스로 구글맵 API 초간단하게 적용해보자!
2021. 5. 2. 10:04
Front-end/Web
리액트 훅스 버전으로 구글 맵을 띄워보는 작업을 해보겠습니다! 1. Google Maps API 발급하기 구글 맵스 플랫폼 사이트에 접속합니다 cloud.google.com/maps-platform/?hl=ko Geolocation API | Google Maps Platform | Google Cloud Google Maps Platform을 선택하면 정확한 실시간 데이터 및 동적 이미지로 몰입형 위치정보 활용 환경을 만들고 더 나은 비즈니스 의사결정을 내릴 수 있습니다. cloud.google.com "시작하기" 버튼을 클릭합니다 다음 결제 항목에서 안내하는 대로 입력합니다. 자동 결제와 같이 추후에 돈이 빠지는 일은 없으니 걱정하지 마시고 진행하시면 됩니다 "사용자 인증 정보" 항목을 클릭하면 발급..
React Hooks / 리액트 훅스로 카카오맵 API 초간단하게 적용해보자!
2021. 5. 1. 23:44
Front-end/Web
공식 문서에는 순수 JavaScript를 이용한 API 적용 방식만 기재되어 있기에, React Hooks 환경으로 코드를 변형하기 힘들어 하시고 있는 분들에게 도움이 되었으면 좋겠습니다❗️ 1. Kakao 지도 Javscript API 키 발급 받기 developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 위 주소로 접속, 로그인 후 내 애플리케이션을 클릭합니다. 그러면 위의 첨부사진에 있는 "애플리케이션 추가하기"를 선택 앱 이름과 사명자명을 기재해야하는데, 추후 수정도 되는 부분이니 적당하게 기입해주세요. "앱..