YoonDev

Toggle? 토글이란 두가지 상태 값을 가지고 있으며 동작 시 다른 값으로 전환되는 것을 말한다. 이를 이용해 토글 형식의 사이드 메뉴를 만들어봤다. 관리자 페이지를 만드려고 간단하게 작성한 코드이다. 처음엔 depth2의 메뉴가 접혀있도록 하기 위해 display 속성을 none으로 지정해줬다. 토글 기능이 적용된 부분은 34~49LINE이다. 리스트 형식이며 depth를 1, 2로 나눴고 36LINE의 a태그를 보면 알 수 있듯이 depth1의 메뉴를 클릭하면 함수를 호출하는데 특정 id 값을 파라미터로 넣어 클릭한 메뉴에 대해서만 이벤트가 발생하도록 하였다. 먼저 특정 id를 가진 요소의 다음 요소를 가져오는데 이 요소는 depth2가 될 요소인 을 가져온다. 이 요소를 animte함수를 이용하여..

prototype? prototype은 원형, 초기 형태라는 의미를 가지고 있는데, 자바스크립트에서 prototype은 유전자라고 생각하면 된다. 어떤 한 객체의 prototype을 조회한다고 하면 객체가 가지고 있는 변수나 함수같은 것이 조회가되어 그 객체가 어떤 속성을 가지고 있는지 확인할 수 있다. 객체의 부모, 자식 관계 위 스크립트 코드는 userInfo객체를 생성하여 그 안의 속성을 정의한 후, callUserInfo에 userInfo객체를 할당하여 자식 객체를 만들어 그것을 로그로 찍은 코드이다. 부모객체인 userInfo를 상속 받은 callUserInfo를 로그로 찍어보면 아래의 결과를 볼 수 있다. 이처럼 자식 객체는 부모 객체의 속성을 접근할 수 있다는 것을 알 수 있다. 이를 이용해..

LocalStorage와SessionStorage의 큰 차이는 영구성. LocalStorage는 사용자가 지우지 않는 이상 계속 유지되는 저장소 사용 용도 예시) 자동 로그인을 위한 아이디, 비밀번호 정보 저장 SessionStorage는 사용자가 윈도우나 브라우저 탭을 종료하면 사라지는 저장소 사용 용도 예시) 일회성을 위한 정보 세션 스토리지를 공유(유지)하게 해주는 라이브러리 https://gist.github.com/zbinlin/f6fe2a6ffe401b90736c38058f7a306e shared session storage shared session storage. GitHub Gist: instantly share code, notes, and snippets. gist.github.com..

Byte 대부분의 컴퓨터 시스템에서, 8 비트 길이를 가지는 정보의 기본 단위를 바이트라고 한다. 영어와 숫자 그리고 특수문자(아스키 문자표에 있는) 등의 경우 한 글자를 표현하는데 1 바이트가 필요하지만, 한글이나 한자 등은 한 글자를 표현하는데 2 바이트가 소요된다. 입력 기능을 만들면서 글자 수 제한 기능을 만들 때 예를 들어 Input 태그의 maxLength 속성을 주어 지정한 글자 수를 넘으면 더는 입력 불가하도록 만들 수 있지만, 더 정확하게 Byte를 체크하여 서버나 DB에 고려하는 것도 좋은 방법이다. 옛날 브라우저에서는 입력 폼을 전송할 때 한글일 경우100타, 영어일 경우 200타까지만 전송한다고 한다. 위 함수 처럼 문자열을 가져와서 한 문자씩 검사하는 것이다. escape함수를 이..