전체 글
[MSW x SuperHackathon 2022] 해커톤 참가합니다!
MapleStory 하이퍼버닝 소식을 듣고 , 방학때 즐겨하고 있었는데, 메이플 IP를 이용해서 어떤 프로그램을 만들 수 있다는데 어떻게 참습니까! 바로 지원을 했고, 주요 기술스택은 Lua를 이용할 것 같은데, 이번기회에 게임 개발 쪽도 한번 맛보고 ,해커톤도 하고, 다양한 경험을 하고 오겠습니다 :) 중간중간 해커톤 관련 글 , Maple Story World 관련 공부한 글이 올라갈 수 있습니다.
[React/JS/SPA/Render] React의 Rendering
우선, React와 JS의 Render에서 차이점을 명확하게 봅시다. JSX로 뭐 HTML Element 찍어내는거 , 재사용성 좋아진거 맞습니다. 하지만 JS는 결국 Interaction이 중요합니다. 바닐라 JS는 변경이 일어나면 , Element들을 다 다시 그리게 됩니다. 이 코드를 우선 보시죠. const rootEl=document.getElementById("root"); const randomBtn = () =>{ const random = Math.floor(Math.random() * 10 + 1); const btnEl = ` ${random} ` rootEl.innerHTML = btnEl; } setInterval(randomBtn,2000); 2초마다 특정 이벤트가 발생했을 때,..
[React/JSX/Basic/반복문/조건문] JSX의 편리함
전 React를 다룬지 몇개월 안된 "아기"이지만, React를 다루어 보면서 느꼈던게 JSX를 이용하면서 HTML에 "변수"의 개념을 도입할 수 있었다는게 정말 편리했던것 같습니다. 이거 덕분에, 사실 생산성도 잘 챙길 수 있었던것 같습니다. 오늘은, 그 편리함에 대해서 더 와닿게 기록을 해보겠습니다. React에서는 JS를 쓸 수 있다 저는 React를 React Hook으로 먼저 배웠지만, Stack overflow 같은곳만 가도, class 기반의 컴포넌트들을 많이 볼 수 있습니다. 사실 , 사용하다보면 React는 완전 다른 생태계를 구축해서 다른 언어같지만, JS의 라이브러리일 뿐이죠! 즉 ,React에서도 JS를 사용할 수 있고 , JS와 JSX를 적절하게 섞어서 쓸 수 있습니다. 저번에 작..
[React/jsx/DOM/Basic] React의 DOM 조작과 JSX
SandBox환경에서 React를 살짝 맛보고, 후에 Visual Code를 이용해서 npm을 이용해보겠습니다. DOM 조작 JS로 DOM을 조작하는건 당연한 일이다. JS는 "동적"으로 웹페이지를 만들기 위해서, 작성하는 스크립트니까. * DOM 이란? 더보기 Document Object Model로, 브라우저에서 HTML 태그를 처리하기 위해서, 만든 "개념"이라고 보면 된다. 예를들어, 버튼 1개가 있으면 우리는 버튼이라고 인식하지만 , 브라우저에서는 버튼 태그를 지정하기 위해서 일종의 관리 체계가 필요하게 된다. 즉, 태그들과 같은 HTML 객체들을 관리하기 위한 체계가 DOM이다. DOM은 트리형태를 띄고 있다. const rootEl = document.getElementById("#root"..
[Project/JS/배너] 자바스크립트로 이미지 슬라이더 직접 만들기 - 오류,기능추가!
추가할 기능 Slider의 끝과 처음이 연결되어있는 듯한 효과 Indicator을 클릭하면 , 해당 index로 이동하는 기능 버그 Next 버튼을 클릭할 때, 뭔가 점점 빨라지는 현상 원인 점점 빨리지는 현상의 원인 Next 버튼을 눌렀을 때도, SetInterval의 이벤트루프는 동작하고 있기 때문이다.Next버튼이나, Prev버튼을 눌렀을 때 다시 Interval을 초기화 시켜줘야한다. Interval을 초기화하는 코드가 많아져서, 따로 함수로 구현하였다. * 추가 코드 onMoveNext(){ ... onResetInterval(this.autoplay) ... } onResetInterval(IsAutoPlay){ if(IsAutoPlay){ clearInterval(this.#interValI..
[Project/JS/배너] 자바스크립트로 이미지 슬라이드 구현 - 슬라이드 기능 구현
저번에 작성한 설계 그림을 보고 오늘은 구체화 시키고, 코드까지 작성해보려고 한다. 슬라이드 구현 웹 브라우저에서 이미지 슬라이드를 "직접" 구현하기 위한 아이디어를 찾아보았다. 이미지를 하나의 필름처럼, 늘어놓고 옆으로 이동시키는 개념으로 구현하는 거였다. 이미지를 하나의 필름 처럼 늘어놓기 위해서, Float이나 Flexbox를 이용할 수 있고, 옆으로 이동시키기 위해서는 Margin을 주거나, left와 같은 position을 변경할 수도 있을거 같다. 이미지들을 FlexBox로 쭉 늘어놓고, Margin-left를 줘서 밀어내는 방식으로 구현하려고 한다. prev,next 버튼 prev버튼을 누르면 , 이미지의 크기만큼 margin-left의 +값을 해주고, next버튼을 누르면 이미지 크기만큼의..
[Project/JS/개발환경] 자바스크립트로 이미지 슬라이더 직접 만들기 - 개발환경
Templetes(개발 폴더 구조) 아래와 같은 구조로, 개발을 진행하겠습니다. image 폴더에는 배너로 쓸 이미지가 첨부됩니다. Webpack 설정 사용 플러그인 HtmlWebpackPlugin bundling 할 때, html 파일도 같이 번들링하는 Plugin입니다. 많이 쓰이는 PlugIn 이더군요! Cssloader, CssMinimizerPlugin, MiniCssExtractPlugin CSS도 같이 bundling하기 위한 Plugin입니다. TeserWebpackPlugin Bundling 파일 압축을 위한 Plugin입니다. Module(로더)를 설정할 때, 이미지 로더도 같이 설정해줍니다. ... module:{ rules:[ ... { test:/\.(gif|jpe?g|tiff?|..
[Project/JS/배너/설계] 자바스크립트로 이미지 슬라이더(Swiper) 직접 만들기 - 설계
홈페이지를 들어가보면, 움직이는 배너를 볼 수 있다. 이번 프로젝트는 배너를 Vanilla JS로 구현해볼거다! 배너를 만드는 라이브러리는 이미 잘 만들어저있다.(Swiper JS, React Slick 등) 빠르게 작업을 해야할 때는 라이브러리를 활용하되, 라이브러리 또한 JS로 이루어져있기 때문에, 한번 만들어보고 싶어졌다. HTML Box Modeling 하기 (Wire Frame) Slider-wrap : 이미지 슬라이더 최상위 Div 입니다. Slider : 슬라이더들을 감싸고 있는 Slider div입니다. 하위 컴포넌트로, ul > li 형태로 slider가 여러장 있는걸로 구현합니다. Button : Next, Prev 등 클릭하면 이미지 슬라이드가 넘어가게 만들겁니다. indicator ..