본문 바로가기

분류 전체보기333

[React 공식 Doc 가이드 #8] Conditional Rendering - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Conditional Rendering React 에서 Rendering 하고 싶은 element 들을 캡슐화해서 Component 단위로 만들 수 있다. 그리고 이런 Component 들을 state 상태에 따라서 조건부 렌더링을 할 수 있다. React 에서 조건부 렌더링은 Javascript 에서 분기문과 같은 방법으로 동작한다. if 문이나 조건부 문법을 사용해서 elements 를 만들면 React 는 이 element 에 맞춰서 UI를 갱신한다. 아래 2개의 component 가 있다고 가정하자. 2개의 Component 를 화면에 이상없이 출력하였다... 2021. 2. 11.
[React 공식 Doc 가이드 #7] Handling events - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - React 에서의 Event React element 에서의 event 사용법은 DOM element 에서 사용하는 법과 비슷하지만 구문적으로 약간의 차이가 있다. React 에서는 소문자 대신 camelCase를 사용한다. 스트링으로 함수를 쓰지 않고 JSX 문법으로 event handler 함수를 넘긴다. 예를들어 HTML 에서는 아래와 같이 쓰는 button click 예제가 React 에서는 아래와 같이 된다. 또 하나 다른점은 보통 기본동작을 막기 위해 preventDefault 대신 onclick 에서 return false 를 쓰기도 하는데, Reac.. 2021. 2. 11.
[React 공식 Doc 가이드 #6] State and Lifecycle - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Clock 예제 다시 살펴보기 이전예제에서 1초 마다 시간을 보여주던 예제를 기억하는가? Rendering Element 에서 UI를 업데이트 하기 위해 ReactDOM.render()를 호출하였다. 이번 Section 에서는 실질적으로 재사용할 수 있고 은닉화(API 를 만듦에 있어서 필요한 정보외에는 client가 알아야 되는 부분을 최소화 하는)된 Clock component 를 만들어 볼것이다. 기능은 이전 예제와 똑같지만 Component 자체에서 timer를 설정하고, 갱신되게 만들어보자. 일단 여태까지 Component를 정의하고 사용해봤으니 Cloc.. 2021. 2. 11.
[React 공식 Doc 가이드 #5] Components and Props - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Component의 정의 Component는 UI 적으로 독립적이고 재사용할 수 있는 단위이다. 개념적으로 component는 Javascript function 과 같다. "props" 로 불리는 임의의 input 들이 있고, Screen에 보여지는것을 정의하는 React element Return 하면 이를 Component 라고 한다. - Function and Class Component component 를 정의하는 가장 Simple 한 형태는 Javascript 함수를 작성하는 것이다. 문서에서는 위의 Welcome function을 "유효한" Reac.. 2021. 2. 11.
[React 공식 Doc 가이드 #4] Rendering Elements - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Element 여태까지 간단한 element를 선언하고, 이를 Hello, world를 표현하는데 사용하였다. element란 무엇인가? element란 screen 에서 출력하는 바를 묘사하는 것이 element 라고 정의하고 있다. DOM element 와 다르게 React element는 plain object 라서 만드는데 비용이 싸다. React DOM은 DOM 을 변경할 때 React element 와 비교하여 DOM 을 업데이트 한다. - Component vs Element 일반적으로 element 와 component를 헷갈려 한다. element.. 2021. 2. 11.
[React 공식 Doc 가이드 #3] Introducing JSX - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - JSX 는 꼭 써야 하는가? 아래태그는 string 이나 HTML이 아닌 JSX(Java Script eXtension) 이다. 사실 React를 사용할 때 JSX는 필수 Spec은 아니다. JSX를 쓰는데는 크게 2가지 이유가 있는 것 같다. 1. Javascript Code 안에 UI 관련코드가 들어 갈 때 가독성을 높여준다. JSX 를 안쓰면 아래와 같은 코드를 읽어야 한다. 물론 실제 Project 에서는 위와 같이 쓰지않고, template 엔진을 쓰겠지만 JSX 를 쓰던 다른 template 엔진을 쓰지 않는다면 위와 같이 UI 코드가 Javascrip.. 2021. 2. 11.
[React 공식 Doc 가이드 #2] Hello World - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Project 폴더 살펴보기. 공식홈에서는 React 가장 기본 코드로 아래와 같은 예제를 준다. Javascript 에 대한 기본적인 지식이 있다면(공식 홈페이지에서도 기본적인 Javascript 지식을 선요구 하고 있다.) ReactDOM.render 와 같은 문법은 몰라도 대충 아래와 같이 예상할 것이다. " 이던 다른 태그이던 id="root" 로 되어있는 tag가 있고 여기에 Hello, world!을 그릴 것이다." 이전글에 설정했던 폴더를 살펴보자. 난 그냥 문법만 익히고 싶고, index.html 에서 소스만 바꾸면서 예제의 결과값만 보길 원했는데 .. 2021. 2. 11.
[React 공식 Doc 가이드 #1] Installation - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - 기본 요구사항 React 를 설치하는 방법에는 Script 추가와 npm 을 이용한 방법이 있다. React를 학습하기 위한 목적이므로 npm을 이용하여 설정해보자. React 튜토리얼이므로 npm이 설치되어있다고 가정한다. (공식홈에서는 Node >= 6, npm >= 5.2를 요구하고있다. 2019.02.24일 기준) - 설치 자신이 Project를 생성할 적당한 폴더에서 아래 명령을 입력한다. npx create-react-app test-create 위의 줄에서 npx는 npm의 오타가 아니다.(나도 몰라서 그렇게 생각함.) test-create 부분은 본.. 2021. 2. 11.
UML - 상태 기계 다이어그램 - 이 글은 UML Distilled (마틴 파울러)책을 기반으로 작성하였습니다. - 상태 기계 다이어그램(State Machine Diagrams) 상태 기계 다이어그램은 시스템의 행동을 기술한다. 객체 지향 접근법에서 단일 객체가 활성인 시간동안 어떤 행동을 하는지 나타내기 위해서 단일 클래스에 대해 그리는 다이어그램이다. 아래와 같은 시나리오에 대해 해보자. 금고 자물쇠를 보려면 비밀 양초를 촛대에서 옮겨야 한다. 그리고 문이 닫혀있어야만 자물쇠가 나타난다. 일단 자물쇠가 나타나면 금고를 열기 위해서 열쇠를 꽂는다. 추가적인 안전장치로, 양초를 다시 그 자리에 놓아야만 금고를 열 수가 있다. 만약 도둑이 이 경고를 무시하면 괴물을 풀어서 도둑을 잡아먹도록 한다. 각 문장 단위로 이해하기에는 큰 어려.. 2021. 2. 11.
[Java 8] 날짜 API - 2 - 출처: https://www.oracle.com/technical-resources/articles/java/jf14-date-time.html - 출처: 자바 8 인 액션 - Truncation 신규 API 는 날짜, 시간, 날짜 및 시간을 표현하는 타입을 제공하여 정밀한 시간을 지원하지만, 이것보다 더 세밀하게 정의된 정밀도의 개념을 지원한다. truncatedTo 메소드는 이런 경우에 사용하는데, DB의 truncate 와 비슷하게 해당 필드에 대한 값을 비운다. LocalDateTime timePoint = LocalDateTime.now(); LocalDateTime truncatedTime = timePoint.truncatedTo(ChronoUnit.SECONDS); System.out... 2021. 2. 11.

티스토리툴바