전체 글

[CSS] Icommon 사용 방법

1. icommon 이번에는 회사 프로젝트에서 icommon을 사용하고 있어서 https://icomoon.io의 사용법을 간단히 정리한다. 들어가자 마자 위의 icoMoonApp버튼을 누르면 아래와 같은 화면이 나타난다. icomoon에서 무료로 제공하는 아이콘들이 보이면 위에 파란색으로 표시 되어있는 집 모양 세가지를 선택한 후, 아래의 빨간색으로 표시되어있는 Generate Font를 눌러보자. 그리고 나서 바로 다운로드를 요청해보자. icomoon.zip이 다운로드가 될텐데, 압축을 해제해 보면, 아래의 폴더 및 파일들이 있다. 아래에서 중요한 것은 font 폴더와 style.css이다. (실제로 사용하는 파일) demo-files fonts (폰트가 들어있는 파일) demo.html (아이콘 확..

[프론트엔드] REACT 뉴스 뷰어 만들기 [3]

이전 글 2022.03.23 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [2] 1. newsAPI 키 발급받기 먼저 아래의 사이트에 접속하여 회원가입을 진행한다. Register - News API Email addresses will be verified, please enter a real one. Disposable addresses have been blocked. Reminder: If you are a business or are using News API commercially then a subscription is required to continue using the API outside of development. newsapi.org 회원가입에 성공하..

[프론트엔드] REACT 뉴스 뷰어 만들기 [2]

이전 글 2022.03.22 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [1] 1. axios를 사용한 API 테스트 axios 라이브러리를 사용하여 먼저 API를 GET 으로 가져올 수 있는지 테스트 해보자. - App.js import React, { useState } from 'react'; import axios from 'axios'; const App = () => { // API를 넘겨받을 state 선언 const [data, setData ] = useState(null); const onClick = async () => { // axios 라이브러리로 apic call try { const response = await axios.get( 'https..

[프론트엔드] REACT 뉴스 뷰어 만들기 [1]

1. 사전 준비 - git 저장소 생성 먼저 뉴스뷰어 개발을 위한 git 저장소를 추가한다. Add a README file : README 파일 기본생성 Add gitignore : node 모듈 commit 제외 - git Clone (Mac 기준) clone 폴더에서 티미널 열기 생성한 저장소 git 주소 clone 2. react 프로젝트 설치 아래의 3가지 명령어를 vscode를 열어서 실행한다. 뉴스 뷰어 프로젝트 설치. cd 명령어로 생성한 프로젝트 경로로 이동 외부 API 연동을 위한 axios 라이브러리 설치 $ yarn create react-app news-viewer $ cd news-viewer $ yarn add axios 3. react 프로젝트 설정 - prettierrc 추..