요약 발생 에러 Error: Failed to load plugin 'react' declared in '프로젝트 디렉토리 경로\.eslintrc.json': Cannot find module 'eslint-plugin-react'... 해결방법 ESLint가 작동하는 프로젝트 디렉토리를 ESLint 확장 프로그램의 Working Directories 설정에 추가 시스템 환경 Windows 10 Home 1909 프로젝트 환경 Node.js 12.8.1 Visual Studio Code 1.47.0 - ESLint (Extension) - Prettier - Code Formatter (Extension) 설치한 패키지 yarn 1.22.4 create-react-app 3.4.1 styled-compo..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 7월 9일 2. 라이브러리 활용과 클린 코드 - FE 클린 코드 클린 코드의 중요성 클린 코드(Clean Code)는 '깨끗한 코드', 즉 '읽기 편한 코드'를 의미합니다. 프로그래밍을 공부하다 보면 클린 코드의 중요성을 심심치 않게 들을 수 있는데요, 그렇다면 클린 코드가 왜 중요한 것일까요? 프로그램은 '이해하기 쉬워야 하기 때문'입니다. 일상적 언어로 작성된 글도 문장 구조나 논리 전개가 어긋나면 글쓴이의 의도가 제대로 전달되지 않는 경우가 부지기수인데, 다양한 수식과 기호가 포함된 프로그래밍 언어로 작성된 코드는 '깨끗하지 않다면' 이해하는 것이 급격하게 힘들어집니다. 특히 클린 코드는 ..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 7월 8일 2. 라이브러리 활용과 클린 코드 - FE handlebars 라이브러리를 활용한 템플릿 작업 배열이 포함된 데이터 처리하기 실제로 템플릿을 작업할 때 다루는 데이터는 첫 예제처럼 단순하지 않을 가능성이 높습니다. 이번에는 데이터에 배열이 포함되었을 때의 처리 방법을 살펴보겠습니다. var data = { id : 13, name : "Dev", content : "Testing...", like : 5, comment : ["1st comment!", "lol", "nice post!"] }; comment 속성의 값이 3개의 원소로 이루어진 배열로 바뀌었습니다. 이런 경우에는 ha..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 7월 8일 2. 라이브러리 활용과 클린 코드 - FE handlebars 라이브러리를 활용한 템플릿 작업 DOM 요소 조작과 템플릿의 활용 웹페이지는 수많은 요소들이 계층적으로 구조를 이루고 있고, 이 일부분을 변경하고자 할 때 DOM 요소에 일일이 접근하는 것은 너무나도 번거로운 일입니다. 그렇기 때문에 DOM 요소에 일일이 접근하지 않아도 되도록 HTML 문자열로 이루어진 일종의 양식을 만든 뒤, replace와 같은 메서드를 활용해 특정 문자열만 변환해주는 방법을 사용하게 되었습니다. 이를 템플릿 작업이라고 합니다. 그런데 웹사이트의 규모가 계속 커지면서 템플릿을 통해 문자열을 변환하는 것..

강의: [edwith 부스트코스] 웹 프로그래밍 챕터 4, 웹 앱 개발: 예약서비스 2/4 학습일: 2020년 7월 7일 2. 라이브러리 활용과 클린 코드 - FE JavaScript 라이브러리와 프레임워크 최근 10년 간의 트렌드 2010년 이후로, 대표적인 JavaScript 라이브러리의 이름을 거론할 땐 jQuery가 빠지지 않습니다. 심지어 'JavaScript가 아닌 실무에서 쓰이는 jQuery를 중점적으로 배워야 한다'는 글도 있었을 정도로 광범위하게 바닐라 JavaScript를 대체하며 사용되었던 라이브러리가 jQuery입니다. 하지만 시간이 흐르고 웹의 대세가 웹 앱이 되면서 jQuery의 중요성은 떨어지고, 더 큰 규모의 도구인 프레임워크들이 관심을 이어받게 되었습니다. 그렇다면 jQue..

웹페이지 텍스트에 접근할 수 있는 3가지 속성과 그 차이 JavaScript를 사용해 웹페이지 요소의 텍스트에 접근할 때 Node.textContent, Node.innerText, Element.innerHTML의 3가지 속성을 쓸 수 있다. 이 셋은 비슷하면서도 약간씩 차이가 있다. 이 셋이 id가 source인 HTML 요소의 텍스트를 어떻게 표현하는지 살펴보자. HTML 원본 textContent, innerText, innerHTML 의 차이를 아래에서 살펴보세요. 숨겨진 내용 textContent 결과: ... innerText 결과: ... innerHTML 결과: ... 세 속성이 다른 결과를 보여준다는 것을 시각적으로 확인할 수 있을 것이다. 시각적인 결과의 차이뿐 아니라, 성능 상의 차..