본문 바로가기

전체 글

(47)

ES6_템플릿 리터럴 (Template Literals) Front-End 프론트엔드에서는 HTML 을 데이터와 결합해 DOM을 다시 그리는 일이 빈번한데, 템플릿을 쉽게 편집하고 작성하기 위해 추가된 기능이다. (JavaScript 자체적으로 지원하기 전에도 라이브러리로 존재해왔다.) 템플릿 리터럴? ES2015 사양명세서에선 template strings 라고 불렸으며 내장된 표현식을 허용하는 문자열 리터럴을 뜻한다. - 표현식/문자열 삽입 - 여러 줄 문자열 - 문자열 형식화 - 문자열 태깅 Syntax 템플릿 리터럴은 작은따옴표(')나 큰따옴표(")대신 백틱(`) (grave accent)로 감싸준다. 플레이스 홀더 (${}) 를 사용하며 내부값은 함수로 전달된다. 여러 줄의 멀티 라인을 허용한다. 표현식 삽입법 (Expression interpolat..

이벤트(Event) 흐름 제어하는 법 Event란? 웹을 탐색하는 동안 브라우저는 여러 종류의 이벤트를 등록한다. 브라우저에서의 event란 사용자가 클릭했을 '때', 스크롤을 했을 '때', 텍스트를 입력했을 '때'와 같은 것을 의미한다. Event를 알아야하는 이유 input 창에 값을 입력하고, 엔터를 쳤을 때 리스트를 추가하려고 할 때 삭제 버튼으로 리스트를 삭제하고 싶을 때 인터랙티브 한 사용자 경험(UX)을 만들고 싶을 때 동적인 웹은 사용자와 상호작용이 잘 되어야 한다. 그리고 그 상호작용은 어떤 이벤트에 의해 발생하며 이를 유연하게 다룰 줄 알아야 interactive 한 웹 앱 구현이 가능하다. 프론트엔드에서 많은 인터렉션은 모두 Event(사건)를 처리하는 것과 깊은 관련이 있다. Event의 종류 사용자 인터페이스(UI)이..

프론트 엔드의 상태(state) 관리 최근 React로 개인 프로젝트를 구현하다가 JS 기초 개념이 부족한 것 같아 VanilaJS를 통한 새 협업 프로젝트를 하고 있다. React를 활용하면 Redux, Context를 통해 심플하게 state 관리가 가능한데 VanilaJS에서는 React의 최대 장점인 useState기능이 없어진 탓에 부모, 자식 객체 간의 깔끔한 상태 관리에 대해 다시금 깨닫고 있다.. 이를 VanilaJS로, 그것도 clean code 형태로 구현하자니 어떻게 변수를 만들어 재사용할지, 또 어떤 로직이 효율적인 방법인지 떠올리기가 생각보다 쉽지가 않았다. 프로젝트 설계 전 전체적인 상태 구조를 짜지 않고 시작하게 되면 프로젝트가 복잡해질수록 유지보수가 더 힘겨워진다. 이번 포스팅은 프런트엔드 개발자가 갖춰야 할 상..

BOM (Browser Object Model) 완벽 정복하기 BOM이란? BOM(Browser Object Model)이란 웹브라우저의 창이나 프래임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 대부분의 브라우저에서 구현은 되어있지만, 정의된 표준이 없어 브라우저 제작사 마다 세부사항이 다르고 다소 한정적이라는 특징이 있다. BOM의 역할은 웹 브라우저의 버튼, URL 주소 입력 창, 타이틀 바 등 웹브라우저 윈도우 및 웹페이지의 일부분을 제어할수 있게끔 하는 것이다. BOM을 이해하기 위해서는 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다. BOM의 공부와 동시에 Window 객체의 사용법을 알아야 한다. 대표적인 BO..

DOM (Document object Model) 완벽 정복하기 Front-End 개발자라면 반드시 거쳐가는 단어 DOM. DOM이란 정확히 무엇일까? DOM이라는 단어가 눈과 귀에 익숙함에도 막상 DOM이 무엇이냐고 물어봤을 때 "브라우저 개발자 툴에서 Element 객체 말할 때 그거~ 노드 말할 때 그거~" 라고 얼렁뚱땅 대답하진 않는지...? 나중에 DOM이 뭐냐는 질문을 들었을 때 마치 이 순간만을 기다렸다는 듯 간결하고 단호하게 대답하는 내 모습을 상상해보며 포스팅을 시작해본다. DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할..

Next.js의 역할과 써야 하는 이유 제로초님의 노드 버드(트위터 클론 코딩) 강의를 듣고 주요 내용을 요약하여 정리해보고자 한다. 사실 2020년 리뉴얼된 시점에 FE 부분까지 수강하다가 일정이 바빠져 중단했던 내용인데 포트폴리오 보강을 위해 복습을 위해 다시 시작..! 그래도 기존에 공부하면서 기록해뒀던 내용들을 다시 읽으면서 보충하다 보니 기억이 새록새록 나는 것이 묘한 쾌감이 든다.. 역시 복습을 위해서는 기록이 필수.. ☄️ 중급자를 위해 준비한 [풀 스택, 웹 개발] 강의입니다. 리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다. 리뉴얼된 사항 (2020) next@9, styled-components@5, next-red..

#01_부의 인문학-우석(브라운스톤) 부의 인문학 우석(브라운 스톤) 네이버 카페 '부동산 스터디'에서 부동산 전망이나 투자 조언이 여러 번 맞아떨어지면서 수많은 팬들이 생겨나 성지순례가 잇따르게 된 한 금융업 종사자의 책. 아무도 예측할 수 없고 또 감히 판단할 수 없는 금융에 대해 인문학적으로 해석한 이 책은 내게 어떤 시각을 가져다 줄 지 기대감을 가진 채로 읽어보았다. 읽으면서 밑줄을 그어 되새김질하고 싶었던 구절들을 정리해보며 깨우침 => 행동으로 실천할 수 있도록 포스팅을 시작해본다. p.19 인생을 살아가는 데 열심히만 한다고 모두가 잘되는 건 아니다. 엉뚱한 곳에서는 열심히 삽질을 해도 얻을 수 있는 게 없다. 무작정 노력하기 전에 전략적으로 사고하는 법을 배워야 인생이 편하다. p.20 원래 가맹점은 통제권이 없는 비즈니스다..

JSDoc을 통해 JavaScript API 문서 만들기 최근 사내 신규 개발 작업이 끝난 뒤 배포를 앞두고 산출물을 검토하는 중, 400여 개의 Interface 함수를 설명하는 API 매뉴얼 페이지를 작성하는 업무가 주어졌다. 각 Interface를 엑셀로 정리하기 위해 테이블을 추가하고, 수 천 라인의 소스 코드를 들여다보며 열심히 API 정보를 하나하나 입력해야지..!라고 떠올렸다면 허튼짓을 시작하기 전 문서화 도구를 사용하는 것을 강력하게 추천한다. (필자는 이미 뻘짓을 신나게 끝낸 뒤 깨달았다..😱) 문서화 도구(Documentation Generator)란, 소스 파일에 작성된 주석을 파싱하여 클래스, 메서드 등 API 정보를 HTML 문서로 생성해주는 도구를 지칭한다. 개발 중인 코드에 주석이 잘 작성되어 있다면, 문서화 도구가 제공하는 명령어 ..

이전 1 2 3 4 5 6 다음

티스토리툴바

티스토리툴바