Flik LAB

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

정적(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

키보드에는 작은따옴표와 비슷한 문자가 하나 더 있다. ` 바로 이 문자이다. javascript에서는 템플릿 리터럴에 활용되고, 마크다운에서 코드를 강조(code, fenced code block)하는데 쓰이기도 하는 문자이다. 이 문자를 작은따옴표로 착각해서 헤메다가 한참 후에 작은따옴표와 다른 문자라는것을 깨달았다. 백틱(backtick)과 작은 따옴표의 비교 '작은 따옴표1' ‘작은따옴표2’ `백틱(backtick)` 작은 따옴표는 열고닫는게 구분된것과 구분이 없는것이 있다. 어느것과 비교해봐도, 백틱이 차지하는 자리가 더 크다는걸 눈으로 봐도 알 수 있다. 그리고 비스듬한게 더 강조되어있는 모양이다. 또 작은 따옴표는 열고 닫는게 있지만, 백틱은 구분이 없다. 명칭 Backquote, backti..

CSS를 최근에 바짝 공부하고 있는데.margin과 padding의 차이가 헷갈려 간단히 정리해 둔다. Margin과 Padding 두 가지의 공통점은 박스 하나의 여백 혹은 크기로 생각할 수 있다는 것이다. 그런데 이 둘의 차이는 박스에 background-color혹은 border를 넣어보면 쉽게 알수 있다. padding 은 border안쪽의 영역을 결정한다. background-color를 포함하는 영역이다. margin은 border바깥의 영역을 결정한다. background-color 바깥의 영역이다. 아래 그림을 보고 좀더 이해해보자. 메뉴를 만들고 각 박스의 padding, margin 값을 조절한다. (실제로 값을 적용한것은 아니고 이해를 하기 위해서 만들었다) (1) margin, pa..

http://flexboxfroggy.com/#ko 불러오는 중입니다... CSS스타일에 따라 개구리들을 정렬하는 게임이다. flex-box의 값을 적절하게 조절해서, 개구리가 각 칸의 색깔에 맞게 위치하면 성공이다.

함수를 끌어 올려? MDN Javascript 문서를 보다가 보니 함수를(혹은 클래스)를 끌어올린다는 표현이 가끔씩 나온다. 대체 뭘 끌어올린다는 건지 이해가 되지않아 몇개의 글을더 찾아 읽어보다가Hoisting이라는 단어를 끌어올린다고 번역하였음을 알 수 있었다.영어 발음 그대로 '호이스팅'이라고 표현된 부분도 있었다. '끌어올리다'라는 용어 자체가 흔히 쓰이는 말인지는 모르겠지만그 단어 자체에 대한 정의는 따로 찾을수 가 없어서 의미를 알기가 혼란스러운 점이 있긴 하다.MDN에 Hoisting에 대한 페이지가 따로 존재한다. '끌어올리다'라는 표현이 잘 이해가 안되었는데 함수가 선언된 부분을 코드의 맨 위로 끌어올린다는 것에서 나온 표현으로 볼 수 있을것같다. 호이스팅(hoisting)에 대해서 몇가..