javascript10 전역변수 없이 속성으로 자식 컴포넌트에 데이터 전달하기 전역변수를 사용하지 않고 컴포넌트 속성으로 데이터를 자식 컴포넌트로 전달하는 방법입니다. 다음과 같은 예가 있습니다. 드롭다운에서 선택한 값에 따라서 하위 컴포넌트가 변경됩니다. 이런 기능을 구현하는 방법은 가장 먼저 떠오르는 것이 드롭다운의 선택값을 저장하는 변수를 useState로 정의하고 이 값의 변화에 따라 랜더링 되는 컴포넌트를 구별해서 작성하는 겁니다. import { useState } from "react"; const Result = ({ type }) => { return {type}; }; export default function App() { const [state, setState] = useState(""); const Type = () => { return ( 선택: setS.. 2023. 2. 27. JavaScript, 파일에 데이터(문자열, 바이너리) 저장하기 데이터를 로컬디스크에 파일로 저장하는 방법을 알아보겠습니다. 지난 포스팅(JavaScript, 파일에서 데이터(문자열, 바이너리) 불러오기)에서는 로컬디스크에 저장된 데이터를 가져와서 JS에서 다루는 방법에 대해서 공부했었는데 오늘은 그 반대입니다. JS에서 직접 파일에 저장하는데 문자열을 저장하는 방법 및 바이너리 데이터로 저장하는 방법입니다. 파일에 문자열 저장하기 먼저 문자열을 저장해 보겠습니다. 다음과 같이 Textarea에 문자를 입력하고 하단에 버튼을 누르면 입력된 문자가 파일로 입력되는 예제입니다. 로컬 저장장치에 접근하기 위해서 윈도 파일시스템을 다루는 showSaveFilePicker(), createWritable() 두 가지 메서드를 사용했습니다. export default funct.. 2023. 2. 21. JavaScript, 파일에서 데이터(문자열, 바이너리) 불러오기 파일에서 데이터를 불러오는 방법입니다. 한번 해보면 어렵지 않은데 처음에는 비동기에 대한 개념도 부족해서 한참 헤맸던 부분이라서 정리해 봅니다. 바로 코드부터 보겠습니다. 파일에서 문자열 읽기 파일에서 문자열을 읽어오는 코드입니다. import { useState } from "react"; export default function App() { const [data, setData] = useState([]); const readFileData = (e) => { const reader = new FileReader(); try { reader.onload = (result) => { setData(result.target.result); }; reader.readAsText(e.target.file.. 2023. 2. 10. JavaScript에서 바이너리 데이터 처리 - (ArrayBuffer, TypedArray) 고성능의 데이터 처리를 위해서는 데이터를 바이너리로 다루어야 한다고 합니다. 바이너리란 말 그대로 컴퓨터가 이해하는 이진수라는 건데 코딩을 하다 보면 자주 접하는 개념인데 기초를 좀 다져야 할 필요가 있을 것 같아서 정리해 봤습니다. ArrayBuffer JS에서 바이너리를 다루는 기본적인 객체는 "ArrayBuffer"입니다. ArrayBuffer는 메모리상의 고정된 영역을 참조하는 객체입니다. const buf = new ArrayBuffer(32); 위와 같은 표현으로 객체를 생성할 수 있는데요. 'buf' 변수는 메모리상에 32바이트 크기로 할당된 메모리 영역을 가리키게 됩니다. 할당된 메모리는 모두 "0"으로 초기화됩니다. "ArrayBuffer"는 그냥 메모리의 어떤 영역이며 그 안에는 0과 .. 2023. 2. 5. JS를 배우고 있다면 꼭 알아야 "모던 JavaScript 튜토리얼" 코딩 공부 할 때 웬만해선 인터넷에 공개된 자료들이 많아서 책을 사지 않고도 공부할 수 있는데, 특히나 JavaScript같이 인기 있는 언어는 더 그렇죠. 저도 JS 공부 처음 시작할 때는 무료 온라인 코딩 코스부터 수강하고 시작했고 그 후로는 막히는 게 생기면 모질라 재단의 MDN web docs를 검색해서 답을 찾고 있습니다. 그런데 최근에 "모던 JavaScript 튜토리얼(https://ko.javascript.info/)"이라는 프로젝트를 알게 되었는데 JS 공부한다면 필수적으로 알고 있으면 좋을만한 사이트라고 생각해서 소개합니다. 모던 JavaScript 튜토리얼 ko.javascript.info 문법이나 예제 등을 검색하다 보면 자주는 아니지만 종종 "The Modern JavaScript.. 2023. 1. 19. styled-components 사용법 [part 2 /2] 지난 포스팅에 이어서 styled-components 사용법에 대한 내용이며 이번에는 좀 더 헷갈렸던 고급 사용법에 대해서 공부해 보겠습니다. 의사 선택자(pseudo-selector) 선택자에 옵션을 줘서 일부 요소만 선택하는 방법입니다. 영어로는 pseudo라는 명칭을 사용하던데 많은 CSS 자료에서 "의사"라고 번역을 하네요. & (ampersand) "&"기호를 하나만 사용하게 되면 '모든 요소'를 의미합니다. 그냥 이렇게만 얘기하면 무슨 얘기인지 잘 이해가 안 되죠?! 저는 그랬습니다. ㅡ.,ㅡ 암튼 예제를 보면 이해가 쉽게 됩니다. 이 예제는 'styled-components' 공식 홈페이지의 예제를 그대로 가져와서 주석만 번역했습니다. 그리고 아래 내용을 이해하기 위해서는 CSS의 기본 문법.. 2022. 11. 14. [React] styled-components 사용법 [part 1 / 2] styled-components는 리액트에서 CSS를 더 편하게 사용할 수 있도록 만들어주는 유용한 도구인데요. 저는 아직까지도 CSS가 마치 하나의 코딩 언어처럼 어렵게만 느껴지다 보니 styled-components에서는 이건 또 무슨 소리인가 싶더라고요. 그래서 기초부터 찬찬히 다시 봐야겠다는 생각이 들었습니다. "styled-components"에 대한 특징이나 기본적인 설명은 생략하고 넘어가겠습니다. 어치피 styled-components 좋은거 잘 알고 이미 잘 사용하고 있기 때문에 어떻게 사용하는지가 중요한 거 아니겠습니까?! 설치 styled-components 사용을 위해서는 먼저 설치하고 프로젝트에 추가해 줍니다. npm, yarn 등을 이용해서 설치합니다. # with npm npm .. 2022. 10. 27. JavaScript(React, Node.js) - VSCode에서 디버깅하는 방법 디버깅은 코딩에서 참 중요한 부분이고 좋은 툴이 있으면 참으로 편리한 분야입니다. 이제 새로운 언어를 시작했으니 디버깅 방법도 한번 알아보겠습니다. VSCode에서 React, Node.js의 디버깅 방법을 찾아보면 다양한 글들이 있는데 제경우 대다수의 방법으로는 성공하지 못해서 제가 찾은 방법도 공유합니다. 디버깅하고자 하는 Node.js 프로젝트를 열어서 서버 서비스를 시작(npm start)합니다. 잠시 기다리면 안내 메시지에 브라우저로 접속할 수 있는 주소가 나타나죠. 이 주소를 복사해 둡니다. 그런 다음 VSCode 좌측의 디버깅 메뉴로 이동해서 "create a launch.json file"이라고 된 링크를 누릅니다. 그러면 선택창에 어떤 디버깅 환경을 사용할지 물어보는데요. 크롬 많이들 사.. 2022. 2. 4. JavaScript 시작, React, Node.js 개발환경 준비 2022-01-13 update log: typescript 템플릿 사용 옵션 추가 C++, Python 여전히 모두 진행 중인 언어이고 아직 가야 할 길이 멀지만 시대의 흐름이란 게 무시를 못하는 게 자연스럽게 자바스크립트를 시작하게 되었습니다. C++, Python 학습노트 시작한 것도 어느 정도까지는 진도를 나가고 내용도 더 보완하고 싶지만 일단 지금은 자바스크립트가 재미있고 당장 써먹을 곳도 더 많아 보이네요.^^ 웹 환경에서는 플랫폼에 구애받지도 않고, 온라인 설루션을 만드는 것도 쉽고 거기다가 제가 처음 코딩을 접했던 시절의 C언어만큼이나 이제 자바스크립트가 메인이 된 것 같은 느낌이 듭니다. 아직 모르는 것 투성이지만 대충 자바스크립트 기반에다가 React, Node.js 프레임워크를 사용하.. 2022. 1. 31. ESP8266-12 + DHT22, 웹에서 온도 습도 확인하기 2.0 어제 포스팅에서는 ESP12 보드에 DHT22 센서 모듈을 연결해서 간단하게 웹페이지에서 온도와 습도를 확인할 수 있는 예제를 따라 해 봤었는데요. 이번에는 웹페이지에서 보이는 온습도가 일정 시간 간격으로 자동으로 업데이트되도록 업그레이드해 봤습니다. ESP8266-12 + DHT22, 웹에서 온도 습도 확인하기 이전 포스팅에서 다룬 아두이노를 통해서 DHT 온습도 센서 값을 읽는 예제의 업그레이드 버전으로 이번에는 ESP8266 칩셋 기반의 ESP-12 모듈을 이용해서 웹에서 온습도를 읽어오는 예제입니다. 아�� kwonkyo.tistory.com 하드웨어 결선은 이전 포스팅과 동일하기 때문에 생략합니다. 앞에 언급된 이전 글 참고해 주세요. ^^ 소프트웨어 (펌웨어 코딩) 동작의 흐름을 먼저 설명하자.. 2020. 10. 9. 이전 1 다음
