본문 바로가기

Daily/Today I Learned89

210112_TIL (this응용 - call, apply, bind 메서드 사용해보기) 🍎 오늘 한 일 ✔️ call, apply, bind 메서드 사용해보기 this 값을 지정하고 싶을 때 사용하는 메서드들인 call, apply, bind 메서드가 무엇이고 어떻게 사용하는 지 예시를 통해 배웠다. 단지 this를 지정하는 것 뿐만 아니라 Spread Opeator을 대신해서도 쓸 수 있고, 배열이 아닌 데이터타입에 배열메서드를 적용하는 놀라운 일까지 가능했다. 특히 bind를 사용하면 이벤트 핸들러를 생성할 때 이벤트 객체 대신 다른 값도 넘겨줄 수 있다고 해서 전에 만든 트위틀러에 적용해보려 한다. 잘 알아둔다면 굉장히 유용하게 쓰일 것 같아서 또 어디에 쓰일 수 있는지도 더 알아보고, 꼭 내일 블로깅을 해둬야겠다.. ✔️ 예제를 통해 this의 변화 알아보기 this는 실행 컨텍스트.. 2021. 1. 13.
210111_TIL (node.js, git에 익숙해지기) 🍎 오늘 한 일 ✔️ node.js, nvm 설치 지금까지는 웹 브라우저 상에서만 Javascript를 동작시켰는데, 이제 새로운 환경인 node.js에서 동작시킬 수 있게 되었다. 보다 쉬운 node.js 버전 관리를 위해 NVM(Node Version Manager)도 설치하고, use 명령어를 통해 설치된 다른 node 버전들을 번갈아 사용하는 방법도 배웠다. ✔️ Git Workflow 익히기 페어분과 같은 레포지토리 파일, 같은 부분에 다른 변경사항을 동시에 push해보며 충돌 상황을 만들어보고, 어떤 오류 메시지가 뜨고 어떻게 해결할 수 있는지 알아가며 연습해봤다. 추가로 fetch 에러와 pull 에러의 메시지가 다르게 뜨는걸 보면서, fetch와 pull의 차이가 뭔지 궁금해져서 ProGi.. 2021. 1. 12.
210109_TIL (undefined 제대로 알기) 🍎 오늘 한 일 ✔️ 복습 & 심화 학습 이머시브코스 시작 이틀전,, 그 동안 배운 내용들을 다시한번 복습하면서 궁금했던 부분이나 이해가 잘 되지 않았었던 부분, 관련해서 더 알아보려고 했던 부분들을 좀 더 자세하게 알아보고 정리하는 시간을 가졌다. 그 중 가장 기억에 남는 두 가지이다. 깊은복사 더 알아보기 얕은 복사와 깊은 복사의 차이점에 대해 정리하다가 몇몇 재밌는(?) 주제들을 발견할 수 있었다. 깊은 복사를 재귀를 사용해서 구현해볼 수 있다는 점, 또 JSON 메서드를 을 활용해서도 깊은 복사를 구현해볼 수 있다는 점이 제일 흥미로워서 이 부분들은 직접 함수로 작성해보기도 했다. 배웠던 개념들을 복습하던 중 undefined에 대한 의문점들이 있어서 그냥 오늘 한 번 제대로 알고 넘어가자는 마음.. 2021. 1. 10.
210108_TIL (꼬리재귀, 알고리즘 기초) 🍎 오늘 한 일 ✔️ 꼬리 재귀 정리하기 재귀도 워낙 추상적이라 처음 배울 때 어려웠는데, 꼬리 재귀도 공부해보니 글을 읽는 것만으로는 잘 이해가 되지 않았다. 그래서 일단 쉬운 팩토리얼 예제를 가지고, 개발자 도구를 이용해 디버깅해보며 Call Stack이 어떻게 변하는 지 살펴보았다. 그렇게 해보니 차이점이 확실히 보여서 내가 이해한 바를 다음에 봐도 바로 이해할 수 있게 사람에 비유해 만화(?)로 그려보기도 하고 블로깅도 해두었다. 좀 오래걸리긴 했지만, 덕분에 꼬리재귀가 어떻게 재귀의 문제를 보완하고 Stack Overflow 문제를 개선할 수 있다는 건지 이해할 수 있었다. 그래도 아직 설명할 부분들이 좀 더 있는 것 같아 내용은 계속해서 수정하고 보충해보려고 한다. ✔️ 알고리즘 기초 정리 알.. 2021. 1. 9.
210107_TIL (ES6 문법 정리) 🍎 오늘 한 일 ✔️ ES6 문법 정리 Javascript에서 기존보다 훨씬 간결하게 코드를 작성할 수 있게 만들어준 ES6 문법에 대해 공부하고, 정리한 부분을 블로깅했다. 화 표 함수부터 클래스, 제너레이터, 유니코드 등 다른 언어와 비슷한 문법부터 처음 들어보는 문법까지.. 뭔가 많은 걸 알게된 것 같다. 특히 let이나 const, 백틱(``), 전개 연산자(...)같은 것들은 ES6 문법인 줄도 모르고 당연하게 사용해 왔다는 것도 알게되기도 했다. ✔️ 책 읽기 한 동안 시간이 부족했어서 읽다 말았던 책들이 있었는데 마저 읽고, 다시 보려고 체크해두었던 부분들은 따로 기록해두었다. 전에 Velog 계정을 하나 만들어 뒀었는데 거기다가 읽은 책들에 대해서 따로 정리해둘까 생각중이다.🧐 🍎 기억할 .. 2021. 1. 8.
210106_TIL (HA 끝 그리고 AJAX, XMLHttpRequest) 🍎 오늘 한 것 ✔️ HA 문제풀기 4주 동안 배웠던 것들이 총집합(?)된 HA 문제들을 풀었다. 부족하게 느껴졌던 부분들이 있었는데, 익숙해질때까지 보고 또 본게 효과가 있던 것 같아서 뿌듯하기도 했고 뭔가 한시름 놓은것 같기도 하다. ✔️AJAX, XML, fetchAPI 공부, 블로깅 어제 fetch API를 활용해서 날씨 앱을 만들었는데 구글링하면서 부분적으로만 이해하고 넘어가는 식으로 완성을 한 것 같다. 아직 뭔가 제대로 알고 있다는 느낌이 들지가 않아서 찝찝하기도 하고 HA가 끝나면 좀 더 찾아봐야지 하고 생각하고 있었다. 그렇게 fetchAPI에 대한 글들을 찾아보게 됐는데 글을 다 읽기도 전에 AJAX, XMLHttpRequest, Promise같은 잘 모르는 개념들이 자꾸만 튀어나와서 .. 2021. 1. 6.
210104_TIL (재귀로 TreeUI, StringfyJSON함수 구현하기) 🍎 오늘 한 것 ✔️ JSON 공부 JSON(JavaScript Object Notation)은 '데이터 교환'을 위해 만들어진 표현식이다. 문법은 Javascript 객체, 실체는 문자열이라고 생각하면 쉽다. 전에 Local Storage에 대해 공부하면서 알게 되었는데, 중요한 개념인 것 같아 함께 블로깅 해뒀던 덕에 좀 더 쉽게 배울 수 있었다. JSON.stringify()는 받은 데이터를 JSON 형태로 직렬화(serialization)해주겠다는 의미이다. 즉 Javascript 객체, 배열을 JSON 문자열로 변환하는 것이다. 반대로 JSON.parse()은 JSON 문자열로 변환된 데이터를 분석하여 원래의 JavaScript 값이나 객체를 생성하는 역직렬화를 한다. ✔️ StringifyJS.. 2021. 1. 5.
210103_TIL (이터레이션..이터레이터..) 🍎 오늘 배운 것 ✔️ Iteration for in, for of문의 차이점에 대한 부분에 대해 알아보다가, 바탕이 되는 Iteration 프로토콜과 Iterable과 Iterator에 대해서도 알게 되었다. Iteration 프로토콜(규칙)이라는 하나의 규칙만 지키면, 사용자는 편리하게 여러 데이터 유형들을 같은방식으로 순회할 수 있게 된다. 즉, Iteration이 여러 데이터 타입들이 공통된 순회 방식을 사용할 수 있게 해준 덕분에 for…of문, spread operator(...) 등을 사용해 편리하게 데이터를 순회할 수 있게 된 것이다. 이 개념은 조금 복잡한 것 같아서 두개로 나눠 블로깅 해두었다. 그리고 좀 더 정확한 개념 이해를 위해서는 Symbol, Prototype에 대해서도 알아두.. 2021. 1. 4.
210102_TIL (복습, 트위틀러 리팩토링) 🍎 오늘 한 것 ✔️ Coplit 다시풀기(변수~객체) 놓친 부분이 있나 싶어서 Lesson도 처음부터 다시 보며 복습했다. Coplit도 처음부터 다시 풀어보니 나중에 배운 내용을 적용해서 더 쉽게 접근할 수 있는 문제들이 있어서 여러가지 방법으로 개선해보기도 했다. 특히 일일이 조건문이나 반복문으로 해결해야하는 주의사항이 달린 문제를 풀면서 배열, 객체, 재귀를 쓰면 금방 끝날텐데..하는 생각도 들면서 어떤 면에서 효율적인지 느낄 수 있는 시간이었다. ✔️ 재귀 복습 재귀 문제는 여러번 다시 풀어도 바로 생각이 안나고, 역시 직관으로 안풀리는 문제여서 여러번 다시 풀어봤다.. 계속 다른 방식으로 풀어서 노션에 답들을 쭉 옮겨두고 비교해봤다. for문을 이용하는 방법과 이용하지 않는 방법 등 최대한 다.. 2021. 1. 3.
210101_TIL (복습하는 날) 🍎 오늘 배운 것 ✔️ for문, forEach문의 동작 차이 전 페어분이 재귀 문제를 다시 풀어보다가 for문을 사용하면 통과되는데 forEach문을 사용하면 통과가 되지 않는 문제가 있다고 말해주셔서, 찾아보니 for문에서 return은 break처럼 작동하지만 forEach문은 continue처럼 작동한다는 것을 알게 되었다. 결국 forEach를 사용하면 리턴문을 만나도 바로 반복이 종료되지 않고 계속 다음 반복이 실행되는게 문제의 원인이었다. 그래서 조건이나 변수의 변동사항을 반영해야 하는 경우에는 for문을 쓰는 것을 권유한다고 한다. for문을 그냥 간단히 표현한게 forEach문이라고 생각하고 있었는데 페어분 덕에 새로운 사실을 알게되었다. 참고링크 🍎 더 공부할 것 ✔️ 지금까지 배운 것.. 2021. 1. 2.
201231_TIL (재귀문제풀기) 🍎 오늘 배운 것 ✔️ 재귀 문제를 구조는 비슷하지만 더 작은 문제로 쪼갤 수 있을 때 유용한 접근 방법인 '재귀'에 대해 배우고 관련된 문제를 풀어봤다. 재귀는 자기 자신을 호출하는 함수인데, 처음 공부할 때는 너무 추상적이라 내가 제대로 이해한건지 잘 모르겠었다. 그래도 문제를 풀다보니까 '더 작은 문제로 쪼갠다' 것이 무슨 의미인지 알 수 있었다. 아직 하나하나 그림그리고 적어가면서 풀어야하는 단계라 주말동안 더 복습하고 연습해야겠다. 특히 처음부터 base case와 recursive case로 나눠서 생각하는 방법을 좀 더 익혀야겠다. 무엇보다 재귀를 좋아해보도록 노력해야지..😢 🍎 더 공부할 것 ✔️ 재귀 함수 활용 대표적으로 JSON 구조나 DOM 구조가 포함된 트리 구조에 재귀 함수를 활용.. 2020. 12. 31.
201230_TIL (비동기, 메모이제이션) 🍎 오늘 배운 것 ✔️ 동기, 비동기 방식 비동기 처리 방법을 배우기에 앞서, 동기와 비동기 방식의 차이점에 대해 먼저 배웠다. 동기(sync)는 현재 실행중인 코드부터 완료하고 다음 코드를 처리하는 방식, 비동기(async)는 현재 실행 중인 코드가 완료된 지와는 상관없이, 바로 다음 코드로 넘어가는 방식이다. 더 나아가서는 Timer API를 통해 비동기를 구현하는 방법에 대해서도 배웠다. ✔️ callback 함수 얼마전에도 callback함수에 대해 배우긴 했었는데, 사용하는데 무리가 없어서 그 때는 그냥 인자로 쓰이는 함수 정도로 이해하고 넘어갔었다. 근데 비동기 방식과 관련된 문제를 풀다보니 callback함수를 활용하는 부분에서 뭔가 막히는 느낌이 들어서 다시 찾아봤다. 전과는 다르게 클로저.. 2020. 12. 30.
반응형

티스토리툴바