All Story
[ React ] 리액트 JSX 문법 규칙 및 유용한 플러그인
리액트를 사용할 때 JSX 문법을 사용하는데 이는 HTML과 굉장히 유사하게 생겼다. 하지만 HTML 은 분명히 아니며 이를 닮은 JavaScript Xml 임을 명심해야한다. 이러한 JSX 문법을 사용하려면 우리는 몇 가지 규칙을 지켜주어야 문제없이 돌아가게 되는데, 그 중 제일 중요한 몇 가지만 살펴보자. 이 두 가지만 지켜주어도 왠만하면 돌아간다. 1. 태그는 열었으면 반드시 닫아주어야 한다. 뭔 말인가 하면 우리는 Html 에서 input 태그 같은건 안닫는 경우가 종종 있다. Html 에서는 닫지 않아주어도 잘 돌아가기때문에 문제가 없었겠지만 JSX에서는 안 닫아주면 compile error 가 발생한다. 꼭 닫아주도록 하자. 2. 두 개 이상의 태그가 존재하면 하나의 태그로 감싸주어야 한..
[ React ] 리액트 화면 띄워보기
이번 게시글에선 리액트를 사용해 화면을 띄워보는 내용을 다룰 것이다. 저번 게시글에서 만든 hello-react 프로젝트를 코드에디터 프로그램으로 열어보자. 필자는 VisualCode 사용. 다음과 같은 프로젝트가 구성이 되어있는데 눈여겨 볼 곳은 index.html, index.js, App.js 파일이다 App.js 는 사용자가 만든 컴포넌트다. 이 컴포넌트를 호출하면 호출한 곳으로 화면을 그려주던, 그 외의 기능을 수행하던 할 내용이 담겨있다. index.html 은 우리가 흔히 알고있는 브라우저에 보여주고자 할 화면이다. index.js 는 App.js ( 컴포넌트 ) 와 index.html ( 화면 )을 연결해주는 다리 기능? 을 해주는 파일이다. 소스를 참고하면서 이해해보자. A..
[ React ] 리액트 Window 환경 설치
React 란? 프론트엔드 라이브러리 중 하나로 '컴포넌트'에 집중이 되어있는 facebook이 만든 라이브러리이다. 자바스크립트가 아닌 JSX 문법으로 작성한 컴포넌트를 여러 파일로 나눠 생성후 이를 한개로 결합해주는 구조다. 이 때 컴포넌트를 합쳐주는 Webpack이라는 도구와 JSX 등의 문법을 사용하기 위해 Babel이라는 도구를 사용한다. React를 사용하기 앞서 다음 항목들을 설치해야한다. 1. Node.js 위에서 언급한 Webpack과 Babel은 Node.js 기반으로 만들어져있다. 그러기에 Node.js를 필수적으로 설치해야 한다. 2. Yarn Node.js를 설치할 때 같이 묶여오는 패키지 매니저 도구가 있는데 이를 더 나은 속도로 사용하기 위해 설치한다. * Node.js..
[ MySQL ] 문자열 사이에 구분자 넣어 조회하기
이번 게시글에선 MySQL 에서 SELECT 할 때 조회 된 데이터들 사이에 구분자 ( , ) 를 넣어 조회해보도록 하겠다. 필자는 뚱이, 홍길동, 코난이 각각 과일을 얼마나 먹었는지가 궁금하다고 가정했다. 아래와 같은 TB_TEST 테이블이 있다고 가정해보자. FRUIT 컬럼을 보면 뚱이는 bbbbb, 홍길동은 aaabb, 코난은 abaaa 데이터가 들어가 있다. 무엇을 하고 싶었냐면 저 알파벳 5 자리의 의미는 아래와 같다. 1 번째 자리 : 사과 2 번째 자리 : 딸기 3 번째 자리 : 바나나 4 번째 자리 : 파인애플 5 번째 자리 : 키위 필자는 각 자리에 a 가 들어가 있다면 이 과일을 먹지 않은 것이고 b 가 들어가 있다면 이 과일을 먹었다고 가정했다. 예를 들어 aabab 라면? 3 번째 ..
[ 기타 ] 톰캣 서버 충돌 / 포트 충돌 해결하기
톰캣(TomCat) 서버를 비정상적으로 종료한다던지, 다른 포트를 동시에 열었다던지 등의 이유로 가끔 [ 'Starting Tomcat v8.5 Server at localhost' has encountered a problem. Serveral port..... ] 에러가 뜰 때가 있다. 이는 서버가 충돌나면서 뜨는 에러이니 아래의 과정을 따라해주면 해결이 된다. 톰캣 서버 충돌 에러를 해결해보자. 1. 서버를 켰더니 아래와 같은 에러가 떴네요. 포트(서버)가 충돌났다고 합니다. 2. 이클립스 하단에 있는 Servers 탭의 충돌이 난 해당 톰캣 서버를 더블클릭합니다. 3. Ports 부분을 보면 이 톰캣 서버의 해당 Port Number를 알 수 있다. 이 Port Number를 잘 기억해두자. 4...