개발자 페이지 (48) 썸네일형 리스트형 아스키 코드 간단 정의 & 짧은 역사 만일 자체적으로 컴퓨터를 만들려고 하는데, 컴퓨터의 하드웨어 전체를 구성할 것이고, 이 컴퓨터를 이용하여 다른 컴퓨터와 연결할 일이 전혀 없다고 가정하면, 원하는 대로 부호를 할당하더라도 아무 문제도 발생하지 않을 것이다. 즉, 각각의 문자에 우리가 원하는 고유의 부호를 어떤것이든 할당할 수 있다는 말이다. 하지만 컴퓨터가 완벽히 독립적으로 만들어지고 구동되는 경우는 극히 적기 때문에 컴퓨터에서 통일된 부호를 모두 같이 이용하는 것이 훨씬 합리적일 것이다. 이러한 방법을 사용함으로써 컴퓨터는 다른 기기와의 호환성을 좀 더 높일 수 있으며 문자로 표현된 정보를 쉽게 교환할 수 있을 것이다. 다행히 이에 대한 표준은 이미 개발되어 있다. 이 표준이 바로 보통 아스키 부호라 이야기하는 것이다. 미국 표준 부호.. React JS / VScode for React, Prettier 세팅하기(Javascript, Vanila JS, React) VScode 사용자들은 Prettier의 편리함에 익숙할 것이다. (Javascript) Vanila JS만 공부하다가 이번에 React JS를 같이 보는데 React JSX 라는 좀더 단순하고, 새로운 방식의 코드 작성법을 만나는 순간 같이 찾아온 "Error"아닌 Error.. 기존 Prettier는 예로 "h1"을 한번 치면 아래와 같이 자동으로 태그를 완성해주었다. 그런데 ReactJS에서는 이 완성기능이 온전히 작동을 하지않고 ( 시작 태그를 쓰면 닫아주긴 한다...) 그래도 시작태그만 적으면 자동으로 닫아주니 참고 쓰려했는데 input 같은 태그들은 엉뚱하게 먹히는 문제를 직면한다. 예를들어, 을 작성하면 아래와 같이 이상하게 tag를 닫아버리기 시작한다. input 태그는 link, img .. React JS / to do list_Practice 1. const [] = useState("); 는 자주 쓰이게 될 기본 코드이다. 첫번째 값 = default 두번째 값 = modify default useState() 괄호 안의 값은 default 값을 의미. 2. setToDos((currentArray)) => [toDo, ...currentArray]); currentArray는 임의로 명명한 값으로 어떤 값을 넣어도 상관없다. 뒤에 대괄호 안에 (...)은 currentArray의 모든 값을 나타내는 의미로 바로 앞에 toDo값에 이어서 currentArray의 값을 이어 붙인다는 뜻으로 사용된다. toDo.push()와 같다. import { useState } from "react"; function App() { const [toDo,.. React JS / useEffect() 다양한 표기 방법 아래 useEffect function 사용의 2가지 방법이며, 그 기능은 동일하다. 보통 2번째 function() {} 보다는 화살표 function인 () => {} 을 주로 사용한다. function Hello() { useEffect(() => { console.log("hi :)"); return () => console.log("bye :("); }, []); useEffect(function () { console.log("hi :)"); return function () { console.log("bye :("); }; }, []); return Hello; } React JS / Render 방식 1. 아래 함수에서 [value, setValue] 는 value=Defult , setValue=함수 로 이뤄져있다. 2. 만약 부모에 어떤 state 변경이 있다면, 모든 자식들은 Re-render가 된다. (value or setValue에 변경이 생긴다면 return 값이 모드 Re-render가 되는것을 이해한다. 그리고 이 특성이 추후 어플리케이션 속도가 느려지는 원인이 될 수 있다. 아래는 2개의 MemorizedBtn Components 가 있지만 천개의 Components가 있다면 이것들을 Render할 필요가 없음에도 자동 Render시키기 때문에 속도 저하의 원인이 된다.) function App() { const [value, setValue] = React.useState("Sav.. React JS / Converter 1. React.useState() : const [] 의 Array 내부의 프로퍼티는 [Default, modifier]로 나눌수 있다. 2. script src =" unpkg... " 링크를 통해 React JSX 라이브러리 사용 가능 3. disabled 값은 true 일때 활성화, false일때 비활성화 . onClick={onFlip} 을 통해 위 값을 버튼을 통해 Flip 하는 방식) 4. setFlipped((current) => !current); 코드는 setFlipped(!flipped)에서 개선된 코드이다. 5. input의 value={flipped} 에서 value값 flipped는 Default 값인 False 가 onFlip function을 통해 그 값이 바뀐다. 6. co.. will-change / transformation 애니메이션 흔들림 방지 CSS Keyframe animation 으로 두근두근 하트를 만들려고 하는데 하트아이콘이 매우 부들부들 떨린다. 이때 will-change 명령어를 사용함으로써 브라우저에 어떤 항목이 애니메이션 적용이 되어 변할지 알려주게 된다. will-change 명령어를 아래 예시와 같이 적용하면 다음과 같이 하트 애니메이션이 매끈하게 변하게 된다. 모든 애니메이션 적용이 이런것은 아니지만 종종 부자연스러운 움직임이 나타날때 will-change 를 사용하여 우리 브라우저가 매끈하게 작동하도록 도와줄 수 있다. @keyframes heartBeat { 0% { color: white; transform: none; } 50% { color: tomato; transform: scale(1.5); } 100% { .. 반도체란? 트랜지스터의 발명 및 역사 도체(Conductors): 전류가 아주 쉽게 통과할 수 있도록 도움을 주는 속성으로 구리, 은 , 금과 같은 물질 절연체(insulators): 전류가 흐르지 않는 도체로 고무, 플라스틱 같은 물질 저마늄(germanium)과 실리콘(silicon) 같은 원소는 반도체라 불리는데 전도체에 비해서 절반 정도 전류가 흐르기 때문이 아니라, 다양한 방법으로 전도성(conductance)이 조절될 수 있기 때문이다. 순수한 반도체의 경우 매우 안정된 원자의 형태를 가지고 있으며, 각각이 다이아몬드 형태의 결정 구조를 가지고 있고 반도체가 결정 구조를 형성하고 있을 때는 전도성이 거의 없게된다. 하지만 반도체에 특정한 불순물을 첨가하여 화합물을 만들 수 있다. 첫 번째 종류의 불순물은 원자들 간의 결합에 요구되.. 이전 1 2 3 4 5 6 다음
