항해99 - 2주 차 회고 풀스택 프로젝트 && 언어 기본기[javascript]

항해99 - 2주 차 회고  (풀스택 프로젝트 && 언어 기본기[javascript])

항해99를 시작하고 벌써 2주 차가 끝난 일요일이다!

다음 주가 벌써 크리스마스라니!!!🎄☃🎁

벌써 2주차가 끝났다니!!!

+3주차 알고리즘 주차가 진행 중이라서 회고록 작성하고 다시 알고리즘 문제 풀러 가야한다 😀

풀스택 미니프로젝트랑 언어기본기 (자바스크립트) 주차인 2주차를 진행하면서

내 실력이 1주일 전에 비해 정말 많이 성장했다고 느낀다.

풀스택 미니프로젝트는 '기능 위주의 구현'을 목표로 했으며

진행하면서 화면개발, 사용자 편의성, 백엔드와의 통신, API 작성, DB 접근 등

웹 개발의 전반적인 부분을 모두 팀원과의 협업을 통해 경험 했고,

백엔드 작업이 많은 분과의 소통을 통해 작업 전 규칙 명세에 대한 부분의 중요성을

한번 더 느꼈다(작업 전 규칙 명세를 잘 정하고 진행한 덕분에 프로젝트가 수월했음을 느꼈기 때문이다)

 

프로젝트 초반에 팀원분들과 작업 세팅을 하면서 'git' 에러가 종종 났었는데

이 문제들은 모두 다 처음 접해본 에러였기에 해결하기가 쉽진 않았다.

하~지~만, 갓 구글!

구글링으로 모든 문제들을 해결했고, 이 부분은 따로 작성하겠다.

프로젝트 기획 단계에서는 의견을 하나 냈는데 팀원 분들 모두가 좋다고 하셔서

내 의견이 많이 반영이 된 프로젝트가 시작이 되었다. 풀스택 프로젝트 2조 팀원분들 모두 좋으신 분들!😀

그렇게 약 5일 동안 모두 고군분투하여 프로젝트를 완성했고, (모두 머리를 맞대어 오류와 에러를 공유해가며🕵️‍♀️)

프로젝트 발표 당일엔 매니저님들께 아주 좋았다는 칭찬을 들었다.

물론 보완이 필요한 부분은 내 눈에도 명확히 보였지만,

이번 프로젝트에서 기대한 점 보다 더 많은 기능들을 고려하고 개발하였기에 좋게 봐주셨다고 한다.

그리고 피드백 주셨던 부분들을 거의 다 반영한 점에서 더 좋게 봐주셨다고 한다.

그렇게 풀스택 미니 프로젝트는 아주 흐뭇하게 마무리가 되었다! 후후훟

 

내가 담당한 메인 페이지다

이어서 바로 언어 기본기 (2일간)가 시작되었고, 지금은 프로그래밍 기초(알고리즘) 주차가 진행 중이다.

언어 기본기 주차엔 항해에서 택배로 보내준 책으로 팀원 분들과 같이 스터디를 했고,

(이 스터디는 6주 동안 계속 틈틈이 진행된다)

그것들을 블로그로 정리 하면서 javascript에 대해 많은 것을 알게 되었다 (역시 기본을 탄탄하게 하는 것이 중요하다!😁)

https://iotrue.tistory.com/16 > javascript 기본지식 정리 내용

 

2주차를 진행하면서 알게된 내용들을 아래에 정리해보겠다.

😎JavaScript의 ES란?, ES5/ES6 문법 차이

*JavaScript의 ES란?

ES(ECMAScript) : 'Javascript의 표준 규격'을 의미함.

ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말하며,

자바스크립트를 표준화하기 위해 만들어졌다.

표준화를 하는 이유는 크로스 브라우징 이슈를 해결하기 위함이다

크로스 브라우징 이슈
기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈

쉽게 얘기하자면, ECMAScript는 스크립트 언어의 표준 규격 ('스크립트 언어는 이렇게 만들어야 해!')을 의미하고

javascript는 그 규격을 따르는 언어이다.

*ES5/ES6 문법 차이

💡 TIP
Javascript ES5 ECMAScript 2009는 JavaScript의 첫 번째 주요 개정판이다.
Javascript ES6 ECMAScript 2015는 JavaScript의 두 번째 주요 개정판이다.
ECMAScript 2015는 ES6 및 ECMAScript 6으로도 알려져 있다.
ES5 기반으로도 충분히 개발이 가능하지만, 코드의 축약 및 효율성면에서는 ES6 사용을 권장함.

 

ES6에서 추가된 문법은 다음과 같다.

 

▶ 변수선언

변수	호이스팅 문제	변수 재할당 가능여부	스코프 영역
const	미 발생	불가능	Block Scope(중괄호 블록 내에서 유효함)
let	미 발생	가능	Block Scope(중괄호 블록 내에서 유효함)
var (ES5)	발생	가능	Function Scope (함수내에서 유효함)

 

▶ 템플릿 리터럴 : 새로운 문자열 표기법. 백틱을 사용한다.

// ES5

var intro = '제 이름은' + name + '입니다'

// ES6

const intro = `제 이름은 ${name}입니다`

>문자열 표기법이 훨씬 간결해졌다. 특히 스크립트로 html을 처리할 때 상당히 유용하게 사용된다.

▶ 화살표 함수

// ES5
var x = function(a, b) {
   return a + b;
}
// ES6
const x = (a, b) => a * b

>화살표 함수에서의 this는 바깥의 this를 가르킨다 (바인딩 되지 않는다)

 

▶ Default parameter

// ES5
var person = function(name) {
  var name = name || "이름"
  return name
}
// ES6
const person = function(name="이름") {
  return name
}

 

이 외에도 많은 내용이 있고, 아래에서 확인 가능하다.

https://www.w3schools.com/js/js_es6.asp

😎항해를 시작하고 이번 주에 배운 점, 느낀 점

웹 개발의 전반적인 흐름과 자바스크립트에 대해 더 많이 알게 됐고

알고리즘 주차를 진행하면서 개발적으로 생각하는 방법을 배우고 알아가고 있다.

개발이라는 게 쉬운 건 아니지만 하는 만큼 실력이 늘 수 있는 분야이고

내가 몰입이 가장 잘 되는 분야라는 것을 더욱 느꼈다.

몰입의 장+단점은 시간 가는 줄 모르고 계속 앉아 있게 된다는 점이다.

몰입이 잘 되는 만큼, 운동으로 건강관리도 꾸준히 해야지!💪

 

이번주 공부 시간, 더 해야한다!

블로그를 쓰다보니 벌써 시간이 3시다!

다시 알고리즘 공부하러 가보자고!

가보자고!