네이버 블로그와 비교해서 글도 이쁘고 쓰고 사진 올리는게 너무 힘들었는데요~

https://notice.tistory.com/2478

2019년 3월 27일 에디터가 업데이트 되었네요^^

사진 올리는것만 잘되어도 확실히 전보다 나은듯 하네요

아직 네이버 블로그에 비교해서 아직은 따라가야할 게 많지만 차차 나아지리라 생각합니다

PC나 앱둘다 수정가능하게만 되면 네이버블로그와 비교해서 어느정도 따라온거라 생각됩니다~ㅎ

그러면 티스토리도 제 주력 블로그가 될 수 있을 것 같네요~ㅎ

Do it 코틀린 프로그래밍 책에서 참고

자바가 있는데 왜 코틀린을 배워야 하나요?

코틀린은 자바에 없던 널검사, 코루틴, 고차함수나 람다식과 같은 기능을 제공합니다

이 기능들은 대부분 안전하고 효율적인 프로그래밍을 위해 만들어졌으며 대부분의 현대 언어가 가지고 있는 특징이므로 프로그래밍 실력 향상을 위해 꼭 공부하기를 권장합니다

자바로 작성한 안드로이드 애플리케이션을 코틀린으로 쉽게 바꿀 수 있나요?

코틀린은 자바와 완벽하게 호환됩니다. 그래서 코틀린으로 작성한 프로그램에 자바의 방대한 라이브러리를 그대로 추가할 수도 있습니다. 심지어 안드로이드 스튜디오에서는 자바를 코틀린으로 변환하는 기능도 제공합니다

코틀린을 상용 안드로이드 애플리케이션에 바로 도입해도 될까요?

코틀린은 에버노트, 트렐로, 코세라 등과 같은 여러 유명 기업의 안드로이드 애플리케이션에 적용되고 있습니다. 그만큼 안정성이 입증된 언어입니다. 또 구글이 코틀린을 안드로이드 공식 언어로 채택했으므로 앞으로 코틀린은 안드로이드 애플리케이션 개발 필수 언어가 될 것 입니다

코틀린은 인텔리제이 IDEA라는 통합개발환경으로 유명한 JetBrains에서 개발

구글의 안드로이드 스튜디오도 인텔리제이 IDEA기반이며 코틀린 언어를 공식으로 지원

코틀린의 용도(멀티 플랫폼 언어)

-Kotlin/JVM : 자바 가상 머신에서 동작하는 애플리케이션을 만들 수 있다

-Kotlin/JS : 자바스크립트로 웹 브라우저에서 동작하는 애플리케이션을 만들 수 있다

-Kotlin/Native : LLVM 컴파일러를 이용하여 여러 플랫폼을 타깃으로 하는 애플리케이션을 만들 수 있다

코틀린의 장점

1)자료형 오류를 미리 잡을 수 있는 정적 언어

코틀린은 프로그램이 컴파일될때 자료형을 검사하여 확정하는 정적 언어입니다. 즉 자료형 오류를 초기에 발견할 수 있어 프로그램의 안정성이 좋아집니다

2)널 포인터 예외로 인한 프로그램의 중단을 예방할 수 있습니다

널 포인터 예외(NullPointerException)는 프로그램이 실행되는 도중에 발생하기 때문에 언제 어디서 어떻게 발생할지 아무도 알 수 없습니다. 오랫동안 프로그래머의 골치를 아프게 만들었지만 코틀린에서는 예방할 수 있습니다

3)아주 간결하고 효율적입니다

코틀린은 여러가지 생략된 표현이 가능한 언어입니다. 그래서 다른 언어보다 훨씬 간결하고 효율적으로 코딩할 수 있습니다.

4)함수형 프로그래밍과 객체 지향 프로그래밍이 모두 가능합니다.

함수를 변수에 저장하거나 함수를 다른 함수의 매개변수로 넘길 수 있는 함수형 프로그래밍과 클래스를 사용하는 객체 지향 프로그래밍을 둘다 할 수 있습니다

5)세미콜론을 생략할 수 있습니다

코드를 작성할때 줄 마지막에 사용하던 세미콜론을 생략할수도 있습니다

코틀린 리액티브 프로그래밍 책(2019)에서 참고

리액티브 프로그래밍은 데이터 스트림과 변경 사항 전파를 중심으로 하는 비동기 프로그래밍 패러다임

간단히 말하면, 데이터와 데이터 스트림에 영향을 미치는 모든 변경사항을 관련된 모든 당사자들, 예를 들면 최종 사용자나 컴포넌트, 하위 구성요소, 또는 어떻게든 연결돼 있는 다른 프로그램 등에게 전파하는 프로그램을 리액티브 프로그램이라고 한다

예를 들어 엑셀에서 한셀에 식이 있고 다른셀에는 식에서 쓰는 값이 있을때 값을 바꾸면 식의 결과도 자동으로 바뀌는데 이것을 리액티브라고 한다

함수형 리액티브 프로그래밍을 적용해야 하는 이유

1)콜백 지옥의 제거

콜백은 미리 정의된 이벤트가 발생할 때 호출되는 메서드다. 인터페이스를 콜백메서드와 함께 전달하는 매커니즘을 콜백 매커니즘이라고 부른다.

2)오류 처리를 위한 표준 매커니즘

3)간결해진 스레드 사용

스레드를 코틀린에서 자바에 비해 더 쉽게 사용할 수 있지만, 여전히 복잡하다. 리액티브 프로그래밍을 통하면 한층 더 쉽게 사용할 수 있다

4)간단한 비동기 연산

스레드와 비동기 작업은 서로 연관돼 있다. 스레드 사용이 쉬워질수록 비동기 연산도 쉬워진다.

5)전체를 위한 하나, 모든 작업에 대해 동일한 API

리액티브 프로그래밍, 특히 RxKotlin은 간단하고 직관적인 API를 제공하는데 네트워크 호출, 데이터베이스 접근, 계산 또는 UI 연산 등 어느 곳에서나 어떤 것을 대상으로든 사용할 수 있다

6)함수형 접근

리액티브 프로그래밍을 사용하면 함수형 접근 방법을 취해서 가독성이 좋은 선언적 코드를 작성할 수 있다

7)유지 보수 가능하고 테스트 가능한 코드

가장 중요한 점으로 리액티브 프로그래밍을 올바르게 수행하면 프로그램의 유지보수와 테스트가 한층 더 쉬워진다

리액티브 선언(http://www.reactivemanifesto.org)은 네가지 리액티브 원리를 정의해 놓은 문서

리액티브 선언의 4원칙

1)응답성(Responsive)

시스템은 증각 응답해야 한다. 응답성 있는 시스템은 신속하고 일관성 있는 응답시간을 유지해 일관된 서비스 푸짐을 제공한다

2)탄력성(Resilent)

시스템에 장애가 발생하더라도 응답성을 유지해야 한다. 탄력성은 복제(replication), 봉쇄(containement), 격리(isolation), 위임(delegation)에 의해서 이루어진다. 장애는 각 컴포넌트 내부로 억제돼 각 컴포넌트들을 서로 격리시키는데, 그래서 하나의 컴포넌트에 장애가 발생하더라도 전체 시스템에 영향을 끼치지 못하게 된다

3)유연성(Elastic)

리액티브 시스템은 작업량이 변하더라도 그 변화에 대응하고 응답성을 유지해야 한다

리액티브 시스템은 상용 하드웨어 및 소프트웨어 플랫폼에서 효율적인 비용으로 유연성을 확보한다

4)메시지 기반(Message Driven)

탄력성의 원칙을 지키려면 리액티브 시스템은 비동기적인 메시지 전달에 의존해 컴포넌트들 간의 경계를 형성해야 한다

리액티브 스트림 표준 사양

http://www.reactive-streams.org 

코틀린을 위한 리액티브 프레임워크

리액티브 프로그램을 작성하려면 라이브러리 또는 특정 프로그래밍 언어가 필요하다. 코틀린은 자바, 안드로이드와 완벽하게 상호 운용되며 멀티 플랫폼 애플리케이션을 위한 강력하고 유연한 프로그래밍 언어이기 때문에 코틀린을 리액티브 언어라고 볼 수는 없다(애초에 리액티브 언어라고 하는 프로그래밍 언어를 들어본 적이 없다)

그러나 도움이 되는 라이브러리가 있다

-RxKotlin

-Reactor-Kotilin

-Redux-Kotlin

-FunKTionale

-RxJava와 그외의 자바 리액티브 프레임워크도 코틀린과 함께 사용할 수도 있다(코틀린은 자바와 100% 상호 운용 가능하기 때문)

public class Main {

int count = 0;//전체 횟수

public static void main(String[] args) {

// TODO Auto-generated method stub

Main main = new Main();

main.solution(3);

}

public int[][] solution(int n) {

int[][] answer = new int [(int)Math.pow(2, n)-1][2];

answer = moveHanoi(1,2,3,n,answer);

for(int i=0; i<answer.length; i++){

System.out.print(answer[i][0]+"->");

System.out.println(answer[i][1]);

}

System.out.println(Arrays.deepToString(answer));

return answer;

}

public int[][] moveHanoi(int initial, int middle, int ffinal, int n, int[][]answer){

if(n==1){

answer[count][0]=initial;

answer[count][1]=ffinal;

++count;

}

else{

moveHanoi(initial, ffinal, middle, n-1, answer);

answer[count][0]=initial;

answer[count][1]=ffinal;

++count;

moveHanoi(middle, initial, ffinal, n-1, answer);

}

return answer;

}

}

참고

https://blog.martinwork.co.kr/theory/2018/10/07/hanoi-algorithm.html

react native는

react로 android와 ios로 동시에 native코드를 만들어주는 언어를 말한다

기존에 webview형식의 아이오닉과 phonegap과 비교되는 부분이다

개발환경

-nodejs

-npm을 통해서 설치를 하기 때문에 nodejs 설치를 기본적으로 해야 한다

https://facebook.github.io/react-native/docs/getting-started.html

리액트 네이티브 관련 정리 사이트(영문)

getting started로 테스트 진행하면 됨

getting started 방식은 두가지

1. expo를 이용해서 하는 방식(이 포스팅에서 활용한 방식)

2. 네이티브 code로 하는방식(이 포스팅에 기록하지 않음)

create-react-native-app 으로 프로젝트 생성시에 

npm-cli.js관련 오류나면

npm update후에 다시 진행하면 정상적으로 됨

만들어진 프로젝트에서 npm start를 하면 QR code가 뜨고 되고

expo.io에서 계정 생성후 스마트폰에서 expo관련 앱을 설치하고 앱에서 QR code를 찍으면 해당 페이지가 뜨게 된다

expo의 역할

-js파일로 빌드(리액트 네이티브 코드를 js파일로 변환)

-js파일을 웹페이지에 보여주는 역할(웹서버 역할)

리액트 네이티브 앱을 만들기 위해서 알아야 할 점

-반응형 웹관련

-css3 flex box layout로 검색해서 flex layout에 대해서 알아야 한다

정식명칭 css3 flexible box layout 

한글번역

:https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout

영어

:https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

*****쉽게 리액트 네이트브 앱을 실행할수 있는 방법(웹IDE로 리액티 네이티브 앱을 만들어 보기)

https://snack.expo.io에서 접속하면 웹 IDE가 생성되고 

run on device를 클릭하면 QR code가 뜨고

스마트폰에서 expo앱에서 QR code를 찍으면 실행된다

https://expo.io/snacks/@kimjaeeon

expo -> device 

https://docs.expo.io/versions/v27.0.0/introduction/project-lifecycle

무료 강의(영어)

https://academy.nomadcoders.co/courses/

https://programmers.co.kr/learn

리액트 네이티브 구조(한글 초보자용)

https://g6ling.gitbooks.io/react-native-tutorial-korean/content/chapter1.html

스위퍼 샘플소스

https://github.com/leecade/react-native-swiper

리액트 네이티브 한글 번역

https://seongbin9786.github.io/2018/02/10/%EB%A6%AC%EC%95%A1%ED%8A%B8%20%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0%207%20(SPA%201)/

리액트 네이티브 코드 재사용법

https://github.com/seongbin9786/reusable-react-code-examples

리액트 네이티브 기본 설명

https://github.com/seongbin9786/react-basic

react native를 사용한 초간단 커뮤니티 앱 제작

https://www.slideshare.net/taggon/react-native

https://velopert.com/3631

리액트 라이프사이클

react native app.js components 관련으로 구글 검색

부트스트랩처럼 UI객체들을 쉽게 편하게 쓸수 있는 모음

https://react-native-training.github.io/react-native-elements/docs/card.html

라이더스앱 IOS 개발기

http://woowabros.github.io/experience/2018/05/19/build-app-by-react-native.html

리액트 패턴 정리사이트

https://reactpatterns.com/

import, export 관련 내용

https://github.com/seongbin9786/es6-modules

리덕스 관련 정리

https://docs.google.com/document/d/1XSKQ7F9KtgVbJj3YM9KhieHLKrS92hD79pixNJM0mR8/edit?usp=sharing

IOS스크린샷 생성툴

https://app.shotbot.io/#/project

naivecoin 변역사이트

https://newpouy.github.io/

goalPlan 1인개발 관련 히스토리 정리

https://m.blog.naver.com/PostView.nhn?blogId=hidejj79&logNo=221256652881&proxyReferer=http%3A%2F%2Fm.facebook.com

리액트에서 주로 사용하는 디자인 패턴

https://krasimir.gitbooks.io/react-in-patterns/content/

React.js관련

https://velopert.com/reactjs-tutorials

세미나 정리

https://trello.com/b/XNk2ruv5/%EC%A2%8B%EC%95%98%EC%9D%84%EA%B1%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8

요즘 뜨는 제닉스 아레나 PC방에서

헤드셋

앱코 HS600 DESTROY 헤드셋

2만원초반이며 내구성 괜찮음

키보드

-제닉스 STORMX 키보드

마우스

-Titan 마우스

https://milooy.wordpress.com/2018/02/07/moving-job/

1. 온라인 서비스로 먹고 사는 곳인가?

2. 사업의 확장성은 어떻게 되는가?

3. 내 업무의 범위는 어떤가?

면접 준비에 도움이 ‘정말로’ 되었던 링크

면접문제은행

@Jbee님의 개발자 기술면접 준비 자료 repo: https://github.com/JaeYeopHan/Interview_Question_for_Beginner

프론트엔드 면접 문제 은행: https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Korean

프론트엔드 체크리스트: https://github.com/kesuskim/Front-End-Checklist

자바스크립트 인터뷰 가이드(진짜 좋음): https://medium.com/dev-bits/a-perfect-guide-for-cracking-a-javascript-interview-a-developers-perspective-23a5c0fa4d0d

자바스크립트

window: https://developer.mozilla.org/en-US/docs/Web/API/Window

Scope: http://hochulshin.com/everything-about-javascript-scope/

this: http://webframeworks.kr/tutorials/translate/explanation-of-this-in-javascript-1/

객체 생성: http://wit.nts-corp.com/2014/03/05/1042

First citizen object: https://bestalign.github.io/2015/10/18/first-class-object/

실행 컨텍스트: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this