본문 바로가기

웹 프로그래밍96

[JS] Scroll Down, 스크롤 제일 하단으로 움직이기 animate() 배경 클릭 할 때마다 하단에 새로운 입력폼이 생겨나도록 하고 싶었다. 그런데 폼이 생기긴 하는데 스크롤만 생기고 밑으로 내려가지 않아서 생겼는지 알 수가 없었다. 스크롤을 밑으로 내려주는 js를 쓰니, 너무 순식간에 움직여서 인지 하기도 힘들었다. 구현 따라서 animate를 이용한 스크롤 이동 이벤트 $("html, body").animate({ scrollTop: $(document).height() }, 500); 어디든 상관없이 해당 코드를 쓰면 될 것 같다. 따라서 내가 사용하게 된 코드는 // 클릭시 스크롤 제일 밑으로 $(".scrollDown").click(function(){ $("html, body").animate({ scrollTop: $(document).height() }, 50.. 2020. 5. 16.
[CSS] inherit, initial 이란? 크롬에서 css를 수정하다 보면 자동완성으로 inherit, initial이 자주 보입니다. 처음엔 몰랐지만 키보드 화살표로 돌려가며 써보니 가끔 유용할 때가 있어서 한번 알아 봤습니다. 1. inherit inherit은 부모 객체의 값을 가져오는 것입니다. 예시) https://www.w3schools.com/csSref/tryit.asp?filename=trycss_inherit Tryit Editor v3.6 span { color: blue; border: 1px solid black; } .extra span { color: inherit; } Here is a span element which is blue, as span elements are set to be. Here is a span.. 2020. 5. 15.
[JS] var, let, const 비교, 차이 ES6로 넘어오며 많이 사용하게 된 let, const의 차이를 몰랐는데 같이 일하는 동생이 쉽게 알려주어 저도 듣다보니 표로 간단히 정리해서 기억할 수 있지 않을까 해서 작성해봅니다. 기억하기 쉽게 작성하는 것이니 정확하지 않은 단어가 있을 수 있습니다. var let const 범위 전역 블록 내 블록 내 재선언 가능 불가능 불가능 재할당 가능 가능 불가능 var 같은 경우, 자유도가 높다. 다른 파일에서 사용한 변수를 그 페이지에 불러온다면 쓸 수도 있고, 재선언도, 재할당도 가능하다. var a = 1; var a = 2; // 가능 a = 3; // 가능 let은 조금의 제약이 있다. 선언 한 블록 내에서만 사용할 수 있다. 재선언은 불가능하지만 재할당은 가능하다. let a = 1; let a.. 2020. 5. 13.
[JS] input[type=input] 일 때, 글자 수 제한 숫자 코드를 4자리만 입력해야 하는 일이 있다. 혹은 휴대폰 인증번호 5,6 자리만 입력해야 한다. 이 때, maxlength를 사용할 수 있다. 그런데 이게 [type=text] 일 때는 잘 되는데 [type=number] 일 때는 되지 않는다. 그래서 js로 해결을 해 주어야 한다. 함수를 만들고 oninput으로 입력될 때 마다 실행시킨다. function lengthLimit4(e){ if(e.value.length > 4){ e.value = e.value.slice(0, 4) } } 해당 방법이 입력되는걸 가장 깔끔하게 막는다. 2020. 5. 7.
[JS] 체크박스 전체선택,해제 로직 만들기 (회원가입,마케팅 약관동의, 이용약관) 새로운 웹을 개발하게 되어 작업을 하던 중 회원가입에 들어가는 약관 동의 체크박스를 만들게 되었습니다. 그런데 그냥 체크박스만 하면 되는게 아니라 전체 선택 전체 해제 전체선택 후 하나만 해제했을 때, 전체선택도 해체 해주기 개별 선택으로 전체 다 선택되었을 때, 전체선택에도 체크 해주기 등 조건이 많았습니다. 이전에도 만든 일이 있었지만 또 헤매어서 이번 기회에 정리를 해보면 좋을 것 같아 작성합니다. jquery를 사용합니다. 결론만 알고 싶으시다면 마지막에 있습니다. 다만 많은 분들께서 내용이 좋다고 해주셔서 프론트엔드에 막 입문하신 분께서는 한번 찬찬히 읽어보시길 추천드립니다. 고민하는 과정을 기록해 놓았습니다. 예제 HTML 전체 동의 개인정보 처리방침 동의 서비스 이용약관 동의 마케팅 수신 동.. 2020. 4. 19.
[CORS] 가끔씩 겪는 CORS, 로컬에서 발생시 해결 배경 CORS 이슈를 가끔씩 겪는데 지금까지는 서버 구동중에 겪는 이슈라서 어찌저찌 검색으로 해결했다. 그리고 당연히 로컬에서는 안나올 줄 알았는데 PDF.js를 로컬에서 만들어 보려고 하는 순간 CORS가 걸려버렸다... 왜...? 인가 하고 보니 MissingPDFException.. origin이 null 이라고 한다. 해결방법 해당 부분을 긁어 검색해보니 velog 님의 블로그에 너무 친절하게 설명되어 있어서 내가 따로 설명하기보다 링크 연결을 해 드리는 편이 훨씬 보기도 좋고, 내가 나중에 볼 때도 이보다 더 자세히 설명한 자료를 보기 힘든 것 같아 공유한다. https://velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-po.. 2020. 4. 10.
[Node.js] PM2 서버 자동 실행 하는 명령어 및 방법 배경 EC2 스케줄을 맞춰놓아서 인스턴스는 잘 실행이 됐는데, 개발 서버에 접속해보니 안들어가졌습니다. 생각 해보니 인스턴스를 껐다가 키면 Node.js 서버는 그냥 죽어있다는 것... 그래서 인스턴스가 켜질 때 마다 Node.js 서버도 자동으로 켜지도록 만들어야 했는데 찾아보니 매일 보면서 지나갔던 명령어였습니다. 해결 과정 pm2 startup 그리고 그 자동시작 설정을 저장하기 위해 pm2 save 그런데... 생각대로 안됩니다. 개발 서버이기 때문에 process.env.NODE_ENV 를 development 로 실행시키기 위해 설정해놓은 파일을 실행시키기 위해 pm2 startup ecosystem.config.js 이렇게 실행을 했는데 음... 뭐... 잘 알아 들을 수 있는 건, just.. 2020. 4. 7.
[DB] 데이터베이스 기본 개념 데이터 베이스의 기본 개념 Data: 단순히 관찰하거나 측정해 수집한 값. Information: Data를 가공한 결과물. 의미 있게 쓸 수 있다. 데이터 베이스의 특성 실시간 접근 계속 변화 내용 기반 참조 동시 공유 데이터 베이스 설계시 같은 내용의 데이터가 여러 파일에 중복 저장되면 안된다. (데이터 일관성, 무결성을 유지하기 어려움, 저장공간의 낭비) 종속성 고려. 데이터 베이스의 세대 1세대: 네트워크 DBMS, 계층DBMS 2세대: 관계 DBMS(Oracle, mysql, Access) 3세대: 객체지향, 객체관계 DBMS (O2, ontos, gemstone) 데이터 베이스 구조 스키마: 데이터 구조와 제약조건을 정의한 것 인스턴스: 스키마에 따라 저장된 값 3단계 외부단계 개념단계 내부단.. 2020. 4. 4.
[Bracket] Bracket 에디터, 단축키 및 단축키 변경하기(keymap) 집에서 혼자 개발 할 때는 VS를, 회사에서 일 할때는 통일성을 위해... 차이는 모르겠지만 그래달라는 부탁을 들어서... Atom을, 또한 회사에서 빠르게 UI 변경을 보기 위해 Bracket을 사용중이다. Atom에도 실시간으로 반영해주는 패키지가 있긴 한데, Bracket을 먼저 사용하기도 했었고 적응해놓아서 Atom에서 사용하는게 연결도 느린 것 같았고 귀찮았다. 어쨌든, Atom이나 Bracket이나 여러 에디터에서 단축키가 다 다르다. Bracket의 단축키를 내 손에 익은 단축키로 바꾸기 위해 알아봤다. 상단 메뉴 바 - 디버그 - 사용자 키맵 파일 열기를 클릭한다. overrides 안에 아무 내용도 없다. 적어주자. 이때 참고할 수 있는 doc은 저기에 있는 주소다. https://git.. 2020. 4. 1.

티스토리툴바