본문 바로가기
git, github 사용법 (ft. 깃허브, commit, push, pull 버전 관리) git, github를 이용한 프로젝트 버전관리 방법입니다. - 목차 - git, github의 차이점 git에서 로컬 버전 관리 github에서 원격 저장소 버전 관리 업로드 git, github에서 수정사항 버전 관리 git, github에서 branch 생성, 병합 git clone 방법 git reset 방법 git pull 방법 git과 github의 차이점 git은 로컬(나의 컴퓨터)에서 관리되는 버전 관리 시스템 github는저장소를 깃허브에서 제공해주는 클라우드 서버(원격 저장소) 방식으로 관리되는 버전 관리 시스템 팀을 통한 협업이 필요할 경우, 소스 공유가 필요하거나, 원격 저장소에 관리하여 로컬이외 다른 곳에서 사용하기를 원한다면 github에 업로드를 합니다. 따라서 git으로 먼저..
[js] 페이지 상단으로 자동 스크롤 이동 구현 (ft. gsap scrollTo) 우측 하단의 버튼 클릭시 화면의 상단으로 이동하는 애니메이션 효과를 구현합니다. 구현 내용 - material-icon, css 이용하여 버튼 만들기 - 버튼 클릭 시 화면이 페이지의 최상단으로 애니메이션 효과를 내면서 이동 - 페이지 최상단으로 이동하면서 버튼이 우측으로 사라짐 - 스크롤 내리면 일정 부분부터 버튼이 우측에서 나옴 구현 화면 스크롤 버튼 작동화면은 맨 아래에서 확인해주세요. 스크롤 탑 버튼 구현 material-icon, gsap cdn 설치 구글에서 material icon cdn을 검색 후 페이지로 이동하여 cdn 코드 복사 후 태그 사이에 삽입해주세요. 구글에서 gsap cdn을 검색하여 페이지 이동 후 gsap.min.js와 ScrollToPlugin.min.js 코드를 복사 후..
[react] react 모달창(팝업창) 구현 리액트 hooks로 간단한 모달창을 구현합니다. 구현내용 cdn 설치, 스타일은 기본만 사용 리액트 hooks 방식 버튼 클릭 후, 모달창 팝업 기능 구현 화면 리액트, 바벨 cdn 설치 간단한 예제는 cdn을 이용하여, react와 babel을 설치합니다. 구글에서 react cdn, bable cdn을 검색하여 페이지에서 cdn 코드 복사후, 태그 사이에 삽입합니다. 리액트 hooks 모달창, 팝업창 띄우기 html css body { padding: 50px; } .openBtn { background-color: #F9B514; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .modal { position: fixed; top: 0; lef..
[html] html 특수기호 코드 찾기 html 특수기호를 이용한 마크업이 필요할때, 이용하는 사이트입니다. html 특수기호 검색 사이트 구글에서 html entities를 검색해서 아래의 페이지로 들어가거나, 바로 아래의 링크로 이동해주세요. 원하는 기호를 찾아, 바로 복사하여 마크업 하면 됩니다. https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 자주 쓰는 html 특수 기호들 html 특수기호 마크업 예제 카피라이트(저작권) 의미하는 기호는 아래의 html 특수기호로 표시합니다. © 저작권 html 특수기호 사용방법 © Goddino. All Rights Reserved. 구현 화면
[css] 카드 뒤집기, 이미지 앞뒤 회전 3d 애니메이션 효과 CSS를 이용한 3차원 애니메이션 효과 설정입니다. 구현 내용 이미지에 마우스 올리면(hover시) 이미지가 옆으로 회전하면서 이미지의 뒷면이 출력되고, 이미지에서 마우스를 내리면 다시 원래 이미지로 회전하면서 다시 앞면 이미지가 나오게 됩니다. 카드 뒤집기와 같이 이미지를 앞면, 뒷면을 교차적으로 출력하면서 3차원의 애니메이션 효과를 css를 통하여 구현할 수 있습니다. css로 3차원 애니메이션 효과 기본 동작 html 앞면(이미지 앞면) 뒷면(이미지 뒷면) css body { padding: 30px; } .container { width: 150px; height: 200px; perspective: 300px; //부모의 자식 요소가 3차원의 애니메이션 효과를 가질때, 300px의 거리에서 보는..
[js] 떠다니는 이미지 애니메이션 구현(ft. 부유하는 요소, gsap.to) 화면상에서 둥둥 떠다니는 요소를 애니메이션 라이브러리, gsap으로 구현합니다. 구현 화면 세 개의 동그라미 요소가 위아래 반복적으로 움직입니다. (애니메이션 구현 화면은 맨 아래에서 확인) 떠다니는 이미지 애니메이션 구현 방법 gsap cdn 설치 easing 함수 사용하여 gsap.to() 속성 적용 gsap cdn 설치 구글에서 gsap cdn을 검색하여 해당 페이지로 이동하여 cdn 코드를 복사한 후 태그 사이에 삽입합니다. html css .wrap { position: relative; width: 600px; height: 500px; background-color: skyblue; overflow: hidden; margin: 0 auto; } .floating { position: abs..
[react] 리액트 챗봇 스타일의 대화형 설문 조사 화면 구현 최근에 회사 프로젝트에서 리액트를 이용한 간단한 설문조사 앱을 만드는 중입니다. 여러 가지 시안 중에서 앱에서 많이 볼 수 있는 대화형의 설문 조사 형식이 있어, 마크업의 일부를 간단하게 공유합니다. 여기서는 앱 화면에 차례대로 설문 문제와 대답을 보여주는 일부만 공개를 하였고, 모든 문제를 마치면 결과지를 보여주는 화면은 없습니다. 구현 화면 react 대화형 설문조사 앱 구현 설정 npm: npm 패키지 설정(create react 폴더 설정) style css: tailwind 설치 중앙 상태 관리: context api 화면 구현 순서: 테스트 문제, 보기 5문항 -> 나의 대답 선택 -> 나의 대답 결과 -> 다음 문제 폴더 구조 리액트 대화형 설문 테스트 화면 formData.js - 설문 조..
[css] 반응형 16:9 비율 유지 박스 컨텐츠 영상 삽입 16:9의 비율을 유지하는 이미지, 컨텐츠 영역을 만듭니다. 웹 또는 앱에 유튜브 영상 화면을 삽입할 경우, 유튜브 영상의 비율(영상 화면 삽입 이미지 사이즈)인 16대 9의 비율로 영역을 만들어 컨텐츠를 삽입니다. css에서 부모 요소와 padding-top 속성을 이용하여 너비와 높이를 일정 비율로 하는 크기의 박스를 만들 수 있습니다. 이런 방법으로 유튜브 영상 사이즈 16:9 비율 크기의 요소를 만들어 사이트에 삽입할 수 있습니다. 일정 비율 크기 설정 예제 html css .container { width: 400px; background-color: gold; } .item { width: 100%; height: 0; padding-top: 50%; } 화면 해당 요소에 height: 0; ..
admin 페이지, 관리자 사이트 템플릿 소개(ft. metronic) 관리자 admin 페이지 템플릿을 소개합니다. 웹사이트나 앱을 운영하기 위해서는 관리자 사이트, admin 페이지가 필요합니다. 이때 admin 페이지 템플릿을 이용할 경우, 디자인, 퍼블리싱 단계의 업무 시간을 단축시키고, 디자인과 기능이 훌륭한 사이트를 만들 수 있습니다. 어드민 페이지의 경우, 소비자에게 노출되는 것이 아니라, 관리자만 접속해서 보는 화면이기 때문에 따로 디자인이나 기획에 많은 resource를 투자하지 않기 위해, 간편한 템플릿을 많이 사용하기도 합니다. 그래서 퍼블리셔, 프론트엔드 개발자, 디자이너가 admin 사이트를 기획, 디자인, 퍼블리싱하는 과정에 활용할 수 있는 메트로닉 어드민 디자인 템플릿을 소개하겠습니다. metronic 템플릿 https://keenthemes.co..
[css] 반응형 유동적 너비에 따른 이미지 가운데 정렬 방법 반응형에 맞는 이미지 가운데 배치 방법입니다. 처음 화면에는 이미지나 컨텐츠가 가운데 정렬로 잘 되다가, 브라우저 너비를 늘리거나 줄였을 경우, 이미지 또는 컨텐츠가 가운데 유지가 안되거나 잘릴 경우가 많습니다. 부모 요소 혹은 요소에 css로 text-align: center 또는 margin: 0 auto 값을 주어도 브라우저가 유동적으로 움직임에 따라 요소가 가운데 유지가 안되는 한계를 가지고 있을 경우, 사용하는 정가운데에 배치하는 방법입니다. 가운데 배치 적용한 예 아래와 같이 브라우저 너비를 줄였을 경우에도 계속해서 이미지가 가운데 잘 배치되어있습니다. 처음 화면 브라우저 너비 줄였을 경우 화면 예제 코드 css 요소 가운데 정렬 구현 방법 left: 50%으로 브라우저의 절반만큼 왼쪽에서부터..
[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의 ..
반응형

티스토리툴바