개발 썸네일형 리스트형 Rails에서 Vue에 데이터 전달하기 레일즈에서 Vue로 데이터를 전달해야 할 순간이 있습니다. 그런데 레일즈의 뷰 템플릿 엔진으로는 Vue를 바로 다룰 수가 없기 때문에(제가 모르는 걸 수도 있어요..ㅜㅜ), 값을 전해주기가 조금 힘듭니다. 이럴 때 Vue에게 값을 전달하는 방법을 몇 가지 적어보려고 합니다. HTML의 data속성을 사용해 전달 HTML에는 data라는 속성이 있습니다. 간단한 데이터를 넘길 때 편리합니다. 그치만 위의 링크에도 언급이 되어 있듯 성능이 그다지 좋은 편은 아니라고 하니, 다량의 데이터를 넣는 것은 좋지 않아 보이네요. 아직 Vue가 익숙하지 않아 생각보다 구현에 좀 애를 먹었는데요ㅜㅜ 이렇게 하면 됩니다. # controller def index @user_name = current_user.name en.. 더보기 Ruby default gem 삭제하기 어느 날 Rails를 구동시켰더니 bundler의 버전이 낮다며 업데이트 하라는 문구가 보였습니다. 이미 최신 버전을 쓰고 있는데 자꾸 에러가 떠서 찾아 보니, 로컬에 설치되어 있는 bundler가 문제인 듯 보였습니다(rbenv를 사용하고 있습니다). 그런데 bundler을 지우려고 했더니 default gem이라 삭제가 안 된다네요. 열심히 인터넷을 돌고 돌아 지울 수 있는 방법을 찾아 냈습니다. bundler의 버전 확인 % gem list | grep bundler bundler (default: 2.1.2)default라고 써 있는 버전이 문제였습니다. default버전 삭제 % cd ~/.rbenv/versions/[루비 버전]/lib/ruby/gems/[루비 버전]/specifications.. 더보기 Bundler MYSQL2 설치 중 에러 해결하기 개인 프로젝트를 위해 프로젝트를 생성하고, mysql2를 설치하기로 했습니다. 그런데 자꾸 에러가 뜨네요. current directory: /Users/hee/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/mysql2-0.5.3/ext/mysql2 make "DESTDIR=" compiling client.c client.c:787:14: warning: incompatible pointer types passing 'VALUE (void *)' (aka 'unsigned long (void *)') to parameter of type 'VALUE (*)(VALUE)' (aka 'unsigned long (*)(u.. 더보기 VSCode에서 solargraph를 업데이트 하라고 계속 뜰 때 Ruby로 개발하면서 VSCode의 solargraph기능은 정말 편리합니다. 그런데 어느 순간부터 계속 업데이트하라고 안내 메시지가 나오는데, 업데이트를 해도 해도 계속 뜨더라고요. 최초에 설치했을 때 설치 위치가 잘못 지정되었던 것 같습니다. 해당 위치의 파일을 지우고 다시 설치하니 문제없이 사용이 가능했습니다. % solargraph -v 0.39.8 # 이 버전이 설치된 경로는 .rbenv/shims/solargraph % which solargraph /usr/local/bin/solargraph # 여기에 설치된 버전은 0.38.2 버전은 맞게 뜨는데 이상하게 경로가 제대로 안 뜹니다. 그래서 그냥 지워버렸습니다. % rm -rf /usr/local/bin/solargraph % sudo ge.. 더보기 Mac의 zsh에서 rbenv 사용하기 맥 버전이 10.15(카탈리나)로 바뀌고 기본 쉘이 zsh로 바뀌면서 여러 환경 설정을 바꿔 줄 필요가 생겼습니다.(어쩐지 안되더라..) 다룰 일이 없어서 이런 기초적인 부분에서도 한참 헤맸습니다. 1. rbenv를 설치 brew로 설치합니다. rbenv설치가 돼 있으면 생략합니다. ~ % brew install rbenv ruby-build 2. .zshrc 파일을 작성 후 불러오기 홈(~)에 파일을 작성해 줍니다. ~ % vim .zshrc # .zshrc export PATH="$HOME/.rbenv/bin:$PATH" eval "$(rbenv init - zsh)" # 저장 후 실행 ~ % source ~/.zshrc zsrhc같은 오타를 조심합시다. 3. 루비 설치 및 버전 설정 ~ % rben.. 더보기 Mac의 Firefox에서 '터치패드로 확대'기능 활성화 파이어폭스에서는 안 되지만, 크롬에서는 터치패드를 통해 페이지를 확대/축소하는 기능이 있습니다. command +/- 으로 확대할 수는 있지만, 이렇게 확대하면 레이아웃이 무너지거나 변경되는 문제가 있어서 잘 쓰지 않습니다. 회의 때 화면 공유를 하면 화질 때문에 글씨가 안 보이는 경우가 많은데, 맥 자체 확대 기능을 쓰면 화면이 안 보인다고 해서.. 참 난감합니다. 그런데 찾아보니 활성화할 수 있네요. 파이어폭스의 고급 설정 페이지에 들어간 뒤, apz.allow_zooming의 값을 true로 변경해 주면 사용이 가능해집니다. 더보기 Sourcetree에서 Permission Denied가 뜰 때 해결법 보안을 위해 SSL 인증을 설정한 뒤, 몇 번 푸시를 하다가 어느 순간부터 푸시가 안 되는 경우가 발생했습니다. Git CLI에서는 아무런 문제가 없었기에 당황스러웠는데요, 이에 대한 해결 방법을 찾아 여기에 적어보고자 합니다. SSH 인증에 문제가 있는 건 아닌지 확인하기 % ssh -T git@github.com Enter passphrase for key '/Users/hee/.ssh/id_rsa': # SSH키 비밀번호 입력 Hi hee! You've successfully authenticated, but GitHub does not provide shell access. 이 단계에서 Hi ***! 라는 응답을 받지 못했다면 Github에 등록된 SSH 인증이 잘못되어 있는 경우이므로, Gith.. 더보기 Vue-cli로 웹앱 생성 및 Github page 연동 오늘은 Vue CLI툴을 사용해 만든 페이지를 Github page로 올리는 방법에 대해 정리해 보겠습니다. 여기서는 페이지를 subtree로 올리는 방법을 다루겠습니다. subtree에 대한 보다 자세한 설명은 링크를 첨부합니다. 사실 저는 subtree로 관리하는 게 익숙하지 않아서 상당히 까다로웠지만, 개발 / 출시를 분리해 두는 것이 유지보수 측면에서도 편하기 때문에 저는 subtree를 사용했습니다. 1개의 브랜치만으로도 깃허브 페이지를 생성할 수 있습니다. (빌드한 페이지를 /docs경로에 넣으면 가능) Vue CLI로 프로젝트 생성 먼저 npm으로 vue-cli을 설치하고, 프로젝트를 생성합니다. ~ % npm install -g @vue/cli # 적당한 경로에 프로젝트를 생성 [folde.. 더보기 이전 1 2 다음
