Frontend
-
[React] 리액트 너 누구냐(리액트는 프레임워크인가 라이브러리인가)Frontend/React 2023. 10. 29. 21:23
리액트로 개발을 시작하면서 리액트에 대한 정보를 찾아보게 되었다 그러면서 가장 많이 봤던 주제는 리액트의 정체성에 관한 글이었다 과연 리액트는 프레임워크일까 라이브러리일까? 우선 궁금증을 해결하기 위해 구글에 리액트를 검색하면 '라이브러리'라고 나온다 그렇다, 리액트는 라이브러리다. 본격적으로 리액트라 왜 라이브러리인지 정리하기 전, 프레임워크와 라이브러리에 대해 정리해보자 프레임워크 (Framework) 프레임워크라는 단어는 Frame(틀) + work(일)이라는 단어의 합성어로 '뼈대'를 뜻한다 어떠한 일을 처리하기 위한 구조를 제공하는 것이 바로 프레임워크다 라이브러리 (Library) 라이브러리는 개발에 필요한 것들을 미리 구현해놓은 도구이다 차이점 둘은 "제어 흐름" 에 따라 그 의미가 달라진다..
-
[JS] 공공데이터 포털 API Javascript로 호출하기Frontend/Java Script 2023. 8. 29. 17:32
공공데이터 포털 API 사용 방법 1.공공데이터 포털 회원가입/ 로그인 한다 https://www.data.go.kr/ 2. 원하는 Open API 선택한다 3. 활용신청 후 일정 시간이 지나면 승인된다 4. 마이페이지 > Open API > 활용신청 현황으로 들어가 인증키를 복사한다 5. API 제목 옆 상세 설명에서 Open API 호출을 누르고 양식에 맞게 정보를 입력한다 인증키는 4번에서 복사한 인증키를 붙여넣기 string에는 json 데이터 호출하기 위해 json 입력했다 6. 요청값 입력 후 나오는 두번째 창의 주소를 복사하면 된다 JS로 호출하기 1. 생성한 js 파일에 호출하는 방법 1) axios.get /axios.post 2) fetch axios.get으로 주소를 입력해준 후 co..
-
[React] 리액트 설치 방법Frontend/React 2023. 8. 28. 09:32
처음에는 public 가져가고 백업시 src 파일 가져가면 됨 src, git, json tarn lock read.md 꼭 가져가야 함 이름 변경하면 안 됨 폴더 따로 만들어야 함 다시 다운 받는 법 node mudule - 기본적으로 사용할 모듈 public -index.html src- 실제 코딩할 폴더 package.json - 전체 프로그램 내용 node module 폴더 제거 터미널 창에 yarn install App.js > index.js에서 화면 출력 div를 만들지 않고 가상 DOM 을 활용 > 속도가 빠름 Ctrl C 서버 꺼짐(조심) 실행 방법 : yarn start 계정 바꾸기 windows 자격 증명 관리로 기존 등록 계정 삭제 최종 build 하는 법 package.json 에..
-
[TailwindCSS] 테일윈드 설치와 사용법 및 장단점Frontend/HTML & CSS 2023. 8. 11. 17:22
테일윈드 사용법 설치 방법 1. 테일윈드 홈페이지에 접속해서 메인 화면에 있는 Get started를 눌러준다 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com 2. 화면에 안내된 순서에 따라 진행 [1] Ctrl + ~ 을 눌러 터미널을 켠 후 아래 코드를 입력한다 npm install -D tailwindcss npx tailwindcss init [2] 생성된 config.js 파일..
-
[CSS] block / inline-block / inline 그리고 박스모델 속성Frontend/HTML & CSS 2023. 7. 22. 15:47
1. 인라인 요소 가로 크기: 콘텐츠의 크기 한 줄에 여러 개 배치 크기 값을 지정할 수 없음 상하마진을 지정할 수 없음 span a small big em u s del br q b strong mark sub sup video audio 2. 블록 요소 가로크기 :100 한 줄에 하나 배치 가로, 세로 크기 지정 가능 상하마진 지정 가능 div, h1~h6 table figure figcaption caption header nav footer section article aside p ul ol blockquote, li td, th ,form, fieldset, hr 3. 인라인 블록 요소 가로크기 : 콘텐츠의 크기 한 줄에 여러 개 배치 가로, 세로 크기 지정 가능 상하마진 지정 가능 img, ..
-
[HTML&CSS] 연습 게임Frontend/HTML & CSS 2023. 7. 21. 16:06
1.CSS Diner : CSS 선택자를 연습할 수 있는 게임 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io CSS 뿌수기 Clear 2. Flexbox Froggy : display flex 속성을 연습할 수 있는 게임 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com display 뿌수기 Clear! 3.Grid Garden : display : grid 속성 연습할 수 있는 게임 https://cssgridgarden.com/..