IT 개발자가 되기위한 여정

컴퓨터 공부를 시작함에 앞서 계획 및 개발에 대한 내용을 풀어나갈 생각입니다.

IT 학습/[프그] Vanilla JS 프론트엔드 스터디

프론트엔드 개발을 위한 자바스크립트 - 1주차

제로시엘 2022. 9. 18. 23:48

 

 

 

https://school.programmers.co.kr/learn/courses/14723

 

[스터디/17기] 프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS)

🎁 프론트엔드 개발을 위한 자바스크립트 스터디 모집 중! 이번 기수 일정이 맞지 않다면 오픈 알림 신청하고 최저가에 수강하세요! 오픈 알림 신청 프론트엔드 개발을 위한 자바스크립트 온라

school.programmers.co.kr

 

 


 


서두


백엔드 스터디를 어느 정도 진행한 시점에서 자바스크립트 스터디가 시작됐다 😁

강의의 난이도는 기본적으로 JavaScript 의 이해도가 초 ~ 중급 이상은 되어야 할 것 같다.

일단 왠간한 메서드와 기본적인 제작은 다 할 수 있다는 전제 하에 스터디가 진행된다😱


 

수요일 저녁 시간에 약 3시간 정도 진행되었으며 OT 그리고  기본적인 Branch , PR 설명등을

 

들었고 함수형 프로그래밍에 대한 간단한 설명과 같이 과제에 대한 설명도 진행하였다.

좋은 팁, 자료를 공유한 사람들에게 아낌없이 리액션을 해주자 (by 매니저 루카 님)
누군가가 좋은 외부 자료나 본인의 경험을 공유했다면 꼭 반응을 남겨주자.간단히 이모지 한 번 누르는 것, 쓰레드에 소감 하나 남기는 것만으로도 커뮤니티에는 좋은 효과가 일어난다.


너무나도 좋고 정리된 자료들이 인터넷에 많고 공유해주시는 많은 분들께 감사를 느낀다.

자바스크립트 스터디는 아직은 1주 차지만 현제 4주 차 진행 중인 CRUD 스터디에서도

 

너무나 좋은 사이트를 구해서 벌써 5개나 스터디 대기 중이다. 😂
(하지만 매주 할게 점점 늘어 뒤로 밀려나가는 현실)


 

사용하는 기술 스택

  • Javascript🐱‍🏍
    시작이자 끝 처음이자 전부

  • HTML + CSS
    과정 중엔 없고 기초적인 지식만 알면 된다.

 


 

 

인상 깊었던 점

첫 주차를 진행하며 가장 인상 깊었던 점은 직접 코드 리뷰를 다른 분에게 처음으로 달아봤다! 🤩

이전 백엔드 스터디에서 가장 아쉬웠던 점은 아는 것이 너무 적어 일방적으로 받기만 하고

 

나도 지식을 공유하고 싶었는데 그러지 못했던 점이 아쉬워서 이번에는 적극적으로 달아봤다.


슬랙 깃허브 알림 테러

 

 

작성 중 너무나도 뛰어난 분이 계셨고 나랑 비슷한 분도 계셨다. 한분은 간단한 과제임에도 아예 

 

전부 분리해서 거의 기업과제급으로 App을 분리하여 만드신 분도 계셧다. 🙀🙀🙀

 

코드에 정답은 없고 코드 리뷰는 처음인 만큼 최대한 기분이 상하지 않게 적으려고 노력했는데

 

제대로 작성이 됐는지는 잘 모르겠다.

 

 


 

 

인상 깊었던 코드 (바닐라 JS로 TS의 인터페이스 유사 구현)

 

// 자료
const data = [
  {
    text: "3",
    isCompleted: "",
  },
  {
    text: "춤추기",
    isCompleted: false,
  },
];

//Typescript의 interface와 같은 역활을 담당한다.
const todoTypes = {
  text: "string",
  isCompleted: "boolean",
};

// 타입체크
const checkTodoTypes = (todos) => {
  todos.forEach((todo) => {
    for ([keyType, valType] of Object.entries(todoTypes)) {
      if (!todo.hasOwnProperty(keyType)) {
        throw Error(
          `todo 데이터 형식이 올바르지 않습니다.(${keyType} 존재하지 않음)`
        );
      }
      if (typeof todo[keyType] !== valType) {
        throw Error(`${keyType}의 데이터 타입은 ${valType}입니다.`);
      }
    }
  });
};

checkTodoTypes(data);

 

유사한 방식으로 작성하고 싶어 검색했지만 타입 스크립트 매뉴얼만 나와 포기하던 중

 

코드 리뷰 중에 유용한 것을 발견했다. 2중 객체나 객체 안 배열이 나온다면 수정이 필요하지만

 

단순히 타입을 정리하는데 매우 유용할 것 같았다. 😍😍

 

 


 

백엔드 스터디에서도 마찬가지지만 역시 코드를 치고 보면서 성장하는 게 가장 보람차고

 

빠른 길인 거 같다. 단순히 보고 클론 코딩은 초반에만 도움이 되는 것 같다 😁

 

그나저나 이번에도 혹시 기프티콘 투하가 있을까 싶어서 잽싸게 자기소개를 하고

무려 베라 아이스크림을 받았다😚😚 감사합니다