Flik LAB

웹팩은 현대 웹 개발에서 중요한 역할을 하는 도구입니다. 복잡한 자바스크립트 애플리케이션의 개발과 배포 과정을 효율적으로 관리해주는 모듈 번들러로, 개발자들 사이에서 필수적인 도구로 인식되고 있습니다. 이 글에서는 웹팩의 기본 개념을 설명하고, 웹팩 사용과 관련된 자주 묻는 질문들에 대해 답변하고자 합니다. 웹팩이란 무엇인가요? 웹팩은 여러 개의 파일(자바스크립트, CSS, 이미지 등)을 하나 또는 여러 개의 파일로 합쳐주는 모듈 번들러입니다. 이 과정에서 웹팩은 파일들을 최적화하고, 불필요한 부분을 제거하여 웹사이트의 성능을 향상시키는 역할을 합니다. 웹팩의 핵심 기능들 1. 모듈 번들링(Module Bundling) 개념: 웹팩은 웹 애플리케이션을 구성하는 자바스크립트, CSS, 이미지 파일 등 다양..

항해 플러스에서 주최하는 토이프로젝트 대회인 제 2회 코육대에 참여한 후기입니다. 원래 생각했던 것 눈치우기는 여러 스테이지로 이루어져있다. 눈은 계속 제조된다. 산타 할아버지가 제빙기(?)에서 눈을 제조한다. 여기서 generative하게 눈이 생성된다. 눈 제조가 완료되면 눈이 귀퉁이로 내려온다. 눈은 마우스로 치울 수 있다. 밀면 밀리기도 하는데, 최종적으로 쓰레받기 모양의 통안에 눈이 갇혀야 치운것으로 인정된다. 눈을 얼마나 치웠나 포인트로 쌓인다. 3d로 구현하고 싶지만... 이번 기간 내에는 어려울 것 같다. 실제 만든 것 기획시에 생각했던 많은 부분이 생략되고 화면을 가득 채우는 눈 파티클을 구현하는 것으로 마무리되었습니다. 눈은 화면위를 채우고 눈을 닦아야 하는데 잘 상상이 안되어서 어려웠..

항해 플러스에서 주최하는 토이프로젝트 대회인 제 2회 코육대에 참여한 후기입니다. 여러가지 주제를 조금씩 개발하다가 결국 마지막 마무리는 타로 컨셉의 신년 카드 개발을 하게 되었습니다. 여러 우여 곡절이 있었는데 프로젝트 소개를 중심으로 이번 회고를을 구성하려고 합니다.간단 소개새해 인사 대신 상대방에게 운세를 봐주는 컨셉으로 타로카드를 열면 상대방의 운세가 나오는 컨셉입니다. 보낸 사람이 상대방의 관심사를 미리 적어 보내기 때문에 관련있는 메시지가 등장합니다. 메시지와 카드는 입력한 정보에 따라 AI가 맞춤으로 제작합니다. 시연하기기획 의도그냥 신년 인사는 열어보는 없을 것 같아서 어떻게 하면 더 궁금하고 흥미로운 것을 만들까 하다가 운세+개인 맞춤형 문구를 조합하면 좋겠다는 생각이 들었습니다. 그렇게..

아직 기본적인 기능 위주로 제작된 상태입니다. 만들면서 추가로 업데이트될 수 있습니다. 항해플러스에서 주최하는 코육대의 과제 중 "개발자의 편지"를 수행하기로 하고 빠르게 작업을 해보았습니다. 여러 주제 중 스캔을 하는 과정에서 빠르게 기본 작업만을 마치고 나서 작업을 공유해봅니다. Repository 바로 가기 / 게임 시연하기 GitHub - fliklab/p5-jumping-game: A Jumping Game made with p5.js A Jumping Game made with p5.js. Contribute to fliklab/p5-jumping-game development by creating an account on GitHub. github.com 코육대 대회 관련 정보는 여기를 참고..

항해플러스에서 주최했던 1회 코육대가 인기가 많아서 이번 크리스마스 시즌에 다시 2회 코육대를 한다고 합니다. 저는 1회 때에는 다른 일로 바빠서 참가를 못했는데 이번에 코육대 참가를 해볼 겸 궁금하신 분들을 위해 참가하기 전 저의 전략을 공유하면서 관련 정보를 소개 드리려고 합니다. 코육대가 돌아왔다... 코육대는 코딩 육상대회의 줄임말로 이번 크리스마스를 포함하는 도전기간동안 주어진 주제로 토이프로젝트를 완성하는 프로젝트입니다. 최우수프로젝트에게는 엄청난 선물을 준다고 하며, 참가만 해도 항해플러스 수강 할인권을 준다고 합니다. 저는 연휴 때에 특별히 일정이 없으면 스스로 프로젝트 거리를 찾아서 하곤 했는데 저와 비슷한 생각을 가진 사람들이 많나봅니다. 코육대가 있으니 크리스마스를 알차게 보낼 수 있..

정적(Static) 웹사이트라 함은... 정적으로 로딩되는 사이트이다. 다르게 말하면 페이지를 로딩하는데 html파일을 불러오는 것 외에 서버와의 통신은 하지 않는다는 것이다. 대부분의 Github 기반의 블로그가 이런 방식으로 만들어져있다. (Github page 혹은 Netlify, Vercel을 통해 배포하는 사이트들이 보통 이런 케이스이다) 이런 방식의 사이트는 정보를 일방적으로 게시하는 페이지는 만들 수 있지만 게시판이나 방명록처럼 사용자가 직접 글을 올리는 페이지를 만들기는 쉽지 않다. (다만 꼼수를 쓰면 가능은 할지도 모른다.) Git based CMS는 여러 꼼수(?) 중 하나로, 이 방식을 통해 사이트 내에서 에디터를 통해 글쓰기가 가능하다. 대부분의 사람들은 사이트 관리를 기성블로그(네..

요즘 블로그 만드는 것에 대한 실험을 계속 진행중이다. Vercel 은 Next.js를 개발한 회사이기도하고, 서버리스 웹사이트를 배포할 수 있는 플랫폼이다. github레포에 있는 사이트를 vercel로 배포하면 git push를 할때마다 알아서 배포가 자동으로 진행되기 때문에 편리하다. 또 github pages과 다르게 private repository도 사용할 수 있다.(무료 요금제 기준) Vercel에 수록된 템플릿을 통해 사이트를 바로 생성하는 것도 가능한데, 템플릿 repo를 직접 clone해서 배포하는 것과 동일한 과정을 조금더 쉽게 해준다. vercel에서 내 github계정에 만들어준 repo를 clone해서 작업을 하면 되는 식이다. 요즘 이 기능을 종종 활용해보고 있다. 실험이라 함..

이벤트 키보드가 입력되는것, 마우스가 클릭되는 것 등을 이벤트라고 한다. Javascript에서는 이벤트가 발생했을때에, 이를 처리할 수 있도록 어떤 함수가 호출되도록 지정할 수 있는데, 이때 호출되는 함수를 이벤트 핸들러라고 한다. Javascript 이벤트 핸들러의 종류 마우스/키보드 뿐만 아니라 웹사이트를 사용할 때에 일어날 법한 사건에 대해서 이벤트 핸들러가 정의되어있다. 보통 이벤트의 이름 앞에 "on"을 붙여서 on~~~ 처럼 이름이 붙은 경우가 많다. 아래는 javascript 이벤트 핸들러 중 몇가지를 가져온 것이다. onclick: 마우스 버튼이 눌렸다 떼어질 때 실행된다. onkeydown: 키가 눌렸을 때 실행된다. onmouseover: 마우스가 엘리먼트 위로 이동할 때 실행된다. ..

[Bit of Code:Javascript/React] Simple Accordion 사용 기술 : react, javascript - react componenet : Accordion - state : isCollapsed(열려있는지 여부) - props : collapsed(최초 열려있는지), label(제목), children(내용) - 아코디언 제목 클릭시, 실행될 함수 div onclick="this.toggleAccordion" 으로 지정. - React.createRef()으로 css에 접근

BOC(Bit of Code) 2019-08-17 Morning javascript animation(set interval 쓰기) https://codepen.io/fliklab/pen/KKPMXKa KKPMXKa ... codepen.io