JavaScript(3)
-
[Next.js] 공부 시작 및 프로젝트 생성
0. 잡설사실 프론트엔드 프레임워크의 경우 이미 React로 팀 프로젝트를 두 번 진행한 적이 있어, 이걸로 쭉 더 공부하는 것도 맞다고 생각하지만 아래 이유로 공부를 시작하게 되었다. CSR(Client Side Rendering)이 아닌 SSR(Server Side Rendering) 방식을 경험해보기사실 SSAFY에서 가르쳐준 Django도 풀스택 프레임워크로 방식은 배웠었지만.. Django로 하는 건 뭔가 ㅎ..Vercel 배포 시 백엔드 부분도 겸해서 이후 만들어볼 프로젝트(포트폴리오?)에서 배포 방식을 어떻게 할까 고민했는데, AWS는 커스터마이징 부분이 너무 포괄적이라서 Vercel로 배포를 할 생각(인프라도 해보니 재밌었는데, 일단 프론트엔드 중심의 공부를 위한 프로젝트라) 프론트엔..
2025.01.30 -
[React Native] 좌충우돌 리액트 네이티브에서 이미지 스프라이트 기법 사용하기
1. 사용 계기프론트엔드 개발 중 동적인 이미지 구현을 하고 싶을 때가 있음. 이번 프로젝트에서 사용할 일이 생겼었다. 개발을 모르던 나도 알았던 gif를 사용해볼까도 했는데, gif의 단점인 동적 제어(재생, 정지)가 안되는 점이 이번 프로젝트에서 가장 큰 문제여서 다른 방식을 찾아보던 중 이미지 스프라이트 기법을 알게 됨. 이미지를 행과 열로 배치하고, 그걸 번갈아서 보여줌으로서 동적인 느낌을 선사할 수 있다. 장점은 여러가지가 있는데 일단 이미지 하나니까 gif 대비 가볍고, 여러가지 이미지를 배치하면 그 순서와 조합에 따라 다양한 동적인 움직임을 선사할 수 있다!(하지만 시간은 그리 많지 않아서 결국 저 둘만...) 나는 흔히 사용하는 기법이라고 생각해서 이미 라이브러리들이 많지 않을까 싶어..
2024.12.25 -
[HTML] 이상적인 숫자 Input, <input type="number">를 쓰지 않는 이유
HTML에서 태그를 사용할 때 보통 type 속성을 설정하여 입력값의 유형을 정의함.예를 들어 type="text"는 기본 텍스트 입력, type="checkbox"는 체크박스를 구현함.근데 number는 잘 사용하지 않는데 궁금해서 찾아보고 이유를 확인함 입력값 제한의 불완전성 위 input에다가 입력값을 넣어보면 알 수 있는데 기본적으로 글자를 모두 제한하지 않음 +, -, .와 같은 특수기호 (+와 -는 덧셈, 뺄셈이 아닌 부호로서만 작용함, ex: +123, -123) e (예: 1e10 형태의 지수 표현) 한글 글자..(글자 제한은 브라우저 단에서 제어하는데 들어가긴함)위 ()의 규칙을 따르지 않으면 console.log에 아무것도 찍히지 않음 (NaN으로 인식되기 ..
2024.12.21