[WIL] 1주차 (06.12 ~ 06.18)

드디어 WIL 적기 시작!

 

4F => Fact : 이번주 있었던 일, 내가 한 일 Feeling : 나의 감정적인 반응, 느낌 Finding : 그 상황으로부터 내가 배운 것, 얻은 것 Future : 배운 것을 미래에 어떻게 적용할 것인가

 

1. Fact : 이번주 있었던 일, 내가 한 일

- 토요일 공부 시작! 토요일도 아침 9시 ~ 밤 9시까지 공부함

- Js 기본 문법 공부 : 스파르타 강의 1주차 ~ 3주차 복습

- 프로그래밍 기초1 테스트 : 9/10 , continue / break 를 잘 사용해보자

- 야구문제 풀어봤다! 챗gpt 사용과 터미널을 통한 git 사용법 익힘

- 일단 팀장 했었음! 실력이 부족해서 잘 하지는 못함 ㅜ.ㅜ

- 알고리즘 공부 시작! 프로그래머스를 통해 문제를 풀음

 

2. Feeling : 나의 감정적인 반응, 느낌

 

- 토요일 공부

: 토요일 공부? 가보자고~ 였는데 생각보다 힘들었다. 토요일 밤에 약속도 있었고, 일요일에 이동도 해야했고, 그 다음엔 또 약속도 있었어서.. 솔직히 일요일도 제대로 못쉬었다. 컨디션 관리를 잘해야겠다는 생각이 많이 들었다! 일단 여기에 집중하기로 했으니까 좀 더 시간관리를 해봐야겠다. 그래도 토요일도 공부하는 멋진 나? 에 취할 수 있음

 

- Js 기본 문법 복습

: 기본적인 내용이고, 4주차 5주차에 비해 비교적 쉬운 내용들이다보니 조금 여유롭게 들었던 것 같다. 말이 여유지 사실 게으름을 부렸던 것도 있어서 반성하는 시간을 가졌다. 왜냐면 결국 기초1 테스트에서 문제를 하나 틀려버렸기 때문에..ㅎ 뭐든 안다고 자만하지 말고 꼼꼼히 봐야겠다. 똑똑한 컴퓨터가 오류를 잘 알려주기는 하지만, 내가 먼저 발견하면 더 좋으니까! 컴퓨터가 알려주지 못하는 오류들도 있고 말이다.

그래도 다시 문법을 복습하니까 좋았다. 다시 들어도 신기한 것들이 있어서.. 역시 명관은 다시 봐도 명관. 강의가 참 좋다.

 

- 개인적인 능력과 발전에 대해

: 여러 분들을 만나면서 느끼는 건, 참 대단한 사람이 많다는 거다. 그래도 컴퓨터 공학과를 나오고, 나름 꾸준히 언어와 마주쳐 왔기에 내가 어느정도 능력이 있다고 자만했었다. 하지만 세상은 넓고 똑똑한 사람은 참 많다.. 조금 의기소침해지는 주간이기는 했다. 내가 생각지도 못한 방법을 척척 사용하고, 해내는 분들을 보며 내가 이 캠프를 과연 잘 따라갈 수 있을까? 하는 걱정섞인 의문이 들었다. 

다행인 것은, 이 고민을 기술 매니저님과 상의했다는 것이다. 매니저님이 일단! 지금은 속도가 차이 난다를 느낄 구간이 아닐 거라고 했다. 아직 리액트도 들어가지 않았으니 말이다! 그리고 매니저님도 항해를 하며 나와 같은 감정을 느꼈을 때가 있다고 하셨다. 그럴 때 오히려, 아 이 사람을 꼭 붙잡아서 같이 마지막 프로젝트를 해야겠다! 나중에 모르는 거 있으면 물어봐야겠다! 라고 긍정적으로 생각하셨다고 한다! 나는 감정에만 좀 매몰되어 있었는데, 매니저님 말씀을 들으니 번쩍 생각을 돌릴 수 있었다. ㅎㅎ 배울 점이 있는 사람들을 만난다는 건 좋은 거다. 여기엔 배우러 온 거니까 말이다. 이 생각을 잊지 말자. 

그리고 잘하고 있다고 해주심!

 

- 알고리즘 공부 시작

: 오랜만에 하니 재밌었다. 사실 쉬운 문제들 풀어서 재밌었다. ㅋㅋ 근데 내 실력이 늘었다는 걸 느낀게, 예전에 풀다 포기했던 문제들을 내가 슉슉 풀고 있는 거다. 솔직히 맨날 사람들이 코딩은 꾸준히 하다보면 늡니다. 라고 할 때 나는 그 안에 속하지 못한다고 생각할 때가 잦았다. 그래서 전공을 살릴까 말까 고민을 했던 건데.. 진짜로 실력이 아주 조금이나마 늘었다. 일단 코테 문제를 보고 도망가는 게 아니라, 시간을 가지고 고민해볼 줄 알게됐다. 챗 gpt도, 어떤 메서드를 사용할 줄 알게 됐다. 일단 문제를 보면, 이렇게 풀어볼까? 라는 생각이 나오고 그걸 코드로 풀어낼 수 있다는 것 자체가 엄청난 발전이라 생각한다.

발전한 나를 느낄 수 있어서 감동적이었음!

 

3. Finding : 그 상황으로부터 내가 배운 것, 얻은 것

위의 내용과 조금 중복돼서 간단하게만 적어보겠음

 

- 하면 된다! 내가 느끼지 못했을 분 나는 꾸준히 성장하고 있었다!

- 잘하는 분들 보고 기죽지 말고, 어떻게 저분들을 써먹을지 고민해보자 쿄쿄 잘하는 분들이 곁에 있다는 건 행운이다 :)

- 기본에 충실하자! 생각지도 못한 곳에서 문제는 생긴다

- 공부 하는 것을 두려워하지 말자. 일단 시도해보자. 그럼 뭐라도 남는다. 

- 컨디션 관리 잘하자!

 

4. Future : 배운 것을 미래에 어떻게 적용할 것인가

질문들이 정말 쉽지가 않다..

 

- 운동시작하기

: 일단 운동을 시작할까 한다. 지금 하고 있는 다른 일이 마무리 지어져야 할 수 있겠지만.. 어쨌든 체력관리 위해 뭐라도 하기!

 

- 조원분들과 친해지기

: 개발 인맥을 아주아주 늘려놔야겠다. 잘하시는 분들, 생각지도 못한 방법을 쓰시는 분들이 많아 만날 때마다 놀란다. 쌉 INTP로서 쉽지 않은 길이겠지만, 사회화된 인팁은 할 수 있다! 소통하는 능력을 길러보자.

 

- TIL 적기

: 배운 것들, 알고리즘 공부한 것들은 금방금방 사라지기때문에 TIL의 중요성을 다시 느낄 수 있었다.. 간단하게라도 앞으로는 좀 꾸준히 적어야겠다.

---

여기서 부터는 이번주 과제! 간단하게 진행해보겠다

 

* 키워드 : React: JavaScript의 ES란?, ES5/ES6 문법 차이

 

1. React: JavaScrip의 ES란?

- ES : ECMA Scipt

- Ecma International이 Ecma-262 기술 규격에 다라 정의하고 있는 스크립트 프로그래밍 언어로, 자바스크립트를 표준화 하기 위해 만들어 졌다.

- 액션 스크립트와 J스크립트 등 다른 구현체도 포함!

- 웹의 클라이언트 사이드 스크립트로 많이 사용되며, Node.js를 사용한 서버 응용 프로그램에도 점차 많이 쓰이고 있다.

 

2. ES5/ES6 문법 차이

- 일단, 딱 봐도 알 수 있듯이 ES5에서 업그레이드 된 것이 ES6이다. 그래서 ES6에 추가된 문법들을 기본으로 살펴보겠다!

 

1) 변수 선언 (var, let, const)

- ES5

: var 만 있었다. 재할당과 재선언이 되지만, 호이스팅 문제가 있다

- ES6

: var의 문제를 해결하기 위해, let과 const가 추가되었다. 둘 다 var과 달리 재선언이 불가능하다. 

let : 변수 선언에 사용된다. 즉 재할당 가능하다.

const : 상수 선언에 사용된다. 즉 재선언 불가능한다.

 

2. 화살표 함수

- 새로운 함수 선언법

- ES5

var func = function(arg1, arg2) {console.log("ES5")}

- ES6

let func = (arg1, arg2) => {console.log("ES6")}

위와 같이 한 줄에 작성될 때는 {}를 빼도 된다. 매개변수도 하나일 때는 ()를 지워도 된다. 

let func = arg1 => console.log("ES6")

동일하게 작동함

 

3. 템플릿 리터럴

- 백틱(``)을 통해 문자열을 감싸 표현하는 기능이다. 변수를 안에 자유자재로 넣을 수 있다는 장점이 있다.

var name = "이름"
var age = 20
console.log("저의 이름은" + name + "이고, 나이는 " + age +"입니다.") // ES5
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`) // ES6 신문법

 

4. Default parmeter

- default가 되는 요소를 바로 지정해줄 수 있다

- ES5

var person = function(name) {
  var name = name || "이름" // 이와같이 default 값 넣어주는 과정 필요함
  return name
}
// 이름

- ES6

let person = function(name="이름") {
  return name
}
// 이름

 

5. 클래스

- ES6부터 class 키워드 사용이 가능하다

- ES5

var Add = function(arg1, arg2) {
  this.arg1 = arg1
  this.arg2 = arg2
}
Add.prototype.calc = function() {
  return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2)
}
var num = new Add(3,5)
console.log(num.calc())

- ES6

class Add {
  constructor(arg1, arg2) {
    this.arg1 = arg1
    this.arg2 = arg2
  }
  calc() {
    return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2)
  }
}
let num = new Add(3, 5)
console.log(num.calc())

 

*참고

https://velog.io/@weffa/JavaScript-ES5%EC%99%80-ES6-%EC%B0%A8%EC%9D%B4

JavaScript ES5와 ES6 차이