[2편]jQuery 입력 태그 값 Value GET/SET

jQuery는 Dom을 조작하는데 매우 편한 라이브러리 인데요. 오늘은 input 태그와 select 태그의 value 값을 가져오는 .val() $('선택자').val(); 예제를 통해서 한번 알아보도록 합시

→2021.08.05

[1편] jQuery 라이브러리 연동 및 ready() 이해

CDN 방식 연결 해당 코드를 태그 사이에 넣습니다. html에서 자바스크립트가 읽히는 순서는 위에서 아래로 순차적으로 작동합니다. 아래 소스를 실행시키면 상단 - 중단 - 하단 순으로 alert() 창이 뜨는것을 볼 수있습니다. hello world! hello world! hello world! hello world! 하지만 ready() 메소드를 사용하면 스크립트가 위에서 아래로 실행되자만 ready() 로 감싼 부분은 맨 마지막에 실행되게끔 합니다. hello world! hello world! hello world! hello world!

→2021.08.04

개발/Javascript

[1편] Vanila Javascript 퀴즈게임 만들기

안녕하세요. 제가 Javascript를 공부하면서 제일 좋았던 방법으로 만들면서 습득하기를 첫번째로 퀴즈게임 만들기를 선택해 보았습니다. 해당 프로젝트를 통해서 습득할것들은 typescript, 이벤트 리스너, ES6 Class, Dom Selector, 비동기, Timer, 함수등 자바스크립트의 종합적인 문법들을 사용할꺼같습니다. (typescript 사용여부는 추가 프로젝트 셋팅준비후 수정하도록 하겠습니다) 자바스크립트 퀴즈게임 기능명세 처음화면 Start버튼, 클릭시 시작 Your Time (hh:mm:ss) 형태의 스톱워치 작동 단어가 나오며 해당 단어를 따라서 타이핑친다. 엔터를 치면 정답 제출 틀린 글자가 있다면 input에 validation 붉은색 out-line표시 각 문제를 통과하면 점..

→2021.08.02

개발

개발자 맥북 M1칩스 괜찮을까?

많은 유튜브에서 m1칩스를 장착한 맥북 프로에 찬사를 보냈다. 확실히 가격대비 성능은 정말 흠 잡을곳이 없어보인다. 물론 나는 사용하지 않아봤다. 주변의 많은 이들로부터 사용해본 주관적인 이야기들은 다들 가성비가 좋다는 얘기를 많이 들었다. 성능적인 측면에서 기존의 인텔칩보다 m1칩스가 안좋다는건 객관적인 수치들만 보더라도 m1칩스가 뛰어나다는것을 부정하지 못한다. 하지만, 나는 직업이 개발자이며. 무엇보다 1세대 제품을 선호하지 않는다. 안정적인 측면에서 마치 언제 터질지 모르는 시한폭탄을 가지고 다니는 것과 같은 리스크를 가지기 때문이다. 한때 m1칩스 라인 제품들이 나오면서 같은 라인 계열의 인텔 맥북은 감가상각을 심하게 당했기에, 유일하게 나오지 않았던 현재 사용하고있는 맥북 프로 2018 16인..

→2021.07.28

개발

모듈화 도구 웹팩 5 설정 하기

최근 vanila javascript 미니 프로젝트관련해서 스터디 그룹에서 그룹장 역활을 진행중에 있는데 항상 프로젝트를 CRA나 세팅되어있는 보일플레이트등을 사용해서 밑바닥부터 웹팩을 아주 초창기 웹팩3 정도때 만져보고 만질일이 없었다. 그러다 최근 kakao 책검색 API 를 활용한 도서 검색 서비스 웹어플리케이션을 만들게 되어 webpack-dev-server를 활용해서 dev환경 설정을 해야 했다. 이전까지 프로젝트는 parcel을 사용해서 아주 빠르게 미니 프로젝트들을 수행했는데. 이번에는 웹팩5를 사용해서 환경세팅을 해보고자 했다. parcel로 빠르게 세팅해도 되었는데 ,이유는 그냥 내 자신을 혹사시키고 싶었다.(??) 무튼 webpack 5 설정을 해보기위해 인터넷 검색을 했다. 많은 글들..

→2021.07.26

개발/Javascript

yarn 명령어 정리

yarn yarn 은 javascirpt 의 package manager 이다. npm 의 drop-in substitute 로 사용할 수 있는 점이 초기 도입에도 큰 장점이다. 패키지 설치 속도가 더 빠르고, 패키지 설치과정에서 패키지가 code를 running 하지 않도록 하여 더 보안상 안전하다. 또한, 같은 package.json 에 의존하는 두개의 서로 다른 환경이 서로 다른 버전의 패키지 의존성을 가지는 것을 방지하기 위해, 버전의 range 가 아닌, 정확한 버전을 명시한 yarn.lock 파일을 사용한다. 주요 # npm install yarn install 또는 yarn # npm i --save yarn add # npm i --save-dev yarn add --dev : --dev ..

→2021.07.22