무딘붓의 코딩기록

1. 개요   자바스크립트에서 0.1 + 0.2는 0.3이 아닙니다.  사실 알고 보면 C언어와 자바, 파이썬에서도 같은 오류가 발생합니다.왜 이런 오류가 발생하고, 어떻게 정확한 실수 연산을 할 수 있을지 알아보도록 하겠습니다. 2. 자바스크립트가 숫자를 저장하는 방법 우선 자바스크립트에서는 숫자를 어떻게 저장하는지 알아보겠습니다. 자바스크립트는 C언어의 int, float, double처럼 실수와 정수를 구분하지 않고, 모든 숫자를 number 타입으로 저장합니다.ECMAScript 사양에 따르면, number 타입은 IEEE 754 표준을 이용해 숫자를 저장합니다. IEEE 754는 부동소수점을 표현하는 가장 널리 쓰이는 표준으로, C와 C++, Java의 double 타입, Python의 floa..

마이크 볼륨 시각화하기 에 이어서, 마이크 변경과 오디오 볼륨을 조절하는 방법을 간단히 살펴봅니다. 바닐라 Javascript로 개발한 예제코드는 아래에서 확인할 수 있습니다. https://codepen.io/vchgekmq-the-flexboxer/pen/poBWNbE 1. 입력 마이크 변경하기 입력 마이크를 변경하는 기능을 간단히 추가해 보겠습니다. 이전에 만든 볼륨 시각화 코드에서 이어서 개발할 예정이므로, 이전 게시글을 참고해 주시면 감사하겠습니다. Javascript로 마이크 볼륨 시각화하기 기록으로 남기는 실시간 화이트보드 강의 서비스, 🙂 Boarlog 를 개발하며 구현한 내용을 담고 있습니다. 게시글의 기능을 이용한 최종 서비스는 GitHub 링크 에서 확인하실 수 있습니다. 웹 페이지 ..

fetch() 함수란? fetch 함수는 JavaScript에서 제공하는 API 중 하나로, 서버에서 데이터를 가져오기 위해 사용됩니다. fetch 함수는 네트워크 요청을 보내고, 서버로부터 응답을 받습니다. 응답은 promise 객체로 반환되며, 이를 통해 비동기적으로 데이터를 처리할 수 있습니다. ChatGPT에 물어봤을때 나온 답변인데, 다른곳에서 찾아본 내용과 비교했을 때 큰 차이가 없어 가져와 봤다. 위의 설명대로, fetch API는 백엔드 서버와 데이터를 주고받는데 사용한다. 간단하게 설명하자면 React에서는 Node.js 등과 데이터를 주고받기 위해 fetch 함수를 사용한다. 자세한 내용은 다음 링크들에 정리되어 있다. https://developer.mozilla.org/ko/docs..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. React를 이용하여 CRUD( Create, Read, Update, Delete )기능을 구현한 게시판이다. 예전에 Node.js로 같은 기능을 구현한 적이 있는데, React로 구현하니 더 깔끔한것 같다. Node.js로 구현했던 CRUD 게시판은 아래 링크를 참고. https://sirius7.tistory.com/48 [Node.js] 8. CRUD 게시판 구현 CRUD CRUD란 Create(생성), Read(읽기), Update(갱신), Delete(삭제) 의 약자로, 사용자 인터페이스가 갖추어야 할 기능을 말한다. Node.js로 CR..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. State의 정의 state란? prop 과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴값을 만들어 준다. prop과 state 모두 이 값이 변경되면 새로운 리턴 값을 만들어서 ui를 바꾼다. state는 값이 변경되면 HTML이 자동으로 다시 랜더링 된다. (= 새로고침 하지 않아도 됨) 일반 변수는 값이 변경되어도 HTML이 자동으로 다시 랜더링 되지 X (= 새로고침 해야함) 변수 외에 데이터를 저장하는 또 다른 옵션으로 생각해도 됨 문자, 숫자, object, array 등을 저장 가능하다. useState()를 이용해서 만들어야 ..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. 컴포넌트 소스코드 정리정돈의 핵심 : 서로 연관된 것을 모은 다음(그룹핑) 이름을 붙인다. 리액트는 사용자 정의 태그를 만드는 기술이므로, 사용자 정의 태그를 이용해 연관된것을 모아 정리 정돈한다. 사용자 정의 태그 만들기 사용자 정의태그를 만들때는 함수를 정의한다. 사용자 정의태그를 만들때는 반드시 대문자로 시작해야 한다. 리액트에서는 사용자 정의태그를 컴포넌트(component)라고 부른다. 컴포넌트를 사용할 때의 장점 각 코드가 이름을 가지고 있기 때문에 어떤 취지의 코드인지 금방 파악 가능하다. 한번의 수정으로 컴포넌트를 사용하는 모든 ..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. 리액트 소개 메타에서 개발한 오픈 소스 자바스크립트 라이브러리 SPA (Single Page Application)을 전제로 한다 웹 앱을 만드는 라이브러리 React, Angular, Vue 중 가장 사용자가 많다. 리액트의 핵심적인 역할 : 사용자 정의 태그를 만드는 것 사용자 정의 태그 부품으로 사용된다 남들에게 공유할 수 있고, 남들의 부품을 사용할 수 있음 거대한 리액트 부품 공유망으로 들어가는 것은 큰 가능성을 열어준다 리액트를 만드는 2가지 방법 클래스(class) 문법 사용 → 이전 강의 참고 함수(function) 문법 사용 :..

링크를 나타내기 위한 방법으로는 이렇게 파란색에 밑줄을 그어 표현하는 것이 가장 일반적이지만, 때로는 디자인을 위해 다른 방법으로 링크를 표현해야하는 경우가 있습니다. 그중에서 링크 뒤에 특정한 기호나 아이콘을 달아서 링크를 표현해 보겠습니다. 한번만 사용할거면 그냥 태그 안에 기호까지 포함해서 링크로 만들어 주면 되지만, 여러번 사용하는 경우 매우 번거로우므로 CSS로 특정 class의 링크 뒤에 기호가 들어가도록 구현하는 방법을 알아보겠습니다. :after 셀렉터(선택자) :after는 가상 클래스(pseudo-class) 셀렉터중 하나로, 지정된 요소 뒷부분에 내용을 넣을 때 사용하는 셀렉터입니다. 사용방법은 다음과 같습니다. a:after { content: '↗️'; } 위와 같이 CSS를 완성..

세션(Session)이란? 간단히 말하면 쿠키보다 더 안전하게 데이터를 저장하는 방식이다. 쿠키는 브라우저에 저장되는 반면 세션은 데이터를 웹 서버에 저장한다. 세션은 각 클라이언트에 부여한 고유 Session ID로 클라이언트를 구분해 해당 클라이언트에 맞는 서비스를 제공한다. express-session 설치와 실행 예시 npm install express-session npm을 이용하여 설치해주면 express에서 세션 기능을 간단하게 사용할 수 있게 된다. var express = require('express') var parseurl = require('parseurl') var session = require('express-session') var app = express() app.use..

쿠키란? 간단히 요약하면, 웹 서버가 브라우저에게 지시하여 사용자 로컬 컴퓨터에 저장하는 4K 이하의 작은 데이터이다. 쿠키는 HTTP가 무상태 프로토콜(바로 이전 요청과 현재 요청이 연결되어 있음을 기억하지 않는 통신)이라는 약점을 보완하기 위해 도입하였으며, name=value 형태로 저장된다. 쿠키 생성 var http = require('http'); var cookie = require('cookie'); http.createServer(function(request,response){ // 쿠키 생성 response.writeHead(200, { 'Set-Cookie':['yummy_cookie=choco','tasty_cookie=strrawberry'] }); response.end('co..