목록Front End Developer (23)
web sprit
react native 프젝을 마치고 퍼블을 위해 셋팅한 node modules 를 실행 하였습니다.엇!!! node-sass 에서 에러가 나네여?? 이때 부터 문제가 시작 됩니다.기존에 잘 실행 되다가 react native 프젝을 하고 나서 문제를 일으킨 겁니다.자세한 원인은 잘 모르겠지만 툴로 vs code를 사용했는데 윗분(?)이 셋팅 해주었는데 거기서 문제가 생긴것 같네여 우선 npm run을 때렸을때아래와 같은 오류 내용이 뜹니다."Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime" 네이버신, 구글신 다 검색해 봤습니다.결론은 해결했습니다. 해결한 방법에 대해 알아보죠처음..
1. 우선 node JS 설치2. package json 생성npm init -y 3. webpack 설치npm i --save-dev webpack webpack-cliwebpack 과 webpack-cli 를 설치해 줘야 한다. 4. package.json과 같은 위치에 src 폴더 생성mkdir srccd srctouch index.jsindex.js 파일을 생성한다. src 폴더의 index.js 파일을 만들면 webpack에서 자동빌드하는 기본 경로이다.index.js 파일에 다음과 같이 작성 후 저장.console.log(`index js 입니다.`); 5. webpack4에 추가된 내용에 의해 package.json에 다음과 같이 추가."scripts": { "dev": "webpack --..
프로젝트 일 관련해서이번 프로젝트는 그누보드를 이용하여 게시판을만들어야하는 업무가 들어왔습니다. 말만 들어봤지 이 부분에 대해선 무뇌하기 때문에 정리하며 심도있게 알아보려 합니다. 설명에 대한 내용은 "(주)에스아이알소프트" 사이트에 자세히 나와있기 때문에따로 내가 일을해가며 정리할 필요는 없을 것 같네요. ㅎㅎ 1. 그누보드란?https://sir.kr/faq/6?s_tag=%EA%B7%B8%EB%88%84%EB%B3%B4%EB%93%9C5 2. 설치방법https://sir.kr/manual/g5/2또한자주하시는 질문 게시판에서도 설치및 메뉴얼이 존재합니다.
scss 를 컴파일 하는 style 은 4가지 스타일이 존재합니다.1. nested2. expanded3. compact4. compressed 일반 scss 문법을 통하여 css 로 어떻게 컴파일 되는지 확인해 보겠습니다.scss1234567html{ font-size:10px; body{ color:red; font-family: serif; }}cs cssnestedsass 형식과 유사하게 nested된 css 파일이 생성됩니다. 기본값으로 옵션을 추가하지 않아도 기본 적용됩니다.12345html { font-size: 10px; } html body { color: red; font-family: serif; }cs expanded표준적인 스타일의 css 파일이 생성됩니다.1234567html {..
npm 명령어 중 자주 사용되는 명령어 위주로 작성하려 합니다.우선 Node JS 가 설치 되어 있어야 명령 프롬프트에서 결과를 확인할 수있다. 1. 명령어 검색123npm helpornpm -hcsnpm 명령어가 무엇이 있는지 확인할 수 있습니다. 2. 버전확인12node -vnpm -vcsnode 또는 npm 버젼을 확인할 수 있습니다. 3. package.js (의존성관리) 설치123npm initornpm init -ycs위 명령어를 실행하면 package.js 를 설치해 줍니다.그냥 init 명령어를 쓸경우 기타 설정에 대한 질문이 나와 설정해줘야 넘어갑니다. 그것이 번거롭다면위에 -y를 붙이면 기본 package.js 를 만들어 준다. 4. 모듈설치123npm installornpm insta..
cls 지저분해진 화면을 지워줌. cd 폴더명 or 폴더경로 폴더의 상위 또는 하위폴더로 이동할때 사용한다.ex)cd 하위폴더명 - 한단계 하위루트로 이동cd 하위폴더명/하위폴더명/하위... - 윈하는 위치의 하위폴더로 이동cd .. - 한단계 상위루트로 이동 cd\ - 최상단 루트로 이동c: or d: - 원하는 최상단루트 드라이브로 이동 dir해당폴더에 속해있는 폴더들의 내역을 보여준다. shutdown -s -t 10 10초후 컴퓨터 종료 shutdown -s -f -t 10 10초후 실행중인 응용프로그램 종료 후 경고없이 강제 종료 shutdown -a 컴퓨터 종료 취소
오늘은 Compass 설치에 대해 정리해 봅니다.요전에 말했듯이 Compass는 Ruby 기반으로 작동하기 때문에 Ruby를 꼭 설치 하셔야 합니다.참고 : http://kcmschool.xyz/39 Ruby를 설치하셧다면 본격적으로 Compass를 설치해 보겠습니다.맥이라면 터미널로 윈도우 사용자라면 command를 이용하여 설치하면 됩니다.다음과 같이 작성해서 실행해 주세요~ gem install compass 그럼 무언가 설치하는 코드가 나오면서 설치가 완료 됩니다. 설치가 잘되었는지 확인해 보려면 버전체크를 한번 해보시길 바랍니다.버전정보를 확인하려면 아래와같이 작성해서 실행하세요. compass -v 자 매우 간단하게 CSS Framework 인 Compass 를 설치해 보았습니다.비록 간단하고..
Compass 는 CSS 를 편리하고쉽게 개발할 수 있게 만들어 주는 CSS Framework 입니다.SASS를 사용하며 , Ruby 기반으로 Ruby를 설치해줘야 합니다.http://kcmschool.xyz/39 위 URL을 참고하면 Ruby 설치방법을 참고 할 수 있습니다. 기존 SASS를 사용하여 Compile 하였다면 Compass는 SASS 보다 간결하고 간단한 방법으로 Compile 이 가능하다. 앞으로 실무에서 사용하며 간간히 사용법이나 Tip을 정리할 생각입니다.이 글이 도움이 되시거나 잘못된 부분이 있으면 댓글 부탁드립니다. ^^
1. 설치https://nodejs.org/위 url을 클릭하여 node JS 사이트에 접속합니다.아래와 같은 화면을 맞이 하게 될텐데요. 영어라 당황하지 마시고 설명 드리겠습니다.우선 중앙의 다운받을 수 있는 녹색 버튼이 2개가 존재 하네요.제 컴이 64bit 인줄 알고 들어올때 부터 맞춰 주나 봅니다. 우선 두개의 버튼 중 왼쪽의 버튼(v6.9.2 LTS)를 권장 합니다. 오른쪽의 버튼은 최신 기술이라 아직 test 기간이라고 보시면 됩니다. 임상실험(?) 이 끝난 이전 하위버전으로 다운받기를 권합니다. 벌써 6.9.2 버전 이군요. 다른 방법으로 다운받으시려면 상단 메뉴에서 DOWNLOADS 버튼을 누릅니다. 들어가면여러가지에 OS 나 버전에 맞는 node JS 를 다운 받으실 수 있습니다.저는 W..
어떠한 폴더를 삭제하려고 휴지통에 넣어 삭제하려는데.. "폴더에 이름이 너무 길어서 휴지통에 넣을 수 없는 항목이 있습니다." 또는 "원본 파일 이름이 파일 시스템에서 지원하는 길이보다 깁니다." 라는 경고 문구가 나오면서 완전 삭제가 불능한 경우를 맞이 하고 말았습니다. 혹여나 재부팅하면 삭제할 수 있으려니 하고 재부팅 후 삭제하려 하는데... 으악~!!!!!!!!!!!! 절대 삭제가 안되네요~ 이를 어쩐다. 이럴땐 구글신의 힘을 빌렸습니다. 다시 까먹지 않으려 또 정리합니다. ^^ 제가 공부하는 프로젝트 자동생성. 자동 디렉토리를 만들어주는 Yeoman 이라는 Front 도구를 사용하다 이런 일이 발생했습니다. 저처럼 고생하지마시고 이 글을 보고 바로 해결하시기 바랍니다. 우선 node.js 가 깔려..