2월, 2020의 게시물 표시

React가 뭐야? 이걸로 맛보기!

React React 하는데 React가 뭔데 그래? 라는 생각이 든다면 1~2시간 정도 투자해서 아래 링크로 가서 따라해보시기 바랍니다. 빠른 시간에 React가 어떤 건지 감 잡기 좋다고 생각합니다. 한국말이니 더 좋습니다. https://ko.reactjs.org/tutorial/tutorial.html 실습 결과물 :  https://codepen.io/ghkdgh2365/pen/PoqmJyV?editors=0010

리눅스 명령어 정리(1) - pwd, ls, mkdir, cd, rm

terminal, AWS EC2 등을 사용하게 되면 리눅스 명령어를 필연적으로 사용하게 된다. 앞으로 자주 terminal과 AWS EC2 등을 자주 사용하게 될테니 리눅스에서 자주 사용하게 되는 명령어를 정리해보자. 1. pwd - 현재 위치(경로)가 어디인지 알려주는 명령어 print working directory 2. ls - 현재 있는 곳(디렉토리 또는 폴더)에 어떤 파일들이 들어있는지 알려주는 명령어 list 예) 현재 디렉토리(폴더)에 apple 이라는 폴더가 있다면, ls를 했을 때 apple 이 출력된다. 옵션1) ls -l :  퍼미션(권한), 포함된 파일수, 소유자, 그룹, 파일크기, 수정일자, 파일이름까지 보여준다 옵션2) ls -a : 숨겨진 파일, 디렉토리 모두 보여준다 옵션3) ls -h : 사람이 보기 좋은 형태로 출력해준다 여러 옵션들이 더 있는데 그건 아래 링크를 참고하기 바람. 또 옵션을 중복해서 사용할 수 있다. 예) ls -al : 옵션 l과 a의 특징을 모두 다 적용 또 현재 있는 곳이 아닌 다른 디렉토리의 list를 보고 싶다면 예) ls /user/apple 처럼 절대 경로를 지정하거나 ls apple 처럼 상대경로(현재 내가 user 폴더에 있다면)를 지정해도 볼 수 있다. 참고 :  https://withcoding.com/89 3. mkdir - 디렉토리를 만드는 것 make directory 예) mkdir kiwi 하고 ls 해보면 kiwi 폴더가 만들어졌을 것이다. 4. cd - 디렉토리(폴더) 이동을 위한 명령어 change directory 의 약자처럼 내가 가고 싶은 폴더로 이동할 때 사용한다. 예1) 현재 user 디렉토리(폴더)에 있는 상황이고, user 디렉토리에 apple이라는 폴더가 있을 때, apple 폴더로 이동하는 방법은 cd apple  예2) 현재 apple 폴더에 있을 때 ...

반응형 뷰(PC, Mobile)를 위한 JavaScript, jQuery (JavaScript, jQuery for Responsive layout view)

누군가 나와 같이 PC와 모바일과 레이아웃 차이가 클 때 어떻게 해야할까 고민하고 있다면 다음과 같은 솔루션이 도움이 되었으면 좋겠다. // 웹페이지 로딩이 되었을 때 넓이 값을 확인하고 기기에 따라 클래스 등을 넣어준다. $(window).load(function(event){   let windowWidth = event.currentTarget.innerWidth;   if (windowWidth > 767) {     // 모바일보다 큰 디바이스인 경우   }else{    // 모바일보다 작은 디바이스인 경우   } }); // 웹페이지 사이즈가 변경되었을 때 넓이 값을 확인하고 기기 넓이에 따라 클래스 등을 넣어준다. $(window).resize(function(event){   let windowWidth = event.currentTarget.innerWidth;   if (windowWidth > 767) {     // 모바일보다 큰 디바이스인 경우   }else{     // 모바일보다 작은 디바이스인 경우   } } javascript 로 짜는 경우는 window.onload 등으로 대체하면 똑같이 사용할 수 있다.

부트스트랩 사용 시 버튼 오른쪽 정렬하는 방법 (How to use float-right for right align in bootstrap)

Bootstrap 사용 시 버튼을 오른쪽 정렬하는 방법 버튼 클래스에 float-right 해준다. 예시) Bootstrap v4.0 <div class = "row" > <div class = "col-12" > One <input type = "button" class = "btn float-right" value = "test" ></div> <div class = "col-12" > Two <input type = "button" class = "btn float-right" value = "test" ></div> </div> 참고 링크 https://getbootstrap.com/docs/4.0/utilities/float/#responsive https://stackoverflow.com/questions/15446189/how-can-i-get-my-twitter-bootstrap-buttons-to-right-align

레일즈에서 sql 파일을 db에 넣는 방법 (how to insert(add) sql file to database in rails)

레일즈에서 sql파일을 db에 넣고 싶다면? 커맨드에 아래와 같이 입력하면 된다. 파일 경로를 모른다면 Rails root 에 넣고 하면 되고, 파일 경로를 안다면 파일 경로를 지정해준다. bundle exec rails db < 파일이름 . sql 참고 링크 :  https://stackoverflow.com/questions/8342642/how-can-i-import-a-sql-file-into-a-rails-database

html 띄어쓰기 (html space)

html 에서 띄어쓰기를 하고 싶다면, &nbsp;

stimulus.js 사용기 - action(click event, global event like document, window.resize)

stimulus.js 를 사용해봤다. Rails 에서는 javascript 폴더 안에 controller 폴더를 만들고 xxxxx_controller.js 라는 js파일을 만들어 사용한다. import { Controller } from "stimulus" export default class extends Controller { functionName(){ } } 그 다음 위와 같이 js 파일을 구성하고 사용한다. 이제 이걸 사용하는 방법은 아래와 같이 사용한다. 아래에서의 gallery 는 위의 xxxxx이고 click은 trigger고, gallery#next 는 xxxxx_controller.js 에 정의해놓은 함수(위 사진에선 functionName같은)이다. 좀 더 쉽게 설명하면 클릭하면 xxxxx_controller 파일의 functionName() 함수를 호출해라와 같은 것이다. < div data-controller =" gallery " > < button data-action =" click->gallery#next " > … </ button > </ div > click이 아닌 "window의 크기가 변화하면, 문서가 준비되면" 같은 global event도 사용할 수 있다. < div data-controller =" gallery " data-action =" resize@window->gallery#layout " > … </ div > 위의 예제는 window의 크기가 resize되면 함수를 호출하는 것 아마 ready@document 와 같은 것도 되지 않을까 싶다. 라고 썼었는데 해보니 안됨 load@window 로 하면 됨 ... jQuery는 안되는건가...

테이블을 모바일 뷰에서 보여주는 방법 how to show table in mobile view(control responsive table)

이미지
table .. PC일 땐 참 좋은데 이게 모바일에선 보기 좋지 않다 .. 그럼에도 모바일에서도 보여줘야 한다면 어떻게 해야 할까? 라는 고민에 답. 1. Bootstrap과 같은 라이브러리를 이용해 반응형 테이블을 사용한다. 부트스트랩 table-responsive 관련 링크 :  https://getbootstrap.com/docs/4.4/content/tables/ 이 table-responsive를 조금 더 자유자재로(생각대로) 사용하고 싶다면 다음 링크를 참고하면 좋다. 참고 링크 :  https://mdbootstrap.com/docs/jquery/tables/responsive/ 2. jQuery를 이용해서 모바일의 경우에는 따로 처리해준다. 해당 함수는 화면의 크기가 바뀔 때마다 그걸 감지해 함수를 호출한다. $( window ).resize(function(){ }); 따라서 아래와 같은 코드를 이용하면 모바일일 때 div 값을 삭제, 추가 등의 함수를 불러와 보다 자유롭게 모바일 화면을 구성할 수 있다. $( window ).resize(function(){     var windowWidth = $( window ).width     if( windowWidth < 500 ) {        // width값이 500 미만일 때     } else {        // width값이 500 이상일 때     } }); 참고 링크 :  https://kkotkkio.tistory.com/52

맥에서 숨겨져 있는 파일 확인하는 방법 macOS (How to find hidden file in macOS)

이미지
파인더를 열고 command + shift + . 을 누르면 숨긴 파일이 보임(다시 숨긴 파일을 안보이게하려면 다시 한 번 눌러주면 된다.

macOS 맥 터미널에서 폴더 여는 법

이미지
terminal.app(터미널)에서 open .   을 치면 현재 터미널의 위치에 있는 폴더가 파인더로 열림.