분류 전체보기56 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. React State vanilla.js Total Clicks : 0 Click Me 버튼을 클릭할때마다 counter가 증가하는데, 이 count를 react.js state를 이용해 리렌더링 되게 만들어보자. state 사용 전. const root = document.getElementById("root"); let counter = 0; function countUp(){ counter = counter + 1; ReactDOM.render(, root); } const container = () => ( Total Clicks : {counter} Click Me ); ReactDOM.render(, root); *순서. reactDom에 container componet를 렌더링. html에 해당 componen.. 2022. 10. 26. 이전 1 2 3 4 5 6 7 ··· 10 다음
