시대의 명작 코어 자바스크립트를 읽고 자바스크립트 마스터에 도전합니다...

자바에서 인터페이스는 클래스를 구현하기 전에 필요한 메서드를 정의하는 용도로 쓰인다. 타입스크립트에서는 좀 더 다양한 것들을 정의하는데 사용할 수 있다.

리액트 웹팩으로 개발환경 구축하기(without CRA)

리액트를 공부하면서 항상 CRA를 사용해서 초기 개발 환경을 구축했는데, 다음주부터 나가는 기업협업에서는 웹팩을 사용한다는 이야기를 선배 기수에게 들었다. 미리 웹팩을 훑고 가면 좋다는 조언을 듣고, 여러 블로그와 유튜브를 찾아보며 웹팩을 이해해보고 있다!

페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다. 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다.

인스타그램 클론 코딩에 관한 포스팅 이후 계속해서 더 나은 코드로 리팩토링하는 과정을 거치고 있다. 지난번에 댓글에 좋아요, 삭제 기능을 구현하면서 새로운 댓글을 추가하는 함수가 엄청나게 복잡하게 길어졌다

인스타그램의 search input을 구현하는 작업이었다. 값을 입력할때마다 그 값을 포함하는 배열을 새로 만들어 리스트로 보여주는 형식이다.

인스타그램 클론 코딩 프로젝트의 추가 구현 사항중, 피드에 달린 댓글을 삭제하거나 좋아요를 누르는 기능을 추가하는 것을 진행하고 있다. (역시나..) 추가한 자바스크립트 코드에서 여러가지 이슈가 발생하였고 그 중에 꼭 기억해야 할 것들을 정리한다.

인스타그램 클론 코딩을 하며 만든 로그인 페이지에서, 자바스크립트 코드의 if문이 포함된 EventListener를 "이벤트 위임", "삼항 조건 연산자"를 활용하여 더 간단하게 수정해보자!i

메인페이지에서는 댓글의 input 창에서 enter키를 치거나 "게시" 버튼을 누르면 댓글이 추가되도록 만드는 과제가 주어졌다. createElement로 요소를 생성하여 input에 입력한 값이 추가되는 함수를 구현하는 조건이다.

인스타그램의 HTML, CSS를 클론하고, 간단한 이벤트함수를 자바스크립트로 구현했다. 초반에는 Flexbox 개념이 생소하여 다소 어려움을 느꼈지만, 디자인 작업을 하듯 재미있게 한 코딩작업이었다.

좋은 웹사이트는 오류가 없고, 모션이 자연스러우며, 빠르게 반응하여 사용자로 하여금 좋은 서비스 경험을 제공해야 한다. 요즘에는 화려하고 다양한 기능이 들어가는 웹사이트가 늘어나면서 프론트엔드 개발자가 처리해야 할 interaction이 더 많아졌다.

DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.

지난 TIL에서 배운 객체의 키를 사용하는 방법을 이용하면 객체의 특정 키의 값을 가져오는 것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는 것도 가능하다.

array methods arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때다. callback 함수는 인자로 전달되는 함수를 의미한다. array 반복문으로 사용되는 메서드로는 map과 forEach가 있다. Array.map()

ES6란? ES는 ECMA Script의 줄임말이다. ECMA Script는 JavaScript를 표준화시키고 규격화하기 위해 만들어졌다. 현재는 ES10 버전까지 나왔으며 주로 쓰이는 것이 ES6이다.

Object (객체) 위의 표에 나타난 데이터를 자바스크립트 언어로 구현한다면 아래와 같이 저장해야 한다. > var 객체이름 = { property이름1: property값, property이름2: Property값 }; let plan1 = {

클래스는 객체지향 프로그래밍의 핵심이다. 객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호작용하도록 작성하는 방법이다. 객체는 영어로 object, 말그대로 사물을 뜻한다.클래스는 결국 { num: 1 } 처럼 생긴 객체(object)를 잘

JavaScript에서 scope이란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미한다.어떤 변수는 여기저기서 쓸 수 있는 반면에, 어떤 변수는 특정 함수 내에서만 쓸 수 있다. 이런 개념이 바로 scope이다.block이란 중괄호({}, curly brace)로

날짜 객체를 호출하면 쉽게 시간과 날짜를 얻을 수 있다. 날짜 객체를 생성하는 방법은 다음과 같이 new 연산자 다음에 Date 생성자를 쓰면 된다.브라우저마다 표현하는 법이 조금씩 다르지만 어떻게 표현되었는지는 중요하지 않다. 일반적으로는 위와 같이 년, 월, 일,