Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

javascript 9

웹 프로그래밍/공부일지
[ React ] 시작전 알면 좋을 Javascript 문법

리액트 매번 혼자 끄적이다가 생각보다 감이 잘 안오고 게을러서 그런지 매번 시작을 안하고 있다가 이번에 강좌를 구매했다 :) 리액트 시작전 알면 좋은 Javascript 개념 몇가지를 정리해 놓으려고한다 🙂 화살표 함수 [ 기존 ] function sayHello ( name ) { return name; } [ 화살표 함수 ] const sayHello = ( name ) => { return name; } * 매개변수가 하나일 경우 괄호 생략 가능 ex) name => { return name; } * 중괄호 생략시 자동 return ex) name => name; Template Literals [ 기존 ] const sayHello = name => { return "Hello " + name; ..

2021.09.30 ﹒ 11:22
웹 프로그래밍/공부일지
[ JavaScript ] Select박스를 검색가능하게 만들어보자 :P

예전에 업무를 하면서 Vue를 이용해 우선 만들었던 기능을 순수 JavaScript로 만들 기회가 또 생겨 확장성을 더 생각해서 구현해 보았다. jQuery에 익숙해져있다가 순수 JavaScript로만 하려니 생각보다 힘들었다😥 내가 만들고자 한건 우리가 일반적으로 쓰는 select box를 사용하면 아래와 같이 검색 선택 박스로 바뀌는 것이다. 마우스 이벤트로도 구현을 했고 아래, 위 키를 눌러서 엔터를 누르면 선택 되도록 키이벤트도 구현했다! 코드 리뷰 function setCustomSelect (instance, list, width){ var box = document.createElement("span"); var input = document.createElement("input"); var..

2021.03.29 ﹒ 18:33
웹 프로그래밍/공부일지
Javascript / Node.js / React

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 호옥시 잘못된 정보를 공부하고있다면 알려주세요! 참고1: beomy.github.io/tech/javascript/javascript-runtime/ 참고2: geonlee.tistory.com/92 참고3: velog.io/@stampid/React%EB%9E%80 React 기초를 다시 한번 공부하려니 Node를 다시 알아야 했고 Javacript 런타임 기반이다보니 해당 부분까지 공부하게 됐다. 매번 1화만 보다가 끝나는 기분이야..😢 자바스크립트는 싱글쓰레드-논블로킹 언어로 쉽게 말해서 쓰레드 하나에 비동기식으로 작동한다. 하긴 단일쓰레드인데 동기식(블로킹) 형식이였으면..

2021.02.22 ﹒ 16:25
웹 프로그래밍/공부일지
[ JS ] 무한 스크롤 만들기 ( div 태그 )

무한 스크롤을 검색 하니 대부분 전체 창에 대한 무한 스크롤 형식이 나와서 다음에 언젠간 또 검색하면서 찾을 태그의 무한 스크롤이니 포스팅으로 남겨 놓으려고 한다 ㅎㅎ... 회사 사수분이 사용하셨던 코드를 분석해보았다 :) // scroll $("#scroll_tag").scroll(function() { // 페이징을 위한 변수 ( *무시 해도 되는 부분 ) var page = $("[name='feed_page']").val(); var last_page = $("[name='feed_last_page']").val(); if(page == last_page) return; var innerHeight = $(this).innerHeight(); var scroll=$(this).scrollTop()..

2019.04.22 ﹒ 22:10
웹 프로그래밍
CSS + JQuery(JavaScript) 응용 2편

간단한 페이지 틀 하나 만드는데도 초보인 나에게는 시간이 엄청 걸리는지라 오랜만에 이렇게 글을 쓰게 된다. 😥이전글 - [Web Programming] - CSS 속성 정리편 + 추가 기타 속성과 키워드이전글에서 포스팅했던 CSS 속성 외에도 웹 페이지를 만들다 보면 새로운 친구들을 만나게 되어 응용하면서 정리했었다.로그인 & 회원가입 페이지에 이어서 게시글이 나타나는 '메인 페이지'를 만들면서 새로 만난 속성들을 정리하는 시간을 가져보고자 한다 ! 우선 이번 메인페이지에서는 CSS와 조금 더 동적인 부분을 구현해보고자 JQuery를 사용해봤다.그리고 요즘 반응형 웹이라는걸 많이 사용해서 ( 내 블로그 또한 그렇고 ! ) 깊게 공부한건 아니지만 구글을 통해 흉내만 내봤다...👶좌측 초록색 부분은 내가 만..

2018.05.27 ﹒ 13:46
웹 프로그래밍
Java Script 3편 + 자바스크립트 문서 객체 조작

1편 - [Web Programming] - JAVA Script 1편 + 자바스크립트 기본2편 - [Web Programming] - Java Script 2편 + 자바스크립트 문서 객체 모델 2편에서 만났던 문서 객체의 조작법에 대해 한번 알아보자 :)우리는 문서 객체를 선택해서 글자, 스타일, 속성 등을 조작할 수 있다. 아래는 글자 조작 속성명이다.설명 그대로 test 의 글자를 document.body.textContent로 변경한다면일반 글자 형식이므로 실행 결과 " test "가 그대로 뜰 것이다.만약 innerHTML을 사용했다면 태그가 인식되고 문자열 test만 뜬다. 이어서 스타일 조작이다.var header = document.getElementById('header');header...

2018.05.16 ﹒ 22:33
웹 프로그래밍
Java Script 2편 + 자바스크립트 문서 객체 모델

1편 - [Web Programming] - JAVA Script 1편 + 자바스크립트 기본 HTML태그를 자바스크립트에서 이용할 수 있게 객체로 만든 것을 문서 객체라고 부른다.따라서 자바스크립트에서 문서 객체를 사용하면 HTML 태그를 생성, 제거하거나 조작할 수 있다.또한 마우스를 클릭하거나 키보드를 누르는 등의 이벤트에 반응할 수 있다. 웹 브라우저에 HTML 파일을 끌어다 놓으면 웹 브라우저는 HTML파일을 분석하고 화면에 표시한다.이때 웹 브라우저가 HTML 파일을 분석하고 표시하는 방식을 문서 객체 모델 ( DOM document Object Model )이라 한다.문서 객체 모델의 관련 용어로 태그, 문서 객체, 노드라는 친구들이 등장한다. 태그는 , 등의 친구들이다. 계속해서 만나온 아이..

2018.05.15 ﹒ 16:46
웹 프로그래밍
JAVA Script 1편 + 자바스크립트 기본

참고 사이트 : https://www.w3schools.com/js/default.asp 자바스크립트란 HTML과 웹의 프로그래밍 언어다.따로 컴파일이 필요없으며, 인터프리터 언어이다.웹 페이지에서 움직이는 무언가가 있다면 이 자바스크립트라는 친구를 사용한 것이다. 자바를 공부했다면 JS에서 키워드로 불려지는 친구들은 어렵지 않을 것이다.단 처음 자바스크립트를 접한다면 break, else, case등 키워드(예약어)가 어렵게 느껴질 수도 있을 것같다. 자바와 자바스크립트는 다른 것이라 하지만 책을 읽어보니 거의 비슷하다.개인적으로는 자바를 공부했기 때문에 반복문, 조건문등 언어와 비슷한 친구들은 넘어가도록 하겠다. 자바스크립트는 하나 이상의 표현식이 모여진 문장으로 나타낸다.그리고 여기에서는 사실 문장..

2018.05.15 ﹒ 10:39