컨플릭트를두려워하지말자

https://flutter.dev/

구글에서 만든 ios, android를 모두 아우를 수 있는 크로스브라우징 & 크로스 플랫폼 프레임워크이다.

Flutter 하나만으로 모바일 앱, 데스크톱 앱, 웹 앱이 모두 개발이 가능하다는 것이다. (심지어 IoT UI개발도 가능!)

하나의 코드베이스로 프로젝트 하나를 개발해서 apk로 빌드하면 안드로이드 앱이, web 빌드를 하면 웹 앱이 만들어지는 프레임워크 ~.~ 

(리액트로 예를 들면 리액트 앱 하나를 개발해서 안드로이드 아이폰 웹 데스크톱 앱 개발이 다 가능하다는 소리다 대박!)

https://dart.dev/

Dart라는 새로운 언어를 배워야 해서 초기 진입장벽이 있기는 하지만,

만약 시스템 프로그래밍 언어(C,C++,java)를 배운 사람이라면 문법이 거의 유사하기때문에 빠르게 접할 수 있다.

컴공전공자가 매우 쉽게 배울 수 있는 프레임워크라네 

그리고 C와 문법이 비슷하면서도, String 타입이나 async/await 비동기 처리도 지원을 하니 만약 javascript까지 알고 있다면 더욱 배우기 쉬울 것이다 

또한, 배포단계에서 AOT (ahead of time compile)기반으로 컴파일되기때문에 실행시점에 컴파일되는 JIT(just in time)방식과 달리 초기 실행속도가 빠르고, 보안면에서 우수하다는 장점이 있다. 

*aot : 소스코드를 기계어로 미리 변경 후 컴파일. 런타임에서 별다른 작업이 필요없음.

<-> jit : 실행시점에 그때그때 코드를 컴파일 

더 신기한건, 개발시에는 JIT로 컴파일 된다는 점! 그래서 개발시에는 즉각적으로 변화를 확인할 수 있고 디버깅도 쉽게 할 수 있다는 점이다 

물론 단점도 있다. 

Flutter는 SEO 최적화가 어렵고, 기계어가 포함되기 때문에 파일 크기가 커질 수 있다. 또한, UI 개발에 최적화되어 있어 애플리케이션 계층의 작업을 처리하는 데는 강점이 있지만, 하드웨어 계층의 작업을 처리하는 데는 한계가 있다. 

이러한 작업은 Java, Kotlin, Swift와 같은 네이티브 언어를 사용하는 것이 적합하다.

Flutter는 하드웨어를 직접 제어하기보다는 API(플러그인)나 라이브러리를 통해 간접적으로 하드웨어와 연동하는 애플리케이션 개발에 적합한 프레임워크이다.

끝 

https://school.programmers.co.kr/learn/courses/30/lessons/12945#qna

 
피보나치 수 % 1234567의 나머지를 구하면 되는 매우 간단한 문제라고 생각했다. 
 

function solution(n) {
    var answer = 0;
   const fibo = (x,y,cnt)=>{
         if(cnt<=n){
             y =y%1234567;
             return fibo(y,x+y,cnt+1);
         }
         else return y;
     }
    
 
    return fibo(0,1,2);
}

 
처음에는 피보나치라는 단어를 보자마자 아무생각없이 재귀함수를 작성했는데,
 
자연수 n은 n<=100,000이라는 조건으로 인해
 
n번째 피보나치 수가 int의 자료구조 범위를 벗어나는 정수 오버플로우(integer overflow)가 발생했다. 
재귀함수도 마찬가지로, 너무 잦은 재귀함수 호출로 인해 스택 오버플로우가 발생한 것 
 
2단계 문제 치고 너무 쉽다 했어 ~.~
 
 

function solution(n) {
    var answer = 0;
    let x = 0;
    let y = 1;

    
    for(let i=1; i<n; i++){
        let temp = x;
        x = y;
        y = (y+temp)%1234567;
        
    }
    return y;
}

최종 답은 이것 
 
중간중간 나머지 계산을 해주고, 재귀함수 대신 반복문을 사용하는 것으로 문제를 해결했다.

리액트에 최적화된 코드 스타일로 네이버 맵에서 밤섬 위에 폴리곤을 그려보자 

https://navermaps.github.io/maps.js.ncp/docs/tutorial-3-polygon-simple.example.html

공식 문서에서 제공하는 폴리곤 예제를 리액트에서 쓰기 좋게 작성했다 ~,~ 

**useLoadMap은 네이버 지도를 초기화하고(mapRef) map 객체(mapObject)를 리턴하기 위해 제가 따로 만든 커스텀 훅 입니다.**

이 포스트에서는 useLoadMap지도 초기화 코드를 생략했으며 추후 포스트할 예정임.

네이버 지도 api를 사용해 한강에 있는 밤섬위에 폴리곤을 그려봤다. 

위도 경도는 대충 찍어온거라 모양이 엄청나게 찌그러져 있는 점 양해바람... 

참고로 폴리곤 좌표 리스트는 아래와 같이 이중 배열로 넣어줘야한다

오류 없이 작성했는데도 지도에 폴리곤이 안 뜨는 분들은 이 부분을 체크해보시길! 

import { useEffect } from "react";
// 해당 코드 만으로 네이버 지도를 로드할 수 없습니다 지도 호출 부분은 따로 작성해야함(useLoadMap)
const MapWithPolygon = () => {
  const { mapObject , mapRef } = useLoadMap();
  //맵 초기화 & 호출 코드는 해당 포스트에 포함되어있지 않습니다


  const bamsumCoordinates = [
    { lat: 37.540295400459776, lng: 126.92257594754014 },
    { lat: 37.54137410126921, lng: 126.92688464861735 },
    { lat: 37.53956037883299, lng: 126.9306783655637 },
    { lat: 37.53801885028395, lng: 126.93339919890408 },
    { lat: 37.53569458673736, lng: 126.93388843434408 },
    { lat: 37.53810052232298, lng: 126.921175 },
    { lat: 37.540295400459776, lng: 126.92257594754014 },
  ]; //지도 위에 그려질 폴리곤 좌표 리스트. 굳이 처음과 끝을 맞추지 않아도 네이버 지도 api가 알아서 잘 그려줌
  
  useEffect(() => {
    if (!mapObject) return;

    const polygon = new naver.maps.Polygon({
      map: mapObject, //지도 객체
      paths: [bamsumCoordinates], //위도 경도 좌표 리스트
      fillColor: "#ff7d19", //배경 색
      fillOpacity: 0.3, //배경 투명도
      strokeColor: "#ff7d19", //테두리 색
      strokeOpacity: 0.6,
      strokeWeight: 3,
    });

    return () => {
      polygon.setMap(null);
    };
  }, [bamsumCoordinates, mapObject]);
  return (
      <div ref={mapRef} className="map"></div>
      //ref를 통해 div요소에 접근 -> 지도 초기화.
  );
};
export default MapWithPolygon;

리액트에서는 getElementbyId 등을 사용해 돔 요소를 직접 조작하는 것보다는 ref를 통해 접근하는것을 권장한다. 

물론 리액트에서도 직접 조작해서 접근하는것이 불가능한 것은 아니지만,

가상 DOM을 사용하는 리액트에서 DOM 요소를 직접 조작할 경우, 가상 돔과 실제 돔 사이에 불일치가 발생해 의도치 않은 결과가 초래될 수 있으므로 Ref를 사용하는 것이 좋다! 

https://d2.naver.com/helloworld/8149881

얼마 전 네이버 D2에서 올라온 기술 포스트를 보고, 공동 작업의 효율성을 크게 높일 수 있는 Slack과 Git의 연동 기능에 대해 알게 되었다.

Slack과 git을 연동해서 팀원들이 PR을 올릴 때마다 슬랙에 메시지를 날릴 수 있다는 것! 

(연동함에 따른 효과와 네이버에서 직접 공유하는 기능들은 위 링크에 들어가면 확인해볼 수 있다.)

전 회사에서는 사내 전용 메신저와 이슈 관리 페이지를 사용했기 때문에, Slack이나 Jira를 사용해본 적은 없었다.

문서 관리를 위해 Confluence만 사용했었는데, 아쉽게도 컨플루언스와 깃을 연동하려면 REST API를 직접 연결하는 등 공수가 많이 들어가야 해서 실제로 사용해보지 못했다.

반면, Slack과 Jira는 Git과 쉽게 연동할 수 있어 공동 작업이 훨씬 편리해진다고 한다.

예를 들어, 빌드나 PR이 올라올 때 Slack으로 알림을 보내거나, Jira 이슈 페이지를 자동으로 업데이트할 수 있는 기능들이다.

다음 회사에서는 Jira를 직접 사용해보고 싶군~.~

https://support.atlassian.com/jira-cloud-administration/docs/integrate-with-github/

Jira를 git과 연동하는 방법은 이쪽 링크를 참고하면 된다.(아틀라시안 공식 문서) 

https://slack.github.com/

슬랙도 동일하게 슬랙 내부 엡에서 깃허브 연동 앱을 다운받으면 된다.

끝!!

자바스크립트의 이벤트 루프에서 비동기 함수를 대기시키는 task queue. 
이 task queue에는 대표적으로 마이크로 테스크 큐(microtask queue), 매크로테스트 큐(macrotask queue)가 있다. 
 
마이크로테스트 큐의 대표적인 예로는 자바스크립트 코드를 작성할때 비동기 처리를 돕는 프로미스(Promise)가 있고,
 
매크로테스크 큐의 예로는 setTimeout고 setInterval이 있다. 
 
그리고 두 테스크 큐의 실행 순서는 마이크로 테스크 큐 > 매크로테스크 큐 이다. 
 
 
Promise의 .then()은 마이크로태스크 큐에 등록되므로, 내부 작업이 아주 오래걸리는 작업이고, setTimeout의 딜레이는 0인 상황이더라도, 
자바스크립트는 Promise를 먼저 처리하고, 그 다음 setTimeout을 실행한다는 것이다. 
 
 
그렇다면 생각나는 것이 하나 있다. 
 
async/await의 경우에는 ? 
 
async/await은 Promise를 동기 함수처럼 작성할 수 있도록 도와주는 ES7에서 등장한 문법이다. async 함수는 항상 Promise를 반환하며, await은 해당 Promise가 해결될 때까지 기다린다.

await 뒤에 오는 작업은 Promise와 동일하게 마이크로태스크 큐로 전달된다.
 
따라서, Promise와 async/await은 우선순위가 동일하다.

둘 다 마이크로태스크 큐에 등록되므로, 매크로태스크 큐보다 항상 먼저 실행된다.

자바스크립트의 이벤트루프란, 

스택이 비었을때 콜백 큐(callback queue)에 존재하는 작업(함수)를 스택으로 옮기는것을 말한다. 여기서 쓰이는 스택을 콜 스택(call stack)이라고 한다. 

자바스크립트가 싱글 스레드 논 블록킹 언어라는 개념과 헷갈릴 수 있는데 함께 정리해보면 이해가 될 것이다.! 

( 논 블로킹: 하나의 오래 걸리는 작업이 수행되는 동안에도 다른 작업들을 처리 대기 상태에 두고, 완료된 작업을 나중에 처리할 수 있는 방식 )

우선 우리가 일반적으로 사용하는 계산이나 조건문, 반복문 등을 동기함수라고 부르는데, 

이런 함수들은 자바스크립트가 만나는 즉시 콜 스택으로 보내며 동기적으로 작업을 처리한다. 그러다 Settimeout, Promise, Http요청과 같은 비동기 함수를 만나게 되면, 이들을 웹api로 전달한 다음,  작업이 끝나면 콜백 큐로 보내 대기하도록 한다.

콜 스택에서 모든 동기 함수를 처리하는 작업이 끝나면, 그다음 자바스크립트는 큐에 있던 비동기 함수를 스택으로 보내 처리한다. 

이해하는데 도움되는 예제도 함께 첨부하겠다

console.log("1. 콘솔 "); // 동기 -> 콜 스택에서 즉시 처리 됨.

if (true) {
  console.log("2. 조건문 "); // 동기 -> 콜 스택에서 즉시 처리됨.
}

setTimeout(() => {
  console.log("5. setTimeout "); // 비동기 -> 매크로태스크 큐 보냄.
}, 0);

Promise.resolve().then(() => {
  console.log("4. Promise "); // 비동기 -> 마이크로태스크 큐 보냄. 
});

console.log("3. 콘솔 "); // 동기 -> 콜 스택에서 즉시 처리됨.

코드상에서는 콘솔 - 조건문 - setTimeout- Promise - 콘솔 순으로 선언되었지만,

실제로 자바스크립트 상에서는 콘솔 - 조건문 - 콘솔 - Promise - setTimeout 순으로 출력될 것이다.  

예제에 나와있다시피 비동기 함수 사이에도 처리하는 우선순위가 존재한다. 

마이크로테스크 큐(Promise) 먼저, 그다음 매크로테스크 큐(setTimeout)가 처리된다. 애니메이션 프레임 큐 라는 것도 있는데 이것은 랜더링 주기에 맞춰 실행되므로 앞의 둘과 실행 시점이 다르다.  이것에대해서는 다음 글에서 다시 정리해보겠다! 

Queue
FIFO구조. 자바스트립트의 이벤트 루프에서 비동기 작업을 처리하는데 사용됨.

자바스크립트에서는 Microtask Queue, Macrotask Queue, Animation frame Queue가 있으며 이들 각각의 역할이 존재한다.
(추후 추가예정)


Heap
자바스크립트에서 객체를 선언할때 힙에 할당. 참조로 관리한다

Stack
LIFO구조. 함수호출 or 코드를 순차적으로 처리할때 사용된다.


다음 글에서는 자바스크립트의 이벤트 루프에 대해 장리해야겠다~.~

https://school.programmers.co.kr/learn/courses/30/lessons/70129

function solution(s) {
    let cnt=0;
    let answer = s;
    let zero = 0;
    
    while(answer!=='1'){
        let findZero = answer.split('0').length - 1
        let editNum = answer.replaceAll("0",'');
        answer = editNum.length.toString(2);
     
        cnt++;
        zero+=findZero;
    }
    return [cnt,zero];
}

javascript의 여러 메서드들을 연습해볼 수 있는 문제군 ~.~