구글 클라우드 플랫폼 GCP 서버 무료로 이용하기
2022. 4. 26. 12:53
Develop
구글 클라우드 플랫폼에서는 무료 크레딧과 무료 등급이 있습니다. 구글에 검색하면 관련자료가 많이 나오나 대부분 오래된 정보이고 정책이 변경된 사항들이 있어 최신 정보를 알려드립니다. https://cloud.google.com/free/docs/gcp-free-tier/#compute Google Cloud 무료 프로그램 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 Google Cloud 무료 프로그램 Google Cloud의 기본사항을 알아보려는 신규 사용자이거나 신제품의 혁신적인 기능을 체험 cloud.google.com GCP에서는 무료 크레딧과 무료 등급이 있습니다. GCP를 사용한 적이 없다면 300$ (90일 유효기간)..
[Kotlin, Android Studio] 삽질 방지 오류 해결 방법 모음
2022. 3. 14. 16:15
Develop/Kotlin
socket.io-client를 이용해서 소켓 클라이언트 기능을 구현할때, 네트워크 설정이 정상임에도 connect()가 동작하지 않는 경우가 있다. 또는 직접 만든 백엔드 서버와 통신시 데이터 전송이나 수신이 안되는 경우. http를 이용하는 경우. manifest의 application태그 안에 android:usesCleartextTraffic="true"를 추가해주면 된다. 안드로이드 에뮬레이터에서 localhost를 접근하고 싶을 때. 127.0.0.1가 아닌 10.0.0.2로 접근해야한다. 커스텀 위젯을 만들 때 radius가 있는 레이아웃을 원하는 경우, radius라는 xml을 만들어서 background로 적용하게되는데 이때 resources.getDrawable이 deprecated가 ..
[Android] Application 개발 및 분석에 유용한 웹사이트 모음
2022. 2. 28. 16:47
Develop/Android
안드로이드 디벨로퍼 안드로이드 개발자를 위해 구글에서 제공하는 공식 문서. 안드로이드 라이브러리에 대한 전반적인 내용, 구현에 대한 기본적인 예제들을 제공. 업데이트된 소식들도 찾아볼 수 있음. 각 문서들은 영어로 먼저 업데이트 되기 때문에 영어로 설정해서 보는 것이 좋다. Android 개발자 | Android Developers Android 앱 개발자를 위한 공식 사이트입니다. Android SDK 도구 및 API 문서를 제공합니다. developer.android.com 코틀린 언어 공식 문서 코틀린에 대한 공식문서. 코루틴 같이 코틀린에서 사용할 수 있는 feature들에 대해 안드로이드 공식문서 보다 자세한 설명이 되어있다. Get started with Kotlin | Kotlin kotli..
오픈소스 contribute 기록 - notepad++
2022. 2. 22. 09:35
Develop
사실 해당 crash는 무려 2년전 부터 존재했다. 아니 2년전에야 내가 발견했다. Crash의 원인은 이렇다. UDL(User Defined Language)가 생성되면, 배열에 담기게 된다. 해당 배열의 크기는 30으로 고정되어 있다. 이때 생성될 때마다 다음 UDL이 들어갈 배열의 index 변수인 NBUserLang에 1을 더해준다. 이때 문제는 NBUserLang이 index의 역할을 하고 있기 때문에 UDL배열의 크기인 30보다 작아야만 한다. 하지만 1을 더할 때 해당 부분에 대한 체크가 없었다. 따라서 UDL을 30개 이상 생성하게 되면 NBUserLang은 30이되고, UDL배열의 30번째 인덱스를 접근하게 되면서 crash가 발생한다. 해당 현상을 발견하고, HackerOne에 제보했으..
[Kotlin Coroutines] 코루틴 완전 정복 #1 개요, 코루틴의 특징
2021. 11. 26. 22:36
Develop/Kotlin
Coroutines(코루틴)은 코틀린의 강력한 기능중의 하나로 많은 앱들에서 사용되고 있는 핵심 기술중 하나다. 얼마나 멋진 기능이길래 많은 사랑을 받고 있는지 한번 깊게 알아보자. 🤷♂️ 왜 이름이 코루틴일까? 나 또한 그랬지만 종종 코틀린의 '코' 자를 따서 코루틴인줄 착각하는 경우가 있다. 스펠링을 보면 알겠지만 'Ko'가 아닌 'Co'다. 흔히 협동 모드를 'Co-op'이라고 하듯 협동, 협업의 의미인 'Co'를 사용한다. 직역하면 협동하는 루틴들인데, 아직은 와닿지 않으니 조금씩 알아가보자. 여담으로 코루틴은 1958년 멜빈 콘웨이가 용어를 만들었고 어셈블리 프로그래밍에 적용했다고 한다. (위키백과) (굉장히 오래된 개념이다..) 공식문서에 소개된 코루틴의 특징들에 대해 알아보자. 🐱🏍 가볍..
[Kotlin] 안드로이드 개발자 기술 면접 정리
2021. 11. 14. 18:44
Develop/Kotlin
Array와 List의 차이 Array의 경우 고전적인 의미의 배열이며, 고정된 사이즈의 연속된 메모리 공간에 할당된다. 따라서 인덱스를 통해 값을 변경하는 것이 가능하며(mutable), 사이즈를 변경하는 것이 불가능 하다. List의 경우 크게 List와 MutableList가 있는데, ArrayList또는 LinkedList의 구현체다. Default로는 ArrayList의 구현체를 따른다. 이름에서도 볼 수 있듯이 List는 Immutable이며 MutableList는 Mutable이다. 성능이 중요시 되는 부분을 제외하고는 List를 쓰는것이 바람직 하다. 참고 : https://stackoverflow.com/a/36263748 Context 란? Context는 Application의 글로벌..
[Spring Boot] CORS 설정하기
2021. 10. 6. 23:12
Develop/Spring
CORS란? (Cross-Origin Resource Sharing,CORS) 란 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제를 말합니다. 따라서 CORS를 설정해주지 않거나 제대로 설정하지 않은 경우, 원하는대로 리소스를 공유하지 못하게 됩니다. 위의 사진처럼 CORS에러가 발생하게 됩니다. 이를 Spring에서 해결하는 방법에 대해서 알아보겠습니다. Configuration으로 해결하기 이 방법은 Global하게 적용하는 방법입니다. 우선 config패키지를 만들어 줍니다. 경로는 /src/main/java/{project}/config 만들어진 config패키지 안에 WebConfig클래스를 만들어줍니다. @Configuration public class WebConfig impleme..
Kotlin 공식문서 둘러보기 #1 코틀린의 장점, 기본 문법
2021. 9. 6. 15:36
Develop/Kotlin
Android 개발에 있어 Kotlin의 장점 코드가 짧으며 가독성이 좋다 다른 사람들이 이해하기 쉽도록 코드를 작성할 때 시간이 단축됩니다. 2011년 Kotlin이 공개된 이후 언어자체와 생태계가 함께 지속적으로 개발되고있다 예를들어 안드로이드 스튜디오가 있습니다. Android Jetpack과 다른 라이브러리들을 지원한다 coroutines, extension functions, lambdas. named parameters 등을 지원합니다 Java와 호환이 된다. 따라서 기존 어플리케이션을 모두 Kotlin으로 바꿀 필요가 없습니다 multiplatform 개발이 가능하다. Kotlin을 이용해서 안드로이드 뿐만아니라 IOS개발, backend, web 어플리케이션을 제작할 수 있습니다 안전한 코..
[안드로이드 개발자 가이드] 앱 기본 요소
2021. 8. 23. 15:07
Develop/Kotlin
안드로이드 개발자 가이드는 Android Developers의 문서들을 보고 이해한 내용을 바탕으로 작성한 글입니다. 원문: https://developer.android.com/guide/components/fundamentals?hl=ko 들어가며 Android 앱의 모든 구성요소가 포함된 압축파일로 앱 설치시 사용됩니다. 각각의 앱은 샌드박스화 되어있는데, 상세사항은 다음과 같습니다. Android의 시스템은 Linux 멀티유저 시스템과 같고 각각의 앱은 하나의 유저로 볼 수 있습니다. 시스템은 각각의 앱에 고유한 Linux ID를 부여하고, 앱에 포함된 모든 파일은 해당 ID의 권한을 가진 유저만 액세스가 가능합니다. 각 프로세스는 자체적인 VM이 있고, 각 앱은 서로 격리된 상태로 실행됩니다. ..
[번역] LiveData를 이용한 snakbar, 네비게이션 등 이벤트 처리
2021. 8. 2. 14:24
Develop/Kotlin
의역 및 오역이 있을 수 있습니다. 원본 글: https://medium.com/androiddevelopers/livedata-with-snackbar-navigation-and-other-events-the-singleliveevent-case-ac2622673150 서론 View(Activity 또는 Fragment)와 ViewModel이 데이터를 주고받기 위한 방식으로 LiveData를 주로 이용합니다. View에서 LiveData를 subscribe하여 LiveData에 변화가 일어나면 반응합니다. 이런 방식은 화면에 지속적으로 표시되는 데이터들에서는 잘 동작합니다. 하지만 Snackbar 메세지나 네비게이션 이벤트, dialog 표시 등과 같이 한번만 발생되는 이벤트들도 있습니다. 이러한 이벤..
[#8 채팅기능 구현하기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 11. 27. 12:50
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 드디어 기능구현의 마지막인 채팅기능을 구현하게됩니다. 새로 이용하는 개념은 별로 없고 이전에 사용했던 asyncstorage를 이용해서 구현합니다. // App.js export default class App extends React.Component { constructor(props) { super(props); this.state = { dday: new Date(), ddayTitle: '', chatInput..
[#7 설정 Modal 기능 추가하기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 11. 17. 13:56
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 이번 글에서는 설정 모달의 기능들을 구현해보겠습니다. 가장 먼저 모달 외부를 눌렀을 때, 모달창이 닫히게 해보겠습니다. //App.js export default class App extends React.Component { constructor(props) { super(props); this.state = { dday: new Date(), ddayTitle: '테스트 디데이', chatLog: [], settin..
[#6 설정 Modal 만들기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 11. 15. 13:39
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 이번시간에는 설정 버튼을 눌렀을 때, 디데이 제목과 날짜를 설정할 수 있는 모달창을 만들어 보겠습니다. 먼저 Setting컴포넌트를 만들기 위해 새로운 js파일을 생성할 거에요. App.js가 있는 프로젝트 폴더에 Setting.js를 생성해주세요. //Setting.js import React from 'react'; import {View, StyleSheet, Text, TextInput, TouchableOpac..
[#5 state] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 9. 30. 17:54
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 이제 앱의 기능인 Dday기능을 구현해야하는데, 문자열 정보와 d-day정보가 필요하겠네요! react native에서는 state라는 것을 이용하면 구현할 수 있습니다. // App.js export default class App extends React.Component { constructor(props) { super(props); this.state = { } } ... 생략 } App.js의 앞부분에 con..
[#4 레이아웃 구현 마무리하기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 9. 30. 17:43
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 안녕하세요! 올해 1월에 #3까지 작성한 후, 업로드를 하지 못하였는데 마무리는 지어야 할것 같아 다시 글을 작성합니다! #3까지 진행하면서 setting과 Dday부분은 뷰가 완성되었어요. 이제 Chat부분을 작업해볼거에요. 현재 전송버튼은 보이는데 입력값을 받을 Input은 화면엔 보이지 않아요. 그 이유는 width를 지정해주지 않았기 때문이에요. //App.js const styles = StyleSheet.cr..
release 버전에서 axios 에러가 발생하는 경우
2020. 9. 3. 20:14
Develop/React-Native
github.com/facebook/react-native/issues/24039#issuecomment-518687649 Network request Issues with react native 0.59 · Issue #24039 · facebook/react-native 🐛 Bug Report Hello, I recently encountered a problem with the network requests of my app. Before version 0.59 the requests to my API worked perfectly but since this version the requests to my API n... github.com added these to my /android/app/s..
[1일 1깡 어플] 1일 N깡이 출시 되었습니다~~!
2020. 5. 24. 12:43
Develop/React-Native
1일 1깡이 대세인 요즘 1일 3깡. 1일 7깡 프로 깡러분들이 많아졌습니다. 그들을 위한 깡 랭킹앱을 개발했습니다! 깡 영상 3분을 보면 1깡이 적립되고 오늘 나의 등수를 알아보세요! -아직 플레이스토어에 등록한지 얼마되지 않아 검색으로는 나오지 않습니다!!.. https://play.google.com/store/apps/details?id=com.odmg 1일 N깡 - One Day Many Gang (1일 1깡 어플) - Google Play 앱 요즘 대세인 1일 1깡! No No 1일 3깡은 해야지! 오늘 몇깡 했는지 알아보고 오늘 랭킹을 확인해보세요. 오늘의 깡 탑3는 누가 될까요? - 깡 영상을 3분 보면 1깡이 추가됩니다. play.google.com
[python] 리뉴얼된 업비트 api로 암호화폐 가격 조회, 거래하기
2020. 5. 8. 16:46
Develop/Python
upbit에서는 거래를 위한 api를 제공하고있습니다. 해당 api를 사용해서 python으로 가격 조회 부터 거래하는법 까지 알아보도록 하겠습니다. 사전 준비물python3 python3가 설치 되어있으시다면, 리퀘스트를 보내기 위한 모듈인 requests모듈을 설치해야합니다.pip3 install requests KEY 발급받기설치가 완료되면 업비트 api이용 신청을 해야합니다.https://upbit.com/service_center/open_api_guide해당 주소로 접속합니다. 좌측 하단에 있는 Open API 사용하기를 클릭하시고 로그인을 진행해주세요. 로그인이 완료되면 이런 창이 뜨게 되는데, 여기서 계좌 조회, 주문 조회, 주문하기, 특정 IP에서만 실행을 선택해주세요.본인의 ip를 적어..
[Javascript] Object에서 for문을 사용하고 싶을 때
2020. 5. 6. 18:12
Develop
위의 상황 처럼 오브젝트 형식의 데이터를 for문으로 처리해야 하는 경우 여러가지 방법이 있다. 1. for in문을 사용한다. 이 방법으로 처리 하는 경우 해당 오브젝트의 키 값만 받아오게 된다. 2. for of문을 사용한다. for(let room of Object.entries(obj)){ console.log(room); } Object.entries를 이용해서 오브젝트를 [key, value]쌍의 배열로 변환해서 사용할 수 있다.
[React] 리액트 기초 배우기 #6 조건부 렌더링
2020. 5. 1. 00:22
Develop/React
해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 사이트를 제작하다보면 특정 조건에 따라 다른 컴포넌트를 보여주고 싶을 수 있습니다. 예를들어 로그인, 회원가입 버튼이 있습니다. 로그인을 하지 않은 상태에는 로그인 버튼이 보여져야하고, 로그인을 한 상태에서는 로그인 버튼이 사라지고 로그아웃 버튼이 렌더링 되어야 합니다. 리액트에서는 조건부 렌더링을 어떻게 하는지 알아보겠습니다. App.js에 함수 컴포넌트로 LoginButton과 Logout..
[React] 리액트 기초 배우기 #5 이벤트 처리하기
2020. 4. 27. 21:59
Develop/React
해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트의 이벤트 문법 - 소문자가 아닌 카멜케이스로 작성합니다. onClick={activatelasers} (x) onClick={activateLasers} (o) - 문자열이아닌 함수로 전달합니다. onClick="함수이름()" (x) onClick={함수이름} (o) 기존 HTML Activate Lasers React Activate Lasers 이벤트 기본 동작 방지 Click me..
[React] 리액트 기초 배우기 #4 State 와 생명주기
2020. 4. 27. 00:23
Develop/React
해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 이전 포스팅에서 props에 대해서 알아보았습니다. props는 컴포넌트에 프로퍼티로 전달되고, 읽기전용입니다. 이번 포스팅에서는 read write둘다 할 수 있는 state라는 개념에 대해서 알아보겠습니다. 1초마다 째깍대는 시계 만들기 Clock컴포넌트 생성하기 컴포넌트 내부에서 모든것이 통제되는 캡슐화된 Clock 컴포넌트를 만들것입니다. 기존 src폴더 내부에 components폴더를..
[React] 리액트 기초 배우기 #3 components와 props
2020. 4. 26. 01:23
Develop/React
해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 컴포넌트 생성 리액트에서 컴포넌트를 생성하는 방법은 두가지 입니다. 첫번째로 함수를 정의하는 방식입니다. function Welcome(props) { return Hello, {props.name}; } 위의 함수는 엘리먼트를 return하기 때문에 컴포넌트이고, 함수로 정의되었기 때문에 함수 컴포넌트라고 불립니다. 두번째로는 class로 정의하는 방식입니다. class Welcome ext..
[React] 리액트 기초 배우기 #2 JSX란?
2020. 4. 26. 00:12
Develop/React
해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 이전에 생성했던 src/app.js의 소스코드를 수정하겠습니다. import React from 'react'; import logo from './logo.svg'; import './App.css'; //추가 const element = This is JSX; function App() { return ( Hello React! {/*추가*/} { element } Learn React )..
[React] 리액트 기초 배우기 #1 Hello React! 리액트 프로젝트 생성과 빌드
2020. 4. 26. 00:09
Develop/React
해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 프로젝트를 만들기 위해선 creact-react-app을 이용합니다. npm install -g create-react-app create-react-app 프로젝트이름 저는 프로젝트이름을 react-tutorial으로 생성하였습니다. cd react-tutorial npm start 해당 폴더로 접근한 뒤 npm start로 실행할 수 있습니다. 정상적으로 리액트 페이지가 로드됩니다...
Github 스타일의 티스토리 포스트 캘린더 위젯 적용하기
2020. 4. 10. 20:18
Develop
티스토리용 포스트 캘린더 위젯 Github 스타일의 캘린더 위젯을 티스토리에서 사용해보세요 Github의 stat 캘린더는 개발 욕구를 증진시켜주는 역할도 하며, 지난 과거를 돌아볼 수도 있습니다. 이제 티스토리 위젯으로 포스팅 캘린더를 만나보세요 😃 예시 페이지 ⚡️적용방법 현재 Book Club 스킨에서만 적용 가능합니다. 1. 스킨 편집 메뉴 > 홈 설정 > 홈 화면 글 수 30으로 설정 2. 스킨 편집 메뉴 > html 편집 > 원하는 위치에 코드 삽입 카테고리와 공지사항 중간의 위치는 약 630번째 줄에 삽입 포스팅 25일 달력 ❓컨트리뷰트 또는 버그제보 Github Issue로 버그, 아이디어를 제보해주세요!
도메인 연결시 express session의 cookie가 생성되지 않는 경우 해결법
2020. 4. 6. 00:43
Develop
https://stackoverflow.com/questions/53819310/cookie-not-set-with-express-session-in-production Cookie not set with express-session in production My app is divided between Client and Server. Client is a frontend side Nextjs app hosted on Now.sh, Server is its backend created with Express and hosted on Heroku, so the domains are client-app.no... stackoverflow.com 해당 스택오버플로우 글에서 해결법을 찾을 수 있었다. app...
첫 빌드 Vue These dependencies were not found 에러 해결법
2020. 4. 2. 02:45
Develop
처음 프로젝트를 만들고 아무것도 하지 않았는데, 빌드시 vue These dependencies were not found 해당 에러가 발생하는 경우, 프로젝트 이름을 대문자로 설정해서 발생하는 오류였다. vue ui에서 프로젝트 이름을 대문자로 생성할 경우 작업폴더의 이름은 모두 소문자로 바뀌게 되는데, 이때 빌드하기 위해 참조하는 js의 경로가 대문자 폴더를 참조하기 때문에 당연히 찾지 못해 에러가 발생한다... 해결법은 소문자로 프로젝트 이름을 생성하면 된다.
python requests로 접속시 나의 ip확인하는 방법
2020. 3. 30. 00:30
Develop/Python
import requests r = requests.get(r'http://jsonip.com') ip= r.json()['ip'] print ip jsonip.com을 이용해서 requests로 접속시 어떤 ip를 사용하는지 알 수 있다. 기존의 localhost ip구하는 방법으로 구했더니 잘 해결이 안돼서 위 방법으로 해결했음.
[vue.js] v-on:keyup.enter의 함수가 두번 호출되는 문제 해결법.
2020. 2. 20. 22:37
Develop
이렇게 한글문자열이 있는 text-field인 경우 keyup.enter에 작성한 함수가 두번씩 실행되는 이슈가 있었는데, 이는 keyup대신 keypress.enter로 고쳐주니 해결되었다.