맨땅에서 코딩하기

무슨 차이가 있을까?requestAnimationFrame과 setInterval은 둘 다 인터넷 브라우저의 렌더링 엔진이 제공하는 내장함수이다.requestAnimationFrame은 cancelAnimationFrame과, setInterval은 clearInterval과 세트로 쓰이는데, 주로 애니메이션 효과를 위해 많이 사용한다.그런데 이 두 함수 그룹, 어떤 차이가 있을까?setInterval정확히 따지자면, setInterval은 특정 기능을 반복하는, 일종의 루프를 만들어 내는 함수라고 볼 수 있다. 개발자가 지정한 일정 시간마다 내부 코드를 반복하는, while문이라고 생각하면 편할 것 같다.왜 굳이 requestAnimationFrame을 사용해야 할까?requestAnimationFr..

웹 페이지를 기획할 때, 마땅히 정해진 틀이 없어서 팀원들과 공유할 때 알아보기 힘든 경우가 가끔 있었다.그래서 찾아본 게, 이 사이트이다. 바로 octopus.do이다. octopus.do는 무료 사용자에게는 1개의 프로젝트만 만들 수 있게 하고 있다.구독 가격은 프로 버전은 10$, 팀 버전은 42$로 책정되어 있다. 이제 이걸로 프로젝트를 만들어 보겠다.프로젝트를 처음 생성하면, 메인 섹션에서 페이지 하나와 그 하위 페이지 3개가 구성되어 나온다.그리고 서브 섹션에서 쿠키 페이지와 404 에러 페이지가 구성된다. 다른 섹션을 추가하거나 추가로 페이지를 생성할 수도 있으니, 이제 기능을 살펴보도록 하겠다.각 블록들은 9 종의 색상과 11 종의 와이어프레임, 그리고 2 종의 화살표 타입을 사용할 수 있..

공식 홈페이지: https://kafka.apache.org/이벤트 스트리밍이란이벤트 소스에서 이벤트 스트림 형태로 실시간으로 데이터를 수집하고, 이벤트 스트림을 나중에 검색할 수 있도록 저장하며, 이벤트 스트림을 실시간 또는 소급적으로 조작/처리/대응하고, 필요에 따라 다양한 목적지 기술로 라우팅하는 방식이다.데이터의 지속적인 흐름과 해석을 보장해, 적절한 정보가 적절한 시간과 장소에 제공될 수 있게 돕는 것이 기술의 목적이다. 인체로 예시를 들어본다면, 눈(이벤트 소스)으로 계란이 어디에 있는지 확인(데이터 수집)한 다음. 그걸 기억(저장)한다. 그 뒤 계란을 사용해야 할 일이 생길 때, 장소를 기억한 다음 발을 통해 이동(라우팅)하는 일련의 과정을 이벤트 스트리밍이라 할 수 있을 것이다.kafka..

for 문조건식이 T 값일 때만 반복몇 번 반복해야 할지를 알고 있을 경우 사용구조for (초기식; 조건식; 증감식) {}while 문조건식이 T 값일 때만 반복몇 번 반복해야 할 지 모르고 있을 경우 사용구조while (조건식) {}do-while 문while 문과 동일하지만, 최소 한 번 실행한 뒤 반복하는 것이 특징구조do {} while (조건식)break 문 / continue 문break; 현재 반복문을 종료continue; 현재 반복을 건너뛰고, 다음 반복으로 이동

if / else if / elseT/F로 판별될 수 있는 조건식에 사용if 조건문 안에 if 조건문을 추가할 수 있음.else if 문이나 else 문은 if문이 없을 경우 사용할 수 없지만, if 문은 단독으로 사용할 수 있음.구조if (조건식) { }else if (조건식) { }else {}switch - case다수의 값이 나올 수 있는 조건식에 사용break문이 없을 경우, 다음 case도 진행하기 때문에, 의도하지 않는 이상 break문을 항상 작성해 주어야 함.구조switch (조건식) { case 값1: break; case 값2: break; default: break;}삼항 연산자단순한 조건 처리에 사용삼항 연산자 내부에서 삼항 연산자를 추가로 사용..

예시 코드#include class MyClass { public: int publicVar; int getPrivateMethod() { return privateVar; } void setPrivateMethod(int value) { privateVar = value; } private: int privateVar; protected: int protectedVar; public: void publicMethod();}int main() { MyClass myClass; myClass.publicVar = 10; myClas..

app router의 도입nextJS 13.X 부터 app router가 도입되었다. 이전에 사용하던 파일 기반 라우팅인 page router는 아직 사용할 수 있지만, 최신 기능 적용이 늦거나 되지 않는다고 한다.무슨 차이가 있을까?내가 본 가장 큰 차이점은, 디렉토리 구조이다. 아래는, 동일한 라우팅 구조를 가지고 있는 두 개의 폴더 구조다.// App Routersrc/ app/ page.jsx // URL: / about/ page.jsx // URL: /about products/ page.jsx // URL: /products [id]/ page.jsx // URL: /products/:..

크롤링 작업을 통해 쇼핑몰 가격 정보 수정 기록을 확인하던 중, 확인해야 할 쇼핑몰이 늘어나고, 정확한 집계를 위해 시간을 맞춰야 했다. 특정 시간에 직접 실행하기엔 변수도 많고, 실수할 수도 있어 해당 작업을 서버에서 자동으로 실행하게 하려 했다. 그렇게 찾은 방식이 scheduler의 사용이다.scheduler는 다음과 같은 방식으로 사용하는 것 같다.작업을 저장할 메모리 요소(DB, file 등)를 연결한다.스케쥴링 작업과 실행 시간을 정의한다.연결된 메모리에 작업을 저장한다.작업 큐에 저장한 작업을 등록한다.실행 시간이 되고, 작업이 실행된다.작업 완료 후, 후속 처리 또는 작업을 삭제한다.나는 fastapi로 서버 개발을 하고 있었기 때문에, apscheduler라는 라이브러리를 사용하기로 했다..

서론 react-router-dom을 사용하던 도중, 갑자기 궁금한 점이 생겼다. react-router-dom을 사용해 페이지를 이동하는 기법은 크게 두 가지가 있다. 바로 Link와 useNavigate()이다. 그런데, 두 요소를 언제, 어떻게 써야 적재적소에 사용한다고 볼 수 있는 걸까? 회원 가입을 할 때, 데이터 제출 완료 버튼에 Link를 담을 수도 있고, 데이터 검증 후에 useNavigate로 보낼 수도 있을 것이다. 이 부분에 대해 공부해보려 한다. 본론 Link Link는 html 기본 태그인 와 동일하다고 볼 수 있다. 홈 홈 위의 두 태그는 동일 작동을 할 것이라 예측할 수 있다. 물론 a 태그는 페이지 전체를, Link 태그는 컴포넌트만 렌더링 하긴 하지만 말이다. useNavi..

tailwind 공식 사이트 링크 tailwind 설치 과정 npm으로 tailwind를 설치하고, 초기화한다. npm install -D tailwindcss npx tailwindcss init 초기화하면서 만들어진 tailwind.config.js 파일에 설정을 적용한다.나의 경우에는, typescript를 사용하려 했기 때문에, 혹시 모를 js 파일까지 생각해 content 부분에 {js, jsx, ts, tsx} 처럼 추가해 줬었다. 그때는 몰랐다. 이게 고난의 시작이 될 줄은... module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } 사용할 css 파일에 추가하기.모든 디자인을 ta..