profile
코딩의 고수가 되고 싶은 종한이
post-thumbnail

React LifeCycle Method

안드로이드 앱을 만들어보신 분이라면 라이프사이클을 다들 들어보셨을 겁니다.벌써 가물가물한데.. onCreate()나 onStart()같은 메소드들이 등장하죠.리액트도 똑같습니다. 정확히는 안드로이드는 App에 대한 라이프사이클입니다. 앱에 달려있는 여러가지 구조들(to

2020년 4월 19일
·
0개의 댓글
post-thumbnail

CSS Module

레거시 프로젝트(과거에 진행이 끝난 프로젝트)에 리액트를 도입하거나, 클래스 이름을 짓는 규칙을 정하기 힘들거나 번거로울 때 사용하면 편리한 기술먼저 JavaScript파일을 만들어준다.파일명.module.css로 CSS파일을 만든다.css를 작업한다.JS파일에 이를

2020년 4월 2일
·
0개의 댓글

useState 함수형 업데이트

이틀 전에 썼던 useState()함수형 업데이트의 추가적인 부분을 적고자 한다.그를 위해선 먼저 useCallback, useMemo 등을 이용한 최적화에 대해서 먼저 이해하고 있어야 한다.https://velog.io/@johnque/useMemo-Hook

2020년 4월 1일
·
0개의 댓글

useRef Hook

useRef 훅은 DOM객체를 이용할 수 있다.따라서, focus()같은 기능이 가능한데,저번에 올렸던 게시물인 useState() 설명글의 코드를 그대로 가져와봤다.그런데, 여기서 init버튼을 누르면 초기화가 되는데, 문제는 input창에서 커서가 벗어난다는 점이다

2020년 3월 31일
·
0개의 댓글
post-thumbnail

useState Hook

컴포넌트에서 보여줘야 하는 내용이 사용자의 입력값에 따라 바뀌어야 할때 사용Hook기능이 16.8 이후부터 도입되면서 함수형 컴포넌트에서도 state값의 변경에 대한 구현이 가능해짐카운터 프로그램을 예시로 들어보겠음 우선 눈여겨볼 점은 button에 onClick에 의

2020년 3월 31일
·
0개의 댓글

Function.prototype.call()

Function.prototype은 함수 객체들의 부모 역할을 하는 프로토타입 객체이다.다음과 같은 코드가 있다면,를 통해, 프로토타입 객체를 추적해보면 Function.prototype()이 나온다.고로, Function.prototype()에서 정의하는 프로퍼티들은

2020년 3월 19일
·
0개의 댓글
post-thumbnail

RESTful API [초급]

나에게 컴퓨터를 전공하면서 항상 조금만 공부하다 머리가 아파져서 포기를 하든가, 아니면 다시 공부를 해도 까먹는 것중 하나가 바로 API에 대한 정확한 개념과 REST API가 무엇인가에 대한 것이 포함되어 있다.그래서 API를 최근에 공부하는 입장에서 도대체 이 놈의

2020년 3월 15일
·
0개의 댓글
post-thumbnail

Third-Party APIs?

API는 Application Programming Interface의 약자매번 적어대도 까먹는지라, 간단히 플러그 개념으로 이해하기로 했음우리가 가전제품을 사용할 때, 아무런 힘을 들일 필요도 없이 그저 플러그에 전원만 연결하면 해당 가전제품을 사용할 수 있음 API

2020년 3월 15일
·
0개의 댓글

XMLHttpRequest 객체

모든 모던한(최신의) 브라우저는 XMLHttpRequest 객체를 지원합니다.지금부터는 XMLHttpRequest => XHR로 부르겠습니다. 너무 기네요.XHR 객체는 전 편에도 말씀드렸듯이, 웹 서버와 데이터 교환을 백그라운드에서 비동기적으로 가능하게 해줍니다. 안

2020년 3월 14일
·
0개의 댓글
post-thumbnail

AJAX란?

AJAX의 특성은 다음과 같습니다.페이지가 로드된 후에도 데이터를 서버로부터 읽어들일 수 있습니다.페이지를 리로딩하지 않고도 해당 웹 페이지를 업데이트 할 수 있습니다.웹서버로 데이터를 백그라운드를 통해 보낼 수 있습니다.Asynchronous Javascript An

2020년 3월 14일
·
0개의 댓글

HTML DOM 노드리스트 객체

노드리스트 객체는 문서로부터 추출되는 노드들의 리스트입니다.거의 HTML컬렉션 객체와 똑같습니다.몇몇의 오래된 브라우저들은 HTML컬렉션을 반환해달라고 요청한 메소드에 노드 리스트를 대신해서 반환해줍니다.childNodes()를 사용한다면 모든 브라우저에서 노드 리스트

2020년 3월 10일
·
0개의 댓글

HTML DOM Collections

기존에 HTML DOM에 접근하여, 요소를 가져오는 메소드들은 다양한 것들이 있었는데,예를 들면 getElementsByTagName()이 있었습니다. 이런것들을 컬렉션이라고 부른다고 전에 적었던 기억이 납니다.이 컬렉션은 객체이지만, HTML 요소의 배열 비스무리한

2020년 3월 10일
·
0개의 댓글

HTML DOM Elements (Nodes)

HTML DOM에 새로운 요소를 추가하기 위해서, 요소(요소 노드) 생성을 먼저해주고, 그 다음에 기존에 존재하는 요소에 그것을 적용합니다.먼저, para를 통해 새로운 <p> HTML 요소를 만들어냅니다.그 후, 안에 들어갈 텍스트 노드를 생성하고, 그것을 pa

2020년 3월 10일
·
0개의 댓글
post-thumbnail

HTML DOM Navigation

HTML DOM에서는, node 관계를 사용하여 노드 트리를 항해할 수 있습니다.W3C HTML DOM 표준에 따르면, HTML 문서안의 모든 것이 노드입니다.전체 문제는 문서 노드입니다.모든 HTML 요소는 요소 노드입니다.HTML 요소 안의 텍스트들은 텍스트 노드입

2020년 3월 10일
·
0개의 댓글

HTML DOM 이벤트 리스너

addEventListener() method는 특정 요소에 이벤트 핸들러를 부착시킵니다.기존의 이벤트 핸들러를 덮어쓰지 않고, 부착시켜줍니다.하나의 요소에 많은 이벤트 핸들러를 추가할 수 있습니다.즉, 하나의 요소에 같은 타입의 핸들러를 추가할 수 있다는 얘기입니다.

2020년 3월 10일
·
0개의 댓글

HTML DOM 이벤트

HTML DOM은 자바스크립트로 하여금 HTML 이벤트 발생에 대응하도록 해줍니다.예를 들면 마우스 hover시 어떻게 동작하는지, 클릭시 어떻게 동작하는지, 키보드에 뭔가 입력시에 어떻게 동작하는지, 윈도우가 작아질때 resize에 대해서 어떻게 동작하는지 등등이 있

2020년 3월 10일
·
0개의 댓글

HTML DOM을 이용한 CSS 변경

마지막으로 정리하고 넘어가겠습니다.HTML DOM은 자바스크립트로 하여금 HTML 요소에 대해 여러가지를 변경할 수 있게 합니다.그 중 하나가 스타일인데, 이 부분은 CSS에서 주로 사용하는 선택자(selector)를 사용합니다.다음과 같이 쓰면 됩니다. 예문은 아래와

2020년 3월 10일
·
0개의 댓글

HTML DOM을 이용한 HTML 변경

JS와 HTML DOM에 대해 처음부터 언급할 때 7가지의 내용이 있었는데요.간략하게 빠르게 정리하면, HTML안의 요소나 속성의 값을 추가, 제거, 변경할 수 있고, 스타일도 변경할 수 있으며, 이벤트에 대한 처리, 추가도 가능했습니다.다음은 JS로 HTML을 변경하

2020년 3월 10일
·
0개의 댓글

HTML 요소 찾기

id, tag name, class name, CSS 선택자, HTML 객체 컬렉션찾았으면 요소를 객체로 리턴해줍니다. 없으면 null을 리턴해줍니다.아이디와 태그네임을 둘다 활용해 범위를 좁혀보겠습니다.결과값은이 됩니다.이 밖에 document와 함께 쓰일 수 있는

2020년 3월 10일
·
0개의 댓글

HTML DOM Methods and Properties - 2

HTML 요소를 찾아주는 method는 지난시간에 getElementById("id명")이 있었죠.사실 몇개가 더있습니다.document.getElementsByTagName("태그명")document.getElementsByClassName("클래스명")태그네임은 말

2020년 3월 10일
·
0개의 댓글