분류 전체보기 (399) 썸네일형 리스트형 [CSS] 반응형 레이아웃의 기본, 중단점( styled-componets 에서 중단점 적용 팁) 들어가는 말오늘은 반응형 레이아웃의 기본이 되는 중단점에 대해 알아보고, 실제 styled-components 에 적용하는 방법과 사용 팁에 대해 정리해볼까 합니다.중단점이란 뭘까요?CSS에서 중단점(breakpoints)은 반응형 웹 디자인에서 화면의 크기에 따라 스타일을 변경할 수 있게 하는 기준점을 말합니다. 다양한 화면 크기(모바일, 태블릿, 데스크탑)에 맞는 스타일을 적용하기 위해 사용됩니다. 최근에는 중단점을 모바일 우선으로 두고, 스타일을 적용하고 있다는데 이를 어떻게 적용하고 있는지 향후 예시를 통해 알아볼 것입니다. 중단점 사용 방법중단점은 주로 미디어 쿼리(media queries)를 통해 정의합니다. 특정 화면 너비 조건에 따라 스타일을 적용할 수 있도록 하는 것이 미디어 쿼리입니다... 잔소리 프로젝트 마무리 잔소리 프로젝트란?쟌소리 프로젝트는 구글 애드센스 API 를 기반으로 애드센스에서는 제공하지 않는 보고서 알림에 대한 불편함을 개선하기 위해 시도한 메일링 서비스를 만들어보고자 시도했던 프로젝트 입니다. 순전히 개인화된 프로젝트 였기에 실제 사용자를 받아볼 생각은 없는 방향으로 진행되었습니다(퀄리티 자체도 실제 서비스하기에는 부족했구요). 데스크톱 모바일 사용된 기술스택전반적으로 사용한 스택 부분에서는 NextJS14, PostgreSQL+ Prisma + GCP Cloud SQL 으로 개발하고, GCP Cloud Run 을 통해 도커 컨테이너 방식으로 배포하는 방향으로 갔습니다. 이번 프로젝트에서 시도해 보고자 했던 것해당 프로젝트는 순전히 스케줄링을 통해서 사용자가 등록한 보고서 옵션과 일정에 .. 🔧[매번 갱신] 유용한 도구 및 개념 공유소 최근 백엔드 학습에도 도전중입니다. 해당 포스트는 아마 프론트엔드 위주의 지식을 정리할 듯하고, 백엔드 개념 공유소는 별도의 포스트를 추가할 것 같습니다. 해당 포스트는..제가 정리해서 한 번에 보고 싶은, 혹은 공유해서 사용해보면 좋을 것 같은 도구들을 모아두는 공간입니다. 매번 갱신될 때 마다 최신 날짜로 올라옵니다. 원래 수정 시 날짜를 표기하지 않았는데, 관리 효율성을 위해 새로 추가된 내용은 옆에 날짜를 표기하기 시작했습니다. 여러모로 도움이 되는 글이 되길 바랍니다. 공유하고 싶은 VSCODE 플로그인- import cost : 모듈이나 라이브러리 import 시에 추가되는 모듈, 라이브러리의 크기를 실시간으로 알려줍니다. 24.8.5- code spell checker : 영문에 익숙하지 않.. ReactJS(NextJS) 에서 tailwindCSS 초기화 설정이 Editor.js 스타일도 초기화 하는 문제 고치기 문제 발단현재 NextJS 에서 공지사항 게시판을 만들던 중 Eidtor.js 를 사용해보기로 하였습니다. 그래서 적용 후 사용해보려고 하니, 아래와 같이 레벨 1의 Heading 이 적용되어야 하는(h1) 상황임에도 기존에 설정해둔 tailwindcss 의 초기화 설정이 해당 에디터 라이브러리의 CSS 도 같이 초기화 해버리는 문제가 발생하고 있습니다. 해결방법보통 이러한 문제를 개선하기 위해 tailwindcss 에서 제공하는 도구가 존재하는데, 해당 도구를 사용해서 문제를 개선할 수 있습니다. 우선 아래 도구를 설치해줍니다. npm i @tailwindcss/typography tailwind.config.ts 파일로 이동합니다. 아래와 같이 plugins 부분의 앞서 설치한 도구를 require.. 리액트 네이티브 VS 리액트 들어가는 말이번 시간에는 리액트 네이티브를 처음 사용해보면서 리액트와 어떤 차이점과 공통점이 있는지 정리해 보는 시간을 가져볼까 합니다. 리액트 네이티브는 말로는 리액트와 유사하다, 리액트 JSX 로 앱을 개발할 수 있다 등등은 접해봤지만, 실제 사용해본 경험은 없었기에 크게 와닿지는 않았는데, 이번에 직접 사용해보면서 느낀 것들을 정리해보면 좋을 듯하여 이 시간을 마련해 보았습니다. 리액트 네이티브와 리액트우선 리액트와 리액트 네이티브가 각각 무엇인지 언급하고 시작할까 합니다. 리액트 네이티브리액트 네이티브는 JavaScript와 React를 사용해 네이티브 모바일 애플리케이션을 개발하는 프레임워크입니다. 컴포넌트 기반 아키텍처와 JSX를 사용하여 UI를 구성하며, 네이티브 UI 컴포넌트와 브리지를.. [Git Error] Merge with strategy ort failed. 해당 포스트는해당 이슈의 해결책으로 적용된 각 명령어에 대한 설명을 기록하여 향후 참고 용도로 삼기 위해서 작성된 포스트 입니다. 문제 및 원인 해당 에러가 발생하는 원인은 원격 저장소의 최신 히스토리와 로컬 저장소의 최신 히스토리 간에 충돌이 발생하였으나, 해당 충돌이 자동으로 병합하기에는 복잡한 경우에 발생할 수 있습니다.- 이슈 관련 커뮤니티(스택오버 플로우): https://stackoverflow.com/questions/75673699/how-to-fix-the-problem-merge-with-strategy-ort-failed 해결방법해당 문제를 해결하려면 우선 로컬 저장소의 변경사항을 merge 하지 않고 잠시 별도의 임시 공간에 저장해둡니다. 그 후 원격 저장소에서 받아온 최신 히스토리.. 리팩토링 히스토리(24.08.21 ~) 해당 포스트는- 현재 포스트는 나만의 명언집 프로젝트(NextJS 로 개발)의 코드를 개선하면서 얻은 산출물을 남겨두는 용도로 작성 되었습니다. 포스트 추가server action 적용 전- 클라이언트로 부터 서버로 요청이 전송되는데 0.21ms 걸림- 서버로 부터 응답을 기다리는데 1.11초 걸림- 서버로 부터 받은 콘텐츠를 다운로드 하는데 0.61ms 걸림server action 적용 이후- 클라이언트로 부터 서버로 요청이 전송되는데 0.37ms 걸림- 서버로 부터 응답을 기다리는데 257.79ms초 걸림- 서버로 부터 받은 콘텐츠를 다운로드 하는데 0.61ms 걸림결과적으로 - 결과적으로, 1100ms−257.79ms=842.21ms(약 0.8초 ; 약 75.8%) 단축 포스트 수정Server A.. HTML,CSS,JS + GSAP 로 만드는 버블 어택 애니메이션 버블 어택 애니메이션이란?여름철 물 대신에 거품이 나오는 장난감 총을 보고 영감을 받아서 제작한 애니메이션 입니다. 그래서 이름도 버블 어택 애니메이션이죠. 완성하게 된다면, 하단 영상처럼 거대한 장난감총이 마우스의 위치에 따라 각도를 조절하고, 클릭한 위치에 무수히 많은 거품이 날아가는 애니메이션을 볼 수 있습니다. HTMLsvg 는 커서 입니다. CSS* { margin: 0; padding: 0; box-sizing: border-box;}body { position: relative; overflow: hidden; background: #333; height: 100vh; width: 100%; dis.. 이전 1 2 3 4 5 ··· 50 다음
