전체 글(199)
-
[React.js] 3. Element Rendering (엘리먼트 렌더링)
Element 란 React 를 이루는 가장 작은 단위이다. React 자습서에 따르면 아래와 같은 표현을 사용하고 있었다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. React를 기존 앱에 통합하려는 경우 원하는 만큼 많은 수의 독립된 루트 DOM 노드가 있을 수 있습니다. 이 말을 코드로 다시 되짚어 보면 React가 DOM에 어떻게 렌더링하고 있는지 알 수 있다. const element = Hello, world; ReactDOM.render(element, document.getElementById('root')); html 에서 div 태그안에 있는 root가 존재하고 있는데, React 를 통해 이 태그를 표현할 수 있게 된다. element 라는 JS..
2021.07.19 -
[React.js] 2. JSX란
const element = Hello, world!; 위는 Javascript를 확장시켜 만든 JSX 라고 불리는 녀석입니다. javascript 안에 마크업을 넣는 것처럼 보입니다. JSX는 아래와 같은 성격을 가집니다. 1. 중괄호 - name 이라는 변수를 중괄호안에 넣어 JSX인 element에 담아서 사용 - JSX 중괄호 안에서는 Javascript 표현식을 모두 사용 가능 const name = 'KHAN'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); - 아래와 같이 함수 호출 결과, 객체도 모두 엘리먼트에 포함 가능 function formatName(user) { r..
2021.07.18 -
[React.js] 1. Hello World
React.js 를 시작하기에 앞서 다른 언어와 동일하게 Hello World를 출력해봅니다. 준비물 : Atom (선호하는 Editor아무거나 상관없습니다.) 사전지식 : html, css, jacascript (vanilla JS) 1. html 예제 template 작성 2. React script 작성 ReactDOM.render( Hello, world!, document.getElementById('root') ); 3. 전체 코드 및 결과 코드를 찬찬히 보면 react를 CDN 방식으로 불러오고, React를 babel로 빌드시키기 위해 아래 세줄이 들어간 것을 볼 수 있습니다. body 태그안에 있는 div와 script를 자세히보면, "root" 라는 id를 통해서 넘겨 주는것처럼 보입니..
2021.07.18 -
Spring Boot Directory 구성
build.gradle plugin, dependencies 등을 정의하여 build 구성을 나열하는 곳이다. 자세한 내용은 What it Gradle? 를 참고하면 좋다. 간단하게 요약하면, Build Automation 을 도와주는 녀석이다. src 폴더 spring boot에서 initializing project 를 진행하면 2개의 폴더가 자동으로 생겨난다. - src/main - src/test main은 말 그대로 현재 프로젝트의 main이 되는 코드를 넣는 곳이고, test에는 프로젝트를 테스트해 볼 수 있는 코드가 담기는 공간이다. main 아래에는 2개의 폴더로 다시 나뉘게 된다. /src/main/java /src/main/resources java에는 java package가 담기게되..
2021.04.19 -
IntelliJ에서 Cannot resolve symbol 오류 해결하기
분명 지난주만 해도 빨간줄이 없었는데, 오늘 툴을 켜보니 빨간줄이 마구 그어졌다. 오류코드는 Cannot resolve symbol "SpringApplication" !! 찾아보니 툴에서 CLASSPATH를 제대로 load하지 못했을때 발생할 수 있다고 한다. 툴에서 File -> Invalidate Caches 를 누르고, Invalidate and Restart 버튼을 눌러주면 알아서 툴이 재부팅하게 되고, 정상적으로 동작하게 된다.
2021.04.19 -
Express를 활용한 File Server 만들기 (multer, post 사용)
Window Program에서 오류발생시 Log를 자동으로 수집해서 서버에 올리고 싶어져서 간단하게 테스트해 볼 수 있는 코드를 작성했다. 파일 업로드의 주체는 툴이될 것이라 간단하게 Python + Requests 로 구현하였다. 간단한 Python 스크립트를 생성해서서Requests를 사용하여 File을 Upload할 수 있도록 해준다. - text파일을 python script에서 Read 하고 upload dictionary에 넣어둔다. (이때 key 값인 'file' 은 field ID값이 된다.) - requests.post 을 사용해서 server로 upload 한다. - response 되는 응답코드에 따라 로직을 처리한다. 응답코드는 아래 더보기를 클릭해서 쓰윽 훑어보면 된다. 더보기 [..
2021.04.18