전체 글57 Template literals 구현 (2) - Web Component Web Component : 웹 컴포넌트는 JavaScript, CSS, HTML들을 컴포넌트화하기 위해 필요한 4개의 표준을 묶어서 부르는 이름이다. 웹 컴포넌트가 등장한 배경이 흥미로운데, 수 많은 자바스크립트 프레임워크들이 쏟아져 나왔을 때 구글은 프레임워크의 단점들을 보완하기 위해서는 브라우저 기능과 적절히 섞어 사용해야 가볍고 성능 좋은 APP을 만들 수 있다며 권유했다. 아무런 의심 없이 프레임워크를 사용하고 있던 나에게 적잖은 깨우침을 주었다랄까.. (!) 구글과 페이스북을 포함한 프레임워크 제작사들은 React vs Web Component가 아닌 Web Component With React, Angular, Ember의 뉘앙스로 글을 쓰고 있다고 한다. 프레임워크 Component와 비교.. 2023. 2. 14. Template literals 구현 (1) - Selection과 Range Template literals를 구현해 볼까 하고 시작한 일이 어언 2주 가까이 흘렀다. (말이 Template literals이지 멘션 기능과 흡사.) 시작할 때는 이렇게까지 시간이 오래 걸릴 줄 몰랐다. (당연함) 2주 동안 골머리를 싸맸기 때문에 꼭 아카이브로 남기고 싶었다. 내가 구현한 걸 간단히 설명하자면, 특정 구분자(#{)를 사용했을 때 div 태그 안에 span 태그를 추가하여 새로운 range를 만들고, 그 range안에 입력된 값에 대한 유효성 검사를 실시하고 오류가 있을 시 오류 메시지를 출력해 주는 기능이다. 위에 gif 이미지를 보면 알 수 있듯이 미리 정의해 둔 변수는 variable1과 variable2이다. variable1과 variable2가 아닐 경우 그리고 잘 못된 .. 2023. 2. 7. React Router ! react-router-dom@5.3.0 React Router - Router, Switch, Route import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'; import Home from '../src/routes/Home'; import Detail from '../src/routes/Detail'; function App() { return } react-router-dom의 BrowserRouter, Switch, Route 태그를 통해 URL과 컴포넌트를 연결 한다. Route 태그의 path 속성에 URL을 적고 component에 import에서 불러온 컴포넌트를 집어 넣는다. React Router 적용은 보.. 2022. 11. 21. React Effect Hook useEffect ? useEffect 함수는 Component가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 실행할 수 있도록 해주는 Hook이다. 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것. 사용 방법 * 기본 형태 : useEffect(function, deps) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 혹은 빈 배열이 들어간다. 1. 함수 불러오기 import {useEffect} from 'react'; 2. Component가 Mount 됐을 때 실행 useEffect(()=>{ console.log('마운트 될때만 실행~');.. 2022. 11. 7. React Props 그리고 vue에는 없는 신기한 함수 프로퍼티 (Properties)란? 상위 컴포넌트에서 하위 컴포넌트에게 값을 전달할 때 사용. 프로퍼티는 단방향이라는 특징이 있음. 읽기 전용 데이터 이기 때문에 수정이 불가함. ** 사용 방법 ! 버튼 함수 컴포넌트를 만들어서 재활용해보자. function Btn(props){ return( {props.btnName} ) } function App(){ return ( ) } Btn 함수 컴포넌트에 btnName이라는 인자를 전달하여 버튼 이름을 변경하는 코드이다. 이때, Btn 함수 컴포넌트에 전달하는 인자가 몇 개이던, 받을 땐 매개 변수 하나로 받는다. 예시. function Btn(props){ return( {props.btnName} : {props.newMessage} ) } functi.. 2022. 11. 1. [네트워크] OSI Model, TCP/IP Original & Updated OSI (Open Systems Interconnection Reference Model) 모델 탄생 배경 초기 여러 정보 통신 업체 장비들은 자신의 업체 장비들끼리만 연결하면 되어 호환의 필요성이 없었음. but, 여러대의 컴퓨터를 연결해야 할일이 생기기 시작. 그래서 모든 시스템들의 상호 연결에 있어 문제가 없도록 표준을 정함. = OSI 7계층 OSI 모델 vs TCP/IP 모델 현대의 인터넷은 OSI 모델이 아니라 TCP/IP 모델을 따르고 있음. TCP/IP 모델도 OSI 모델과 마찬가지로 네트워크 시스템 모델임. 현대의 인터넷이 TCP/IP 모델을 따르는 이유는 OSI 모델이 TCP/IP 모델과의 시장 점유 싸움에서 졌기 때문. * 오늘날에는 TCP/IP Updated 모델이 많이 사용되고 있.. 2022. 10. 31. 이전 1 2 3 4 5 6 7 ··· 10 다음
