본문 바로가기
[iOS/아이폰] HEIC 사진을 JPEG로 변환하기 iOS를 사용하는 아이폰/아이패드에서는 iOS11 버전을 시작으로 새로운 비디오/이미지 규격은 HEIF( High Efficiency Image File Format) 를 사용하게 되었습니다. 이미지는 HEIC , 비디오(영상)는 HEVC 라고 하는데, 이것들은 자체의 규격이라고 하기보다는 HEIF 규격으로 만들어진 데이터를 담는 Container 라고 한다고 합니다. 뭐 어찌되었건, 이 때문에 아직은 이 새로운 기술을 사용하기엔 모든 장치와 호환되는 것은 아닙니다. 아직도 하위버전의 윈도우와 기타 다른 장치에서는 이 HEIF로 만들어진 이미지/동영상을 볼 수 없거나 읽을 수 없어 별도의 변환과정이 필요합니다. 그 중에서 가장 활용도가 높을 것 같은 "HEIC 이미지를 JPEG로 변환하는 방법"을 알려드..
[ReactJS] Ant Design에 대한 이야기 Ant Design에 대하여만든 곳: https://ant.design/간략한 소개: A UI Design Language리액트와 타입스크립트(Typescript) 기반으로 제작된 UI라이브러리.중국회사에서 오픈소스화한 라이브러리 MIT License 설치npm install --save babel-plugin-import App.css > @import '~antd/dist/antd.css'; 구문을 추가해야 함. ( 참고: https://ant.design/docs/react/use-with-create-react-app ) React에서 Ant Design 사용하기참고 사이트: https://ant.design/docs/react/introduce모바일을 위한 디자인: https://mobile.a..
[ReactJS] Ant Design Custom Theme 사용하기 개요React Ant Design에서는 제한된 수준의 사용자 Custom Theme를 지원합니다.참고: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less 컴포넌트 단위의 디자인 Variables 확인ant-design-component 프로젝트를 실행하여 아래와 같은 화면을 확인할 수 있습니다.(1): Component의 목록을 표시하는 메뉴입니다. 이 메뉴를 클릭하면 오른쪽의 상세 정보 화면이 변경됩니다.(2): 선택한 Component가 화면에 표시되는 미리보기 화면입니다.(3): 선택한 Component에서 사용되는 기준 값입니다. LESS 언어 기준으로 설정되어 있습니다.컴포넌트 디자인 ..
[ReactJS] React JSX, VirtualDOM, Component, Prop, State LifecycleJSX (JavaScript XML)React JSX는 XML-like Syntax를 native Javascript로 변환. ""로 감싸지 않으며 순수하게 작성. 시작과 끝에 ()를 사용하여 가독성 유지하는 것을 권장.Sampleclass Contents extends Component { render() { return ( Welcome React! ) }};Nested Elements: 단일 컴포넌트에서 여러개의 Element를 render할 경우 그 element들은 하나의 wrapper(container) element안에 포함시켜야 한다.Question: wrapper element가 될 수 있는 대상 element는 어떤 것들이 있을까?Javascript 표현식 사용JSX안에..
[ReactJS] create-react-app 설치와 샘플 실행 create-react-app에 대하여이 오픈소스는 facebook incubator라는 Github에 위치create-react-app을 사용하는 주요한 이유는 React를 사용함에 있어 발생하는 많은 설정의 어려움을 해소하기 위해 개발되었습니다. ( 참고: https://techstory.shma.so/create-react-app%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC-1-935a21297550)기본적으로 ES2015문법을 지원하며 watchify가 기본설정으로 지정되어 있어 쉽게 작업할 수 있습니다.create-react-app 덕분에 npm과 yarn을 설치하고 create-react-app을 설치한 후 샘플 프로젝트를 실행하는 시간은 불과 몇 분안에 끝이 납니다.np..
NodeJs / Yarn 설치하기 설치하기 전 읽어보기npm에 대하여 (참고문서: https://docs.npmjs.com/getting-started/what-is-npm)npm은 javascript 개발자들에 의해 공유와 재사용을 쉽게할 수 있도록 만든 패키지 매니저 프로그램입니다.npm의 주요기능 (참고: https://velopert.com/241)NPMSearch에서 탐색 가능한 node.js 패키지/모듈 저장소Node.js 패키지 설치 및 버전/호환성 관리를 할 수 있는 커맨트라인기반 유틸리티 Yarn에 대하여 (참고문서: http://www.eloquentwebapp.com/yarn-new-package-manager-javascript/)npm 이라고 하는 기존에 널리 사용되고 있는 javascript 패키지 매니져의 단점..
about {LESS} CSS 시작하기역사2009년 Alexis Sellier가 만들었으며 Ruby로 처음 작성되었고 그 이후에 javaScript로 대체되었습니다.지원하는 언어LESS는 아래의 프로그래밍언어에 사용할 수 있으며, 각 언어들마다 다양한 Open Source 프로젝트로서 LESS를 지원하고 있습니다.참고 ( http://lesscss.org/about/#ports ) Java.NetPHPPythonRubyGo그래서 LESS는Open SourceCSS로 컴파일되고 클라이언트 혹은 서버에 실행될 수 있는 동적 스타일 시트 언어입니다.브라우저가 LESS.js를 통해 실시간 컴파일LESS 설치설치 전 준비NPM을 이해하고 설치해야 합니다.설치하기다음의 명령을 이용하여 시스템 전역으로 설치하거나npm install less -g..
PHP-include 와 require 의 차이점 출처: require: http://php.net/manual/en/function.require.php include: http://php.net/manual/en/function.include.php require 원문: require is identical to include except upon failure it will also produce a fatal E_COMPILE_ERROR level error. In other words, it will halt the script whereas include only emits a warning (E_WARNING) which allows the script to continue. require 는 에러가 발생될 때 E_COMPILE_ERROR ..

티스토리툴바