본문 바로가기

분류 전체보기168

210107_TIL (ES6 문법 정리) 🍎 오늘 한 일 ✔️ ES6 문법 정리 Javascript에서 기존보다 훨씬 간결하게 코드를 작성할 수 있게 만들어준 ES6 문법에 대해 공부하고, 정리한 부분을 블로깅했다. 화 표 함수부터 클래스, 제너레이터, 유니코드 등 다른 언어와 비슷한 문법부터 처음 들어보는 문법까지.. 뭔가 많은 걸 알게된 것 같다. 특히 let이나 const, 백틱(``), 전개 연산자(...)같은 것들은 ES6 문법인 줄도 모르고 당연하게 사용해 왔다는 것도 알게되기도 했다. ✔️ 책 읽기 한 동안 시간이 부족했어서 읽다 말았던 책들이 있었는데 마저 읽고, 다시 보려고 체크해두었던 부분들은 따로 기록해두었다. 전에 Velog 계정을 하나 만들어 뒀었는데 거기다가 읽은 책들에 대해서 따로 정리해둘까 생각중이다.🧐 🍎 기억할 .. 2021. 1. 8.
ES6 주요 문법 정리 (2) let/const, Iterators, Generators, Unicode, Modules 지난번 글에서는 ES6문법이 무엇이고 왜 사용하는지에 대해 간략히 소개하고 문법 중 일부인 Arrows, Classes, Enhanced Object Literals, Template Strings, Destructuring, Default Parameter, Rest, Spread 에 대해 살펴봤다. 이어서 이번에는 아래 표시한 부분들을 소개해보려 한다. ES6의 주요 문법을 정리하는 글은 이 글을 마지막으로 하고 여기서 소개하지 못한 나머지 개념들은 중요하거나 필요하다고 생각되면 하나씩 따로 블로깅할 예정이다. let, const 변수 선언 키워드인 let, const도 ES6 문법 중 하나이다. ES5까지는 오직 var을 통해서만 변수를 선언할 수 있었다고 한다..🙉 새삼 이 시대에 자바스크립트를 .. 2021. 1. 8.
ES6 주요 문법 정리 (1) Arrows, Classes, Enhanced Object Literals, Template Strings, Destructuring, Default Parameter, Rest, Spread ES6? 일단 ES6이 뭔지부터 살펴보자! ES6은 JavaScript 언어의 표준으로, ECMAScript 6의 줄임말이다. Javascript는 브라우저에서 간단히 사용할 목적으로 2주만에 설계되었는데 역시 짧은 시간에 설계된만큼 허술한 점이 많았다. 개발자들이 점점 개선을 요구한 덕분에(?) 2015년 ECMA2015버전(ES6)이 출시되었고, 기존보다 훨씬 간결하게 코드를 작성할 수 있게 되었다. (혹시 Javascript의 역사가 더 궁금하다면 이 영상에 잘 나와있으니 심심할 때 한번 보는걸 추천한다) 그래서 왜 사용한다고..? 🧐 기존 Javascript는 명확하지 않은 문법, 함수, 개념들이 난무했는데 ES6은 이를 보다 명확하게 바꿔서 개발의 생산성을 높였다. 그리고 진입장벽이 낮아져 다른.. 2021. 1. 7.
210106_TIL (HA 끝 그리고 AJAX, XMLHttpRequest) 🍎 오늘 한 것 ✔️ HA 문제풀기 4주 동안 배웠던 것들이 총집합(?)된 HA 문제들을 풀었다. 부족하게 느껴졌던 부분들이 있었는데, 익숙해질때까지 보고 또 본게 효과가 있던 것 같아서 뿌듯하기도 했고 뭔가 한시름 놓은것 같기도 하다. ✔️AJAX, XML, fetchAPI 공부, 블로깅 어제 fetch API를 활용해서 날씨 앱을 만들었는데 구글링하면서 부분적으로만 이해하고 넘어가는 식으로 완성을 한 것 같다. 아직 뭔가 제대로 알고 있다는 느낌이 들지가 않아서 찝찝하기도 하고 HA가 끝나면 좀 더 찾아봐야지 하고 생각하고 있었다. 그렇게 fetchAPI에 대한 글들을 찾아보게 됐는데 글을 다 읽기도 전에 AJAX, XMLHttpRequest, Promise같은 잘 모르는 개념들이 자꾸만 튀어나와서 .. 2021. 1. 6.
AJAX, 비동기, XMLHttpRequest AJAX AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다. MDN 문서에 나와있는 AJAX에 대한 설명이다. 간단히 말하면.. 이라고 하지만 간단하지 않은 것 같아서(ㅠㅠ) 다시 정리해봤다. AJAX는 일단 JavaScript의 라이브러리중.. 2021. 1. 6.
날씨 APP 만들기 (OpenWeather API 활용) HTML, CSS, Javascript와 OpenWeather API 이용해 날씨 APP을 만들어 보았다. 앱에 대해 먼저 소개를 해보자면, 사용자가 검색창에 도시명을 입력하면 해당 도시의 온도, 습도, 풍속 등의 날씨 정보와 현재날짜를 아이콘, 사진과 함께 알려주는 앱이다. OpenWeather API는 날씨와 관련된 정보를 제공하는 API인데, fetch를 이용해 서버 요청을 하는 방식으로 데이터를 받아와 활용했다. 이번에도 HTML & CSS의 디자인적인 부분과 Javascript 부분으로 나누어 새로 알게 되었거나 중요한 부분들에 대해서만 간략히 소개해보려고 한다. 최종 완성본 1. HTML & CSS ✔️ input placeholder 색상 변경 검색창 부분을 input 태그로 만들어줬는데, .. 2021. 1. 5.
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.
Javascript 소수점 오류 원인, 해결방안 자바스크립트에서 소수점 숫자 연산을 하면, 생각지도 못한 오류가 발생한다. 아래처럼 콘솔창에 0.1 + 0.2를 입력하면, 0.3이 아니라 0.30000000000000004 가 나오는 걸 확인해볼 수 있다. 이렇게 소수점 계산 오류가 발생하는 이유와 어떤 방법으로 해결할 수 있는지에 대해 알아보려고 한다. Javascript를 다루다보면 한번쯤은 마주칠 수 있는 오류이기 때문에 나중에 또 당황하지 않도록 기억하고 넘어가자! (Javascript에서만 있는 오류는 아님) 원인 왜 이런 오류가 생기는걸까? 우리는 보통 계산을 할 때 '10진법'을 사용하지만, 우리와 다르게 컴퓨터는 계산을 할 때 0과 1만 사용하는 '2진법'을 사용한다. 그래서 10진법을 2진법으로 바꾸는 변환과정이 필요한데, 소수 중 일.. 2021. 1. 3.
Iteration (2) for in문, for of문의 차이점 for ...in문과 for ...of 문은 언뜻 보면 둘다 객체 길이만큼 순회를 반복하기 때문에 비슷해보인다. 그래서 자꾸 사용할 때마다 헷갈리기도 해서 다시 한번 제대로 정리를 해두려고 한다. for …in 문 ✔️ 객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줌 ✔️ 객체의 key값에 접근 가능, value값에는 직접 접근 불가 ✔️ 모든 객체에서 사용 가능 for ...in문은 객체의 모든 '열거할 수 있는 속성들'을 순회할 수 있도록 해준다. (keys는 열거 가능한 속성, valueOf는 열거 불가능한 속성 - 링크 참고) 그렇기 때문에 for ...in 문은 객체의 key 값에는 접근 가능하지만, value 값에 직접적으로 접근하는 방법은 제공하지 않는다. for ...in 문을 사용.. 2021. 1. 3.
Iteration (1) Iteration 프로토콜, Iterable / Iterater Iteration Iteration는 사전 뜻 그대로 '되풀이'를 의미한다. 익숙하게 사용하는 for문, while문 같은 반복문이 모두 Iteration이라고 볼 수 있다. 보통은 아래와 같은 방식으로 배열의 요소를 확인하곤 한다. Javascript에서는 Array, String, Map, Set 등의 객체들에 이런 반복문을 적용할 수 있는데 그 이유가 바로 'Iteration'에 있다. let arr = [1,2,3]; for(let i = 0; i < arr.length; i++){ console.log(arr[i]); } // 1, 2, 3 Iteration 프로토콜(미리 정해둔 규칙)에는 Iterable과 Iterator가 있는데, 이 두 프로토콜을 모두 지켜야 비로소 Iteration을 수행.. 2021. 1. 3.
210102_TIL (복습, 트위틀러 리팩토링) 🍎 오늘 한 것 ✔️ Coplit 다시풀기(변수~객체) 놓친 부분이 있나 싶어서 Lesson도 처음부터 다시 보며 복습했다. Coplit도 처음부터 다시 풀어보니 나중에 배운 내용을 적용해서 더 쉽게 접근할 수 있는 문제들이 있어서 여러가지 방법으로 개선해보기도 했다. 특히 일일이 조건문이나 반복문으로 해결해야하는 주의사항이 달린 문제를 풀면서 배열, 객체, 재귀를 쓰면 금방 끝날텐데..하는 생각도 들면서 어떤 면에서 효율적인지 느낄 수 있는 시간이었다. ✔️ 재귀 복습 재귀 문제는 여러번 다시 풀어도 바로 생각이 안나고, 역시 직관으로 안풀리는 문제여서 여러번 다시 풀어봤다.. 계속 다른 방식으로 풀어서 노션에 답들을 쭉 옮겨두고 비교해봤다. for문을 이용하는 방법과 이용하지 않는 방법 등 최대한 다.. 2021. 1. 3.
반응형