1. 문제의 발단

• 주간 보고를 간단하게 표로 만들어 공유만 했는데, 잘 파악하기 어려웠다.
• 그래서 템플릿을 찾으니, 잘 없어서 만들었다. 이거 한 장으로 CTO님께 이쁨 받는 글 잘 쓰는 개발팀, 동료들에게 생색 한 번 더 내는 개발자가 되자.

2. 노션 링크

3. 유의점

• 위 창에서 새로 만들기를 하면 날짜를 더 늘릴 수 있고, 자동으로 매월 1일이 되면 다음 탭이 생깁니다.

• 이때, 생성되는 탭을 수정하고 싶다면 위 그림처럼 새로 만들기 옆의 화살표를 누르고 템플릿 자체를 수정해야 합니다. (탭 안에 들어가서 수정하면 그 탭만 영향을 받고, 다음에 생성될 탭은 영향을 받지 않습니다.)

• 그리고, 그 템플릿 편집으로 들어가 '김코딩' 옆의 + 버튼을 눌러 동료의 이름을 입력합니다. 그리고 '생성자' 필터도 그 동료의 이름으로 바꿔 줍니다.
• 아래의 표에서 생성자도 동료의 이름으로 바꿔줍니다.
• 귀찮다면, 동료에게 직접 생성하라고 합니다. (기본값이 저 버튼을 누른 사람이기 때문에 + 버튼을 눌러 이름만 추가해 주면 나머지는 자동으로 됩니다.)
• 위의 편집을 하지 않으면 올바르게 사용할 수 없습니다!

4. 템플릿 복사 하기

• 위의 유의사항을 잘 읽어 봅니다. 꼭이요. 그래서 일부러 복사 하는 법을 더 아래에 놓습니다.
• 위의 링크를 눌러 주간 업무 노션 페이지로 들어갑니다.
• 우측 상단의 '복제' 버튼을 누르면 자동으로 복사 됩니다.
• 가저가 셔서 편집한 이후, 사용하시면 됩니다! 복제, 복사 등등 마음대로 요리해서 사용하셔도 됩니다.
• 혹시나, 상업적인 이용은 불가능합니다. (될 것 같지도 않습니다...)
• 질문은 댓글로... 고맙다는 인사는 마 고마, 됐심더...!

1. 문제의 발단

• chatGPT의 도입으로, 서비스에 대화형 인공지능 기능을 개발했다.
• 개발은 그리 어렵지 않았다.(사실 백엔드 처리가 주요 이슈였기 때문에 에러 응답 처리 및 로딩 애니메이션, 유저 인터렉션, 컴포넌트 구현중 레이아웃 흐트러짐등 정도만 하면 되는 일이었다.)
• 하지만 생각지도 못 한 복병이 있었다. 모바일 환경에서 대화를 위한 모바일 키패드가 화면을 절반 이상 가려버렸다.

2. 환경 세팅

• 먼저, 개발 환경의 PC 상황에서는 키패드를 열 수 조차 없었다.
• 하지만 검색결과 Nexus5, Nexus5X 기기에서는 완벽하진 않아도 적당히 열 수 있는 방법이 있다고 했다. 

3. 어떻게 처리 할 것인가?

• 내용이 들어갈 공간을 window.innerHeight로 잡고 스크롤을 만들어 준다.

import React, { useState } from 'react';

const Container = () => {
	// state로 innerHeight를 잡아 줬다.
	const [innerHeight, setInnerHeight] = useState(0);
    
    // innerHeight가 바뀔경우 다시 계산한다.
    useEffect(() => {
    	setInnerHeight(window.innerHeight);
  	}, [window.innerHeight]);
	
    // 위 헤더나, 푸터가 있을경우 innerHeight - 여분의 사이즈로 맞출 수 도 있다.
    return (
    	<div className={tw`h-[${window.innerHeight}px]`}>
        	<div className={tw`h-[${innerHeight}px])`}>뭔가 굉장히 길어질 수 있는 컨텐츠</div>
        </div>
    )
}

4. 여담

• 위의 코드는 예시일 뿐이라 리소스 낭비가 심하다. useEffect에 timeout으로 유저의 동작이 멈췄을 경우만 innerHeight를 계산하는 방식이 옳을 것이다.
• useMemo를 이용하는 방법도 생각해 봤는데, 스크롤은 변화가 심해서 더 낭비일 것이다.
• 프로젝트 초기 세팅이 twind라서 그 기반으로 예시 코드를 작성했다. 해석에는 문제가 없을 것이다. (사실 질문 환영)
• 확실한 것은 다 구현이후, 올바르게 동작하는 것은 확인했지만, 처음부터 모바일 구성이 기획에 없었어서 급하게 사이즈만 줄여 넣자 라고 아쉽게 구현되었다. 처음에는 상단 헤더 또한 큰 사이즈를 차지해 곤란한 상황. 부랴부랴 맞춰 넣은 감이 없지 않다.

1. 문제링크

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

2. 입 출력 예시

3. 풀이

function solution(food) {
    // 짝수가 아니면 제외한다. 둘이서 먹을 수 없다.
    const useFood = food.map((el) => Math.floor(el / 2));
    
    // 빈 배열을 선언하고,
    const result = [];
    
    // 가장 앞의 물인 0을 제외, 반복문을 통해 물을 뺀 index + 1을 result에 push한다.
    const arr = useFood.slice(1).map((el, index) => {
        let i = 0;
        while(i < el) {
            i++;
            result.push(index + 1)
        }
    })
    
    // 그리고 완성된 result를 복사하여 반대로 뒤집는다.
    // 여기서 result를 복사하지 않으면 원본 배열도 뒤집히기 때문에 복사를 꼭 해준다.
    const reverseArr = result.slice().reverse();
    
    // 물인 0을 push하고,
    result.push(0)
    // result와 뒤집힌 result를 합친후 join으로 string형태로 바꿔준다.
    return result.concat(reverseArr).join('');
}

• isNull은 너무 간단하여 다시금, 간단한 문제도 풀어보았다.
• while문을 쓴 게 아쉽다. map이나 reduce로 한 번에 한 줄로도 처리할 수 있을 법하다.

- 예시

_.isNull(null);
// => true
 
_.isNull(void 0);
// => false

- 구현

const isNull = (item) => {
	return item === null
}

const isFalsy = (item) => {
	return !!item
}

- 소감

• 가끔은 꿀 빠는 날도 있어야지
• isNull은 간단해서 isFalsy도 만들었다.
• type지정 시 유리하게 사용될 수 있는 연산자들이 많다. '&&' (true 일 경우 return 아니면 null) 라든가, '??' (true일 경우 item return 아닐 경우 '??' 이후의 값 return) 라든가 '!!' (false의 다시 반대, 즉 true) 등등