본문 바로가기
반응형

Programming161

스크롤 반응형 헤더, 스크롤 반응형 탭(네비게이션), responsive nav, sticky tab 오늘은 새로운 요청이 있어 진행했던 UI 수정에 대해서 글을 써보려고 합니다. 1. 스크롤을 내리면 잠시 가려지고, 스크롤을 올리면 다시 나타나는 헤더 2. 스크롤을 내리다가 일정 스크롤에 도달했을 때, 그 때 부터 지정 위치에 들러 붙는 sticky nav See the Pen Header hide on scroll, Sticky nav by Junmannn (@Junmannn) on CodePen. 구분을 쉽게 하기 위해 header는 id 로 div에 두어, css 상에서 #header 정리 부분을 보시면 됩니다. sticky는 class로 두어 css 상에서 .sticky 를 보시면 됩니다. 스크롤에 다라 반응하며 보였다 사라졌다를 반복하는 헤더, 위치가 고정되었다가, 움직였다가 하는 방식을 알아.. 2022. 7. 25.
달력 뷰 만들기, fullcalendar 사용하기, 일정 달력 만들기, 캘린더 만들기 The Most PopularJavaScript Calendar - FullCalendar 오늘은 우리가 자주 사용하는 달력 앱들을 웹에 만드는 작업을 해보려고 합니다. 이를 위해 우리는 fullcalendar 이라는 것을 사용할 것입니다. 가장 일반적인 프레임워크인 React, Vue, Angular 전용 방식이 따로 존재하며, 일반적인 HTML에서 곧장 사용할 수 있는 방법 또한 있으니, 천천히 따라해볼게요. 어떤 환경에서도 사용을 할 수 있도록 HTML 에서 태그를 이용하여 캘린더를 사용해 보겠습니다 우리가 만드려고 하는 결과물 이를 사용하는 데에는 다른 라이브러리 처럼 유료버전, 무료버전이 있습니다. 무료버전만 사용해도 캘린더 뷰를 전혀 무리없이 사용을 할 수 있으며, 사용 방법도 간단합니다. F.. 2022. 7. 24.
html 숫자 3자리씩 자르기, 단위 붙이기 (만, 억, 조) 앞서 전화번호 입력시, 자동으로 하이픈 (-)을 넣어주는 기능을 만들어 두었었죠. 이번에는 돈에 대해서 문자열 파싱을 하는 기능을 공유할게요. 필요하실 때마다 가져다 쓰세요. 어려운 기능 전혀 없습니다. 그래도, 아직 html 을 변형하는 것이나, js 에 익숙하지 않아 설명이 필요하시거나 질문이 있으시면 언제든 댓글 주세요. See the Pen Untitled by Junmannn (@Junmannn) on CodePen. rails 를 예를 들어 다른 방법을 볼게요. 다른 문법에서도 방법은 동일합니다. 저는 숫자를 문자열로 형변환을 한 후, 3개씩 끊어 콤마(,) 를 추가해주는 방식을 했습니다 number = 123490481239 number.to_s.reverse.gsub(/(\d{3})(?=\.. 2022. 6. 14.
Html 전화번호 자동으로 - 하이픈 생성 알아두면 (어디 저장해 놓고 필요시마다 가져다 쓰기) 정말 편한 전화번호 자동 변환 코드 하나 공유드리고 가겠습니다. 괜히 헷갈리시지 않게 기교 없이 코드만 알려드리고 갈게요. 해당 코드는 최소화한 코드로, js 따로 두지도 않고, HTML 상에 입력을 할 때에 ui 도 키보드같은 전체 자판 ui에서 → 핸드폰 숫자패드같이 개선하고 싶다면 아래의 포스팅을 확인해주세요 ~ https://kyurasi.tistory.com/entry/%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%97%90%EC%84%9C%EC%9D%98-input-%EB%B2%88%ED%98%B8-%EC%9E%85%EB%A0%A5-ui-%EB%B0%94%EA%BE%B8%EA%B8%B0 모바일에서의 input 번호 입력 ui 바꾸기.. 2022. 6. 9.
(해결 방법) rails devise sign_up 오류 devise sign up error Rails 에는 정말 많은 gem 들이 있습니다. 이 중 웹사이트를 개발할 때에 가장 많이, 그리고 가장 기본적으로 사용이되는 회원 관리 부분을 볼 것입니다. Admin을 이야기 하는 것이 아니라, 회원 가입, 로그인, 로그아웃 등을 구현할 것입니다. 여기서 많은 오류들을 만나게 될텐데, 천천히 잘 따라만 오시면 됩니다 로그인, 회원가입 페이지 만들기 1. blog 라는 이름의 프로젝트를 생성할 것입니다 $ rails new blog 2. Devise 라는 회원가입, 로그인 기능 gem 을 설치합니다 $ bundle add devise 3. 번들을 추가 했으니 설치를 합니다 $ rails g devise:install 4. User 라는 이름으로 devise 만들되, 저는 추가로 role(권한) 필드를 .. 2022. 5. 24.
(해결) LoadError: cannot load such file -- sass Ruby on rails 개발 중 admin 페이지를 함께 만들기 위해 devise 라는 gem과 activeadmin 이라는 gem 을 설치했습니다. 그런데 bundle install 을 하고 다시 서버를 보았더니 LoadError: cannot load such file -- sass 이런 문구가 떳습니다. 당황하였지만, 여러 해결 방법을 찾아본 결과 예전 버전들에서는 없었던 오류가 rails 버전이 높은 것을 사용했더니 나더군요. 해결 방법 gem 'sass-rails' 해당 잼을 추가하고, bundle을 한 후 서버를 control + c 로 종료한 후 rails s 로 다시 켜봤습니다 잘 뜹니다! sass-rails 를 사용하니 오류가 있다던 파일이 잘 돌아갔습니다. 다른 파일을 수정할 것이 아.. 2022. 5. 19.
루비 온 레일즈 rails Gem 설치 다운로드 방법 오늘은 Gem 을 안전하게 다운받는 방법을 함께 포스팅을 할게요 일단 Gem을 왜 사용하느냐. 이 부분은 rails를 왜 사용하느냐 문제와도 정말 연관이 있습니다. Gem 을 사용하면 정말 말도 안되게 빠른 속도로 개발을 할 수 있거든요. rails 에는 1. 게시판 만들기 → Scaffolding 2. 페이지네이션 구현 → Kaminari 3. 이미지 업로드 구현 → Carrierwave 4. 회원가입,로그인 구현 → Devise 5. 회원 권한 구현 → CanCanCan 등등 가져와 설치만 하면 페이지와 기능, 라우팅등에 관련한 모든 코드들을 자동으로 작성해주고 가져와주거든요. rails를 사용하면 Gem 을 모르는것은 정말 음.. 좀 곤란해요. 일단 가장 많이 쓰이는 Gem 중 하나인 devise .. 2022. 5. 19.
(해결) ActionController::InvalidAuthenticity Token 오류 Mysql2::Error: Field 'id' doesn't have a default value 오류 오류 내용 Ruby와 mysql을 연동하여 개발을 하던 도중, Authenticity Token def handle_unverified_request raise ActionController::InvalidAuthenticityToken end post 'reply/create/:post_id' => 'main#reply_create' 제가 하려던 코드는 절대 어려운 코드는 아닙니다. 코드의 내용은 그저 reply/create/1 과 같이 이러한 주소로 가 바로 create 를 하면 되는 것이었습니다. def handle_unverified_request raise ActionController::InvalidAuthenticityToken end 그런데 이러한 녀석을 만나게 된 것이었습니다. 해결 방법.. 2022. 5. 18.
<a> 태그 후 float 스타일 사용시 겹침, div 요소 오른쪽 정렬 1. 나는 버튼을 만들고 있었다. 그리고 해당 버튼을 화면에서 오른쪽 끝으로 보내고 싶어졌다. 버튼에는 를 넣을 생각이다 2. 버튼을 만들고 난 후 분리선을 이용하여 구분을 짓고 싶었다. Write a post 코드로 본다면 float:right -> 요소를 오른쪽으로 정렬을 해라 라는 코드를 분명히 사용을 했습니다. class 는 따로 작업을 하여 자체가 버튼처럼 보이도록 커스터마이즈를 한 상태이고 로 깔끔하게 구분선을 그었는데 아니 그런데 이게 무슨 일인가ㅠㅜ 선이 버튼을 가로질러버렸네요.. 여기서 당황하지 않고 의 style 에 margin-bottom : 20px 도 넣어보고 태그와 태그 전에 을 넣어 줄바꿈도 추가를 해 보았지만 상황만 악화시킬 뿐이었습니다. 여기서 아주 간단한 것으로 모든것은 .. 2022. 5. 17.
깃허브에 기존 프로젝트 연결하기, 올리기 사이드 프로젝트 혹은 프로젝트를 새로 하려고 프로젝트를 만들었는데, 로컬로만 두기도 아깝고, 버전 관리나 롤백도 하고 싶어 깃헙에 올리고 싶어졌습니다. 그렇다면, 내 노트북이 깃헙과 연결이 되어있다는 가정 하에 포스팅을 진행하겠습니다. 방법은 여러가지가 있지만, 가장 쉽고 많이 쓰이는 방법으로 진행을 하겠습니다. 저는 깃랩을 주로 사용하지만, 깃허브와 크게 다를 것은 없습니다 프로젝트 자체를 처음 만들 때에 sudo 명령어를 사용하면 이후에 해당 폴더에 대한 권한들이 꼬일 수 있으니, 정말 써야 하는 때가 아니면 sudo를 남발하는 일은 없도록 합시다1. 깃허브로 들어가 화면 좌측에 New 버튼을 눌러 저장소를 하나 만들어 줍니다.선택이지만 저는 README 파일을 추가했어요. 혼자 공부할 때에, 저는 .. 2022. 5. 9.
vscode erb파일 자동완성 설정하기 새로운 언어로 개발을 시작하려고 하면 아무래도 손에 많이 익었고, 코딩 속도를 높여줄 vscode 의 자동완성 기능을 찾게 됩니다. 저는 일단 가독성을 위해 자동 줄맞춤까지는 하지 않습니다. 거두절미하고, ruby 에서 .rb 파일은 루비 문법을 따라가고, .erb 파일은 html 문법을 따라갑니다. 태그는 루비 문을 '실행' 시킬 수 있고 태그는 루비 문을 '출력'시킬 수 있다. 기본적으로 .erb 파일은 html의 문법을 따라가기에 등등 태그를 사용하는데, 일반적으로 html 자동완성을 사용하였더라도, 자동완성 기능은 여기서 먹히지 않아요. 그렇다면 바로 설정으로 이동하시죠 1. 비주얼스튜디오를 켜고 설정으로 이동합니다 2. settings.json 을 엽니다 3. 다음과 같은 설정을 추가해줍니다 ".. 2022. 5. 3.
Ruby on rails 맥북 설치하기 이직을 하며 ruby on rails를 사용하게 되었습니다. 새로운 기술을 사용하게 되면서 환경세팅을 하고, 개발을 해 나가며 앞으로 루비에 관련된 글을 더 쓰게 될 것 같습니다. 1) 맥북을 사용하여 개발을 할 때에는 homebrew의 미친듯한 편리함을 사용합시다 brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh terminal : 복붙하라는 저 부분을 복붙한다. 시간 좀 걸림... 개발 환경을 bash 에서 zsh 로 변경한다. (어지간하면 개발 환경을 이렇게 함) terminal : brew install zsh brew는 homebrew를 사용하는 명령어임. terminal : which zsh 위.. 2022. 5. 2.
반응형

티스토리툴바