본문 바로가기
[js] 자바스크립트스와이퍼 슬라이드 라이브러리, swiper.js 사용법 swiper.js 를 이용하여 사이트에 슬라이드를 적용합니다. 보통 사이트 메인 페이지의 네비게이션 아래 컨텐츠 부분에는 비주얼 슬라이드가 위치합니다. 홈페이지에 처음 들어갔을 때 가장 먼저 눈에 띄는 곳으로 사이트의 첫인상을 좌우하는 가장 중요한 부분입니다. 이 슬라이드는 스와이퍼라는 자바스크립트 라이브러리 사용을 추천합니다. 스와이프 이동, 버튼 이동, 화살표 이동, 자동 플레이, 루프, 반응형의 기능을 캐러셀 슬라이드에 적용이 모두 가능한 라이브러리입니다. swiper.js 사이트 구글에서 swiper js를 검색하여 사이트로 이동합니다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most mode..
[css] 레이아웃 position 배치 사용법(ft. css 포지셔닝) css 레이아웃의 방법, positon 입니다. position position 속성은 요소들을 자유자재로 배치해 주는 속성으로, 이를 이용하면 텍스트나 이미지를 나란히 배치할 수 있고, 가로나 세로로 원하는 위치에 배치할 수도 있습니다. 레이아웃 시, 주로 컨텐츠를 서로 겹치게 배열하거나 마크업 순서와 화면상 배치 순서가 다를 경우에 사용합니다. position 값 static: 오소를 이동하거나 겹칠 수 없는 원래 그대로의 상태로 요소를 문서의 흐름에 맞추어 배치합니다. relative: relative로 지정된 요소는 left와 top 속성으로 이동할 수 있으며, absolute로 지정된 요소의 부모 역할(깃발)을 합니다. absolute: 다른 요소와 겹칠 수 있고, left와 top 속성을 이용..
[js] 자바스크립트 애니메이션 라이브러리, gsap 사용법 JS 애니메이션 스크립트 라이브러리, gsap의 사용법입니다. 일반적으로 웹에서 애니메이션 효과는 css 또는 제이쿼리를 사용하여 구현합니다. 하지만 최근에는 제이쿼리 보다는 순수 자바스크립트 코드를 사용하는 추세이고, css에서 제공하는 것, 그 이상의 복잡한 애니메이션을 구현해야할 경우가 있습니다. 예를 들어, css의 dispaly 요소에 none과 block을 이용한 효과를 주었을 때, 영역이 나타나고, 사라지는 부분이 부자연스러울 경우, 이를 해결하기 위해 보다 자연스럽게 요소를 제어해주는 자바스크립트 애니메이션 라이브러리를 사용합니다. 라이브러리를 사용하면, 자바스크립트를 통해 html 요소에 간단한 애니메이션을 추가할 수 있습니다. GSAP GSAP는 GreenSock에서 만든 자바스크립트 ..
[css] position으로 가운데 배치, 정렬 css로 가운데로 정렬하는 방법입니다. 수직 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { height: 특정 사이즈 px 지정; position: absolute; top: 0; bottom: 0; margin: auto 0; } 수평 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { width: 특정 사이즈 px 지정; position: absolute; left: 0; right: 0; margin: 0 auto; } 수직, 수평 가운데 정렬 부모 요소 클래스 이름 {position: relative;} 자식 요소 클래스 이름 { width: 특정 사이즈 px 지정; height: 특정 사이즈..
[css] 구글 메터리얼 아이콘 사용 방법(ft. 무료 아이콘 제공 사이트) google material icons을 사이트에 설치, 적용하는 방법입니다. 웹사이트 개발할 때 퍼블리싱, 프론트 개발 시점에 꼭 사용되는 것이, 아이콘입니다. 특히 자주 사용하는 icon은 검색에 사용되는 돋보기, 위치 표시의 place, 이미지, 화살표 등입니다. 이런 아이콘들은 현업에서 매번 디자이너에게 요청할 수 없고, 혹은 디자이너가 없을 때 알아서 찾아 작업해야하는 경우가 있습니다. 이렇게 아이콘 적용이 필요할때 추천하는 사이트가 있는데요. 바로, 구글에서 제공하는 google material icons입니다. 구글 메터리얼 아이콘 사이트를 통하여 설치하고, 사이트에 적용하는 방법을 알아보겠습니다. google material icons 검색 구글에서 google material icons을..
[css] 구글 폰트 사용법 (ft. google fonts, 무료 웹폰트 적용) 웹사이트 구글 폰트 적용법을 알아보겠습니다. 구글 폰트 사이트 이동 구글에서 google fonts 또는 구글 폰트를 검색하여, 해당 사이트로 이동합니다. 태그 방식 원하는 폰트 선택 여기서 사용할 폰트와 폰트 사이즈를 선택합니다. Noto Sans KR 폰트를 적용하여, 해당 페이지로 이동한 후 원하는 사이즈 Regular 400과 Bold 700을 선택하면, 오른쪽 바에 해당 정보가 나옵니다. 아래 메뉴에서 태그 부분와 font-family 복사합니다. 사이트에 구글 폰트 적용 웹에디터에서 복사한 태그 코드를 태그 사이에 붙여넣기 합니다. style sheet 또는 태그 사이에 복사한 font-family 코드를 붙여 넣기 합니다. 아래와 같이 로컬 서버를 띄워서 개발자 도구를 통하여 적용이 잘 된 ..
오픈 그래프, 트위터 카드 사용 방법 (ft. seo) 오픈 그래프와 트위터 카드 사용방법에 대하여 알아보겠습니다. 오픈 그래프 웹사이트가 카카오톡, 페이스북, 트위터, 슬랙과 같은 sns로 공유될 때 우선적으로 활용되는 정보를 지정합니다. 예를 들어 아래와 같이 카카오톡을 통해 웹사이트 링크를 공유할때 카드형식으로 웹사이트의 기본 정보가 표시됩니다. 웹사이트를 검색 엔진 최적화를(seo) 시켜 브랜드를 홍보하는데 중요한 역할을 하기 때문에 사이트를 만들때에 오픈그래프에 정보를 지정해주어야 합니다. 오픈 그래프 코드 작성 오픈 그래프 정보 og:type: 페이지의 유형(website, video.movie) og:site_name: 사이트의 이름 og:title: 페이지의 이름(제목) og:description: 페이지의 간단한 설명 og:image: 페이지..
[css] reset css cdn 설치(ft. 기본 css style 세팅) reset css cdn 설치 방법을 알아보겠습니다 . 브라우저의 기본 style을 초기화하기 위하여, reset css를 설치합니다. reset css cdn 검색 구글에서 reset css cdn 검색 reset-css CDN by jsDelivr - A CDN for npm and GitHub 사이트 이동 중간에 보이는 /npm/reset-css@5.0.1/reset.min.css 의 클릭 후 Copy HTML 선택하여 내용 copy css cdn 코드 삽입 vs code와 같은 코드 편집기로 이동하여 index.html 파일에서 복사한 코드를 link 태그로 추가하면 이제 브라우저에서 제공하는 기본적인 style이 이렇게 초기화 완료됩니다.
티스토리 vs 네이버 블로그(ft. 애드센스, 애드포스트) 수익형 블로그, 티스토리, 네이버 블로그를 비교해보겠습니다 . 처음 블로그를 시작할 때 모두 다 하는 고민이 있습니다. 바로 티스토리를 할까? 아님 네이버 블로그를 할까? 티스토리와 네이버 블로그 비교 광고 수 - 티스토리 티스토리는 애드센스, 네이버 블로그는 애드포스트로 광고 수익을 냅니다. 광고 단가는 2배~10배 정도 티스토리가 높습니다. 티스토리가 만명의 방문자 수가 발생했다면 하루 애드센스 수익은 200달러에서 1000달러 까지도 나올 수 있지만 네이버 블로그는 애드포스트 수익이 하루에 몇만 원이 다입니다. 방문자 수 - 네이버 블로그 일방문자는 확실히 네이버 블로그가 좋습니다. 네이버는 폐쇄적인 성격을 갖고 있으므로 네이버 자체 서비스 위주로 오픈하고 이용하게끔 합니다. 즉, 네이버에서 다음이..
키워드 추출 사이트 추천(ft. 키워드 쉬터, keyword shitter) 키워드 무료 추출 사이트, keyword shitter를 소개하겠습니다. keyword shitter https://keywordshitter.com/ Keywords Hitter - Mobile Bulk Keyword Tool Subscribe for $9 to save to email. keywordshitter.com 블로그나 홈페이지에 글을 쓸때 또는 상품을 올릴때 가장 먼저하게 되는 고민이, 바로 키워드 찾기 입니다. 저는 이럴때마다 키워드 추출 분석 사이트에서 도움을 받는데요. 그 중 진짜 빠르게 후다닥 키워드가 추출되는 사이트가 바로 오늘 소개할 키워드 쉬터라는 사이트입니다. 사이트 UI는 마치 20년전의 도스 프로그램같은 모습을 하고 있지만, 기능은 정말 굿! 입니다. 키워드 쉬터 사용방법..
[css] block, inline의 뜻과 사용법(ft. display, inline-block) CSS, display의 block과 inline의 개념과 사용법에 대하여 알아보겠습니다. display display 속성이란 화면을 배치하는 방법입니다. display 종류 none | contents | block | inline | inline-block | table | table-cell block과 inline 요소의 개념을 잡는 것은 html 마크업 요소에서 가장 중요하다고 할 수 있습니다. 그래서 이번 기회에 확실하게 짚고 넘어가겠습니다. 이 두 가지의 요소에 따라 전체 레이아웃이 변합니다. block 요소 block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지합니다. 즉, 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수..
경력단절여성을 위한 재취업 가이드(ft. 30대 경단녀 국민내일배움카드) 경단녀용 정부 취업 지원 제도를 이용하는 재취업 노하우 26살에 첫 취업을 하고, 10년 동안 직장 생활을 하다가 고민 끝에 퇴사를 결정하게 됩니다. 1년의 시간이 순간 삭제가 되듯 빠르게 지나가고 나니, 나에게 남은 것은 경단녀라는 타이틀 결국, 7개월 동안 준비하여 37살에 새로운 분야 신입으로 재취업에 성공하였고, 지금은 2년차 개발자로 직장 생활을 하고 있습니다. 이 전자책을 통해 코알못에서 개발자가 되기까지의 경험을 바탕으로 주저하고 망설이는 경력단절여성들에게 재취업 노하우를 풀고자 합니다. 정부에서 지원하는 경단녀용 취업 지원 제도를 중심으로 재취업 프로젝트 전략을 알려드립니다. 단순히 자존감을 높여주고, 열정의 메시지를 전달하는 것이 아니라 재취업을 할 수 있는 가장 현실적이고, 효과적인 방..
구글 애드센스 지급 보류 해결 방법(ft. 지급 계좌 등록) 구글 애드센스에서 지급 보류 알림이 떴을 때, 해결하는 방법을 알아보겠습니다. 애드센스를 이용하면 수익이 일정 금액(보통 $100부터) 도달하면 정산을 받게끔 되어있습니다. 지급 계좌를 제대로 설정을 해 놓지 않을 경우, 구글 애드센스 홈페이지 접속시, '지급에 보류가 걸려있습니다."라는 알림이 상위에 뜹니다. 이 경우, 문제는 아래와 같습니다. 1. 내가 지정한 지급계좌가 외화계좌가 아닐 경우 2. 아예 지급 계좌를 지정해 놓지 않았을 경우 해결 방법은 매우 간단합니다. 국내 은행의 일반 입출금 통장으로는 지급을 받는 것이 불가능하고, 꼭 외화계좌를 별도로 준비해야 합니다. 만약 없다면, 은행을 통해 외화계좌를 새로 발급받으시고, 이 계좌를 구글 애드센스 홈페이지에서 등록하면 끝입니다. 구글 애드센스 ..
[js] 글자 타이핑 효과 라이브러리 소개 타이핑 효과를 주는 라이브러리를 소개합니다. 실무에서 텍스트에 타이핑하는 디자인 효과를 주고 싶을 때가 있습니다. 보통 css로 효과를 주기 하는데 부자연스러운 편입니다. css 대신 라이브러리를 이용하면 보다 간편한 소스로 자연스러운 타이핑 효과를 나타낼 수 있습니다. 타이핑 효과 사이트 https://libraries.io/npm/typewriter-effect typewriter-effect on NPM [![CircleCI](https://circleci.com/gh/tameemsafi/typewriterjs.svg?style=svg)](https://circleci.com/gh/tameemsafi/typewriterjs) libraries.io 설치 방법 cdn NPM npm install ty..
이전회사 원천징수 영수증 홈택스에서 5분 만에 발급받는 방법(ft. 직인) 근로소득원천징수 영수증 홈택스에서 발급받는 방법입니다. 근로자가 이직을 하였을 경우 연말정산 시 전 직장 소득까지 포함해서 신고해야 하므로 전 직장의 근로소득원천징수 영수증을 꼭 제출해야 됩니다. 이직한 후 출근해서 입사 초기때 바로 제출을 하거나, 연말 정산의 기간이 돌아오면 제출을 하게 됩니다. 이전 회사에서 퇴사시에 보통 원천징수 영수증을 챙겨서 주는 것이 맞지만, 못 받았을 경우, 인터넷을 통해 5분안에 발급을 받을 수 있습니다. 원천징수 영수증 발급 방법을 알아보겠습니다. 홈택스 로그인 공동인증서 로그인을 합니다. 지급명세서 제출 내역 선택 로그인 후 홈택스 첫 화면에서 MY 홈택스 > 연말정산/장려금/학자금 > 지급명세서 등 제출 내역을 선택합니다. 근로소득 원천징수영수증 미리 보기, 인쇄 지..
thailwind css 스타일 프레임워크 (ft. 무료 컴포넌트 사이트 제공) tailwind css 무료 사이트 리스트입니다. 실무에서 tailwind를 스타일 프레임워크를 사용하고 있는데, kit 패키지를 구매하지 않고, 무료 배포된 정보를 구글링하여 찾으면서 구현하다 보니 tailwind의 정보가 많아져서 공유하도록 하겠습니다. thailwind cheatsheet 요약표 한 페이지에 모든 클래스이름 정리표입니다. 작업시에 가장 우선적으로 띄워놓는 사이트입니다. umeshmk.github.io/Tailwindcss-cheatsheet/ Tailwindcss-cheatsheet umeshmk.github.io 위의 사이트 보다 더 디테일 한 요약표입니다. 위에 찾는것이 없을 경우, 아래 사이트를 이용합니다. nerdcave.com/tailwind-cheat-sheet Tailw..
[react] 리액트 삼항 연산자 조건부 스타일링(ft. tailwind, className) react에서 조건에 따른 스타일링하는 방법입니다. 스타일링은 tailwind라는 리액트 CSS 프레임 워크를 사용하여 디자인 합니다. 조건에 따라 className의 내용에 변화를 주어 다른 스타일을 주는 방법입니다. onClick 이벤트에서 클릭할때마다 state 값을 true, false를 적용시켜, className 내에 삼항 연산자를 사용합니다. 이로 toggle 기능과 같이 on/off switch의 개념으로 스위치를 켰다, 껐다 하는 효과를 나타낼 수 있습니다. 화면구현 모바일, 태블릿 또는 어플리케이션에서 자주 쓰이는 네비게이션(햄버거 메뉴바) 메뉴를 조건부 style 로 구현합니다. 조건부 스타일 예제 import React, { useState } from "react"; const I..
[react] react 상태관리 context API, useContext 사용법 react에서 context API가 필요한 이유와 사용하는 방법에 대하여 알아보겠습니다. Context API가 필요한 이유 기존에 최상위 컴포넌트에서 여러 레벨을 거쳐 props로 원하는 상태와 함수를 전달 하였지만, context API를 이용하면 단 한번에 원하는 값을 전달하여 사용할 수 있습니다. 복잡한 redux 또는 MobX와 같은 상태 관리 라이브러리를 사용할 필요 없이 context API를 통하여 전역 상태를 손쉽게 관리 할 수 있습니다. Context API가 사용법 createContext() 함수를 사용하여 Context 만들기 src 디렉터리에 contexts 디렉터리를 만든뒤 그 안에 새로 Store 파일을 만들거나, 최상위 컴포넌트에 바로 입력하여도 됩니다. context의 ..
[react] react-router-dom 설치, 라우팅하기 react-router-dom 설치하는 방법을 알아보겠습니다. routing ・ 다른 주소에 다른 화면을 보여 주는 것을 라우팅이라고 합니다. ・ 리액트 자체에 이 기능이 내장되어 있지 않기 때문에 라이브러리를 사용하여 이 작업을 진행합니다. ・ 리액트 라우팅 라이브러리는 react-router, reach-router, Next.js 등이 있고, 가장 많이 사용하는 것은 react-router입니다. react-router-dom ・ react의 내비게이션 라이브러리입니다. ・ React Router를 사용하면 앱에서 발생하는 라우팅이 location나 history와 같은 브라우저 내장 API와 완벽하게 연동이 됩니다. react-router-dom 설치 React Router는 웹과 앱용이 있습니다..
[react] react로 api 이용하여 뉴스 사이트 만들기 newsapi에서 제공하는 API를 사용하여 최신 뉴스를 불러와 블로그 형태의 뉴스 사이트를 만들겠습니다. 예제는 길벗의 리액트를 다루는 기술을 보면서 공부한 예제입니다. 화면 결과 axios로 뉴스 api 호출 준비(ft. promise) 아래의 사이트에 회원 가입 후에 받은 각자의 API 키를 이용하여 데이터에 접근할 수 있습니다. https://newsapi.org/ News API – Search News and Blog Articles on the Web Get JSON search results for global news articles in real-time with our free News API. newsapi.org 발급받은 API 키를 가지고 나중에 API를 요청할 때 API 주소의..
[react] react로 axios로 API 호출 (ft. promise, hooks) API에 대한 간단한 설명과 axios로 API를 호출한 예제를 살펴보겠습니다. axios axios는 현재 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트로서 HTTP 요청을 promise 기반으로 처리합니다. axios 설치 npm install axios //또는 yarn add axios API 구글링을 할때 나오는 API에 대한 정의는 사실 개발자인 저도 무슨 말인지 이해하기 어렵습니다. 그래서 좀더 쉬운 풀이를 찾아보았습니다. 예제 free fake API인 jsonplaceholder.typicode.com 를 이용한 예제입니다. 아래의 주소를 입력하면 JSON 형식의 data가 나옵니다. 이 data를 axios를 통해 웹에서 출력해보겠습니다. promise 방식 app.js im..
[react] react로 지뢰찾기 게임 만들기 ver.2 리액트로 구현한 지뢰찾기 게임(ver.2) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/107 [js] 자바스크립트로 지뢰찾기 게임 구현하기 자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰 goddino.tistory.com react로 구현한 지뢰찾기 게임 ver.1은 아래 포스트로 이동해주세요. https://goddino.tistory.com/156 [js] react로 지뢰찾기 게임 ..
[react] react로 지뢰찾기 게임 만들기 ver.1(ft. context API, useReducer) 리액트로 구현한 지뢰찾기 게임(ver.1) 입니다. - 지뢰판 세팅 - 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 지뢰찾기 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/107 [js] 자바스크립트로 지뢰찾기 게임 구현하기 자바스크립트를 이용하여, 지뢰찾기 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 기능 REMARK 실행 버튼 클릭 후 지뢰 goddino.tistory.com 구현내용 · useReduer, context API 이용하여 지뢰칸 세팅 · 마우스 오른쪽 클릭하여 로직 작성하기 컴포넌트 구조 MineSearch.jsx >Form...
[react] 리액트 테이블 게시판 만들기 ver.2 (데이터 추가, 수정, 저장, hooks, form) 구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈 구현 화면 이전 시간에 이어서 폼을 삽입하여 새로운 데이터를 추가하고, 수정 버튼을 클릭하면 모달창을 띄워서 해당 데이트를 바로 수정하고, 저장하는 기능을 알아보겠습니다. 데이터 추가하기 onChange, onSubmit, spead 연산자/concat Form, input 태그를 사용하여 만들었고, input에 name, value, onChange 속성을 만들어 onChange 이벤트로 입력할때 마다 각각의 name 속성에 value 값을 넣어줍니다. Post.js (하위1 컴포..
[react] 리액트 테이블 게시판 만들기 ver.1 (axios, useEffect, 글삭제) 구현내용 · npm package: creat-react-app · css 라이브러리: tailwind · axios를 통한 서버 통신 · 테이블 형식의 게시판 구현 · 데이터 추가/수정/삭제 기능 추가 · 모달 팝업창 오픈 구현 화면 프로젝트 폴더 설치 npm 패키지 설정 npm create react-app 폴더이름 //폴더 생성 cd 폴더이름 //해당 폴더로 접근 npm start //local 서버 띄우기 처음에 어설픈 기억력으로 npm install create-react-app으로 계속 입력하다가 시간을 버린 기억이 있습니다. ㅠㅜ 구글링하면 될 것을…. 아무튼 npm start 로 local 서버를 띄웁니다. tailwind 설치 tailwind를 설치하여 간편하게 css를 적용하겠습니다. ..
[react] react의 useReducer 사용법 useReducer state가 많을 경우, state를 하나로 묶어주는 역할을 합니다. useReducer 사용 방법 state 값과 dispatch 함수를 받아오게 되는데, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을 발생시키는 함수입니다. dispatch(action) 함수 안에 파라미터로 액션 값을 넣으면 리듀서 함수가 호출되는 구조입니다. state를 바꾸기 위해 action을 만들고, 이벤트를 통해 action을 dispatch하여 reducer 함수의 action을 불러와 state 값을 변경합니다. useReducer 문법 //state 초기값 세팅 const initialState = { winner: ' ', } //export로 모듈화, 변수로 지정, ..
[react] react로 틱택토 게임 만들기(ft. useReducer) 리액트 hooks로 구현한 틱택토 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/102 [js] 자바스크립트로 틱택토 구현하기 자바스크립트를 이용하여, 틱택토(Tic Tac Toe) 게임을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순서도 css 코드 순수 자바스크립트 코드 goddino.tistory.com https://goddino.tistory.com/113 [js] 자바스크립트로 틱택토(심화버전) 구현하기 이전 포스팅에서 구현했던 틱택토 게임에서 업그레이드된 심화 과정입니다. 예제는 인..
[js] react로 로또 게임 만들기 리액트 class/hooks로 구현한 로또 게임 입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트로 만든 로또 게임은 아래 포스트로 이동해주세요. https://goddino.tistory.com/103 [js] 자바스크립트로 로또추첨기 구현하기 자바스크립트를 이용하여, 로또 추첨기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 순서 번호 순서 사용 메서드 1 45개의 후보 goddino.tistory.com client.jsx import React from 'react'; import ReactDom from 'react-dom'; import Lotto from './Lotto'; React..
반응형

티스토리툴바