TIL & WIL

221112_TIL

강민승 2022. 11. 12. 16:41

오늘 공부한 내용

  • 항해 99 Pre-Onboarding 6일차
  • 오늘은 javascript 함수고급(콜백함수,화살표함수,타이머함수,즉시호출함수, 익명함수,선언적함수,)과 객체(속성과메소드,this)에 대해서 배웠다.

어려웠던 내용

  • 오늘 자바스크립트 내용에는 특별하게 어려웠던 부분은 없었고, 숙지하고 있던 내용을 한번 더 점검하는 시간이 되었다.

궁금한 내용 / 부족한 내용

  • 콜백함수

콜백함수는 매개변수로 전달하는 함수를 콜백함수라고 한다. 다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출된다.

콜백함수는 우리가 자바스크립트에서 볼 수 있는 함수로써 그만큼 자주 쓰이는 편이다.

//콜백함수의 기본 예


window.addEventListener('load', function(){
   console.log('테스트');   //윈도우가 준비(load)되면 console.log!  
})


///////////////////////////////////////////////////

function ShowUserInfoMessage(callback) {
  console.log(
    `${callback.name}+님의 나이는+${callback.age}이고 사는 곳은 ${callback.address}입니다.`
  );
}

function UserInfo(name, age, address) {
  return { name, age, address }; // name: name, age:age, address:address > 키와 값이 같은 경우 축약할 수 있음.
  
}

ShowUserInfoMessage(UserInfo("minseung", 31, "달서구"));

 

  • 콜백함수 : filter()

콜백하는 함수에서 실행하는 리턴값에 맞는 것들을 모아서 새로운 배열을 만들어 준다.

let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76];

console.log(numbers.filter((data) => data % 2 != 0)); // 홀수 = [273,25,75,103,57]
console.log(numbers.filter((data) => data >= 100)); // 100 이하 = [27,103]
console.log(numbers.filter((data) => data % 5 === 0)); // 5로 나눈 나머지가 0 = [25,75]

 

※ 왜 선언적함수보다 익명함수를 애호하는가?

오늘은 7일에 공부한 익명함수에 대한 개념을 보충하는 시간이었다.

기존에 선언적함수보다 익명함수를 사용하는 이유에 대하여 '일회성 함수로 사용하여 불필요한 메모리를 사용하는 것을 방지하여 낭비를 줄일 수 있다'라고만 알고 있었더라면,  오늘에서 배운 내용은 '안전하게 함수를 사용하기 위하여'라는  것이다. 

우리는 보통 여러개의 자바스크립트 파일을 import 를 하는 경우가 많다. 여기서 문제는 다양한 자바스크립트 파일에 어쩌면 동일한 이름의 함수가 존재할 수 있다는 점.

그럴 경우에는 함수들이 같은 블록에 있는 상황이라 여겨지기 때문에,  함수가 중복될 경우가 생길 수 있다. 중복된 함수는 더 나중에 호출된 함수로 덮어지기에 의도하지 않은 문제가 발생할 수 있다.

또한 변수같은 경우 같은 블록에서 중복선언시 오류가 발생하기도 한다. 그것을 미연에 방지하기 위해 익명함수를 선호한다고 한다.

 

  • 객체 챕터에서 JSON.stringify를 사용하는 부분에 있어 stringify가 받는 인자의 값에 대해서 알게 되었다. 이 부분에 대해서 이민정 기술매니저님께 여쭤보게 되었고, 친절하게 잘 설명해주셔서 이해가 잘 되었다. 이민정매니저님 쵝오 ^^
JSON.stringify(value, replacer, space)
  • 우리는 보통 stringify를 첫번째 인자 value만을 사용한다. 데이터통신을 하는 과정에서 데이터를 넣기 위해 첫번째 인자(value)를 자주 사용하는데, replacer 같은 경우에는 배열이나 객체, null의 값들을 넣을 수 있고 보낼 데이터들 중에 간편하게 배열이나 객체들을 넣게되면 그부분만 보낼 수 있게 만든 역할을 한다고 한다. 마지막 space 같은 경우에는, 1~10까지의 넘버값을 넣을 수 있으며 객체 안에 있는 데이터를 보여줄 때 tab? 띄워쓰기? 공간?을 조절하여 어떤 내용인지 확인하는 사용자에게 가독성을 높여주는 역할을 한다.  사실 이런 부분은 굳이 알지 않아도 되는 부분이었지만 하나라도 더 알고 넘어가고 싶은 마음에 여쭤보게 되었다. 

느낀점

공부를 할수록 지금 이순간이 너무나도 소중하고 중요하다는 것을 깨닫고 있다.

기본기를 닦는 시간은 내가 노력하여 행동으로 실천만한다면 최고의 성과를 얻을 수 있는 시기가 아닌가 싶기도 하다.

매니저님이 계셔서 도와주시기도 하고 공부할 시간도 충분하고 내 성과는 결국 내가 어떻게 하느냐에 따라 달린 거라고 생각한다.

나는 내 자신에게 부끄럽지 않고 싶다. 최선을 다했음에도 불구하고 성장이 욕심만큼 되지 않는다면 어쩔 수 없는 문제지만, 시도도 하지않고 후회는 하기 싫은 것이기도 하다.

당당하게 선택하고 행동하여 실패해도 부끄럽지 않은 내가 되었으면 한다.

지금도, 그리고 앞으로도 잘 될 것이라고 생각한다! 좋은 일들만 가득하길 기원하면서 오늘도 화이띵~!!  

더보기

+ 추가

10조분들과 함께 깃 브랜치를 merge하는 기회를 가지게 되었다. 

각자 생각하는 부분을 기점으로 이슈를 할당하고, 이슈된 네임으로 브랜치를 만들고(ex - feature/6_wakeup) 푸쉬를 한 후 중간지점의 dev 브랜치에 merge하는 것이 목표!  

merge하기 전 서로의 이슈에 대하여 코멘트를 남기고 그 코멘트내용에 따라 각자 수정을 하자고 이야기가 오갔을 무렵.

...  네.. 제가 그냥 다 merge시키는 바람에 수정은 물건너가고 다들 갑자기 다 merge가 되어버렸다고 당황

그 다음부터 그냥 맹공격을 받아서 마음이 아팠다. 큰 교훈을 가지게 된 것 같다. 너무너무 무서웠다. 

무서운 분 명단 : 이진님, 소영님, 미경님, 은솔님, 유리님

그 이후 하나의 이슈를 가지고 내용을 중복시켜 일부러 confilct를 만든 후 수정하는 작업도 다들 한번씩 해보는 시도를 해봤었고, main브랜치에 마지막으로 merge후 끝!

너무너무 무서웠다.

 

 

내일 할 일

  • 내일은 쉬는 날이지만 가능하면 자바스크립트 객체 나머지부분은 끝내도록 하자!
  • 정말 너무나도 타입스크립트를 공부해보고 싶지만 시간의 여유가 나질 않는다.. 가능하면 공부해보자