본문 바로가기
반응형

JS9

screen.height로 모바일 웹뷰 단말 창크기 구하기 #2159 요구사항은 다음과 같았다. 화면이 작은 단말에서 메뉴를 하나라도 더 보여주기 위해 스크롤 시 상단 일정 영역을 올렸다 내렸다 하는 UI였다. 해당 요구에 대한 구현은 다음과 같은 코드로 해결을 했었다. 이걸 해결한 것 까지는 좋았는데 실제로 개발에 적용하면서부터 문제가 생기기 시작했다. 모바일 대응에 Portrait만 신경쓰면 되었기에 혹시 모를 스크롤 영역에 대한 대비책으로 단말 크기를 체크해서 고정시켜두려고 했었다. 스크롤 영역이 단말기 크기마다 상이한 관계로 가변인 만큼 영향도가 없는 상단 고정 영역에 대한 높이 값을 가지고 있어야 조절이 가능해서 스크립트는 필수적으로 적용시켜야 했다. 윈도 창 높이 값을 가장 쉽게 구하는 방법은 jQuery를 사용하여 height를 구하는 방법이겠지만 .. 2021. 10. 31.
모던 자바스크립트 핵심 가이드 #2129 기본적으로 초급자에서 중급자로 넘어가는 단계를 주요 대상으로 삼고 있어 선수 지식의 수준에 따라 책을 재미있게 읽을 수 있을 것 같다. 이제 막 깨우친 것들에 대해 다시 복습하는 효과를 느낄 수 있을 테니까. 단점이라면 앞서 언급한 것과 같이 선수지식이 없는 상태에서 이 책을 접하면 별로 좋은 경험을 할 수 없을 것 같다. 이제 자바스크립트를 시작한 사람보다는 기본적인 자바스크립트에 대한 이해를 기반으로 자바스크립에 대해 전체적인 개념을 잡기에 좋은 책이라 생각되었다. 각 챕터가 길지 않게 구성되어 있어 따라 하기에도 부담이 덜하고 간단히 배운 것을 복습할 수 있는 수준의 문제가 몇 개씩 있어 학습 효과도 나쁘지 않다. 책이 작은 편이고 두껍지 않기에 가지고 다니면서 보기에도 부담이 별로 없다.. 2021. 6. 16.
Object.assign(), Spread Operator #2114 자바스크립트를 공부 중이다. 그동안 눈에 잘 들어오지도 머리에 남지도 않았었는데 어떤 형태로든 아웃풋을 남기는 것이 기억에도 남고 좋을 것 같아 공부의 흔적을 남기려는 것이 목적이다. Object 이번에 공부한 내용은 객체에 대한 내용이었다. 어디에 사용하는 게 좋을지는 현시점에선 잘 모르겠고 착각일 수도 있지만 방법은 약간 이해가 된 것 같다. See the Pen 20210130_01 by minamiland (@minamiland) on CodePen. 기본적으로 객체는 복사하면 똑같다 [1] obj1에서 사용되는 객체가 있고, [2] obj2에 obj1을 대입하면 둘 다 동일한 값을 가지게 된다 [3]. 이때 [4] obj2에 다른 속성을 부여하면 간단히 생각하면 obj2 만 바뀔 것 .. 2021. 2. 1.
지금까지 결실 없이 책만 사날리고 있었다 #2110 문득 책장을 정리하다 부끄러운 생각이 들었다. 계속 반성하게 만드는 치부의 흔적을 보고 새삼 느꼈다고 할까. jQuery까지 포함해서 이것들보다 더 많은 JavaScript 관련 서적이 책장에 즐비하다. 이렇게나 많은 책들을 봤다면.. 벌써 꽤 다루는 전문가 수준에는 도달하지 않았을까 싶지만... 항상 읽다 말고 읽다 포기하기를 반복하면서 시간을 보내고 있었다. 이 중에서 그나마 끝까지 읽어보기라도 한 건 한두권 정도일 듯.(읽어 보기만 하고 머릿속에 남아 있지 않으니..) 입문서를 통해 익히려다 너무 지루한 내용에 나가떨어지고, 책이 두꺼워서 문제라 여기며 얇은 책도 골라보고 예제도 따라 해 보지만 결국은 읽어도 읽어도 개념도 잘 잡히지 않고 몇 번을 비슷한 부분에서 포기하기를 반복하고 이 .. 2021. 1. 24.
혼자 공부하는 자바스크립트 #2102 혼공(혼자 공부하는) 시리즈 우선 혼공 시리즈는 책의 판형이 큰 것을 알 수 있다. 혼자 공부하기 좋은 책이라는 콘셉트로 되어 있고 가지고 다니면서 보는 크기는 아닌 것 같다. 판형이 큰 만큼 자간과 행간 등에 여유가 있어서 페이지를 보는 동안 지루함이 적은 것을 느낄 수 있었다. 혼자 공부하는 자바스크립트는 초보나 입문자용 근래의 자바스크립트(ES)가 5에서 6으로 올라가면서 var 사용을 가능한 자제하고 조금 더 논리적인 개발이 가능하도록 상황에 따라 const나let을 사용하도록 권유하고 있는데 혼자 공부하는 자바스크립트에서는 ES6를 기준으로 입문자에게 교육을 시켜준다. 앞서 말했듯이 전체적으로 큰 판형을 활용하여 한 페이지에서 다루는 정보의 양을 조절하고 있기 때문에 페이지 수도 그만.. 2021. 1. 6.
자바스크립트 코딩의 기술: 똑똑하게 코딩하는 법 감상 소감 #2031 코딩의 기술 몇 권의 자바스크립트 책을 읽었지만 개념적인 부분이 항상 모자라고 예제를 따라 해도 그때뿐인 경우가 많습니다. 실제 자바스크립트 코딩을 하는 데 있어 ES6를 똑똑하게 코딩할 수 있다고 합니다. 열심히 읽어 봐야겠죠? 저에겐 똑똑하게 코딩하는 방법이 필요합니다. 좋은 방법을 접할 수 있기를 기대합니다. 책의 구성 변수 할당으로 의도를 표현하라 배열로 데이터 컬렉션을 관리하라 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 조건문을 깔끔하게 작성하라 반복문을 단순하게 만들어라 매개변수와 return 문을 정리하라 유연한 함수를 만들어라 클래스로 인터페이스를 간결하게 유지하라 외부 데이터에 접근하라 컴포넌트 아키텍처를 이용해 관련 파일을 모아라 책은 이상의 10가지 주제로 나누어져 있.. 2020. 4. 2.
RWD의 메뉴를 지원하는 스크립트 - menu-breaker.js RWD의 대응이 가능하며 트리메뉴 구조도 지원하는 menu-breaker.js RWD를 지원하는 만큼, 당연히 데스크탑이나 모바일을 지원합니다.Github페이지는 이쪽 > https://github.com/JB1905/menu-breaker.js샘플 페이지는 이쪽 > https://jb1905.github.io/menu-breaker.js 2018. 4. 24.
가벼운 툴팁용 스크립트 - Tippy.js Tippy.js는 Vanilla.js 를 기본으로 하는 툴팁용 스크립트로 툴팁과 관련된 기능이라면 다 있다고 보여질 정도로 풍부한 기능을 제공하고 있습니다.HTML을 사용하는 방식이나 애니메이션은 물론이고 AJAX 를 사용한 툴팁도 가능합니다. - CodePen Demohttps://atomiks.github.io/tippyjs/ 2018. 4. 20.
초보자의 눈위치를 고려한 착한 입문서. 처음 만나는 자바스크립트를 읽었다 #18.009초보자를 위한 JavaScript 서적.초보자, 입문자에게 개인적으로 추천할만한 책이라는 느낌이 들었다. 용어가 생소해서 잘 잡히지 않던 개념을 이해하는데 많은 도움을 받을 수 있었다. 분명히 어디선가 보고 많이 들었고 내손으로 타이핑을 해보면서 접했던 부분인데도 잘 기억에 남지 않는 명칭이 이 책을 보면서 쉽게 다가왔다. 아직도 이해를 다 하려면 멀었지만..console은 'test'를 log해라. 어째서 지금까지 이 간단하다고 느껴지는 것들인데 머릿속에 들어오질 않고 있었을까..지금 돌이켜 보면 메서드, 매개변수, 프로퍼티 같은 단어가 단순한 것을 어렵게 만드는 주요 원인은 아니었을까 추측해 볼 뿐이다. 아직도 100% 정확하게 이해를 한것은 아니지만 뭔가 끈의 끄트머리를 잡은 느낌이다... 2018. 2. 19.
728x90
반응형