[1주차 프리코스] 문자열 덧셈 계산기 개발 회고

Nayoung·2024년 10월 22일

우아한테크코스 7기 웹프론트엔드

목록 보기

1/17

📢 1. 프리코스 1주차 과제 요구사항

우아한테크코스 1주차 미션이 시작됐다!
https://github.com/woowacourse-precourse/javascript-calculator-7
첫주차 프리코스 과제의 요구사항은 다음과 같았다.

문자열 덧셈 계산기

📌 과제 진행 요구 사항

미션은 문자열 덧셈 계산기 저장소를 포크하고 클론하는 것으로 시작한다.

기능을 구현하기 전 README.md에 구현할 기능 목록을 정리해 추가한다.

Git의 커밋 단위는 앞 단계에서 README.md에 정리한 기능 목록 단위로 추가한다.

AngularJS Git Commit Message Conventions을 참고해 커밋 메시지를 작성한다.

자세한 과제 진행 방법은 프리코스 진행 가이드 문서를 참고한다.

🔨 기능 요구 사항

입력한 문자열에서 숫자를 추출하여 더하는 계산기를 구현한다.

쉼표(,) 또는 콜론(:)을 구분자로 가지는 문자열을 전달하는 경우 구분자를 기준으로 분리한 각 숫자의 합을 반환한다.

예: "" => 0, "1,2" => 3, "1,2,3" => 6, "1,2:3" => 6

앞의 기본 구분자(쉼표, 콜론) 외에 커스텀 구분자를 지정할 수 있다. 커스텀 구분자는 문자열 앞부분의 "//"와 "\n" 사이에 위치하는 문자를 커스텀 구분자로 사용한다.

예를 들어 "//;\n1;2;3"과 같이 값을 입력할 경우 커스텀 구분자는 세미콜론(;)이며, 결과 값은 6이 반환되어야 한다.

사용자가 잘못된 값을 입력할 경우 "[ERROR]"로 시작하는 메시지와 함께 Error를 발생시킨 후 애플리케이션은 종료되어야 한다.

🔴 입출력 요구 사항

입력

구분자와 양수로 구성된 문자열
출력 : 덧셈 결과
결과 : 6
실행 결과 예시
덧셈할 문자열을 입력해 주세요.
1,2:3
결과 : 6
🛠️ 프로그래밍 요구 사항

Node.js 20.17.0 버전에서 실행 가능해야 한다.

프로그램 실행의 시작점은 App.js의 run()이다.

package.json 파일은 변경할 수 없으며, 제공된 라이브러리와 스타일 라이브러리 이외의 외부 라이브러리는 사용하지 않는다.

프로그램 종료 시 process.exit()를 호출하지 않는다.

프로그래밍 요구 사항에서 달리 명시하지 않는 한 파일, 패키지 등의 이름을 바꾸거나 이동하지 않는다.

자바스크립트 코드 컨벤션을 지키면서 프로그래밍한다.

기본적으로 JavaScript Style Guide를 원칙으로 한다.

👩🏻‍💻 2. 과제 풀이

기능을 요약하자면 '문자열에서 숫자를 뽑아내 합산하는 문자열 계산기'였다.
흠...🤔 ㅎㅎ 솔직히 과제를 대충 처음 훑어봤을 땐 금방 쉽게 끝낼 수 있을 것 같은 근자감이 차올랐었다.
문자열에서 특정 문자를 추출하고, 배열 값끼리 더하는 코드같은 건 이미 많은 책들에서 기초 예제에서 다루고 있는 내용이었고, 읽자마자 대충 이런 내장 메소드들을 이용해서 구현하면 되겠군! 머릿 속에 그려졌었기 때문이다.

그렇게 다가올 앞날을 모른 채 호기롭게 다음과 같이 간단한 알고리즘을 짜보았다.

2.1. 알고리즘 순서도

그리고 이에 따라 필요한 기능 구현 목록들을 다음과 같이 정리했다.

2.2. 기능 구현 목록 작성

프로그램의 시작점이 되는 run() 함수에 시작 메세지 구현

@woowacourse/mission-utils에서 제공하는 Console API를 이용해 사용자 입력을 비

쉼표(,)와 콜론(:)을 기본 구분자로 하는 문자열 파싱 기능 구현(+커스텀 구분자 로직)

숫자로 이루어진 배열을 모두 더하여 값을 반환하는 기능 구현

결과 출력

프로그램 종료

로직을 많이 쪼개지 않고 간단하게 작성한 기능 구현 목록을 모든 기능 구현을 마치고 최종 제출한 지금 다시 보니 다시금 알 수 없는 근자감이 느껴진다 😂 ㅋㅋㅋㅋㅎ
간단하게 작성한 것처럼 실제 기능 구현도 그러할 줄 알았다...

그리고...

2.3. 험난한 개발 회고

초반에 commonJS 개발 방식을 택할지, ESmodule 방식을 택할지 고민이 있었다. 이번 프로그래밍 요구사항에는 package.json 파일을 건들지말라는 내용이 있었고, 우선 해당 파일을 열어보았다. 나는 import export 방식의 module 개발이 편한데 다행히 타입이 "type": "module" 모듈로 되어있었기에 결국 이 부분은 안심하고 ESmodule 방식을 택했다.

그렇게 호기롭게 설레는 마음으로 개발을 시작했으나 어려움에 부딪힌 건 생각보다 초반이었다. 이번 우테코는 최종 코딩테스트에서 AI 사용을 금지하기 때문에, 프리코스 기간동안 혼자 결심한 내용이 있었다.
바로 외로운 개발 독학 길의 단짝친구이자 구원자, chatGPT를 쓰지 않고 기본 기능을 구현하자는 것이었다. 최대한 (너무 양이 많아 아직도 완독하지 못한) 내 독학 교재인 <자바스크립트 완벽 가이드>라는 책만 참고해서 기능을 구현해내고 싶었다. 그래서 최근에 AI가 탑재된 IDE 모델인 Cursor를 주로 사용하고 있었는데 간만에 VSCode에서 코딩을 시작하였다. 하지만... 생각보다 어려움은 금방 찾아왔다.

생각보다 어려웠던 부분은 바로 커스텀 구분자를 만드는 일이었다. 일단 아래는 고치고 고친 끝에 나온 커스텀 구분자를 기본 구분자에 추가하는 로직 부분이다.

        // 기본 구분자 설정 및 숫자부분을 반환할 변수에 일단 입력값 정의
        let defaultDlm = [',', ':'];
		.
        .	(생략)
        .
		// 커스텀 구분자가 있는지 체크
        if (inputStr.startsWith('//') && inputStr.includes('\\n')) {
            const firstDlm = inputStr.indexOf('//');
            const lastDlm = inputStr.lastIndexOf('\\n');
            let customDlm = inputStr.substring(firstDlm + 2, lastDlm);
  
            // 커스텀구분자가 이스케이프 처리될 문자일 경우도 정상처리하기 위해 백슬래시 추가
            if (customDlm.startsWith('\\')) {
            customDlm = '\\' + customDlm;
            }
  
            // 커스텀 구분자가 공백을 제거했을 때 전부 숫자로만 이루어져 있는 경우 에러 반환
            if (!isNaN(customDlm.trim()) && customDlm.trim() !== '') {
            throw new Error('[ERROR] 커스텀 구분자를 숫자만으로 만들 수 없습니다.');
            }
  
            // 커스텀 구분자 정의 부분 자르기
            numbersPart = inputStr.substring(lastDlm + 2);

            // 구분자 배열에 커스텀 구분자 추가
            defaultDlm.push(customDlm);
        }

		// 최종 구분자를 정규표현식으로 만들어 split
        // 이전 로직과 달리 //\n 안에 작성한 구분자가 하나의 세트로 작동하도록 로직 변경
        //  -> ([]배열 삭제 및 '|'으로 join)
        const finalDlm = new RegExp(defaultDlm.join('|'), 'g');
        resultStr = numbersPart.split(finalDlm);

내 프로그램의 기본 동작 방식은 먼저 기본 구분자를 [',', ':'] 문자열을 담은 배열로 생성하고, 사용자가 커스텀 구분자를 입력했을 경우 해당 배열에 커스텀 구분자 문자열을 추가한다. 그리고 그 구분자를 기준으로 문자열을 분리해 배열로 만들고 숫자열로 변환한 뒤 합산하는 방식이다.

이렇게 보면 정말 어렵지 않아보였는데, 난관은 '정규 표현식'에서부터 시작됐다.
원래 계획은 구분자를 기준으로 문자열을 분리하는 작업을 split() 메소드를 이용해 처리하려고 했었다. 그리고 split 메소드 인자로서는 delimiters 라는 구분자 문자열들을 담은 배열을 만들어 넣으려 했다. 하지만 split() 메소드의 인자로는 문자열과 정규표현식만 받을 수 있었고 여기서부터 문제가 시작되었다...

나는 솔직히 정규표현식이란 게 뭔지 잘 몰랐다... 독학 교재인 [자바스크립트 완벽 가이드]라는 책에 수록하고 있는 내용이긴 한데...분명 읽었던 것 같기도 한데...? 하나도 와닿지 않아서 그냥 그렇군 하고 넘겼던 내용이다.

그래서 배열은 올 수 없다는 에러를 보고 그럼 여러 구분자를 동적으로 추가하고 싶으면 어떻게 해야하지...?!에 대한 해결책으로 정규표현식이라는 걸 마주쳤을 때 기분은 완전 이거였다.

리팩토링 단계 전까진 GPT 없이 해보기로 했으니까, 부랴부랴 독학 교재 먼저 펼쳐 해당 부분을 읽어보았다.
솔직히 교재에 담고 있는 정규표현식의 개념과 정규표현식 메소드들이 너무 많아서 해당 내용을 아직 다 이해하진 못했지만, 현재 내 프로젝트에 필요한 부분만 먼저 대략적으로 이해해보자면 내가 구분자를 기준으로 문자열을 나눈 배열을 반환시켜주는 용도로 사용하던 split( )이라는 메소드는 정규표현식 메소드였고? 구분자를 넣을 메소드 인자에는 문자열과 정규표현식만 올 수 있었고! 그 정규표현식을 동적으로 생성하려면 new RegExp( )라는 정규표현식 생성자를 이용해야했던 것이었다. 여기까지 이해했을 때 1차적으로 작성했던 코드는 아래와 같았다.

const parseInput = (inputStr) => {
    try {
        let defaultDlm = [',', ':'];
        let numbersPart = inputStr;

        // 커스텀 구분자가 있는지 체크
        if (inputStr.startsWith('//') && inputStr.includes('\\n')) {
            const firstDlm = inputStr.indexOf('//');
            const lastDlm = inputStr.indexOf('\\n');
            const customDlm = inputStr.substring(firstDlm + 2, lastDlm);

            defaultDlm.push(customDlm);
            numbersPart = inputStr.substring(lastDlm + 2);
        }

        // 여러 구분자를 포함한 정규표현식 생성 (커스텀 구분자 포함)
        const finalDlm = new RegExp(`[${defaultDlm.join('')}]`, 'g');

        // 구분자에 의해 숫자 문자열을 분리
        const resultStr = numbersPart.split(finalDlm);

        // 각각 분리된 문자열의 타입을 숫자열로 변환
        const resultNum = resultStr.map(Number);

        // 숫자로 변환되지 않은 배열값이 있는지 검사
        if (!resultNum.every(x => !isNaN(x))) {
            throw new Error("[ERROR] 숫자열로 변환되지 않는 입력이 포함됐습니다.");
        }

        // 일부라도 음수인 경우에 에러를 던지도록 변경하는 것이 효율적이므로 some 메소드로 바꿈
        if (resultNum.some(x => x < 0)) {
            throw new Error("[ERROR] 음수가 포함되어있습니다. 양수를 입력해주세요.");
        }

        return resultNum;
    } catch (error) {
        throw error;
    }
};

export default parseInput;

이렇게 기본 구분자 배열을 생성해놓고 사용자가 커스텀 구분자를 정의하면 배열에 커스텀 구분자가 추가되도록 작성했다. 그리고 그 구분자를 new RegExp( ) 생성자를 통해 정규표현식으로 바꾸고, split 인자에 담도록 하였다. 그리고 입력과 출력이 제대로 되는 듯 보였다.

덧셈할 문자열을 입력해주세요.
//!\n1!2!3
결과 : 6

하지만...

덧셈할 문자열을 입력해주세요.
//ab\n1a2b3
결과 : 6

내 의도는 이게 아니었다. 나는 //ab\n이라고 커스텀 구분자를 생성하면 'ab'를 세트로 적어야 올바른 구분자로 인식되기를 바랬지, 'a'와 'b' 각각 생성되길 바란 건 아니었다. 그래서 다시 RegExp() 생성자와 split() 메소드의 인자를 들여다보니 인자에 /,:구분/ 이런 식으로 오면 각각 ',',':','구','분'이 구분자가 되는 듯 했다. 그러니까 생성자 인자 안에서 join()을 해줄 때 '|'를 추가하도록 하면 되는 것 같았다.

const finalDlm = new RegExp(`[${defaultDlm.join("|")}]`, "g");

이렇게 코드를 수정하고 다시 프로그램을 시작해보았다.

덧셈할 문자열을 입력해주세요.
//ab\n1a2b3
결과 : 6

뭐가 문제였을까? 바로 ... defaultDlm.join("|")을 배열로 감싼 게 문제였다. 내가 저렇게 썼던 이유는 그냥 내가 참고했던 RegExp 메소드 인자가 배열로 감싸져있었기 때문이었다... 별 고민 없이 그냥 배열로 감싼 다음 안의 요소가 |로 분리되면 되는 줄 알았던 것이다. 실제로 finalDlm의 값을 print를 해보니 다음과 같이 할당되고 있었다.

덧셈할 문자열을 입력해주세요.
//ab\n1a2b3
/[,|:|ab]/g
결과 : 6

저 /[,|:|ab]/g가 출력되는 걸 확인하고 도대체 뭐가 문제인지 고민하느라 생각보다 시간을 많이 버렸다. 배열 안에서 |로 구분이 잘 되고 있는데 뭐가 문제일까 하고... 그러다 정규표현식의 패턴 종류를 자세히 들여다 보았을 때야 겨우 문제를 찾을 수 있었다.

const finalDlm = new RegExp(defaultDlm.join('|'), 'g');

이렇게 정규표현식으로 감싼 배열을 삭제하고 나니 내가 원하는 대로 잘 출력되었다.

문자열 덧셈 계산기가 실행되었습니다.
덧셈할 문자열을 입력해주세요.
> //ab\n1a2b3
[ERROR] 숫자열로 변환되지 않는 입력이 포함됐습니다.

이번 정규표현식 소동으로 배운 것은... 메소드를 사용하고 코드를 쓰기 전에 내가 쓰는 코드에 대해 제대로 이해하고 쓰자는 것이었다. 내가 '왜' 이런 코드를 쓰는지에 대한 고민 없이 쓰는 것은 더 시간을 버리게하고 코드만 지저분하게 만드는 안 좋은 습관임이 확실하다.
이런 나의 안 좋은 습관을 보니 나는 아직도 컴퓨터를 사람처럼 대하고 있구나 싶었다. 사람끼리는 대충 중간중간 틀린 표현으로 말해도 말의 앞 뒤 맥락을 따져 얼추 정확히 알아들어주지만, 컴퓨터는 중간에 섞인 헛소리도 진심으로 받아들이고 그대로 이행하는 아이인데 말이다.

휴... 정규표현식 소동 말고도 이스케이프 처리 문제도 있었다. 과제 요구사항에 따르면 커스텀 구분자 정의를 //\n 을 통해서 하도록 했는데, 이 백슬래시+n이 터미널 상에서는 줄바꿈 이스케이프 문자이기 때문에 사용자가 '문자열'로 이스케이프 문자를 입력하면 줄바꿈 \n과 구분하기 위해 \n 으로 읽어버리는 문제가 있었다. 이 부분은 if 문의 inputStr.includes('\n') 부분을 inputStr.includes('\n') 로 바꾸는 걸로 해결했다.

이후 커스텀 구분자 정의에 사용자가 \로 시작하는 이스케이프 문자를 넣는 예외 케이스도 생각이 나서 아래와 같은 로직도 추가해주었다.

      if (customDlm.startsWith('\\')) {
            customDlm = '\\' + customDlm;
      }

이렇게 정리하고 보니까 별 거 아닌 거에 헷갈린 느낌이지만 막상 당시에는 해당 개념들을 이해하기 위해 꽤 노력했다😭
그래도 기본 요구사항 외에 예외 케이스를 최대한 다양하게 생각해보려고 노력하면서, 코드를 추가해나가는 과정이 재미있었다.

3. 배운 내용 정리

배운 내용들이 너무 많고, 다시 한 번 글로 정리해둬야 잊지 않을 것 같아서 메소드 관련 내용은 따로 포스팅을 빼서 작성하려고 한다.
각 포스팅을 쓸 때마다 링크를 추가할 예정이다.

3-1. 정규표현식 패턴 매칭 메소드

이 부분은 매우 잘 정리해주신 블로거님이 계셔서 해당 블로그의 링크를 대신 남겨놓는다.
https://velog.io/@syh0397/REGEXPRegular-Expression%EC%A0%95%EA%B7%9C-%ED%91%9C%ED%98%84%EC%8B%9D

3-2. new RegExp( )

3-3. split( )

split() 메서드는 문자열을 지정된 구분자(Separator) 를 기준으로 나누어 배열 로 반환하는 문자열 메서드이다.
https://velog.io/@dev-dino22/Javascript-API-slice-splice-split-배열-메서드
자세한 내용은 따로 포스팅 해두었다.

3-4. reduce( )

reduce() 메서드는 자바스크립트의 배열 메서드로서, 제공하는 함수를 사용해 배열의 요소를 순회하며 값 하나로 만드는 축소 동작을 실행한다.
https://velog.io/@dev-dino22/Javascript-API-reduce-배열-메서드
자세한 내용은 따로 포스팅 해두었다.

3-5. every( ) <-> some( )

every()와 some() 메서드는 배열 요소를 순회하며 특정 조건을 확인하는 메서드로, 불리언(boolean. 참 혹은 거짓) 값을 반환한다.
https://velog.io/@dev-dino22/Javascript-API-every-some-배열-메서드
자세한 내용은 따로 포스팅 해두었다.

3-6. filter( )

Array 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링한다. 즉 기존 배열을 변경하지 않고 기존 배열의 일부만 포함하는 새로운 배열을 반환하는 복사 메서드이다.
https://velog.io/@dev-dino22/Javascript-API-filter-find-배열-메서드
자세한 내용은 따로 포스팅 해두었다.

3-7. map( )

map() 메서드는 자바스크립트 배열 메서드 중 하나로, 배열의 각 요소에 대해 제공된 함수를 호출한 결과를 새로운 배열로 반환한다.
따라서 원본 배열을 변경하지 않으며, 반환값이 필요한 작업에 주로 사용된다.
https://velog.io/@dev-dino22/Javascript-API-map-배열-메서드
자세한 내용은 따로 포스팅 해두었다.

3-8. 객체 활용

스터디원 분들의 코드를 리뷰하면서 인상깊었던 것은 출력될 메세지나 검증 로직 등을 객체 파일을 만들어 관리했다는 것이었다.
이렇게 하면 유지보수성과 확장성이 매우 뛰어날 것 같다. 2주차에는 나도 객체를 적극적으로 활용해봐야겠다.
출력 메세지도 한 곳에서 관리해봐야지!

3-9. 자바스크립트 Airbnb 컨벤션

우테코의 요구사항에는 코드 작성 시 자바스크립트 에어비엔비 스타일가이드를 따르라고 명시되어있다.

내용이 길어서 참고했던 블로그 Url 를 함께 메모해둔다.

https://velog.io/@hamham/Airbnb-JavaScript-컨벤션-정리

또, 우테코 7기 프리코스 FE 재이라는 분께서 package.json 을 변경하지 않으면서 airbnb 스타일을 따르는 ESLint와 prettier 를 설정하는 법을 노션으로 공유해주셨다. 이 링크도 메모해둔다.
https://phrygian-fear-791.notion.site/Airbnb-JS-127bcec0ac84804086a9e978e489fa88

4. 고칠 점

4-1. 우테코 공통 피드백 메모

공통 피드백에 의하면 줄임말을 쓰지 말라고 한다 ㅠㅠ finalDlm->finalDelimiter 이런 식으로 풀어서 쓰자..ㅠ
오류를 찾을 때 함수보단 디버거를 사용하자!
이름을 고심해서 잘 짓자! 주석은 최대한 지양하고, 이름만 봐도 무슨 함수인지 알 수 있게 짓는 게 베스트!
주석 최대한 쓰지 말자 ㅠ (클났네 나 너무 남발해따...)
코드 포매팅을 사용한다! 코드 포매팅과 구조화는 클린 코드를 위한 최소한의 요구 사항이다. IDE의 코드 자동 정렬 기능을 사용하면 더 깔끔한 코드를 볼 수 있다.
자바스크립트 API를 적극 활용하기!

4-2. 스터디 피드백 메모

출력 메세지들을 객체 파일로 만들어 한 곳에서 관리하는 게 좋을 것 같다!
내장 메소드를 적극 활용하자! 내 코드 중에 for each 문으로 작성한 합산 함수가 있었는데, reduce() 메소드를 이용하면 합산부터 유효성 검증 로직까지 한 메소드에서 작성할 수 있었다! 자바스크립트 내에 유용한 메소드들을 꼼꼼히 공부하자 ㅎㅎ
run() 에는 최대한 호출만 하기...! run() 안에 수행할 로직을 인라인으로 적지 않는 게 좋다
배열 자체를 재할당 할 일이 없다면 const 로 선언하자! 배열에 요소가 추가되는 것은 재할당이 아니기 때문에 const로 해도 전혀 문제 없다!
가령, 내 코드에서 let defaultDlm = [] 배열을 const defaultDlm = [] 으로 해도 된다는 것이다. 함수 한 번의 실행 안에서 변동되지 않을 값에 let 키워드를 사용하는 것을 지양하자!
https://ko.javascript.info/variables (스터디원 분이 소개해주신 사이트인데, 시간 날 때마다 읽어봐도 좋은 사이트같다!)

5. 소감

< tmi >
사실 나는 자바스크립트의 내장 메소드 활용에 상당히 약하다. 디자이너로 일하면서 간단한 기능 구현이나 애니메이션은 내가 해보고 싶어서 아무 것도 모르고 구글링과 gpt에 의존해 라이브러리를 남발해가며 어쨌든 제대로 보여지기만 하면 그만인 식의 코딩으로 개발에 입문했기 때문이다...ㅠㅠ

그렇게 적당히 퍼블리싱이 가능한 디자이너가 되는 게 목표였는데, 하다보니 코딩이란 게 너무 재밌었다. 나는 하고싶은 게 너무 많은 사람이었고 한 가지 길에 선택과 집중을 하지 못한 채 이것저것 공부했었다. 영상 전공 대로의 영상 촬영 및 편집, 모션그래픽 디자인, 그래픽 디자인, 3d 아트워크 제작 등등...그러다 UIUX 디자인까지 하게되었을 때 나는 html,css,js 에 대해 공부하게 되었다. 처음에는 그냥 내 디자인을 웹에 제대로 렌더링 시키고싶었을 뿐이었다. 그래서 마크업 언어로 웹에 내 디자인을 자리잡아놓기만 하려고 했는데, 막상 웹에 렌더링된 모습을 보니 멈춰있는 내 페이지가 아쉬웠다. 내가 본 여느 페이지들처럼 리스트를 누르면 아래로 리스트가 애니메이션되면서 드롭다운이 된다던지, 버튼을 클릭할 때마다 타이틀에 텍스트가 추가된다던지 하는 동적인 동작을 시키고 싶었다. 이런 욕심으로 코드도 긁어다 붙여보고 수정도 해보고 하면서 코딩에 재미가 붙어갔다.

그렇게 구현하고 싶은 동작들이 많아지면서 웹프론트엔드라는 분야를 알게되었는데, 나에겐 정말 너무나 매력적인 직군이었다! 요즘 웹에서 요구하는 퍼포먼스가 정말 다양해지고 있다. 단순히 반응형 사이트, 드롭다운 애니메이션 같은 것 뿐만이 아니라 이제 더 동적이고 화려하게 사용자와 상호작용하길 원하는 프로젝트가 늘어났고 다양한 웹 애니메이션에 더불어 이젠 웹 상에 3d 오브젝트도 띄운다. 하...! 정말이지 내가 좋아하는 걸 다 하는 직군이다! UIUX와 가장 밀접하면서, 모션그래픽 일을 하면서 배운 애니메이션 기법도 활용할 수 있으면서, 3d까지 포용되는 일이라니, 코딩이라는 도구로 창작을 하는 직업같아서 너무너무 매력적으로 느껴졌다. 디자인이든 영상이든 늘 아쉬웠던 것은 시청자와 상호작용이 안되는 정적인 창작물이라는 것이었다. 하지만 프로그램은 동적으로 사용자와 상호작용이 되는 창작물이다! 코딩이라는 것은 공부해갈 수록 너무 재밌었다!

그리고 일 끝나고 취미로 코딩을 해오다가 우연한 기회로 RN 프로젝트의 프론트 기능 개발에 참여하게된 경험을 계기로, 제대로 공부를 시작해보기로 했다. 무작정 자바스크립트와 리액트 책을 사서 공부하기 시작했는데, 음...사실 자바스크립트 책은 아직도 완독을 못 했다.
리액트든 vue든 express.js든 웹프론트엔드 개발의 모든 기반은 자바스크립트 언어 하나이기 때문에 자바스크립트만큼은 딥하게 꾸준히 공부하고 싶어 산 책이긴 하지만...하나하나 이해하고 넘어가려니, 결국 컴퓨터 공학적인 지식을 계속 따로 공부하면서 읽어야해서 생각보다 완독까지 시간이 더 걸릴 것 같다. 심지어는 완독하더라도 옆에 두고 계속 다시 읽어봐야할 것 같긴 하다...ㅎㅎ

아무튼, 언어 하나를 제대로 공부하려고 하니 끊임없이 부딪히는 벽에 내가 얼마나 아무 것도 모르고 아무렇게나 코딩해왔는지 알 수 있었다.
그리고 배워갈 때마다 기존에 내가 작성하고 있던 개인 포트폴리오 사이트도...얼마나...엉망이었는지...보여서...일단 공부에 좀 더 집중하고 싶어졌다.

그렇게 해서 비전공자이자 독학러의 한계를 딛고 기초부터 탄탄히 개발을 공부하고 싶어서 우테코에 지원하게 되었다.
< /tmi >

서론이 너무 길었다. 각설하고!
우테코 프리코스 첫주차 소감은 '짱 기쁨!'이다!ㅎㅎㅎ
애초에 붙을거라는 기대 없이 지원자 전원에게 주어지는 프리코스 과제를 받고싶어서 지원한 거였는데, 기대했던 것보다 더 많은 것을 얻을 수 있었던 한 주였다.

일단 디스코드에 초대되면서 웹프론트엔드 개발자가 되고싶어하는 사람들과 교류할 수 있다는 점이 비전공자 독학러라면 누구나 공감할만한 '나... 제대로 공부하고 있는 게 맞을까...?' 하는 걱정을 해소시켜 주었다. 다른 사람들은 어떤 고민을 해서 어떻게 코드를 짰는지 다 보고 서로 리뷰를 주고 받을 수 있으니 그 속에서 새로 배워가는 게 엄청 많았다! 그리고 RN 프로젝트를 할 때 백엔드 파트를 맡았던 개발팀장님을 봤을 때, 개발자들은 개발자들끼리의 커뮤니티가 엄청 끈끈하고 교류가 활발해보였는데, 우테코 디스코드 분위기도 그래보여서 개발자들간의 커뮤니티가 이렇게 형성되는구나 싶었다. 다른 직군들은 저작권 문제든지 여러 문제로 세상에 내놓기 전에 창작물이나 아이디어를 꽁꽁 숨길 때도 많고 교류도 그렇게 활발하지 않은데, 개발자들의 이런 오픈 소스 문화와 이런 활발한 교류 활동은 꽤 신기하고 너무 좋은 문화 같다.

그리고 우테코에서 제공해준 자바스크립트 스타일 가이드나, 1주차 공통 과제 피드백에 있는 자료들도 나의 제멋대로 개발하는 안좋은 습관을 바로 잡기 너무 좋은 기회들이었다.

또한 그동안 혼자 해보는 코딩에서는 UI 화면에 무언가를 보여주는 것에만 급급했는데, 프리코스 과제를 풀어보면서 프로그래밍적인 고민과 접근, 풀이를 연습해볼 수 있었던 것 같아 좋았다😊 진짜 개발 공부 하는 느낌...!!!ㅎㅎㅋㅋㅋㅋ

오늘은 이제 회고를 마무리하고 2주차 과제를 시작해볼건데, 이번주엔 어떤 것들을 배울 수 있을지 기대가 된다 ㅎㅎ

+이제 2주차부턴 블로그도 매일매일 회고를 써야겠다. 그때그때 느낀 것들이 많은데, 다 끝내고 한 번에 몰아쓰려니 양도 너무 많고 잊어버린 것들도 있는 것 같다...🥹

내 1주차 프리코스 과제 코드는 아래 깃허브에서 확인할 수 있다!
https://github.com/woowacourse-precourse/javascript-calculator-7/pull/267

Nayoung

프론트엔드 개발자로 성장하고 싶은 그래픽 디자이너입니다!

다음 포스트