2022/02
-
마크다운(MarkDown) 사용법 안녕하세요. 갓대희 입니다. 이번 포스팅에선 마크다운(MarkDown) 사용법을 기록해 두려 한다. :- ) 제일 흔하게 보고, 편집 하던 README.md 는 마크 다운 문법으로 작성된 파일 이다. 깃헙(Github), 비트버킷(Bitbucket), 워드프레스, 슬랙(Slack), 트렐로(Trello) 등의 서비스에서도 작성할 수 있다. 물론 표준이 없기 때문에 모두 다 적용되는것은 아니다. 간단하게 정리 하고 넘어 가보자. 1. 마크다운의 장/단점 #1. 장점 - 문법이 쉽고 간결하다 - 관리가 쉽다 - 별도의 도구없이 작성가능하다. - 다양한 형태로 변환이 가능하다. - 지원 가능한 플랫폼과 프로그램이 다양하다. - 텍스트(Text)로 저장되기 때문에 용량이 적어 ..
마크다운(MarkDown) 사용법마크다운(MarkDown) 사용법 안녕하세요. 갓대희 입니다. 이번 포스팅에선 마크다운(MarkDown) 사용법을 기록해 두려 한다. :- ) 제일 흔하게 보고, 편집 하던 README.md 는 마크 다운 문법으로 작성된 파일 이다. 깃헙(Github), 비트버킷(Bitbucket), 워드프레스, 슬랙(Slack), 트렐로(Trello) 등의 서비스에서도 작성할 수 있다. 물론 표준이 없기 때문에 모두 다 적용되는것은 아니다. 간단하게 정리 하고 넘어 가보자. 1. 마크다운의 장/단점 #1. 장점 - 문법이 쉽고 간결하다 - 관리가 쉽다 - 별도의 도구없이 작성가능하다. - 다양한 형태로 변환이 가능하다. - 지원 가능한 플랫폼과 프로그램이 다양하다. - 텍스트(Text)로 저장되기 때문에 용량이 적어 ..
2022.02.07 -
React 프로젝트, 정적 사이트 Netlify에 배포하기 안녕하세요. 갓대희 입니다. 이번 포스팅에선 가볍게 React 프로젝트를 배포 해보려 합니다. :- ) Netlity는 GitHub, GitLab 등과 계정 연동 및 정적서버로 쉬운 호스팅을 제공하는 서비스이다. 글로벌 배포, 지속적인 배포(Continuous Deployment), One-Click HTTPS, CDN 등 다양한 서비스를 제공한다. 특히 JAMstack, SPA(Single Page Application)가 유행하면서 이러한 정적 사이트을 쉽게 배포할 수 있어 인기가 있나 싶다. ※ JAM Stack - JavaScirpt, API, Markup으로만 구성된 스택, - 즉 JavaScript와 API, Markup으로 웹 애플리..
React 프로젝트, 정적 사이트 Netlify에 배포하기React 프로젝트, 정적 사이트 Netlify에 배포하기 안녕하세요. 갓대희 입니다. 이번 포스팅에선 가볍게 React 프로젝트를 배포 해보려 합니다. :- ) Netlity는 GitHub, GitLab 등과 계정 연동 및 정적서버로 쉬운 호스팅을 제공하는 서비스이다. 글로벌 배포, 지속적인 배포(Continuous Deployment), One-Click HTTPS, CDN 등 다양한 서비스를 제공한다. 특히 JAMstack, SPA(Single Page Application)가 유행하면서 이러한 정적 사이트을 쉽게 배포할 수 있어 인기가 있나 싶다. ※ JAM Stack - JavaScirpt, API, Markup으로만 구성된 스택, - 즉 JavaScript와 API, Markup으로 웹 애플리..
2022.02.07 -
6. [React] 6. React Router (리액트 라우터) 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 페이지 이동 처리 하는 방법 ] 입니다. : ) 우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다. 라우팅이 무엇인지 간단하게 살펴보자. 1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다. ※ SPA, SSR, SSG 등의 대한 개념을 어느정도 갖춘 상태에서 다음 내용을 진행하는것을 추천 한다. 리액트는..
[React] 6. React Router (리액트 라우터) 사용하기6. [React] 6. React Router (리액트 라우터) 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 페이지 이동 처리 하는 방법 ] 입니다. : ) 우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다. 라우팅이 무엇인지 간단하게 살펴보자. 1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다. ※ SPA, SSR, SSG 등의 대한 개념을 어느정도 갖춘 상태에서 다음 내용을 진행하는것을 추천 한다. 리액트는..
2022.02.02 -
5. React에 CSS 적용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에 스타일 적용하기 ] 입니다. : ) create-react-app으로 설치한 react프로젝트인 경우 css-loader, style-loader를 따로 설치하지 않아도 webpack에서 사용하는 css 설정을 사용할 수 있다. ※ 참고 css-loader : @import, url() 등의 구문을 해석, 적용해 준다. style-loader : 태그를 통해서 CSS를 DOM에 적용해 준다. css를 적용할 수 있는 방법들에 대해 알아보자. 1. 인라인(inline) styling 적용 - html 태그 안에 직접 입력하는 방법. style={ } 형식으로 입력하며, 안에는 json 형식으로 속성명:'속성값' 으..
[React] 5. React에 CSS 적용하기5. React에 CSS 적용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에 스타일 적용하기 ] 입니다. : ) create-react-app으로 설치한 react프로젝트인 경우 css-loader, style-loader를 따로 설치하지 않아도 webpack에서 사용하는 css 설정을 사용할 수 있다. ※ 참고 css-loader : @import, url() 등의 구문을 해석, 적용해 준다. style-loader : 태그를 통해서 CSS를 DOM에 적용해 준다. css를 적용할 수 있는 방법들에 대해 알아보자. 1. 인라인(inline) styling 적용 - html 태그 안에 직접 입력하는 방법. style={ } 형식으로 입력하며, 안에는 json 형식으로 속성명:'속성값' 으..
2022.02.02 -
4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 반복문 사용하기 ] 입니다. : ) https://ko.reactjs.org/docs/lists-and-keys.html 0. 들어가기 앞서 - 어떨때 map 함수를 쓰면 좋을까? 앞으로 알아가겠지만 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 간단히 형태 살펴보고 자세히 알아보도록 하자. ex) for문 const numbers = [1, 3, 5] for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]) } ex) map() const numbers = [1, 3, 5]; const listIte..
[React] 4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 반복문 사용하기 ] 입니다. : ) https://ko.reactjs.org/docs/lists-and-keys.html 0. 들어가기 앞서 - 어떨때 map 함수를 쓰면 좋을까? 앞으로 알아가겠지만 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 간단히 형태 살펴보고 자세히 알아보도록 하자. ex) for문 const numbers = [1, 3, 5] for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]) } ex) map() const numbers = [1, 3, 5]; const listIte..
2022.02.01 -
4. React 컴포넌트(4) - 이벤트 처리 방법 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 이벤트 handling 하는 방법 ] 입니다. : ) 1. 컴포넌트에서 DOM 이벤트 사용 - 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다. - 우리가 흔히 쓰고 있는 HTML 엘리먼트의 이벤트들은 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다. ex) 프로퍼티 샘플 이벤트 명 JSX DOM 이벤트 프로퍼티 이벤트 호출 시점 click onClick 엘리먼트에 마우스나 키보드가 클릭 된 경우 change onChange 엘리먼트의 내용이 변경된 경우 submit onSubmit 폼의 데이터가 전송될 때 keydow..
[React] 4. React 컴포넌트(4) - 이벤트 처리 방법4. React 컴포넌트(4) - 이벤트 처리 방법 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 이벤트 handling 하는 방법 ] 입니다. : ) 1. 컴포넌트에서 DOM 이벤트 사용 - 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다. - 우리가 흔히 쓰고 있는 HTML 엘리먼트의 이벤트들은 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다. ex) 프로퍼티 샘플 이벤트 명 JSX DOM 이벤트 프로퍼티 이벤트 호출 시점 click onClick 엘리먼트에 마우스나 키보드가 클릭 된 경우 change onChange 엘리먼트의 내용이 변경된 경우 submit onSubmit 폼의 데이터가 전송될 때 keydow..
2022.02.01