[리액트 교과서] Babel 설치

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. JSX로 작성한 코드는 실행을 시키려면 일반적인 자바스크립트 코드로 변환을 해야한다. 이 과정을 컴파일과 변환을 거친다는 의미에서 트랜스파일레이션이라고 한다. 이를 위해 사용할 수 있는 도구가 여러가지가 있다. - Babel 명령줄 인터페이스 오구 - Node.js 또는 브라우저 자바스크립트로 작성한 스크립트(API 방식) - 빌드 도구: Grunt, Gulp, Webpack 이 방법이 가장 인기가 좋고 앞으로 배워야 하는 방법이다. 여기서는 Babel을 사용한다. Babel의 주요 기능은 ES6 문법을 ES5로 자동으로 변환해주는 컴파일러지만 JSX를 자바스크립트로 변환하기도 한다. Babel CLI를 이용하여 Babel을 사용하고자 한다...

• format_list_bulleted Programming/react
• · 2022. 1. 29.
• textsms

[리액트 교과서] React, JSX

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. 지루한 컴포넌트인지 엘리먼트인지... 빨리 뛰어넘어버리지 않으면 JSX도 못본 채 리액트를 버려버릴거같았다.. 전 단계로 리액트를 구성(?)한다고 했을때 특히나 가독성이 좋지않아 뭐가 뭔지 이해하기 힘들었다. 이런 문제를 JSX로 해결한다고 한다. JSX 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장이다. 특히 React.createElement() 호출을 반복해야 하는 불편을 해소한다. React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와준다. Great JS Resources JSX React.createElement( "div", null, React.createElement(Hello..

• format_list_bulleted Programming/react
• · 2022. 1. 28.
• textsms

[jQuery] $.extend란?

프로젝트를 하면서 처음 안 기능! 그건 바로 $.extends 이다. JQuery 공식문서에서는 다음 기능을 "둘 이상의 개체 내용을 첫번째 개체로 병합합니다."라고 소개한다. jQuery.extend( target, object1 [, objectN ] ) 예시를 살펴보자. var object1 = { apple: 0, banana: { weight: 52, price: 100 }, cherry: 97 }; var object2 = { banana: { price: 200 }, durian: 100 }; // Merge object2 into object1 var result = $.extend( object1, object2 ); console.log("결과: " + JSON.stringify( re..

• format_list_bulleted Programming/javascript
• · 2022. 1. 28.
• textsms

[java error] input length must be multiple of 16 when decrypting with padded cipher

이슈 input length must be multiple of 16 when decrypting with padded cipher 원인 암호화는 됐는데 복호화가 안됨 HttpServletRequest nextElement()로 파라미터 값을 가져올때 '+'를 공백으로 처리해서 암호화되던게 바껴서 형식이 안맞아 복호화 오류가 나는 문제였다. 해결 replace로 공백을 '+'로 바꿔주었다.

• format_list_bulleted Programming/error
• · 2022. 1. 27.
• textsms

[javascript] 날짜 비교 포맷 오류

이슈 날짜비교를 하려고 DB에서 날짜를 가져와서 오늘 날짜와 비교를 하는데 오류가 났다. 원인 오늘 날짜 포맷은 "2021-01-27"이었고 DB에서 가져온 날짜 포맷은 "2021-01-31 23:00:33"이었다. 포맷이 맞지 않아 오류가 난 것이다. 해결 DB에서 가져온 날짜 포맷을 "2021-01-31"로 변경했다. 추가 "2021-1-1" 과 "2021-01-01" 또한 포맷이 맞지 않아 오류가 난다. 이럴때는 function leadingZeros(n, digits) { var zero = ''; n = n.toString(); if (n.length < digits) { for (i = 0; i < digits - n.length; i++) zero += '0'; } return zero + ..

• format_list_bulleted Programming/trouble_shooting
• · 2022. 1. 27.
• textsms

[javaScript] safari에서 new Date() 안되는 현상

모바일웹 프로젝트를 할 때 발견한 오류? 이슈? 였다. var d = new Date("2021.12.22"); // Invalid Date 함수를 쓸때 안드로이드나 크롬에서는 잘 되는데 safari에서만 안되는 오류였다. 찾아보니 크로스브라우징 이슈라는... 이 이슈를 해결하기 위한 방법으로는 moment.js 라이브러리를 사용하는 방법도 있다고 한다. moment.js를 사용하면 어느 브라우저에서나 호환이 된다고 한다. 또한 다른 방법으로는 날짜를 2020-09-01T00:00:00 / 2020/09/01 00:00:00 형식으로 바꿔서 넣어주면 된다고 한다. 브라우저들 생각안하고 코드 막 짰다가 결함체크 할 때 뒤통수 맞아버린... 크로스 브라우징 이슈를 잘 체크해야겠다. Reference http..

• format_list_bulleted Programming/trouble_shooting
• · 2022. 1. 27.
• textsms

[리액트 교과서] createElement(), component

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. JSX 없이 리액트 기초를 잡아보자! React의 엘리먼트나 컴포넌트 같은 기초 개념을 이해하는 것이 중요하다. 엘리먼트는 컴포넌트의 인스턴스이며, 컴포넌트 클래스라고도 한다. 엘리먼트를 어떻게, 왜 사용하는지 배워보자 var h1 = React.createElement('h1', null, 'Hello world!!!') ReactDOM.render( h1, document.getElementById('content') ) ReactDOM.render()에는 하나의 React 엘리먼트만 인자로 전달할 수 있다. 이는 동일 DOM 계층에 h1 요소 두 개를 렌더링해야 하는 경우에 문제가 발생한다. 계층적 복잡한 구조를 만드는 방법은 엘리먼트를..

• format_list_bulleted Programming/react
• · 2022. 1. 27.
• textsms

[리액트 교과서] JSX 없이 React를 해보자 "Hello World!"

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. JSX를 사용하지 않고 자바스크립트만 이용해서 작성해보는 코드! JSX가 뭔지도 잘 모르겠지만 일단 따라해본다. JSX 없이 React를 시작하는 이유 * 브라우저는 일반적인 자바스크립트만 실행할 수 있기때문에 자바스크립트로만 React 코드를 작성하는 방법을 안다면 유용할 것이다. 이 방식으로 시작하는 이유는 jsx는 필수사항이 아니고 React를 위한 표준은 자바스크립트라는 점을 확인하기 위함이다. -- Hello World 뷰를 위한 React 코드를 작성한다. React 엘리먼트를 직접 에 렌더링하지 않는 이유 -> 다른 라이브러리나 를 조작하는 브라우저 확장 프로그램과 충돌하는 것을 방지하기 위함 라이브러리를 HTML 파일에 추가하면..

• format_list_bulleted Programming/react
• · 2022. 1. 26.
• textsms

proxy designe pattern

일반적으로 프록시는 다른 무언가와 이어지는 인터페이스 역할을 하는 클래스이다. 프록시는 어떠한 것(이를테면 네트워크 연결, 메모리 안의 커다란 객체, 파일, 또 복제할 수 없거나 수요가 많은 리소스와도 인터페이스 역할을 수행할 수 있다. 프록시(Proxy)란 '대리'라는 의미이다. 프록시에게 어떤 일을 대신 시키는 것이다. 어떤 객체를 사용하고자 할때, 객체를 직접 참조 하는 것이 아니라 해당 객체를 대행하는 객체를 통해 대상객체에 접근하는 방식을 사용. 이렇게하면 해당 객체가 메모리에 존재하지 않아도 기본적인 정보를 참조하거나 설정할 수 있고 또한 실제 객체의 기능이 반드시 필요한 시점까지 객체의 생성을 미룰 수 있다. 보호하고 있는 개체에 대한 접근을 제어하고 관리한다. 쉽게 예를 들면 수표나 신용카..

• format_list_bulleted Programming/java
• · 2022. 1. 26.
• textsms

[리액트 교과서] SPA와 React

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다. 단일 페이지 어플리케이션 single-page applications, SPA 입사 후 첫 프로젝트 파견 전에 본사에서 SPA 게시판을 만들어보라는 과제를 받았었다. 어찌저찌 만들긴 했는데 내가 만든건 진정한 SPA 형태가 아니니 나중에 다시 공부를 해보라는 피드백을 받았었다. 당시에도 SPA는 처음 들어보는 형태였던지라 무척 생소했었다. 그리하여 책의 흐름을 따라 정해보고자 한다. SPA 아키텍처는 서버보다는 클라이언트 즉, 브라우저 측에 로직이 더 많은 팻 클라이언트(fat client or thick client)다. SPA는 HTML 렌더링, 입력값 검증, UI 변경 등의 기능을 브라우저에서 해결한다. 1. 사용자가 새로운 페이지를 열..

• format_list_bulleted Programming/react
• · 2022. 1. 25.
• textsms