본문 바로가기
반응형

2022/026

마크다운(MarkDown) 사용법 마크다운(MarkDown) 사용법 안녕하세요. 갓대희 입니다. 이번 포스팅에선 마크다운(MarkDown) 사용법을 기록해 두려 한다. :- ) 제일 흔하게 보고, 편집 하던 README.md 는 마크 다운 문법으로 작성된 파일 이다. 깃헙(Github), 비트버킷(Bitbucket), 워드프레스, 슬랙(Slack), 트렐로(Trello) 등의 서비스에서도 작성할 수 있다. 물론 표준이 없기 때문에 모두 다 적용되는것은 아니다. 간단하게 정리 하고 넘어 가보자. 1. 마크다운의 장/단점 #1. 장점 - 문법이 쉽고 간결하다 - 관리가 쉽다 - 별도의 도구없이 작성가능하다. - 다양한 형태로 변환이 가능하다. - 지원 가능한 플랫폼과 프로그램이 다양하다. - 텍스트(Text)로 저장되기 때문에 용량이 적어 .. 2022. 2. 7.
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. 2. 7.
[React] 6. React Router (리액트 라우터) 사용하기 6. [React] 6. React Router (리액트 라우터) 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 페이지 이동 처리 하는 방법 ] 입니다. : ) 우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다. 라우팅이 무엇인지 간단하게 살펴보자. 1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다. ※ SPA, SSR, SSG 등의 대한 개념을 어느정도 갖춘 상태에서 다음 내용을 진행하는것을 추천 한다. 리액트는.. 2022. 2. 2.
[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. 2. 2.
[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. 2. 1.
[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. 2. 1.
반응형