카카오클라우드 - 클라우드 개발자 교육 1주차 후기

카카오 클라우드를 활용하기 전, 클라우드에 서빙할 웹 개발을 배우는 첫주가 됐다. 

먼저 프론트 단 기초를 학습하는 주차를 가졌다. 나에겐 한번 더 기초를 복기 하는 시간이 되어 흥미롭고 재밌었다.

'아 이걸 내가 몰라서 30분을 해맸지..' 

 '와 이걸 까먹고 있었구나..'

라며 높은 러닝커브 문턱에 좌절했던 기억들이 떠올랐다.

 

1-2일차.

HTML5 태그에 대해 쭉 훑어보았다. 줄바꿈 태그를 찾기위해 열심히 구글, 스택오버플로를 뒤졌던 경험이 있다. 

이 줄바꿈을 또 까먹었다.. <div> 태그로 개발하며 <br> 태그를 안쓰고 있었기 때문.. 이마저도 디자이너나 ai가 퍼블을 따줬었다.

 

로그인 페이지와 각종 태그들을 넣어보았다.

 

 

3 - 4 일차

js 반복문, 조건문에 대해 학습했다.
구구단 과제를 수행했다.
습관적으로 쓰던 const와 var, let의를 실제로 구구단을 수행하며 구분지었다.

 

크게 3가지를 생각했다. 제일 먼저

1. 재선언, 재할당 가능 여부 

	재선언	재할당
const	가능	가능
var	불가능	가능
let	불가능	불가능

 

2. 스코프 차이점

var : 함수 내부에서 선언 하면 함수 내부에서만 유효 like 지역변수

        블록(  { } ) 을 무시

       if for 안에서 선언해도 밖에서 접근가능.

 

const : 블록 안에서만 유효.

           조건문, 반복문 등의 불록에서 제한적 사용 가능

 

let : const 와 동일

 

3. 선언 전 사용 가능 여부 

 

var : (가능)선언이 위로 끌려 올라가지만 초기 값이 같이 올라감.

        선언 전에 사용해도 에러 안뱉음.

 

const : (불가능)참조 에러 발생. 강제성 강함

 

let : const 와 동일

 

( 당구장표시 ) 배열 ? 리스트? 무슨 차이인가. 

이전 파스칼 c 언어 시절 배열이라 하던것을 자바 파이썬 오면서 리스트라 불리게 되었다.

- 선생님 왈 -

 

js로 반복문 조건문을 사용해 알고리즘 과제 수행.
피보나치, 근의공식, 별찍기 등.

 

 

js로 간단한 알고리즘 몇개를 풀어보았다.

기존에 학습해두고 회사에서 잘 써먹은 덕에 자바스크립트는 어렵지 않았다.

 

문제를 풀면서 최근 언어에 대한 장벽, 두려움이 사라져가는게 느껴진다.

 

5 일차 

 

문자열 = 배열
    1. lenth
    2. charAt()
    3. substr(stdidx, lenth)
    4. substring(stdidx, endidx+1)
    5. slice()

    6. split()
해당 함수들로 문자열을 다룬다. 찢고 합치고 더하고 계산하고.

문자열 뒤집기. 출력할때만 뒤집음. (reverse() 금지. ) 배열을 선언해서 뒤집는 방법도 있었음

 

정렬문제. 버블솔팅 사용(많이 쓰는 이유로 추천해주심.)

이후 

1. 구조분해할당. like (딕셔너리? 해쉬>?)

2. 삼항연산자

    => var cnt = (i <= n) ? i : (2 * n - i);

 

3. 화살표 함수() like Lambda

    => 간단한 로직을 작성할때 쓴다.

 

4. 동기 비동기.

 

  5. .map .filter .trim() 등 추가 메서드들에 대해 빠르게 훑고 과제를 한번더 진행했다. 
js로 html 삽입하는 부분은 ...정도로 많이 작성한부분이였다..

<script>
        const data = [
            { name: 'yhj', gender: 'M', number: 123 },
            { name: 'yui', gender: 'F', number: 456 },
            { name: 'ikj', gender: 'M', number: 789 }
        ];

        while (true) {
            const nameInput = prompt('이름을 입력하세요.');
            if (nameInput == null || nameInput.trim() == '') {
                break;
            }

            const genderInput = prompt('성별을 입력하세요.');
            if (genderInput == null || genderInput.trim() == '') {
                break;
            }

            const numberInput = prompt('번호를 입력하세요.');
            if (numberInput == null || numberInput.trim() == '') {
                break;
            }

            if (isNaN(numberInput.trim())) {
                break;
            }

            data.push({
                name: nameInput.trim(),
                gender: genderInput.trim(),
                number: numberInput.trim()
            });
        }
        
        const createRow = (item) => {
            return `<tr>
                <td>${item.name}</td>
                <td>${item.gender}</td>
                <td>${item.number}</td>
            </tr>`;
        };

        const tbody = document.querySelector('tbody');
        tbody.innerHTML = data.map(createRow).join('');
    </script>

 

이 querySelector와 innerHTML 함수를 이용해 동적으로 브라우저에 데이터를 뿌려줬다.

추가로 function 이라는 개념이 나왔는데 createRow부분을 function으로 수정하면 언급됐던 내용을 모두 사용해본 코드가 될것같다.

 

 

6일차 

리엑트 시작

 

node.js 설치
brew 설치
git 설치 CRA가 deprecated되어 vite로 패키지 인스톨.
typescript + SWC로 진행함

 

※ SWC : speed web complier의 약자.
           조금 더 빠른 리엑트 실행 환경을 만들수 있다.

시작!

js, jsx 파일의 차이점.

=> JSX 사용 여부로 판단:
- JSX 있음 (return <div>...</div>) → .tsx
- JSX 없음 (return { ... }) → .ts

=> 
* 컴포넌트 폴더**: 모두 .tsx
* Services 폴더**: 모두 .ts
* Utils 폴더**: 모두 .ts
* Hooks 폴더**: JSX 여부에 따라 .ts 또는 .tsx

=>

.ts	비즈니스 로직, API 호출, Utils, 상태 관리, 타입 정의
.tsx	React 컴포넌트, 페이지, Context Provider, JSX 반환하는 Hook

=>

	.ts	.tsx
JSX 문법	사용 불가	사용 가능
button, div	에러 발생	정상 작동
용도	비즈니스 로직, Utils	UI 컴포넌트
예시	authService.ts, utils.ts	Button.tsx, Page.tsx
React 컴포넌트	정의 불가	정의 가능
API 호출	적합	부적합
상태 관리 Store	적합	부적합
Custom Hook	적합 (JSX 없으면)	적합 (JSX 있으면)

한줄 정리 : JS는 비즈니스 로직, JSX는 화면ß

 

 

구구단

function gugudan(n: number) {
    const result: string[][] = [];
    for (let i = 1; i <= n; i++) {
        const dan: string[] = [];
        for(let j = 1; j <= 9; j++) {
            dan.push(`${i} * ${j} = ${i * j}`);
        }
        result.push(dan);
    }
    return result;
}
export default gugudan;


// return (
//     <div>
//       {gugudan(7).map((dan: string[], index: number) => (
//         <div>
//           <h3>{index + 1}단</h3>
//           {dan.map((item: string) => (
//             <div>
//               {item}
//             </div>
//           ))}
//         </div>
//       ))}
//     </div>
//   );

 

 

-----------------------------------------------------------------------

 

//subject.tsx

const style = {
    table: {
        borderCollapse: 'collapse',
        border: '1px solid black',
    }
}

function getData() {
    let result: Array<{ name: string; gender: string; number: string }> = [];
    while(true) {
        const name = prompt('이름을 입력하세요.');
        if(name == null || name.trim() == '') {
            break;
        }
        const gender = prompt('성별을 입력하세요.');
        if(gender == null || gender.trim() == '') {
            break;
        }
        const number = prompt('번호를 입력하세요.');
        if(number == null || number.trim() == '') {
            break;
        }
   
        result.push({ name, gender, number });
    }
    return result;
}

const data = getData();

function Subject() {
    return (
            <div>
                <table style={style.table}>
                <thead>
                    <tr>
                        <th style={{ border: '1px solid black', padding: '8px' }} >번호</th>
                        <th style={{ border: '1px solid black', padding: '8px' }}>이름</th>
                        <th style={{ border: '1px solid black', padding: '8px' }}>성별</th>
                    </tr>
                </thead>
                <tbody>
                    {data.map((item, index) => (
                        <tr key={index}>
                            <td style={{ border: '1px solid black', padding: '8px' }}>{item.number}</td>
                            <td style={{ border: '1px solid black', padding: '8px' }}>{item.name}</td>
                            <td style={{ border: '1px solid black', padding: '8px' }}>{item.gender}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

export default Subject;

 

//app.tsx

import './App.css'
import Subject from './component/subject';

function App() {
  return (
    <div>
      <Subject />
    </div>
  );
}

export default App;

 

 

본격적으로 리엑트 문법과 개념들을 활용하기전 기존에 작성한 코드를 다시 한번 활용했다. 

이부분들을 React Component화, useEffect, useState등의 리엑트 문법을 사용하여 바꾸어보자.

이 리엑트 개념을 학습하기위해 정말 많은 시간을 쏟았다. 리엑트 사용법. 문법 작성하는 방법을 외운게 아닌

정말 리엑트를 왜 사용하는지, 장점, 핵심 개념등 맥락을 공부하는 부분을 주로 공부했다. 

지금 문법은 내가 처음 리엑트를 시작했을때 배운 구 문법인것이다.

this.setState(prevState => ({
  userAge: prevState.userAge + 1
}));  
~~~~~~~

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
} ~~~~~

 

이 문법등을 공부하는데 코드가 너무길고 맥락도 이해하기 어려웠던 기억이 있다..

 

조금씩 꾸준히 공부해 조금이나마 이해했었고 이번 기회에 제대로 얻어가는 시간이였다.

 

본 후기는 [카카오엔터프라이즈x스나이퍼팩토리] 카카오클라우드로 배우는 AIaaS 마스터 클래스 3기(B-log) 리뷰로 작성 되었습니다.