코딩 일기장

💡 Render props pattern 이란? render props는 코드의 재사용성을 높임과 동시에, 관심사의 분리를 이룰 수 있도록 만들어주는 패턴 render props란 props에 넘겨주는 값이 JSX요소를 반환하는 함수는 prop을 말한다. hello world} /> render 라는 prop에 JSX Element를 반환하는 함수를 넣어 사용한다. const Title = ({ render }) => render(); 예시 drawing dream 프로젝트에서 회원가입 시 입력 값에 대해 유효성 검사를 진행하였다. render props pattern을 적용하기 전 프로젝트의 구조 SignUp.js └ InputContainer.js ├ Input.js └ ValidContainer.j..

init npx create-react-app appname --template typescript electron tools Electron-is-dev: 개발환경인지 빌드한 프로덕션환경인지 확인 Electron: 일렉트론 Electron-builder: 일렉트론을 실제 프로덕션 버전으로 빌드하기 위해 사용 concurrently: 동시에 여러 명령어를 사용하기 위해 사용 cross-env: 프로그램을 CLI활경에서 실행시킬 때 os에 관계 없이 환경변수를 설정할 수 있도록 하기 위해 사용 wait-on: HTTP 자원, PORT, FILE 등이 활성화 될 때 까지 기다려주는 cross platfrom npm i electron-is-dev npm i electron electron-builder co..

리액트에서 오픈비두를 사용하여 화상미팅을 구현하는 것은 매우 간단하다. 우선 오픈비두 라이브러리를 install한다. npm i openvidu-browser 이러면 오픈비두를 사용할 모든 준비를 마쳤다. (여기서는 오픈비두 서버를 띄우는 것은 하지 않겠다) 오픈비두 라이브러리를 사용하여 화상 미팅을 구현하는 단계는 다음과 같다. Publisher OpenVidu 객체 생성 → session 생성 → token 생성 → user media 객체 생성 → publish Subscriber OpenVidu 객체 생성 → session 생성 → 메세지 수신 이벤트 정의 → 수신된 이벤트 처리 State const [OV, setOV] = useState(); const [session, setSession] ..

WebRTC WebRTC는 웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API이다. OpenVidu OpenVidu는 웹 또는 모바일 애플리케이션에서 화상 통화를 쉽게 추가할 수 있는 플랫폼이다. 애플리케이션에서 매우 쉽게 통합할 수 있는 완전한 기술 스택을 제공하고 있다. 오픈비두는 일대일, 일대다, 다대다 화상 미팅을 지원하고 있다. 또한 음소거, 비디오 on/off, 화면공유, 화면 녹화 등의 기능을 쉽게 사용할 수 있도록 해준다. 또한 다양한 튜토리얼을 제공하고 있어 쉽게 구현이 가능하다. Intro - OpenVidu Docs Intro - OpenVidu Docs Hello World Make your first video-call with just a few line..

NFT기반 재능 기부 플랫폼 DOTORE 개발 기간: 2022. 02. 28 ~ 2022. 4. 08 결과 github : https://github.com/jejinmyeong/dotore 특화 프로젝트를 마무리 하였다. 프로젝트의 시작 평소에 블록체인에 관심이 있었고, 요즘 HOT한 NFT 프로젝트를 해보고 싶다는 마음에 NFT프로젝트를 기획하게 되었다. 공통 프로젝트에서 사용하지 못했던 Typescript 적용과 CDD(컴포넌트 주도 개발), 반응형 웹 적용을 목표로 하였다. React에 어느정도 익숙해졌기에 보다 정확한 react hook의 사용을 하고자 노력을 하였다. 프로젝트를 진행하면서 좋았던 점 1. TypeScript 블록체인 구현 때문에 프론트엔드 파트를 많이 진행하진 못했지만 Type..

asset modules 는 로더를 추가로 구성하지 않아도 asset 파일 (폰트, 아이콘 등)을 사용할 수 있도록 해주는 모듈 webpack 5 이전에는 raw-loader : 파일을 문자열로 가져올 때 url-loader : 파일을 data URI 형식으로 번들에 인라인 추가할 때 file-loader : 파일을 출력 디렉터리로 내보낼 때 로더를 사용하는 것이 일반적이었다. webpack 5에서는 이러한 로더를 대체하기 위해 asset module에 4개의 새로운 모듈 유형이 추가되었다. asset/resource : 별도의 파일을 내보내고 URL을 추출 (file-loader 대체) asset/inline : asset의 data URI를 내보낸다. (url-loader 대체) asset/sourc..

file-loader css 뿐만아니라 소스코드에 사용하는 모든 파일을 모듈로 사용하게끔 할 수 있다. 파일을 모듈 형태로 지원하고 웹팩 아웃풋에 파일을 옮겨주는 것이 file-loader가 하는 일이다. src 경로에 bg.png파일을 추가하고 main.css에 body 부분을 다음과 같이 수정하고 빌드하면 body { background-image: url('./bg.png') } 전과 같이 module 에러가 뜨는 것을 확인할 수 있다. .png파일을 모듈로 인식하지 못하기 때문인데 file-loader를 install 하여 webpack.config.js에 추가해 보자 npm i file-loader webpack.config.js rules: [ ..., { test: /\.css$/, use:..

로더의 역할 웹팩은 모든 파일을 모듈로 바라본다. js 뿐만아니라 css, image, font까지 모듈로 보기 때문에 import 구문을 사용하여 js 코드 안으로 가져올수 있다. 이것은 웹팩의 로더 덕분인데 로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해주거나 이미지를 URL 형식의 문자열로 변환한다. 또한 css 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다. 로더는 각 파일을 처리하기 위한 역할, 처리할 파일의 패턴을 명시하고 패턴에 걸리는 파일들은 use에 설정한 로더 함수가 돌도록 한다. ex) webpack.config.js const path = require('path'); module.exports = { ... module: { rules: [ { test: ..

배경 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터이다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것이다. ex) math.js function sum(a, b) { return a + b; } //전역 공간에 sum이 노출 app.js sum(1, 2); 위 코드는 모두 하나의 HTML 파일 안에서 로딩해야만 실행된다. math.js가 로딩되면 app.js는 이를 공간에서 sum을 찾은 뒤 이 함수를 실행한다. 문제는 sum이 전역 공간에 노출된다는 것. 다른 파일에서도 sum이란 이름을 사용한다면 충돌한다. IIFE 방식의 모듈 IIFE(Immediately Invoked Function Expression, 즉시 실행 함..

프론트엔드 개발에 Node.js가 필요한 이유 최신 스펙으로 개발할 수 있다. js 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 항상 뒤쳐진다. 아무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 바벨과 같은 도구의 도움 없이는 부족하다. 웹팩, NPM 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다. Typescript, SASS 같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요. Node.js 환경이 뒷받침 되어야 프론트엔드 개발환경을 만들 수 있다. 빌드 자동화 코딩 결과물을 브라우저에 바로 올리는 경우는 흔치 않다. 파일을 압축하고, 코드 난독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친후 배포한다. N..