본문 바로가기
[publishing] viewport 반응형 설정 매번 코딩할때마다 저번 프로젝트 사이트를 들어가서 복사하느라 번거로워 기록용으로 남긴다.
[React.js] 컴포넌트 종류 컴포넌트란? 하나의 블록이고, 리액트 앱은 컴포넌트로 구성된다. 종류 함수형 컴포넌트 : return문으로 JSX를 반환한다. import React from 'react'; function App(){ return( Hello ); } export default App; 클래스형 컴포넌트 : render()함수로 JSX를 반환한다. 조건 및 특징 리액트 컴포넌트 클래스를 반드시 상속 받아야한다. state(동적 데이터를 다루는 객체)를 사용하기 위해서 필요한 컴포넌트 import React from 'react'; class App extends React.Component { state = { isLoading: true, } render(){ const { isLoading } = this.stat..
[Javascript] async와 await json 호출을 할때 여러가지 방법이 있다. 그중에 네트워크를 통해 데이터를 불러오는 axios 방법이 있는데, axios는 네트워크를 사용하기 때문에 느리게 동작한다. 따라서 싱글 스레드인 Javascript는 해당 json이 다 불러와질 때까지 기다리느라 다른 작업을 하지 못한다. 이 때 async와 await를 사용하여 Javascript에게 해당 json를 불러오는 함수는 비동기(다른 작업을 동시에 할 수 있는) 함수라는 것을 인지해주고, 비동기 작업의 대상 앞에 await를 붙여주어서 이 함수 실행이 끝날 때까지 시간이 걸릴 수 있다고 알려줘야한다. 예시) getMovies = async () => { const movies = await axios.get('불러올 json url 파일'); c..
[VSCode] Tab 간격 설정 해둔데로 유지하기 프로젝트마다 Tab 간격 설정이 달라서 매번 우측 하단에 Tab Size 혹은 Sapcing을 변경해줘도 창을 닫고 다시 vscode를 실행하면 다르게 설정 값이 매겨진다. 한번 설정 해둔데로 유지하고 싶다면, 1. 좌측 하단 톱니바퀴(또는 File > Preferences > Settings) 2. editor tab 검색 3. Detect Indentation 체크가 되어있다면 아래 캡처본처럼 해제 4. Editor Tab Size를 설정해주고 재실행한다. 😊
[icon fonts] 웹 아이콘 폰트 사이트 소개 매번 디자인으로 아이콘을 뽑아 사용하기 번거롭다. 따라서 웹 아이콘 폰트를 활용하여 디자인하면 훨씬 시간이 절약되고 좋다. https://ionic.io/ionicons Ionicons: The premium icon pack for Ionic Framework Ionicons is an open-sourced and MIT licensed icon pack. ionic.io https://material.io/design/interaction/gestures.html#properties Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code..
[css] 반응형 table 대응 반응형 테이블은 태그를 사용하여 퍼블리싱하기 어렵다. 를 사용하여 퍼블리싱하면 훨씬 수훨하다. HTML 번호 카테고리 제목 첨부파일 작성일 상태 공지 카테고리 비밀 공지사항 제목입니다. 홍길동 2022.01.01 대기 공지 카테고리 비밀 공지사항 제목입니다. 홍길동 2022.01.01 대기 CSS .board-list-title, .board-list-inner { display: table; table-layout: fixed; overflow: hidden; width: 100%; } .board-list-title { border-top: 1px solid #000; border-bottom: 1px solid #e0e0e0; } .board-list-title > li { display: tabl..
[javascript] Swiper ie 호환 버전 확인 Swiper 5 버전 이상부터는 ie 자체가 호환이 되지 않는다. 따라서 ie 까지 크로스브라우징을 원할 경우 5 버전 미만의 swiper를 사용해야한다. unpkg 사이트를 이용하여 다운 받으면 된다. https://unpkg.com/browse/swiper@4.5.1/dist/ UNPKG - swiper Version:... unpkg.com 😊
[javascript] ES6 ie 호환 ES6 문법으로 스크립트를 짠 .js 파일은 ie에서 작동이 되지 않는다. 이때는 Babel의 힘을 빌려서 호환 작업을 해주어야한다. (해당 작업은 윈도우 운영체제 환경에서 git Bash를 사용하였습니다.) 1. node 로컬 설치 여부 확인 node -v 1-1. 설치가 되어있지 않다면, 아래 링크를 따라 안정적인 버전으로 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. npm 로컬 설치 여부 확인 (npm은 node.js 를 설치할때 자동으로 함께 설치된다.) npm -v 3. Babel 설치 Babel은 특정 버전의 script 코..

티스토리툴바