개발자 친구들이랑 '깃친' 맺으려고 아이디깠다가 친구가 갑자기 "어디 구경 좀 하까~ㅋ" 라면서 주소창에 내아이디.github.io 넣어본 경험 있는 사람? 뭐, 없음 말구 ㅎㅎ 난 있으니까 추후 또 그런 일을 대비해서 그럴듯한 포폴페이지를 만들어 볼거다.

😎 github.io?

GitHub에서 제공하는 ‘GitHub Pages’라는 웹 호스팅 서비스가 있는데, 얘네가 제공해주는 도메인 주소 형식이 github.io다.

Public 으로 설정된 Repository, 정적 페이지에 한하여 해당 서비스를 제공해준다.

보통은 템플릿을 사용해 꾸미지만, 남들과 다른 나만의 페이지를 갖고 싶다거나, 프론트엔드 개발자라면 직접 꾸며봐도 좋은 경험이 될 것이다.

😎 GitHub Pages 호스팅 설정

페이지를 꾸미는 건 천천히 하고, 일단 페이지부터 호스팅하고 배포하는 방법부터 알아보자. 그래야 꾸미지.

1. github.io 레포지토리 만들기

사실 레포지토리 이름은 아무거나 해도 상관없다. 대신 도메인은 사용자이름.github.io/레포지토리 이름 꼴이 될거다.

그런데 레포지토리 이름을 사용자이름.github.io 로 설정하면 그 자체가 도메인 주소가 된다. 완전 상징적이지? 그래서 다들 사용자이름.github.io 이라는 레포지토리를 포트폴리오 페이지로 사용한다.

─정리─

• 레포지토리 이름은 사용자이름.github.io 로 설정
• 꼭! Public 으로 설정
• README file은 체크하든.. 말든.. 상관없지만 그냥 페이지 확인용으로 체크

2. 내 페이지가 잘 보이는 지 확인하려면

내 레포지토리가 페이지화 되어 잘 서비스 되고 있는지 확인하는 과정이다. Your site is live at "https://사용자이름.github.io" 라고 써있는데, ↑ 이게 이제 내 포트폴리오 페이지의 도메인이다.

─정리─

• 사용자이름.github.io 레포지토리 > Settings > Pages 로 들어가기
• README.md 를 생성했다면, 해당 URL에 접속했을 때 README.md 내용이 보임

3. React 프로젝트 생성하기

내 레포지토리를 clone 하기 위해 HTTPS 주소를 복사한 다음,

내가 원하는 위치에 가서 터미널을 열고, git clone 복사한주소 명령어를 입력하면, 사용자이름.github.io 라는 폴더가 생겼을 것이다. 그 폴더의 위치에서 터미널을 열고, 다음 명령어들을 입력해서 React 프로젝트를 생성한다.

─따라해─ 0. npm install -g create-react-app : 이전에 CRA를 global로 설치하지 않았던 사람만 입력 1.npx create-react-app ./ : 현재 폴더에 CRA 프로젝트 생성. 앞에서 README.md를 추가한 사람은 README.md 파일이 README.old.md라는 파일로 바뀌었을 것이다. 걍 삭제하삼. 2. npm install gh-pages --save-dev : GitHub Pages 배포를 도와주는 gh-pages 패키지 설치. 3. gh-pages를 사용하기 위해 package.json 파일에 다음 내용을 추가

"homepage": "http://ha-yeon-lee.github.io",
// ...(생략)
"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    // ...(생략)
}
// ...(생략)

4. React 프로젝트를 github.io에 배포하기

gh-pages는 내 레포지토리에 gh-pages라는 브랜치를 자동으로 생성하고, 그 브랜치를 도메인에 반영하므로 위 사진처럼 설정해두어야 한다. 이제 터미널에서 npm run deploy만 입력하면 내 포트폴리오 페이지에 반영될 것이다. 프로젝트를 수정하고 나서, npm run deploy 만 입력하면 배포된다.

단, 시간 당 10회까지만 가능하므로 너무 잦은 배포는 주의. 반영에 시간이 좀 걸릴 수도 있으므로, 5분 정도는 여유를 두는 것도 기억해둘 것.

─정리─

• 사용자이름.github.io 레포지토리 > Settings > Pages > Build and deployment 에서 기본 브랜치를 gh-pages로 설정
• 프로젝트 수정이 끝나면, npm run deploy 명령어로 배포

Javascript는 APS에서는 확실히 주류가 아니다. Javascript로 코딩테스트 공부를 해야겠다고 마음 먹은 순간부터 느낄 수 있다. 입력부터 막막하거든!

기업에서 주로 채택하고 있는 프로그래머스(Programmers) 에서는 Javascript 문제 풀이 환경이 잘 되어있지만, 최근 기업용 코딩테스트 플랫폼으로의 채택률이 커지고 있는 구름(goorm) 이나 국내 최대 APS 사이트인 백준(BOJ) 에서는 입력을 조금 신경써줘야 한다.

일단 백준 입력 방법부터 정리한 뒤, 추후에 구름 입력 방법을 추가하려고 한다.

😎 백준

채점 언어를 Javascript가 아닌, Node.js로 선택한다. Javascript에서는 입력을 받을 때 readline 모듈과 fs 모듈을 사용하는데, 백준에서는 fs 모듈 방식을 권장하고 있다. (readline은 fs에 비해 다양한 내부 메서드가 있지만, 비교적 느리다고 함)

한 줄 입력 받기

const fs = require('fs');
let input = fs.readFileSync('/dev/stdin').toString().split(' ');

console.log(input);

여러 줄 입력 받기

let fs = require('fs');
let input = fs.readFileSync('/dev/stdin').toString().split('\n');

let count = input[0];
let numbers = [];

for (let i = 1; i < input.length; i++) {
  if (input[i] !== '') {
    numbers.push(input[i].split(' '));
  }
}

for (let i = 0; i < numbers.length; i++){
  let num1 = Number(numbers[i][0]);
  let num2 = Number(numbers[i][1]);

  console.log(num1 + num2);
}

핵심은 .split()의 argument로 들어가는 게 공백이냐, \n이냐 다.

백준 채점이 아닌, VSCode에서 실행할 때

1. 터미널에서 npm install fs 명령어 실행
2. 폴더 내, 원하는 위치에 input.txt 파일 생성 (테스트 케이스가 들어가는 파일)
3. 위의 코드에서 fs.readFileSync('/dev/stdin') 대신 fs.readFileSync('input.txt의 경로') 입력 (단, 백준에 제출할 때는 다시 /dev/stdin 으로 바꿔줄 것)
4. 콘솔창에 node 알고리즘작성한js파일경로 입력해서 내가 작성한 알고리즘 실행

😎 프로그래머스 (참고)

solution(input1){
  let answer = input1;

  return answer;
}

프로그래머스에서는 사용자가 (입출력이 아닌) 알고리즘 로직 자체를 구현하는 데에 집중할 수 있도록 solution 함수 형태로 입력을 받고 있다. 난 solution 함수 내에서 로직을 구현하기만 하면 된다. 정말 편하다!

난 프론트엔드 개발자지만, 코딩테스트는 Java와 Python으로 해왔다. 그런데 이직 준비를 하려고 찾아보니까 프론트엔드 직군은 Javascript Only로 보는 회사가 왜 이렇게 늘어난 건지. 사실 생각해보면, Javascript도 딱히 능숙하지도 않으면서 업무에 전혀 쓰이지 않는 Java, Python 공부를 해가며 코딩테스트 준비하는 게 어불성설 같긴 하다.

그래서 프론트엔드 개발자가 Javascript로 코딩테스트를 준비해야 하는 이유를 찾아보고 정리해본다.

😎 Javascript로 코테 준비하는 이유

1. 프론트엔드 직군에서 Javascript로만 테스트를 보는 경우가 많아졌다.

: 프론트엔드 개발자는 대부분 Javascript로 업무를 한다고 생각하면 된다. 따라서 기업에서도 Javascript가 능숙한 사람을 찾는 것 같다. (Ex. 배달의 민족, 카카오커머스, 프로그래머스 FE Dev match 등)

2. 굳이 다른 언어의 이점을 갖고 갈 필요가 없다.

: Python이 코딩테스트에서 유리한 거 나도 알고 너도 알고 우리 모두가 안다. 그런데 프론트엔드 코딩테스트 문제를 보면 Python이 압도적으로 유리한 알고리즘은 거의 없고, 구현 위주인 경우가 많다고 한다. 따라서 굳이 Python을 선택할 필요가 없다고 보여진다.

3. (1번과 대충 비슷한 맥락이지만) 실무에서 쓰이는 언어다.

: 코딩테스트에서 가장 많이 쓰이는 언어가 C++이랑 Python이라던데, 프론트엔드 개발자가 실무에서 이 언어들을 얼마나 쓰려나? 아직 주니어 개발자라 모르긴 몰라도 1년에 한 두번 쓸까 말까 할 것 같다. 그러니까 아무리 알고리즘 공부를 열심히 해도, 실무와 따로 노는 느낌이 든다. 내가 Javascript 삽고수면 모르겠는데 아니니까..ㅎㅎ; Javascript로 코딩테스트를 준비하면 실무와 동 떨어진 언어를 공부하면서 오는 현타를 막을 수 있다.

😎 단점도 말 해보자면...

1. Node.js를 완벽 지원하지 않는 알고리즘 플랫폼들

: Javascript는 Node.js 서버 안에서 실행된다. 백준에서도 Node.js 지원 문제인지 종종 Javascript로는 풀리지 '못'하는 문제가 있다고 한다. 프로그래머스는 잘 지원해준다고 하니, 차라리 코테 공부 초반에는 프로그래머스 정복을 목표로 삼아도 좋을 듯 하다.

2. 자료가 없다.

: 이게 진짜 크다. 자료가 진짜 없다!

3. 느리다.

: Javascript는 스크립트 언어여서 C++에 비해 실행이 많이 느리다. 만약 백준에서 시간제한이 빡센 문제를 풀려고 하면 많이 힘들 수도 있다. 그런데 Javascript를 지원하는 기업 테스트에서는 언어적 특성을 고려해 채점하기 때문에 큰 문제는 아닐 것 같다.

😎 그럼에도 불구하고...

장점이 너무 크다고 생각한다. 프론트엔드 개발자에게는 Javascript 숙련도를 올리는 게 제일 중요하다. Javascript로 코딩테스트를 준비하면 업무와 코테를 모두 잡을 수 있었는데 왜 진작 방향을 틀지 않았나 후회도 되지만, 이제라도 내가 정말 원하던 걸 선택하게 돼서 다행이다.

const [imageList, setImageList] = useState();

const getImageApi = async () => {
  let res = await axios.get('서버주소');
  setImageList(res.data);
};

useEffect(()=>{
  getImageApi();
}, []);

2. 읽어온 이미지들을 화면에 보여준다.

서버로 Java Spring을 사용했다고 가정한다. Java에서는 Blob 데이터를 바로 Binary로 응답보내는 것이 아니라, Blob to String 작업을 거친 뒤에 응답을 보낸다. 따라서 클라이언트단에서 String to Base64 작업을 해줘야 한다.

<div>
  {
    imageList && imageList.map((item, idx) => {
      let convertedCode = Buffer.from(item, "base64");

      return (
        <img
          key={`image-${idx}`}
          style={{ maxWidth: "100%", height: "auto" }}
          src={`data:image/;base64,${convertedCode}`}
          alt={`image-${idx}`}
        />
      );
    })
  }
</div>

3. 클릭한 이미지 정보를 저장할 clickedImage를 만들고, 이미지를 클릭하면 동작하는 onClickImage 함수를 img 태그에 붙여준다. 클릭된 이미지는 컬러로, 클릭되지 않은 이미지는 흑백으로 보이도록 img 태그에 조건부 스타일을 추가해준다.

const [clickedImage, setClickedImage] = useState({
  item: "",
  convertedCode: "",
});

const onClickImage = (item) => {
  let convertedCode = Buffer.from(item, "base64");
  setClickedImage({item: item, convertedCode: convertedCode});
};

<div>
  {
    imageList && imageList.map((item, idx) => {
      return (
        <img
          key={`image-${idx}`}
          style={{
            maxWidth: "100%",
            height: "auto",
            filter: clickedImage.item === item ? "grayscale(0%)" : "grayscale(100%)"
          }}
          src={`data:image/;base64,${item}`}
          alt={`image-${idx}`}
          onClick={()=>{
            onClickImage(item);
          }}
        />
      );
    })
  }
</div>

<input name="sample" type="file" accept="image/*" />

const [imageSrc, setImageSrc] = useState("");

const encodeFileToBase64 = (fileBlob: any) => { if (fileBlob) { const reader = new FileReader(); reader.readAsDataURL(fileBlob); reader.onload = (event: any) => { setImageSrc(reader.result + ""); }; } else { setImageSrc(""); } };

```javascript
<input name="sample" type="file" accept="image/*"
  onChange={(e: any)=>{encodeFileToBase64(e.target.files[0]);}} />

3. 클릭하면 서버로 requestBody를 전송하는 onClickSave 함수를 만들어 button 태그에 붙인다.

   const onClickSave = async () => {
    if (imageSrc.length > 0) {
      try {
        let param = { 
          image: imageSrc
            .replace("data:image/png;base64,", "")
            .replace("data:image/jpeg;base64,", "")
            .replace("data:image/jpg;base64,", ""),
        };
   
        let res = await axios.post('서버주소', param);
        alert("전송 성공");
      } catch(err) {
        alert("전송 실패");
        console.err(err);
      }  
   
    } else {
      alert("Please select a image.");
    }
   };

   <button onClick={onClickSave}>하하</button>

style={{
  width: 조건1 ? true : false,
  backgroundColor: 조건2 ? true : false
}}

2. 이벤트와 함께 각 Property에 조건 부여

style={{
  width: 조건1 ? true : false, 
  backgroundColor: 조건2 ? true : false,
  "&:hover": {
    backShadow: 조건3 ? true : false
  }
}}

3. Properties 객체를 통째로 조건 부여

style={ 조건 ? {
  width: "80%",
  backgroundColor: "#FFF"
} : {
  width: "60%",
  backgroundColor: "#DDD"
}}

4. StyleSheet.create 활용해 배열 형식으로 여러가지 Style Class 부여

const styles = StyleSheet.create({
  text: {
    height: 40,
    backgroundColor: "#FFF",
    borderRadius: 5, 
  },
  textvalid: {
    borderWidth: 2,
  },
  textinvalid: {
    borderColor: 'red',
  },
});

<TextInput
    style={[styles.text, touched && invalid ? styles.textinvalid : styles.textvalid]}>
</TextInput>

버튼을 누르면 API 요청을 보내고, 응답 데이터로 CSV 파일을 다운로드 할 수 있게 해주세요. 단, 응답 데이터는 한꺼번에 보낼테니 한 번의 버튼 클릭으로 여러 개의 CSV 파일을 다운로드 받을 수 있어야 해요.

문제

CSVLink에 onClick 이벤트를 붙여서 axios로 응답 데이터를 받아오면 되는, 생각할 것도 없는 기능인 줄 알았는데... 응답이 끝나기 전에 CSVLink를 클릭했다고 인식이 되어서 초기 데이터(빈 배열)로 CSV를 다운로드 시켜주더라 ㅎㅎ;

해결

1. CSVLink에 onClick 이벤트를 붙이지 않고, Button에 onClick을 붙여 API 호출
2. useEffect를 사용해 응답 데이터가 setState 되는 시점을 감지
3. useEffect 안에서 useRef를 사용해서 CSVLink를 클릭한 것처럼 동작시킴
4. 한 번의 클릭으로 여러 개의 파일을 다운로드 하게 하려면, useEffect와 useRef를 여러 개 써주면 됨

예시 코드

import React, { useState, useEffect, useRef, memo } from 'react';
import Button from '@material-ui/core/Button';
import { CSVLink } from 'react-csv';
import moment from 'moment';
import axios from 'axios';

const CsvSample= memo((props: any) => {
  const csvLink1: any = useRef();
  const csvLink2: any = useRef();
  const [data1, setData1] = useState<any>([]);
  const [data2, setData2] = useState<any>([]);

  const clickDownload = async () => {
      // params는 알아서 구성
      let params = {
        param1: "param1"
        param2: "param2"
        param3: "param3"
      };

      await axios
        .post('url', params)
        .then((res: any) => {
          parseData(res);
        })
        .catch((err) => {
          console.log(err);
        });
  };

  // axios에 대한 response는 알아서 구성 및 react-csv의 data 형식에 맞게 파싱
  const parseData = (input: any) => {
    let data1_header = input.data.data1.columns;
    let data1_rows = input.data.data1.data;
    let _data1 = [data1_header , ...data1_rows ];

    let data2_header = input.data.data2.columns;
    let data2_rows = input.data.data2.data;
    let _data2 = [data2_header , ...data2_rows ];

    setData1(_data1);
    setData2(_data2);
  };

  useEffect(() => {
    if (data1 && csvLink1 && csvLink1.current && csvLink1.current.link) {
      setTimeout(() => {
        csvLink1.current.link.click();
        setData1([]);
      });
    }
  }, [data1]);

  useEffect(() => {
    if (data2 && csvLink2 && csvLink2.current && csvLink2.current.link) {
      setTimeout(() => {
        csvLink2.current.link.click();
        setData2([]);
      });
    }
  }, [data2]);

  return (
    <div>
      <Button
        variant="outlined"
        color="primary"
        onClick={() => {clickDownload();}}
        size="large"
      >
        Download
     </Button>
     {data1.length > 0 ? (
       <CSVLink
         data={data1}
         ref={csvLink1}
         filename={`csv-1-${moment().format('YYYYMMDD')}`}
         style={{ textDecorationLine: 'none' }}
       />
       ) : undefined}
     {data2.length > 0 ? (
       <CSVLink
         data={data2}
         ref={csvLink2}
         filename={`csv-2-${moment().format('YYYYMMDD')}`}
         style={{ textDecorationLine: 'none' }}
       />
       ) : undefined}
   </div>
  );
});

export default CsvSample;

[참고한 사이트]

• React-csv로 csv 파일 다운로드하기
• How to work async with react-csv
• react-csv에서 onClick 시점에 async로 데이터를 받아 오는 방법