Category FE 개발
개요 HTML 태그 요소 정리를 하고, 기록을 위해서 작성을 해본다.태그를 많이 있어 각 사용 쓰임에 따라 정리를 따로 해봤다. HTML5 새로 포함된 태그 요약 HTML5에 새로 포함된 태그들이 있다. 이러한 HTML5 태그(요소)는 더 나은 문서 구조를 제공한다. 태그 설명 <article>… Continue Reading →
개발을 하다보면 여러가지 네이밍 규칙을 마주하게 된다.프로젝트를 혼자 하는 것도 있지만 대부분 2명이상과 할 때가 많다.네이밍 규칙을 만들면 정리가 되고,파일, 폴더, 변수, 클래스, 컴포넌트 등 바로 직관적으로 의미를 알 수 있어서 네이밍 규칙은다수 프로젝트에서는 필수라고 볼 수 있다. 단어 사이의… Continue Reading →
필자는 리액트 설치를 할 때 에러가 났지만 react뿐만 아니라 npm, vue 등 설치시에 에러가 발생할 수도 있다. 이런 에러는 SSL 문제이다. npm config set strict-ssl false -g 이렇게 명령어를 치면 해결 될 수 있다. SSL 관련 용어는 아래 다음과 같다…. Continue Reading →
Git GUI 클라이언트 중에 근래 사용하는 것은 git fork클라이언트입니다. 인터페이스가 제일 깔끔한 것은 Git Kraken이지만 멀티 계정 및 비공개 repository 등 모든 항목을 이용하려면 려면 결제를 해야 사용할 수 있습니다. github desktop은 github에 한정되어 있으며 여러 계정을 사용할 수 없습니다…. Continue Reading →
개요 2019년 VS Code 설치 및 확장 프로그램 추천을 올린적이 있습니다.아래 이전에 추가한 확장 프로그램에 이어 확장 프로그램을 추가 공유합니다. 확장 프로그램 추천 Live Server 쉽게 서버를 띄울 수 있었고 웹 브라우저에서 바로 확인 가능하며, 실시간으로 반영되어 편리한 확장 프로그램입니다…. Continue Reading →
오래전부터 올린 다는 것이 게을러 작성을 못했다가 근래에 다시 글을 올리면서 이 방법론도 꼭 공유하면 좋겠다 생각이 들어 공유를 합니다. 고수들은 읽지 않아도 됩니다 😅 시작하기 CSS 방법론 만들어진 게기는 CSS 활용도가 높아지고 대규모 프로젝트가 많아짐에 따라, 복잡한 설계의 필요성을… Continue Reading →
개요 루트 권한으로 사용하여 Node.js와 npm을 설치했다면 npm ERR! Error: Eacces 오류가 발생합니다. 패키지를 설치할 때마다 ‘sudo’를 사용하여 npm 명령에 접두사를 붙어야 하는 불편한 결과가 나옵니다.이러한 문제는 Node.js 웹사이트에서 제공하는 .pkg 설치 프로그램을 사용한 결과로 보입니다. 따라서, 매번 sudo npm… Continue Reading →
개요 node.js 설치를 하려고 하다가 버전 확인을 하는데 node -v 은 제대로 되는데 npm -v이 계속 npm WARN config global –global, –local are deprecated. Use –location=global instead 뜨길래 검색 후에 해결 방안이 있어서 공유합니다. 해결방법 Power Shell을 관리자 권한으로 실행한다. Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force… Continue Reading →
기본 사용 방법 설치 1. 기본 Font Awesome SVG라이브러리를 설치한다. 2. 다음 Font Awesome 아이콘 패키지를 설치한다. Font Awesome Free Solid를 사용하지만 더 많은 아이콘 세트를 사용할 수 있다. npm i –save @fortawesome/free-solid-svg-icons 3. 그런 다음 Font Awesome Vue 구성… Continue Reading →
구문이 계속 변경이 될 수 있기 때문에 플로그인을 업데이트를 해줘야 한다. 일괄 업데이트를 해야하는데 이것이 생각보다 플로그인 방법은 생각보다 간단하다. 라이브러리 설치 npm-check-updates 설치한다. npm install -g npm-check-updates 버전 체크 npm-check-updates -u 위의 명령어로 package.json에 있는 dependency 정보를 읽어 현재… Continue Reading →
TailwindCSS 입문 TailwindCSS 초보자를 위해서 만들어졌습니다. gulp를 이용해 테일윈드를 사용법을 설명할 예정입니다. 이 내용은 @manjumjn의 gulp-with-tailwindcss를 바탕으로 번역 및 편집 되었습니다. TailwindCSS은 무엇? tailwindcss는 화면 디자인을 위한 프레임워크입니다. 사용자 맞춤 디자인을 유틸리티 우선으로 빠르게 구축하는 CSS 프레임워크 NPM 명령어 NPM… Continue Reading →
제가 새로 버전을 받고 설치하면서 버전이 3.9.1에서 4.0 이상 올라가 변화되면서 몇가지 오류가 나는 것을 발견하였습니다. 제가 알고 있는 오류를 정리하고 해결했던 방안을 공유합니다. self signed certificate in certificate chain unable to verify the first certificate task function must be… Continue Reading →
워드프레스를 사용하면서 처음 겪는 일이 생겼다. 이미지 업로드하는데 ‘Post-processing of the image failed’라는 메세지와 함께 사진 또는 큰 이미지인 경우 2500픽셀이하로 저장을 해서 다시 업로드 해보라는 메세지다. 그래서 찾아봤더니 여러방법들이 나왔다.우선 나온 것이 브라우저 캐쉬를 지우라는 것이였고, 또 다른 방법은… Continue Reading →
안녕하세요!제목이 상당히 기네요;; 오늘은 gulp 설치할 때 SSL(서명 인증서)때문에 설치가 안되는 분들을 위해서 공유하고자 합니다. 오랜만에 UI개발에 대해서 글을 올리네요…헤헿 오늘은 gulp.js 설치하면서 인증서때문에 안되시는 분들을 위해서 정보공유하고자 합니다. (제가 컴퓨터 변경 후 다시 gulp 설치하려고 하니깐 이런식으로 나오네요..) npm… Continue Reading →
안녕하세요.이번 글에는 Git 클라이언트 중에 소개가 안된 Fork 클라이언트에 대해서 짧게 소개를 하려고합니다. Git 대표 클라이언트를 보시려면 아래 링크로 가시면 많이 사용하는 클라이언트들을 보실 수 있습니다. 제가 오늘 소개할 클라이언트는 git-fork입니다. https://git-fork.com/Mac과 Window버전을 다운 받을 수 있으며 아직까지 리눅스 버전은… Continue Reading →
VSCODE를 실행하면 저같은 경우는 bitbucket 자격증명하라고 계속 팝업창이 뜹니다.처음에 한두번은 그냥 끄거나 로그인을 했는데요… 실행할 때마다 뜨니깐 은근 짜증이 나고 신경이 쓰이더군요. 열심히 구글링한 결과 알아냈습니다. ㅎㅎ 기본설정이 들어갑니다.검색에 autofetch라고 검색하면 위의 이미지처럼 나옵니다.체크해제를 하면 더이상 팝업창이 안뜹니다.참 쉽죠?ㅋㅋ 즐거운… Continue Reading →
저는 그동안 소스트리를 사용하면서 업데이트를 안하고 있다가 3.1.2버전으로 업데이트를 하게 되었습니다. 제가 업데이트 전과 후의 내역을 짧게 소개하겠습니다. 로컬저장소의 왼쪽 사이트 메뉴 UI가 변경, 다른 로컬 저장소 바로 이동 가능 뉴탭 로컬 저장소 폴더 UI가 변경. 하단으로 이동 되었음. 계정을… Continue Reading →
중요한 프로젝트를 즐겨찾기 하여 프로젝트간에 쉽게 전환이 가능하게 해주는 확장 프로그램입니다. 기능 어떤 프로젝트라도 즐겨찾기로 만들 수 있습니다. VSCode, Git, Mercurial or SVN 저장소 자동 검색 같은 창이나 새 창으로 프로젝트 열기 가능 현재 프로젝트를 식별하는 상태바 표시 전용 사이드바… Continue Reading →
Visual Studio Code를 사용해보다. 에 처음 글을 올린 후 사용을 안하다가 약 2년이 흐른 후 다시 사용을 해보려고 합니다. 기존에보다 기능이 업데이트 되어있다고 들어서 사용해보기로 했습니다. 1. VS Code 설치 [contentcards url=”https://code.visualstudio.com/” target=”_blank”] 위의 사이트에 접속해서 본인에 맞는 OS맞게 다운로드… Continue Reading →
안녕하세요!UI개발을 하다보면 폼 요소 코딩을 많이 할 때가 있습니다. 처음 시작할 때는 마크업만 주고 했던 것이 경력이 늘어나면서 접근성도 생각하게 되고 더 나아가서는 유효성검사도 같이 넣어서 줄 때가 있습니다. 매번 스크립트 작성을 해서 넣는다는 것이 얼마나 시간을 투자를 해야하고 살짝… Continue Reading →
요즘 형성관리를 많이 하면서 git의 사용자가 많이 늘어나고 있습니다. 그중에 대표적인 github, bitbucket 같은 git을 좀 더 쉽게 사용할 수 있는 응용프로그램들이 출시 되면서 git 사용자가 더 늘어난 것 같습니다. 아래 순서는 제가 임의로 작성한 것이며, 사용률에 대한 것과는 상관없습니다…. Continue Reading →
아이폰 X 출시 이후에 올해는 다양한 이어서 아이폰 xs, 아이폰xr 등 나왔다. 그러면서 노치(Notch)영역 해결방법들도 많이 나오고 있는데 이에 짧게 소개하려고 한다. 정말 간단히 설명하면 HTML 메타태그에 아래와 같이 삽입하면 된다. 기존에 메타에서 viewport-fit=cover만 넣으면 되는 것이다. HTML Meta Tag… Continue Reading →
Vue.js를 많이 사용한다는 소리를 들었지만 계속 미뤄났던 공부를 다시 조금씩 해볼까하고 보고 있는데.. gulp에서 vue를 돌리는 방법이 많이 나와있지 않은 것 같아 한참을 헤맸었다… 요즘 한국사람들도 블로그를 많이해서 설마 많이 사용하는데 있겠지 계속 검색 검색….안나옴 ㅠㅠ 그래서 구글링으로 검색을 했고… Continue Reading →
프론트단에서 npm, gulp, grunt, yarn 등 사용을 하려면 터미널을 사용해야하는데 Atom(아톰) 에디터에서도 터미널을 사용할 수 있다. 기본적으로 terminal-plus 패키지를 많이 사용했지만 호환이 제대로 안되서 그런건지 몰라도 platformio-ide-terminal를 많이 사용하여 이것을 다운받아서 사용했다. 설치 setting -> install에서 platformio-ide-terminal를 검색하여 설치를 하면된다…. Continue Reading →
소개 파워 목업: 파워포인트의 모형 및 와이어 프레임 확장툴입니다. 백문불여일견 이라고 한번 영상을 보는 것이 낫겠죠? 공식 홈페이지에 있는 영상. ※ 파워목업은 기본적으로 파워포인트가 설치가 되어있어야 사용이 가능합니다. 특징 빠른 검색으로 찾을 수 있습니다. 드래그 앤 드롭으로 슬라이드 화면으로 Shapes를… Continue Reading →
문제 IE10, IE11에서 셀럭트박스 선택을 하면 아무이상이 없는데 input 상자에 포커스 있는 상태에서 셀럭트박스를 다시 선택하면 텍스트상자 넓이가 커지는 현상이 있습니다. 이유는 placeholder로 인해서 일어나는 현상입니다.(IE10, IE11에서만 오류가 일어납니다.) 오류는 아래와 같습니다. 선택1선택2선택3 오류 체크 하셨습니까? 혹시 확인을 못하신 분들을… Continue Reading →
jQuery로 만든 Tab Menu 플로그인.
웹에서 자주 사용하는 Tab Menu를 플로그인으로 만들어봤습니다. 소스는 초보자들을 위해서 만들었으니 참고 부탁드립니다.
UI 개발을 하다보면 실시간으로 확인을 한 것이 필요할때가 있고 또 소스를 일부 공유 해야할 때가 있습니다. 아직 비공개이거나 일부 내용만 공개 하고 싶을 때 사용할 수 있는 온라인에서 코드 작성할 수 있는 에디터들을 몇가지 소개를 하려고 합니다. UI Development Online… Continue Reading →
F12키나 Ctrl+Shift+i을 누르면 개발자 도구가 나오는 것은 이쪽에서 일하는 사람은 다 알 것이다. 개발자 도구는 웹페이지의 구성요소를 확인할 수 있고, 바로 코드를 삽입하거나 수정해서 변화된 페이지를 바로 볼 수 있다. UI개발자라면 이 페이지에서는 CSS의 칼라값이 몇 개가 사용되고 몇개의 이미지가… Continue Reading →
동적인 애니메이션을 만들기 위해서는 CSS3를 이용을 해야한다. CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다. 간단히 애니메이션에 대해서 알아보도록 하자. 애니메이션 속성 animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션 시작될지 지정한다. animation-direction: 애니메이션 종료되고 다시 처음부터 시작할지 역방향으로… Continue Reading →