나는 IT 학원에서 학생들을 대상으로 FE 강사를 하고있다. 물론 React와 같은 프레임워크 강의를 진행하지 않지만, HTML, CSS, JS, Python 등 기초 웹 프론트엔드와 언어들을 강의하고있다. 최근 한 학생이 물어본 HTML의 iframe 태그에 대해 정리하고자 이 글을 사용한다. 학생의 질문은 다음과 같다.현제 프로젝트에서 iframe을 이용해 다른 웹 사이트를 띄우려고 하는데, 인스타그램을 비롯한 많은 서비스에서 iframe을 통한 접근을 금지하는데 왜 금지하는가? 라는 질문이였다. 프론트엔드 강사라는 사람이 해당 질문에 대한 답을 제대로 하지 못했다...... 학생에게 정말 미안한 마음이다... iframe이란?iframe 태그는 HTML 문서내에서 또 다른 HTML 문서를 삽입할 ..
Kaplay 라이브러리는 Web의 Canvas API를 기반으로 게임에 필요한 다양한 기능들을 지원해주는 라이브러리이다. KAPLAY, HTML5 Games library for JavaScript and TypeScriptKAPLAY is a JavaScript HTML5 game engine library that makes it easy to create games. Is the successor of KABOOM.JS.kaplayjs.com 기존 코드에 적용const GamePlaying = ({ canvasWidth, canvasHeight }: GamePlayingPropsInterface) => { const canvasRef: RefObject = useCanvas(canvasWidth,..
새로운 프로젝트를 진행하며 웹을 제공해줄 웹 서버를 구축해야했는데, 이전에 같이 프로젝트를 개발했던 팀원이 라즈베리파이를 이용해 웹 서버를 구축한 것을 봤다. 재미있을것 같아 필자도 라즈베리파이를 이용해 웹 서버를 구축할 예정이다.물론 저수준 웹서버이지만, 그래도 서버를 구축을 경험, 서버비 절약(AWS의 프리티어 기간이 끝나 악덕한 비용을 본 경험이....)을 위해 진행할 예정이다. 위의 사진과 같은 흐름으로 통신이 이루어질 것이다. 위 과정에서 라즈베리파이를 웹 서버로 이용하기 때문에 외부 IP로 파일을 내보내는 과정이 필요하다. 이러한 경우 3가지 과정이 필요하다.라즈베리파이의 내부 IP 고정IP 포트포워딩라즈베리파이에서 DB 및 nodejs 등의 설치 및 테스트 내부 IP 고정우선 라즈베리파이를..
DB 만들기이전에 외부에서 라즈베리파이(이하 라파)에 접근하는 방법을 정리했다. 이제 라파에 데이터베이스를 구축해 보도록 하자. 필자는 MariaDB를 사용했다. 설치 및 기초 세팅 우선 MariaDB를 설치해주자.sudo apt-get updatesudo apt-get install mariadb-server 설치가 완료되었다면 mysql에 접속해보자.sudo mysqluse mysql; 그 다음 아래의 명령어를 사용해 값들이 잘 나오는지 확인해보자.select user, host, password from user; 값들이 잘 나왔다면 라파 내부가 아닌 외부에서도 DB에 접속할 수 있게 권한을 설정해주자.create user '사용할 계정명'@'%' identified by '비밀번호';grant a..
이전 시간에는 라즈베리파이(이하 라파)에 DB(MariaDB)를 연결했다. 이제 nodejs를 설치하고 React 애플리케이션을 배포해보도록 하자. NodeJS 설치NodeSource의 레포지토리를 이용해 최신 버전의 Node.js를 설치할 수 있다.curl -sL https://deb.nodesource.com/setup_20.x | sudo bash - 위의 코드에서 setup_[숫자].x 의 숫자는 설치하고자 하는 Nodejs의 버전을 의미하며 이 글 아래에서는 Nodejs 버전을 업그레이드 혹은 다운그레이드 하는 방법을 정리할 것이다. 이제 Nodejs를 설치해보자.sudo apt install nodejs 설치가 끝났다면 설치된 Nodejs의 버전을 확인해보자.node --version pm2..
React Context를 이용해 전역 상태 관리를 해보겠다. "use client";import { selectType } from '@/app/(auth-required)/main/info/course-reviews/write-review/type';import { createContext, ReactNode, useState, Dispatch, SetStateAction,} from "react";type DataType = { departments: selectType; grade: selectType;};type ContextType = { data: DataType; setData: Dispatch>;};// Context 기본값을 명확하게 설정export const Revie..
프로젝트에서 2차원 표 형식의 테이블에 input 태그를 이용해 값을 렌더링하는 부분이 있었다. 이 부분에서 수정이 가능해야 한다는 기능 요구가 있었다.그래서 각 input 태그의 onChange 속성에 핸들러 함수를 할당했지만 한번 입력하면 포커스아웃되는 이슈가 있었다.{ tableData.map((data, idx) => { return ( { data.map((info, i) => { if (info.type === 'checkbox') { return ( ) } ..
모달을 처음 만들어 보기도 하고 타입스크립트도 처음 다루어서 정말 어려웠다.... 오늘 완성은 하지 못했지만 React의 Portal이라는 기능을 이용해 fullPage 모달에 사용할 모달을 만들었다. React Portal이란? 부모 컴포넌트의 DOM 계층 구조의 밖에 있는 DOM노드로 자식(children)을 렌더링하는 방법을 제공할 수 있게 해주는 친구 ReactDOM.createPortal(child, container) 위와같이 사용해주면 되는데, child에 포탈을 통해 밖으로 보낼 대상이 되는 컴포넌트, container는 포탈을 통해 child가 이동할 곳 한마디로 child를 렌더링할 DOM Element를 넣어준다는 것이다. Portal을 통해 모달을 만들려면 모달 컴포넌트가 렌더링 될..
저번 시간에 Portal을 이용해 모달을 구현하려 했지만 상단 header바에 사용하기 적합하지 않다는 팀원의 의견을 반영해서 독립된 컴포넌트를 만들어 적용하기로 했다. 우선 헤더에 사용할 모달 컴포넌트의 코드를 보자 import { ReactComponent as HomeSVG } from 'assets/svg/home.svg'; import { ReactComponent as SettingSVG } from 'assets/svg/setting.svg'; import { ReactComponent as LogoutSVG } from 'assets/svg/logout.svg'; import { Link } from 'react-router-dom'; interface UserInfo { accountMo..
이번 글은 진행하는 프로젝트에 Storybook을 이용해 컴포넌트의 UI를 테스트하며 개발을 진행하는 컴포넌트 주도 개발법 CDD를 적용하며 정리하기 위해 작성했다.CDD는 컴포넌트를 모듈 단위로 나누어 개발하며 전체적인 UI 개발을 진행하는 개발 및 설계 방법론 이다.컴포넌트 단위로 시작해 전체 UI를 구성하기 위해 점진적으로 개발해 나아가는 Bottom-UP 성향을 갖고있다.Storybook을 이용한 CDD는 UI 디자인을 체계적으로 개발 디자이너와의 효율적인 협업을 UI 컴포넌트 익스플로어 툴을 이용해 진행할 수 있다. 문서화된 컴포넌트의 UI를 CSS, JS, 단위 테스트 등 UX에 영향을 줄 수 있는 요소들의 테스트도 가능하다. 기초 사용법우선 Storybook의 기본적인 사용법에 대해 알아보자..
이전에 참여했던 가말다 프로젝트에서 소셜 로그인 기능을 구현한 경험이 있다. 별도의 회원가입을 하지않고 구글과 네이버, 카카오와 같은 외부 소셜 계정을 기반으로 간편하게 회원가입 및 로그인할 수 있어 많은 웹과 앱 어플리캐이션에서 사용하고 있다. 이때 사용했던 것이 OAuth 2.0 프로토콜을 사용하는 Naver Login API인데 오늘은 OAuth에 대해 알아보자. OAuth란? OAuth는 유저가 비밀번호를 제공하지 않고 다른 웹사이트 상의 유저의 정보에 대해 웹사이트 혹은 애플리케이션의 접근 권한을 부여할 수 있는 수단으로서 사용되는 접근 위임을 위한 개방형 표준이다. OAuth의 구성요소 구분 설명 Resource Owner 웹 서비스를 이용하려는 유저, 자원(개인 정보)의 소유주, 사용자 Re..
