nGyu

Java에서 함수형 프로그래밍의 이해와 활용

nGyu — Wed, 9 Aug 2023 21:32:52 +0900

함수형 프로그래밍은 현대 소프트웨어 개발에서 중요한 개념 중 하나로, Java와 같은 언어에서도 효과적으로 활용될 수 있다. 이 글에서는 함수형 프로그래밍의 기본 개념부터 Java에서의 활용 방법까지 한번 알아도록 하겠다.

함수형 프로그래밍 개요

함수형 프로그래밍은 프로그램을 수학적 함수의 조합으로 보는 프로그래밍 패러다이며, 이러한 관점에서 상태의 변화보다는 데이터의 변환에 초점을 맞춘다. 함수형 프로그래밍의 주요 특징은 불변성, 일급 함수, 고차 함수 등이 있다.

함수형 프로그래밍의 장점

코드의 간결성

- 함수형 프로그래밍은 불필요한 중복을 줄이고 간결한 코드 작성가능

- 각 함수가 독립적이며, 입력만으로 출력이 결정되므로 코드가 직관적

테스트 용이성

- 함수형 프로그래밍에서는 순수 함수를 사용하고 불변 데이터를 다루기 때문에 테스트가 용이

- 같은 입력에는 항상 같은 출력이 나오기 때문에 테스트 결과가 일관성이 있다

병렬 처리 가능

- 함수형 프로그래밍에서는 상태 변경이 없기 때문에 병렬 처리가 더욱 용이

- 여러 스레드에서 안전하게 동작하는 코드를 작성 가능

유지보수성

- 부작용을 최소화하여 코드의 예측 가능성을 높이므로 코드 유지보수가 더 쉬워진다

- 또한 작은 함수들의 조합으로 큰 기능을 만들기 때문에 모듈화가 잘 이루어진다.

함수형 프로그래밍 기본 요소

순수 함수 입력 값만을 기반으로 결과를 반환하며, 외부 상태에 영향을 주지 않는 함수

public int add(int a, int b) { return a + b; }

불변성 데이터의 변경이 없으므로 예측 가능하고 안전한 코드 작성 가능

public class ImmutablePerson {
    private final String name;
    private final int age;
    
    public ImmutablePerson(String name, int age) {
        this.name = name;
        this.age = age;
    }
    
    public String getName() {
        return name;
    }
    
    public int getAge() {
        return age;
    }
}

일급 함수 함수를 변수에 할당하거나 인자로 전달하는 것이 가능

Function<Integer, Integer> square = x -> x * x;
int result = square.apply(5); // result는 25

고차 함수 함수를 다루는 함수로, 매개변수로 함수를 받거나 함수를 반환하는 함수

Function<Integer, Function<Integer, Integer>> curryAdd = x -> y -> x + y;
Function<Integer, Integer> add5 = curryAdd.apply(5);
int result = add5.apply(3); // result는 8

Java에서의 함수형 프로그래밍

Java 8부터 람다 표현식과 스트림 API를 도입하여 함수형 프로그래밍을 지원한다.

람다 표현식 익명 함수를 생성하기 위한 간단한 문법으로, 함수를 변수에 할당하거나 매개변수로 전달할 수 있다. 

(x, y) -> x + y

스트림 API 데이터의 흐름을 다루는데 사용되며, 병렬 처리에 용이하다.

List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);
int sum = numbers.stream()
                .filter(n -> n % 2 == 0)
                .mapToInt(Integer::intValue)
                .sum();

예제를 통한 함수형 프로그래밍 활용

아래 예제는 주어진 숫자 리스트에서 홀수를 걸러내어 제곱한 후 모두 더하는 과정을 보여준다.

List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5);
int result = numbers.stream()
                   .filter(n -> n % 2 != 0)
                   .mapToInt(n -> n * n)
                   .sum();

결론

함수형 프로그래밍은 Java와 같은 언어에서도 강력한 개념으로 활용된다. 람다 표현식과 스트림 API를 통해 코드의 가독성과 유지보수성을 높이며, 병렬 처리의 이점도 누릴 수 있으며, 초보 개발자라도 함수형 프로그래밍을 습득하여 더 효율적이고 확장성 있는 코드를 작성할 수 있을 것이다.

Java 한번 건드려볼까? - 1

nGyu — Mon, 17 Jan 2022 05:49:32 +0900

자바를 처음 시작하게 되었는데, 어디서부터 어떻게 해야하는지 감이 잡히지 않아 이 언어의 기초개념, 특징 을 조사하기로 했다.

자바 기초 개념

우선, 자바는 어떤 언어인가?
이것에 초점을 맞추고 찾아보았다.

자바는 객체지향형 프로그래밍 언어로, JVM을 사용하는 언어.

여기서 객체지향형이 뭔지 대충 알겠는데, JVM이 뭔지 정확히 몰라서 한번 다시 검색을 한 결과

Java Virtual Machine 의 약어.

자바 바이트코드를 OS 에 맞게 해석하여 실행해주는 역할

대강 무슨 내용인지는 알 것 같았다.
결국, 다양한 JVM 덕분에 window, linux, mac 등 다양한 os에서 사용할 수 있다고 하는것 같다.

자바 특징

더욱 많은 특징이 있지만, 내가 가장 이해가 가는 특징들을 모아 보았다.

객체 지향적이다

숫자( int, float, long 등 )나 논리값(boolean) 을 제외하고는 거의 모두 객체로 되어있다.

Object 클래스에서 모든 클래스를 파생한다.

인터프리터 언어이다

컴파일 언어임과 동시에 인터프리터 언어이다.

텍스트 소스 컴파일 → 2진 파일로 제작 → 자바 런타임이 클래스 파일을 인터프리트 하며 실행

시스템에 무관한 2진 파일을 만듬으로, 컴파일 언어에 가까운 속도와 시스템 독립성을 동시에 얻는다.

안전하다

포인터 개념이 없고, 유형 정의가 강고하여 실행 전에는 클래스 파일을 이용한 프로그램의 검사가 가능하다.

자료형 타입에 굉장히 민감하다. → 이 때문에 코드를 매우 명확하게 만들어 준다.

동적이다

인터페이스를 이용하면 하나의 모듈을 갱신할 때 다른 모듈을 모두 갱신할 필요가 없다.

인터페이스가 모든 인스턴스 변수와 도구의 실행문을 배제한 객체 간의 상호 작용을 정의하기 때문이다.

더 많은 내용이 있긴 할텐데, 우선 내가 건드리기 시작한 내용은 이렇다.
다음은 자료형에 대해서 알아봐야지.

[백준 2292] NodeJS / Javascript 문제풀이

nGyu — Thu, 13 Jan 2022 14:22:20 +0900

정답 - 풀이과정

정답

let input = require("fs")
  .readFileSync(process.platform === 'linux' ? '/dev/stdin' : '../../input.txt')
  .toString()
  .trim()
  .split(" ");

const num = parseInt(input[0]);

let increaseNumber = 1;
let i=1

while(num > i){
  i += increaseNumber*6
  increaseNumber++
}

console.log(increaseNumber)

리얼 풀이과정

우선, 벌집의 규칙을 찾아 보았습니다.

1부터 시작해서 원형으로 수가 어떻게 증가하는지를 확인 해 보니,

1 -> 7 -> 19 -> 37

순서로 증가하는것을 확인하였습니다.

여기서 더 자세히 규칙을 보면,

1부터 0 -> 6 -> 12 -> 18 순서로 증가하는것을 확인할 수 있습니다.

1 + n6 이라는 결론에 도출하였습니다.

그래서 while 문을 이용하여서 n을 증가시키고, 타겟값과 비교하여 출력하는 코드를 작성하엿습니다.

[ReactJS] react-router-dom V6 바뀐 라우팅

nGyu — Fri, 7 Jan 2022 21:38:09 +0900

v6 로 넘어오며 많은것이 바뀌게 되었습니다.

우선, 간단한 내용부터 천천히 넘어가보도록 하겠습니다.

라우팅의 변화

기본적인 변화

V5 에서는 아래와 같은 코드로도 작동이 되었습니다.

import {BrowserRouter as Router, Switch , Route } from 'react-router-dom';
import Home from './pages/Home'

const App = () => {
	return(
    	<Router>
        	<Switch>
            	<Route exact path="/" component={Home} />
            </Switch>
        </Router>
    )
}

export default App;

하지만, V6로 넘어오며

Switch -> Routes

component -> element

이렇게 변경이 되었습니다.

이렇게 변화가 되면서 element 에는 {Home} 이 아닌 태그로 작성을 해야 정상적인 작동을 하게 됩니다.

import {BrowserRouter as Router, Routes , Route } from 'react-router-dom';
import DefaultLayout from './layout/DefaultLayout'
import Home from './pages/Home';
import Sub from './pages/Sub';

const App = () => {
	return(
    	<Router>
        	<Routes>
            	<Route exact path="/" element=<DefaultLayout/> >
                	<Route index element = <Home/> />
                	<Route path='sub' element = <Sub/> />
                </Route>
            </Routes>
        </Router>
    )
}

export default App;

// Route 의 속성들은 이렇게 들어가게 됩니다.
export interface RouteObject {
  caseSensitive?: boolean;
  children?: RouteObject[];
  element?: React.ReactNode;
  index?: boolean;
  path?: string;
}

useRoutes 의 등장

import {useRoutes} from 'react-router-dom';
import DefaultLayout from './layout/DefaultLayout'
import Home from './pages/Home';
import Sub from './pages/Sub';

const App = () => {

	const element = useRoutes([
    	{
        path : '/' ,
        element : <DefaultLayout /> ,
        children : [
        	{ index:true , element : <Home /> },
        	{ path:'sub' , element : <Sub /> },
        ]
        }
    ]);
    
	return element;
}

export default App;

위 코드를 보면 아시겠지만, useRoutes 에 배열로 라우팅을 해주는 방식 입니다.

우선, index 는 http://localhost:3000/ 으로 접속을 햇을 때 DefaultLayout 을 기준으로 들어가게 됩니다, 하지만 아래 children의 path 에도 '/' 을 넣게 된다면 경로가 http://localhost:3000// 으로 선언이 되어버려 골머리를 앓게 됩니다. 그렇기 때문에 path 를 넣는것이 아닌 / 으로 접속을 했을 때 이 레이아웃 밑에 이 페이지를 보여달라는 식으로 index : true 를 적어주면 루트 경로로 이동을 했을 때 문제없이 렌더링이 잘 되게 됩니다.

그리고 path 에 sub 를 입력하면 http://localhost:3000/sub 로 이동을 하게 됩니다. 이를 응용하여. children 밑에 children 을 넣을 수 있습니다.

중첩 렌더링

children 에서 Outlet 으로

기존에 중첩 랜더링을 할 때 즉, 대부분 레이아웃을 구성할 때 props에 children을 받아와서 아래와 비슷한 형식으로 코드를 작성하시게 될 것 입니다.

const DefaultLayout = ({children}) => {
	return <div>
    	<nav></nav>
        {children}
    </div>;
}

export default App;

하지만, 이제는 react-router-dom 에서 지원하는 <Outlet /> 이라는 태그를 이용해서 중첩 라우팅을 하실 수 있습니다.

import {Outlet} from 'react-router-dom'
const DefaultLayout = ({children}) => {
	return <div>
    	<nav></nav>
        <Outlet />
    </div>;
}

export default App;

그리고 라우팅 코드는 위 라우팅의 변화 부분을 봐주시면 감사하겠습니다.

훅의 변화

useHistory -> useNavigate

V6 에서는 useHistory 의 네이밍이 useNavigate 로 변경이 되었습니다.

const navigate = useNavigate();

const handleClick = () => navigate('/home')

return (
	<button onClick={handleClick}> 이동 </button>
)

코딩하는 집사의 Good Bye 2021 Welcome 2022 - 2021년 회고록

nGyu — Wed, 29 Dec 2021 22:19:14 +0900

안녕하세요, nGyu입니다.

곧 2022년이네요,, 2021년이 이제 얼마 남지 않았습니다.

우선, 저의 블로그를 와주시는 많은 분들 중 주니어 개발자가 있을 것이고, 이 중 시니어 분들도 있으리라 생각합니다. 모든 분들 저의 블로그를 찾아주신 점 정말 감사드립니다. 배움에는 끝이 없고, 반복하지 않으면 안 된다는 생각으로 더욱더 열심히 노력하도록 하겠습니다.

1분기

우선, 올해 1월 저는 큰 결심을 하였습니다. 바로 이 블로그를 다시 부활시키겠다는 다짐입니다.

현재 이 블로그는 2015년에 개설이 되어 그냥 나도 블로그가 있다 싶은 블로그였습니다. 그러다가 문득 저의 블로그를 다시 보니 글의 퀄리티나 내용들이 많이 성장을 했다는 사실을 알게 되었고, 제가 까먹었던 내용이 다시금 새록새록 떠오르게 되어 블로그를 다시 본격적으로 시작을 해 보자 라는 생각을 가지게 되어 실제로 토이 프로젝트를 진행하거나, 공부를 하면서 깨달은 내용들을 정리하게 되었습니다. 진짜 이번 연도에는 이 일이 가장 잘 한 선택이라고 생각이 됩니다.

또, 작은 팀을 꾸려서 심리 테스트 앱을 만들게 되었던 일입니다. 전역 후 처음으로 진행하는 팀 프로젝트였는데 정말.. 머리가 굳었다 하는 걸 많이 체감을 하게 되었고, 더욱 좋은 코드를 짜는 방법에 대해서 알게 되었습니다. 솔직히 팀 프로젝트에서는 개발 기술보다는 팀과 협업하고 트러블 발생 시 대처법 등을 배우는 좋은 경험이라 생각하여 더욱 열심히 참여를 하였습니다.

이후 자신감을 얻고 작은 프로젝트라도 돈을 받고 진행하면 좋겠다 라는 생각에 크몽을 시작하는 계기가 되었습니다.

또, 저희 집에 새로운 가족이 생기게 되었죠 ㅎㅎ.. 샤넬이라는 페르시안 고양이가 저희 집의 안주인으로 들어오셨습니다! 하하..

2분기

2분기와 3분기가 이어지는데 이때가 제 인생의 터닝포인트라고 생각을 합니다. 크몽을 시작하게 되었습니다. 첫 달은 정말 벌이가 없었습니다. 진짜 내가 공부를 하려고 하는 거지만, 이런 식으로 작업을 해야 하나 라는 생각이 들 정도였습니다.

하지만, 계속하다 보니 다음 달 제 인생에서 가장 큰돈을 벌게 되었습니다. 약 300만 원에 가까운 액수였는데.. 여태 공부를 한 게 진짜 도움이 많이 되었다는 생각도 하였고, 처음으로 어머니에게 제가 스스로 일해서 번 돈으로 맛있는 음식을 사드렸습니다. 이후 가족에게 선물도 해 주었고요.. 진짜 엄청나게 생각이 많이 바뀐 시기였습니다.

이러다가 저희 학교에서 하림과 연계하는 하림 BeStar라는 프로그램을 접하게 되었습니다. 대기업을 서류부터 평균 경쟁률 10:1로 들어간다는 사실이 진짜 놀라웠습니다. 하지만 준비 기간은 1달... 진짜 자기소개서를 2주 동안 고민했고, 인적성 공부도 틈틈이 아니 모든 정신을 쏟아부어서 준비했습니다. 서점에서 구매한 책 한 권을 거의 3일 만에 다 풀고, 이 문제를 여러 번 다시 볼 정도로 풀었습니다. 하지만, 결과는.. 인적성에서 불합격이었습니다. 진짜 왜 떨어졌지,, 내가 뭐가 부족한 걸까,, 진짜 많은 고민을 했습니다.

"여기서 떨어졌다고 자책하기에는 나는 아직 어리다"

문득 이런 생각이 들었습니다. 아직 나는 어리기에 기회가 더 많지만, 아무래도 짧은 시간 동안 많은걸 쏟아부은 만큼 아쉬움도 크게 느껴졌습니다.

"진짜로 내가 많은 것을 , 아니 모든 것을 쏟아부었을까?"

이런 생각을 하고 나니 마음이 진정이 되었고, 다시금 생각을 리프래쉬 하게 되었습니다.

이 시기에 저에게 정말 소중한 사람을 만나게 되었습니다. 진짜 저라는 사람대 사람으로서 정말 좋은 사람들을 만나게 되었고, 마음 같아서는 평생을 함께하고 싶은 선배들을 만나게 되었습니다. 보고 부러워하는 부분도 있었고, 저건 배워야 한다 라는 부분도 보였습니다. 그래서 이 분들에게 여태 많은 것을 배우고 있고, 학교 선배를 넘어 인생의 선배로써 바라보고 있습니다.

3분기

이후 몇 번 "크몽으로 잘 되다 보니 진짜 내가 그만한 능력이 있나?"라는 생각으로 "학교를 때려치우고 회사를 들어가야겠다!"라는 생각을 가진 적이 있었고, 실제로 최종 합격까지 갔었습니다. 그런데 결국 다 포기하고 다시 학교로 돌아왔습니다. 이유는 제가 여태 너무 멍청했다는 이유입니다.

이 사실을 친 형에게 알렸는데, "네가 여태 끈기를 가지고 끝까지 한 일이 무엇이 있냐?"라는 형의 말을 듣게 되었을 때 정말 내가 너무 세상을 쉽게 보았고, 이 정도의 책임감도 없으면 사회로 나오면 안 되겠다는 생각이 들게 되었습니다. 이 말이 저의 인생의 터닝포인트가 되었습니다. 저는 사실 숭실대학교 전산원에서 1년간 교육을 받았지만, 저의 흥미가 떨어졌고 진짜 대학을 가고 싶다는 생각에 자퇴를 하고 현재 재학 중인 학교로 입학을 하게 되었습니다. 이런 저의 모습이 뇌리를 스쳤고, 저의 인생을 반성하게 되었습니다.

그리고 7월 초쯤 아는 형에게 연락이 왔었습니다. "같이 일을 해보지 않겠냐, 이미 엄청나게 많은 투자금을 확보해 두었고, 늦어도 8월 중으로 시작을 할 것이다." 돈은 넉넉하게 주고 장학금까지 지원을 해 주겠다.

진짜 정말 솔깃한 제안이었습니다. 조건은 풀 스택 개발이었는데, 솔직히 어려운 서비스도 아니었고 할 만하다 라는 생각에 약 2주 정도 고민을 해본 뒤 같이 한번 해보자고 말을 하였습니다.

이 일을 준비하는데 준비할 것들이 많다 하였고, 8월 중 시작이니 시작하자마자 월급의 50%를 주고 시작한다는 말에 크몽도 다 내렸습니다.

중간에 유튜브도 시작했습니다.

집사야 코딩해라

www.youtube.com

진짜 그냥 공부하고, 일상 찍어서 올리는 영상들을 올리고 있습니다 :)

무튼, 8월에 한다는 일이 9월로 밀렸고, 결국 저는 사람을 잃었습니다. 자세한 내용을 말하기는 어렵지만, 이 때문에 저는 한동안 스트레스에 쌓이게 되었고, 8월 9월 두 달 치 각종 공과금을 제때 내지 못해 지인에게 돈을 빌리던 빚쟁이가 되었습니다.

4분기

다시 크몽을 시작했습니다. 일이 안 들어옵니다. 기존의 고객들도 다 떠나갔습니다. 진짜 큰 우울에 빠져 목놓아 울은 적도 있습니다. 하지만 이대로 울고만 있는다고 뭐가 해결되는 건 하나도 없었습니다.

닥치는 대로 일을 했습니다. 1만 원짜리 2만 원짜리.. 이런 거 하나씩 했는데 결국 모인돈은 공과금 내는 게 전부였습니다. 이때 그냥 아르바이트를 하기로 하였습니다. 집 앞 맥주집에서 아르바이트를 시작했는데 사람들이 너무 좋았습니다. 맨날 집 안에 틀어박혀가지고 컴퓨터 앞에서 빛나는 모니터를 바라보며 손으로는 키보드로 타이핑을 치던 저의 모습이 한심해 보였습니다. 진짜 일 열심히 했습니다. 비록, 이 일의 시작은 빚이 있기에 시작을 했지만 어느 순간 저의 목적은 이 사람들과 일을 하고, 이 가게를 위해 일을 한다 라는 생각으로 일을 하고 있었습니다. 진짜 일한 지 몇 주 만에 사장님의 신뢰를 얻고 매니저를 달고 일을 하게 되었습니다. 진짜 정말 뿌듯하고 가슴이 벅차올랐습니다.

하지만, 매니저라는 타이틀이 사장님을 대신해 매장을 관리하는 중요한 직책이라는 생각에 저의 어깨가 무거워졌고, 제가 더 예민해졌습니다. 이 예민을 다른 사람들에게 풀면 안 된다는 생각에 저 혼자 극복을 하고 있었습니다. 11월 중순인 것 같습니다. 진짜 머리가 깨질 듯이 아프고 몸살이 온 거처럼 몸이 아팠습니다. 버티기가 힘들었죠.. 출근을 할 때 약을 가져가거나 약이 없다면 다음 근무자에게 약을 사다 달라는 부탁을 할 정도였습니다.

12월 초, 더 이상 몸이 버티기가 힘들었는지 더욱더 아파오게 되었습니다. 불면증까지 생기게 되었고 일을 하던 중 칼질을 하는데 눈앞이 뒤틀리며 손을 다칠 뻔도 했습니다. 이 말을 사장님에게 말씀을 드렸고, 결국 일을 그만두게 되었습니다.

현재는 약을 먹고 상담을 받으며 많이 호전이 된 상태입니다. 2021년 올해의 마지막을 병과 함께 지냈다는 말이 조금 허무하게 느껴지기도 하네요

이렇게 2021년을 돌아보았습니다. 짧은 글 속에 1년 치 이야기를 담는다는 것이 말이 안 된다고 생각합니다.

하지만, 이렇게 글로 저의 기억을 적는다는 것이 좀 새로운 마음이 들고 저를 반성하는 시간을 가졌다고 생각합니다.

앞으로는 분기별로 회고록을 작성하는 것도 나쁘지 않을 거 같다고 생각을 합니다 :)

얼마 남지않은 2021년 소중한 사람들과 더욱 더 소중한 추억 많이 쌓으시고, 2022년에는 더욱 더 행복한 일 가득하세요!

[ReactJS] 내가 생각하는 효율적인 라우터 관리 방법

nGyu — Sun, 26 Dec 2021 12:52:01 +0900

React 프로젝트를 진행할 때 제가 자주 사용하는 방법 중 하나 입니다. react-router-dom 이 v6 로 넘어오며 이 방법을 사용하고 있지는 않지만, ReactNative 할 때 react-navigator 를 사용할 때 이용하는 방법 입니다.

우선, 결론

//App.tsx
<NavigatorContainer>
	<Tab.Navigator>
    	{
        	rootRouter.map((item, key) => 
            	return <Tab.Screen
                		name={item.name}
                        component={item.component}
                        options={{headerShown : false}}
                       />
            )
        }
    </Tab.Navigator>
</NavigatorContainer>

//RootRouter.ts
import { ComponentType } from 'react';

interface RouterInterface {
  name : string;
  component : ComponentType<any>;
}


export RootRouter:RouterInterface[] = [
	{
    	name='Home',
        component = HomeComponent
    },
	{
    	name='Map',
        component = MapsComponent
    },
	{
    	name='Setting',
        component = SettingComponent
    },
    
]

내가 생각한 문제점

//App.tsx
<NavigatorContainer>
	<Tab.Navigator>
    	<Tab.Screen name={'Home'} component={HomeComponent} options={{headerShown : false}}/>
        <Tab.Screen name={'Map'} component={MapsComponent} options={{headerShown : false}}/>
        <Tab.Screen name={'Setting'} component={SettingComponent} options={{headerShown : false}}/>
    </Tab.Navigator>
</NavigatorContainer>

기존에는 이러한 방식으로 라우팅을 하였는데 이게 많아질수록 App.tsx 파일의 내용물이 좀 지저분해 질 것 같다는 생각이 들었습니다.

또, 공통적인 옵션인 headerShown 옵션이 있어 같은 항목이 반복됩니다.

이렇게 된다면 코드가 길어질 뿐 아니라, 반복되는 부분도 생겨 이 부분을 어떻게 해야 조금 더 편하게 관리하고 코드가 지저분해지지 않을까? 라는 생각을 가지게 되었습니다.

getApiData.map((item, key) => return <ItemCard data={item} /> )

그러다 문득 api 를 호출할 때 Array.map() 을 이용해 반복되는 컴포넌트를 배치햇던 기억이 뇌리를 스쳤습니다.

이 원리를 이용한다면, 조금 더 깔끔하게 관리할 수 있을것 같다는 생각이 들었습니다.

//RootRouter.ts
import { ComponentType } from 'react';

interface RouterInterface {
  name : string;
  component : ComponentType<any>;
}


export RootRouter:RouterInterface[] = [
	{
    	name='Home',
        component = HomeComponent
    },
	{
    	name='Map',
        component = MapsComponent
    },
	{
    	name='Setting',
        component = SettingComponent
    },
    
]

우선 이런식으로 배열을 만들어주고, 그 안에 값들을 json 형태로 만들어 주었습니다.

//App.tsx
<NavigatorContainer>
	<Tab.Navigator>
    	{
        	rootRouter.map((item, key) => 
            	return <Tab.Screen
                		name={item.name}
                        component={item.component}
                        options={{headerShown : false}}
                       />
            )
        }
    </Tab.Navigator>
</NavigatorContainer>

이 후 map 함수를 이용해 컴포넌트 별로 속성값을 넣어주고, 공통되는 options 는 추가적으로 넣어 주었습니다.

이렇게 한다면, 앞으로 라우터를 추가할땐 RootRouter.ts 파일 안에 새로운 json Object만 추가해주면 됩니다.

[백준 1712] NodeJS / Javascript 문제풀이

nGyu — Fri, 24 Dec 2021 05:51:55 +0900

정답 - 풀이과정

정답

let input = require("fs")
  .readFileSync(process.platform === 'linux' ? '/dev/stdin' : '../../input.txt')
  .toString()
  .trim()
  .split(" ");

const a = parseInt(input[0]);
const b = parseInt(input[1]);
const c = parseInt(input[2]);

if(c - b <= 0){
  console.log(-1)
} else {
  console.log( Math.floor(a/(c-b)) + 1 )
}

리얼 풀이과정

코드 길이를 보면 왜 이렇게 코드가 길어졌다가 점점 짧아졌냐 싶을텐데, 처음에는 진짜 미련하게 반복문으로 해결하려 했었다. 하지만, 너무 오래걸리는 탓에 오답이 나왔고, 0.35초라는 제한시간을 이제서야 보게 되었다. 이 때 이 문제는 무작정 반복문을 돌려 해결할 문제가 아니라, 수학적으로 접근을 해야겠다고 생각을 했다.

그래서 나온 첫번째 식이 첫번째 판매 시 (비용 - 수입) 과 두번째 판매 시 (비용 - 수입) 두 사이의 편차를 구해 이 수에서 +2 를 하여 테스트를 해 보았다. 하지만 실패..

이 후 몇차례 더 고민을 해 보았는데 딱 하나 떠오르는 조건이 있었다. c 가 b 보다 커야 손익분기점이 나온다. 이 조건을 알고나니 정말,, 허무했다.. 이 조건으로 다시 한번 코드를 작성해 나갔는데 갑자기 또 에러가 발생한다.

수식을 보면 a/(c-b) + 1 이라는 식이 최종 결과값이다. 첫 제출에 에러가 나고 입력값을 계속 바꾸어 보았을 때 소수가 나오길래 parseInt() 를 사용해 그냥 정수로만 바꾸었다. 그래도 에러가 난다.. 진짜 뭐가 문제일까 라는 생각을 하다가 예를들어 결과값이 11.25이 나온다면 11.25대를 팔아야 하는데 제품 하나를 소수로 나누어서 팔 수 없으니 그냥 올림을 해버리자! 라는 생각으로 Math.floor() 함수를 사용하였다. 그랬더니 통과.. 진짜 허무했다

[ReactNative] 카카오 로그인 구현하기 -1

nGyu — Thu, 23 Dec 2021 20:03:04 +0900

ReactNatvie 에서 카카오 로그인을 구현하려 하는데 여러 선택지가 있었습니다.

1. react-native-seoul/kakao-login

2. actbase/react-native-kakao-login

이렇게 2개가 있었지만, 1번은 진행 중 많은 오류가 있어 포기를 하게 되었고,

2번은 지원이 중단되었다길래 새로운 방법을 차게 되었습니다.

라이브러리 선정

actbase 에서 기존의 react-native-kakao-login 은 아래 보이는 이미지처럼 npm 에서

This package has been deprecated 라고 뜨며 @actbase/react-kakaosdk 로 변경이 되었다고 합니다.

그래서 @actbase/react-kakaosdk 를 사용하기로 하였습니다.

GitHub - actbase/react-kakaosdk: KakaoSDK Bridge for React, React-Native, RNW

KakaoSDK Bridge for React, React-Native, RNW. Contribute to actbase/react-kakaosdk development by creating an account on GitHub.

github.com

라이브러리 설치 후 프로젝트 설정

설치

//설치 후
npm install @actbase/react-kakaosdk
yarn add @actbase/react-kakaosdk

//세팅
npx @actbase/react-kakaosdk

Android

1. 해시키와 디버그 키 등록

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

2. Project bundle.gradle 에 maven 추가

allprojects{
	repositories{
    	maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/'}
    }
}

IOS

ios 의 경우, 필자도 고생을 많이 하엿는데 설정하는 방법을 작성하겠습니다.

1. pod isntall

cd ios && pod install && cd ..

2. info.plist 설정

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>kakaokompassauth</string>
	<string>storykompassauth</string>
	<string>kakaolink</string>
</array>
    
<key>KAKAO_APP_KEY</key>
<string>{NATIVE_APP_KEY}</string>

3. AppDelegate.m 수정

필자가 고생했다는게 이 부분인데, github 에는 이렇게 작성이 되어있었습니다.

하지만, 저의 경우는 apenURL:(NSURL *)url 이 포함된 저런 형식의 코드는 존재하지 않아 ++된 부분만을 추가 할 방법이 없는줄 알았습니다.

그래서 이 부분을 하지 않고 했더니 결국,,, Android 는 되는데 IOS 는 로그인이 되지 않아 거의 2시간 가량 삽질을 했습니다..

정 해결이 되지 않자 해당 라이브러리 개발자 분에게 메일을 보내며 확인을 한 결과 아래 코드를 그냥 집어넣으면 된다고 하셔서 집어 넣었더니 적용 완료 :) 오후 8시가 다 되어가는 시간에도 도움을 주셔서 정말 감사합니다!

//AppDelegate.m
- (BOOL)application:(UIApplication *)app
  openURL:(NSURL *)url
  options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
  {
  if ([WithKakaoSDK isKakaoTalkLoginUrl:url]) return [WithKakaoSDK handleOpenUrl:url];
  return NO;
}

Script 작성

카카오톡 로그인 하는 부분을 따로 파일을 만들어서 함수화 시켰습니다.

import KakaoSDK from "@actbase/react-kakaosdk"

const login = async () => {
  try {
    await KakaoSDK.init({Your_Native_App_Key})
    const tokens = await KakaoSDK.login()
    return tokens
  } catch (e) {
    console.log(e)
  }
}
const getProfile = () => {

}
const logout = () => {

}
export {
  login,
  getProfile,
  logout
}

이런식으로 함수를 만들어서 사용을 하였습니다.

여태 회원가입/로그인을 직접 db 를 구축해서 하는 방법으로만 하고 있었는데, 토이 프로젝트를 진행하다 보니 소셜 로그인의 필요성을 느끼게 되어 처음으로 시도를 하게 되었습니다.

이와 관련된 국내 블로그 글이 많지 않아 정말 많은 어려움이 있었지만 이 글을 통해서 많은 사람들이 문제를 해결하셨으면 합니다.

[NodeJS] express 오류 : Cannot set headers after they are sent to the client

nGyu — Thu, 23 Dec 2021 12:06:30 +0900

yarn start 를 했을 때 문법상 문제가 없다고 했는데,,

Request 를 보내니 갑자기 뿜어내는 해당 오류, 이 오류는 무엇인지 찾아보기로 하였습니다.

userRouter.route('/token')
  .get((req, res)=>{})
  .post((req,res)=>{
    const refreshToken = req.body.refreshToken;
    if(!refreshToken) res.sendStatus(403);
    const accessToken = token().issuance(refreshToken, res);
    res.json({accessToken : accessToken})
  })

제 코드의 일부 입니다.

/signup 으로 get 요청을 보내면 작동하는 부분 입니다.

하지만 , 여기서 갑작스레 Cannot set headers after they are sent to the client 에러가 발생하며 당황스럽게 하였습니다...

무엇이 문제일지 확인을 하는데 응답 코드가 두 개가 존재하여 오류가 나는거였습니다.

그런데 도대체 어디에서 두개인지 정말 궁금하였습니다.

응답을 하면 자동으로 요청이 return되어서 끝나는것으로 생각을 하고 있던 저는 if(!refreshToken) res.sendStatus(403); 이 코드는 문제가 없는줄 알았기에 살짝 골머리를 앓았습니다..

하지만 응답을 한다고 return 이 되지 않는다는것을 알고 위 코드를 아래와같이 수정을 하니 문제가 없어지긴 하였습니다.

userRouter.route('/token')
  .get((req, res)=>{})
  .post((req,res)=>{
    const refreshToken = req.body.refreshToken;
    if(!refreshToken) return res.sendStatus(403);
    const accessToken = token().issuance(refreshToken, res);
    res.json({accessToken : accessToken})
  })

여기서 갑자기 응답 속성의 종류는 어떤것들이 있는지 궁금하여 알아보기로 하였습니다.

http://expressjs.com/en/5x/api.html#res

expressjs 공식 문서를 통해 알게된 내용입니다. 정말 많은 속성들이 있더군요,,, 살짝..당황...

[NodeJS] TypeScript 사용 시 Request CustomType

nGyu — Thu, 23 Dec 2021 11:48:04 +0900

코드가 잘 보이지 않으신다면 우측 하단의 달 모양을 눌러주시기 바랍니다.

최근 토이 프로젝트를 TypeScript로 진행하며 문제가 생긴 부분이 한 가지 있었습니다.

원래 JavaScript 를 이용해서 JWT 로그인 인증을 구현했을 때 req 객체에 임의의 값을 넣는데 이를 TypeScript로 이용을 하려 하니 문제가 있었습니다.

-JavaScript

const customMiddleWare = (req, res, next) => {
	req.authData = {
    	status : 200,
        jwt : {
        	accessToken : accessToken,
            refreshToken : refreshToken
        }
    }
    next()
}

이런 형태의 코드는 JavaScript 에서는 문제없이 해당 미들웨어를 거쳐서 엔드포인트로 넘어가게 됩니다.

하지만, TypeScript 의 경우는 많이 다르게 됩니다.

-TypeScript

const customMiddleWare = (req:Request, res:Response, next:NextFunction) => {
	req.authData = {
    	status : 200,
        jwt : {
        	accessToken : accessToken,
            refreshToken : refreshToken
        }
    }
    next()
}

Request 타입에는 authData 라는 속성이 존재하지 않기 때문에 에러를 뿜어내게 됩니다. 이럴 때 해결방법이 여러 개 있다고 합니다.

커스텀 파일 만들기

이 방식은 저는 작동이 되지 않았지만, 혹시나 이 방법을 통해서 해결하실분이 계실 것이라 생각하여 작성을 해 봅니다.

우선, @types 라는 폴더를 만들어 보도록 하겠습니다.

// ./src/customType/express.d.ts
import { UserInfoModel } from './user/models/user.model.ts';

declare global {
	namespace Express {
		interface Request {
			authData?: UserInfoModel;
		}
	}
}

이런 코드가 담긴 .d.ts 파일을 만들으셨다면, 이제 tsconsif.js를 수정하도록 하겠습니다.

{
   "compilerOptions": {
	   ...
      "typeRoots": ["./node_modules/@types","./src/customType"], 
   }
}

이렇게 typeRoots 에 위와 같이 작성을 해주시면 오류가 나지 않고 잘 작동한다고 합니다.

CustomType Interface

저는 이 방식으로 문제를 해결하였습니다.

우선, user 폴더 안에 requestCustomType.ts 라는 파일을 하나 생성해 줍니다.

// .user/RequestCustomType.ts
export interface CustomMiddleWareModel{
}

우리가 흔히 사용하는 interface 작성법 입니다. 하지만, 저희는 Requst에 속성을 부여해야하기 때문에 extands 를 이용하여 Request 를 추가하도록 하겠습니다.

// .user/RequestCustomType.ts
export interface CustomMiddleWareModel extends Request{
}

마지막으로 위에서 저희는 req.authData 에 JSON 형식의 값을 넣어야 합니다.

그렇게 하기 위해서는 interface 안에 authData 를 받을 수 있도록 해주어야겠지요?\

// .user/RequestCustomType.ts
export interface CustomMiddleWareModel extends Request{
	authData? : "UserInterface";
}

이처럼 해 준다면 준비는 모두 끝이나게 됩니다.

이제 이 interface 를 req:Request 대신 req:CustomMiddleWareModel 로 바꾸도록 하겠습니다.

import CustomMiddleWareModel from './requestCustomType.ts'
const customMiddleWare = (req:CustomMiddleWareModel, res:Response, next:NextFunction) => {
	req.authData = {
    	status : 200,
        jwt : {
        	accessToken : accessToken,
            refreshToken : refreshToken
        }
    }
    next()
}

이렇게 한 뒤 엔드포인트에도 CustomMiddleWareModel 을 적용시켜주어야 합니다.

app.get('/login', customMiddleWare, (req:CustomMiddleWareModel,res)=>{
	res.json(req.authData)
})

이 때문에 제가 거의 2시간동안 구글링을 하며 문제를 해결했던 것 같습니다...

TypeScript 를 하며 Request 에 새로운 속성을 부여하기 위해서는 위 방법들을 이용하시면 좋을 것 같습니다..!

다른 의견이 있으시다면 댓글 부탁드립니다!