본문 바로가기

라이브러리7

React 세팅하기 (without create-react-app) React 개발 환경 세팅하는 법! create-react-app을 사용한다. 처음부터 직접 세팅한다. create-react-app은 리액트 환경을 빠르게 세팅해주는 패키지이다. 공식으로 제공하는 기능이다. React 공식 홈페이지 Create React App에서 사용 방법을 알 수 있다. 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org 강의나 구글링으로 React 세팅 방법을 찾아봤지만 대부분 1번 방법으로 React를 세팅하고 있었다. 그래도 React 공부할 겸 2번 방법을 선택했다. 여기 저기 열심히 찾아보며 겨우 세팅했다... 이제 열심히 세팅한 내용을 정리해보자! (window +.. 2021. 1. 2.
React에 대하여 프론트엔드 개발을 더 효율적이게 도와주는 라이브러리, React에 대해 알아보려 한다. 참고로 React 공식 문서를 보고, 좀 더 잘 이해하고자 블로그에 정리하는 것이다. React는 페이스북에서 만든 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 컴포넌트 단위로 코드를 작성하여, UI를 구성한다. 1. React를 사용하는 이유 상태에 따른 뷰만 간단하게 설계하면 된다. 데이터가 변경될 때 변경되는 컴포넌트만 갱신하고 렌더링하기 때문에 효율적이다. (컴포넌트가 뭘 말하는 것인지는 사용하는 법에 있는 코드를 보면 좀 더 이해가 빠를 것 같다.) 이런 선언적 뷰는 코드를 알아보기 쉽고 디버그하기 쉽게 만들어준다. 또한, React는 컴포넌트 기반으로 개발된다. 이 컴포넌트를 조합하여.. 2019. 10. 29.
SLF4J 이용하여 로그 남기는 방법 (with Logback) 로그에 대한 내용은 아래 글에 있다. ▷로깅에 대하여 로그를 위한 라이브러리는 다양한 종류가 있다. 이 다양한 라이브러리를 같은 방법으로 사용할 수 있도록 도와주는 SLF4J에 대해 알아보도록 하자. 1. SLF4J란? SLF4J는 로깅 Facade(퍼사드)이다. 로깅에 대한 추상 레이어를 제공하는 interface의 모음이다. 여러 로깅 라이브러리를 하나의 통일된 방식으로 사용할 수 있는 방법을 제공한다. 아래 그림을 보면, 초록색 박스의 application들은 하늘색의 SLF4J API를 사용하고 있다. 이렇게 application은 SLF4J를 이용하여, 로깅 라이브러리가 어떤 것이든 같은 방법으로 로그를 남길 수 있게 되는 것이다. 나중에 더 좋은 라이브러리가 생겨 교체하더라도, applicat.. 2019. 9. 12.
jQuery 사용하지 않고 프로그래밍하기 (ft.Vanilla JS) 오늘 부스트코스 웹 프로그래밍 프로젝트 4-2 코드 리뷰를 받았다. (참고: [부스트코스] 웹 프로그래밍 프로젝트4-2 리뷰어님 덕에 요즘은 jQuery를 사용하기보단 순수 JavaScript를 사용하는 추세라는 걸 알게 됐다. 전에는 jQuery가 사용하기도 쉽고 키보드 치는 것도 짧아서 자주 썼는데, 지금은 순수 JavaScript 연습할 겸 jQuery 사용을 자제하고 있는 중이었다. 마침 또 jQuery 사용을 줄이는 추세라니 신기했다. jQuery가 확실히 간편하긴 하지만, 이젠 jQuery에서만 지원하던 메서드를 JavaScript로 구현이 가능하고, 브라우저 호환성도 많이 좋아지는(우리나라에선 아직이라고 한다) 등의 이유 때문이다. 자바스크립트 라이브러리 내용 중, 1. jQuery에 jQu.. 2019. 8. 19.
handlebar 중첩 데이터 바인딩, @데이터변수 지난번에 간단히 handlebar 라이브러리 사용법을 정리했었다. ▷ 자바스크립트 템플릿 라이브러리 - handlebars 이전 글에 이어 쓰기엔 너무 길어질 거 같아서 더 공부하게 된 것들(사용해본 것들)은 여기에 새로 정리하려고 한다. 1. 중첩된 데이터 가져오기 1) each 헬퍼 밖의 데이터 만약 템플릿에 바인딩할 데이터가 var data = { students: [ { name: "enai", age: "10" }, { name: "tistory", age: "20" } ], title: "Hello" } 이렇고, Hello enai(10) Hello tistory(20) 이런 결과를 나타내고 싶다. students가 배열이므로 each 헬퍼를 사용하여 템플릿을 다음과 같이 만든다. {{#eac.. 2019. 8. 19.
자바스크립트 템플릿 라이브러리 - handlebars 템플릿으로 HTML을 변경하는 작업을 할 때 도와주는 handlebars 라이브러리가 있다. replace 메서드로 템플릿을 적용했던 기존 방법으론 템플릿 내용이 복잡하거나 길어질 수록 가독성도 떨어지고 코딩하기도 힘들다. template using handlebar class가 show인 section 안에 게시글 목록을 만들 것이다. section 태그 안에 템플릿을 만들어뒀다. {{ }} 안의 내용과 매칭되는 데이터가 파싱될 것이다. 1. handlebars 설치 먼저 라이브러리를 사용하기 위해 설치를 해줘야 한다. 1) 구글에 handlebars cdn을 검색한다. cdn은 content delivery network라는 뜻으로, 직접 다운로드 받지 않아도 가장 가까운 캐시 서버에서 컨텐츠를 가져.. 2019. 8. 9.
자바스크립트 라이브러리 자바스크립트에도 개발을 쉽게 할 수 있도록 도와주는 라이브러리가 있다. 그중, jQuery와 Framework에 대해 정리해보겠다. 1. jQuery edwith의 웹 프로그래밍 강의를 들으며 2018년 기준, jQuery는 지난 10년간 가장 인기 있는 라이브러리라는 것을 알게 됐다. 나도 웹 프로그래밍 공부를 시작하면서 JavaScript를 공부하면서 제일 처음 접한 라이브러리가 jQuery였다. 그만큼 유명하고 많이들 사용하고 있구나 생각이 든다. (참고로 jQuery는 w3schools 에서 공부했다.) 그동안 jQuery의 인기의 이유는 다음과 같다. IE6, 7, 8를 포함해서 다양한 웹 브라우저의 API 간의 차이로 인해, 브라우저에 따라 코드 동작이 잘 안 되는 경우가 많이 있었다. jQu.. 2019. 8. 8.