분류 전체보기230 Tailwind 속성 1. Spacing (Margin & Padding)/* Margin */.m-0 { margin: 0; }.m-0.5 { margin: 2px; } /* 0.125rem */.m-1 { margin: 4px; } /* 0.25rem */.m-1.5 { margin: 6px; } /* 0.375rem */.m-2 { margin: 8px; } /* 0.5rem */.m-2.5 { margin: 10px; } /* 0.625rem */.m-3 { margin: 12px; } /* 0.75rem */.m-3.5 { margin: 14px; } /* 0.875rem */.m-4 { margin: 16px; } /* 1rem */.m-5 {.. 2025. 9. 23. jQuery를 사용하면 코드가 간단해진다. const navBarItems = document.getElementById("navbar-items"); const toggleButton = document.getElementById("navbar-toggle"); const navbarOpenToggler = () => { navBarItems.style.display = navBarItems.style.display === "block" ? "none" : "block"; }; toggleButton.addEventListener("click", navbarOpenToggler);이 부분을 다음과 같이 간단하게 만들 수 있다. $("#navbar-toggle").on("c.. 2025. 8. 8. 어제 입사를 했다. 너무 감사하게도 80명 정도의 규모를 가진 웹 에이전시에 취직을 하게 되었다.내가 맡은 일은 국내 모 대기업의 웹사이트를 개발하는 일이다.알고보니 우리 회사에 이력서 넣은 분들은 100명 좀 넘고, 1차 면접까지 간 사람은 3~4명, 2차 면접까지 간 사람은 나 1명이었다.입사하고 나서 여쭤봤는데 실무 면접 때 동료 실무자 분들께서 나를 좋게 봐주셨던 이유는 걍 면접자들 중에서 제일 괜찮아서였다고 한다. 또한 프론트엔드 개발자인데도 퍼블리싱에 거부감 없어서도 컸다고 한다. 그리고 인성 면접 때 부사장님께서 나를 좋게 봐주셨던 이유는 연차에 비해 포부가 크고 생각이 깊은 것 같아서라고 하셨다. 특히나 본부장님께서 나를 정말 좋게 봐주셨다고 다른 개발자 동료분들이 말씀 주셨다좋게 봐주신 만큼 내가 잘 해야.. 2025. 8. 7. Zustand를 사용한 Todo List 만들기 import useTodoStore from "./store/useAppStore";function App() { const input = useTodoStore((state) => state.input); const setInput = useTodoStore((state) => state.setInput); const todos = useTodoStore((state) => state.todos); const addTodo = useTodoStore((state) => state.addTodo); const removeTodo = useTodoStore((state) => state.removeTodo); const clearTodos = useTodoStore((state) => state.. 2025. 8. 5. Zustand 사용 원칙과 예제 액션은 상태 변경에만 집중하자.액션 내부에서 API를 호출한다거나, setTimeOut을 한다거나 복잡한 조건 분기를 하는 것은 피하자.액션은 단순한 상태 변환에만 충실해야 한다. 그래야 스토어가 단순하고 이해하기 쉬워진다.액션 하나로 여러 상태를 동시에 업데이트할 수 있다.액션이 많아지면 그룹화하거나 슬라이스로 분리하는 것이 좋다.상태 변경은 반드시 set으로!import useAppStore from "./store/useAppStore";import "./App.css";function App() { const count = useAppStore((state) => state.count); const username = useAppStore((state) => state.username); c.. 2025. 8. 5. Zustand 공부 시작 npm install zustand 해서 zustand 설치하고 import { create } from "zustand";이렇게 create를 불러와 준다. create는 zustand에서 전역 상태를 만들기 위한 함수다. 이걸 호출해서 상태 저장을 할 수 있는 것이다. const useAppStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })),}));set함수는 zustand가 내부에서 제공하는 함수로, 상태를 업데이트할 때 사용한다. set((기존상태) => 새로운 상태) 로 사용한다.count: 0은 초기 상태가 0이라는 거다.increment는 action 함수로, 현재.. 2025. 8. 4. HTML + JS + CSS 간단한 토글 Navigation Bar 만들기 Navbar = First Item Second Item Third Item -.navbar-container { display: flex; background-color: rgb(221, 221, 221); justify-content: space-between; border-bottom: 1px solid gray; padding: 20px 12px;}#navbar-items { display: none;}.item { border-bottom: 1px solid rgb(202, 202, 202); padding: 12px;} 2025. 7. 29. HTML + CSS + JS 알림 창 만들기 버튼을 누르면 알림 창이 튀어나오게끔 해봤다. 알림창임 버튼 .alert-box { background-color: skyblue; padding: 20px; color: navy; border-radius: 5px; opacity: 0.5; display: none;} 이렇게 하면 버튼 눌러 열고 닫을 수도 있다. 알림창임 닫기 열기 .alert-box { background-color: skyblue; padding: 20px; color: navy; border-radius: 5px; opacity: 0.5; display: block.. 2025. 7. 28. 움직이는 Skeleton UI 구현 - .skeleton { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, #d8d8d8 0%, #eeeeee 50%, #d8d8d8 100% ); background-size: 200% 100%; animation: skeleton-loading 2s infinite linear; border-radius: 8px;}@keyframes skeleton-loading { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; }} 2025. 7. 27. 화면 너비에 따라 변하고 클릭 시 열리고 닫히는 메뉴 만들기 html jsconst mqMobile = window.matchMedia("(max-width: 600px)");const mqDesktop = window.matchMedia("(min-width: 601px)");const gridContainer = document.querySelector(".grid-container");function clearGrid() { gridContainer.innerHTML = "";}function createSubmenuElements(submenus) { return submenus.map((sub) => { const submenu = document.createElement("div"); submenu.className.. 2025. 7. 26. Adobe 웹사이트 클론 코딩 - Grid 학생 및 교사 첫 해 Creative Cloud 65% 학생 할인 이것은 클론코딩용 테스트 텍스트 입니다. Creative Cloud로 열심히 무언갈 해 보세요. 그럼 이만 마치겠습니다 자세히 보기 학생 및 교사 첫 해 Creative Cloud 65% 학생 할인 이것은 클론코딩용 테스트 텍스트 입니다. Creative Cloud로 열심히 무언갈 해 보세요. 그럼 이만 마치겠습니다 자세히 보기 .. 2025. 7. 25. Adobe 웹사이트 클론 코딩 - 이미지와 텍스트 영상 생성 새로운 방식의 영상 제작 2개의 스틸 이미지를 키프레임으로 사용하여 영상을 생성해 보세요. 아이디어를 텍스트 프롬프트로 입력하여 영상을 만들 수도 있습니다. 카메라 각도, 모션, 스타일을 선택하여 B롤을 생성하고, 시각 효과를 만들고, 장면을 조정하는 것도 가능합니다. 영상 생성 새로운 방식의 영상 제작 2개의 스틸 이미지를 키프레임으로 사용하여 영상을 생성.. 2025. 7. 25. HTML JS CSS에서의 media query id에 message라고 설정을 해 놓고, 그걸 JS에서 document.getElementById를 사용해 불러온다.window.matchMedia("화면너비").addEventListner("change", 함수) 하면 화면 너비가 change될때마다 함수가 실행되는 것이다match되면 message의 textContent를 바꿀 수 있다.useEffect가 없어서 내가 잘 할 수 있을 지 걱정이 된다만 열심히 해봐야겠다const message = document.getElementById("message");const mqMobile = window.matchMedia("(max-width: 600px)");const mqTablet = window.matchMedia( "(min-width: 6.. 2025. 7. 24. HTML JavaScript CSS Hello, artists! : HTML 문서를 읽을 때, 이 문서는 HTML 문서이고 어떤 버전을 사용했으며 그 버전에 맞는 방법으로 해석하라고 브라우저에게 알려주는 선언문.: HTML이 작용하는 범위를 지정하는 태그로 위의 DTD를 제외한 전체를 이 태그로 둘러싼다.: HTML 문서의 속성 범위를 지정하기 위한 태그이다. 이 태그 안에 타이틀이나 메타 태그 등을 넣는다.: HTML 문서의 본문 범위를 지정하기 위한 태그이다. 표시될 문서의 레이아웃을 이 태그 안에 넣으면 된다.: 링크 넣는거. Next.js의 랑 비슷하다. 네이버: 이미지 넣는거. Next.js의 랑 비슷하다. : 입력값을 받는 영역을 지정한다. 한 페이지에 여러 개가 들어갈 수는 있지만, 영역 안에 영역이 들어가는 것은 불가.. 2025. 7. 23. 퇴사 및 이직 성공 2024년 2월 초에 입사했던 회사를 2025년 7월 23일 퇴사를 하게 되었다퇴사사유는..여러 가지가 있겠지만 가장 큰 이유는 회사의 경영난과 그에 따른 미래의 불안함 때문이라고 할 수 있겠다아무튼 난 이직에 성공했다직원이 80명 정도 있는 서초의 대형 에이전시로면접 합불 연락을 주시기로 한 마지막 날에 딱 연락이 와서 너무 감사했다 엄마, 아빠, 친구들이 당연히 내가 붙을 것만 같다는 생각을 했다고 하는데솔직히 나는 붙을 거라는 확신도 없었고 면접 질문들에 압박을 좀 크게 느꼈기도 했고 (압박주신게 아닌데 내가 쫄보라 그렇게 느낀 것일 확률 매우 높음, 면접관분들 잘못 아님)면접 합불 연락을 면접 이후 4일 내로 주시기로 했는데 면접 이후 3일차까지 연락을 받지 못해 당연히 떨어진 줄 알았다그래서 3.. 2025. 7. 23. 2025년 6월, 7월 개발 회고 - MUI를 사용한 공통 컴포넌트 개발 (버튼, 텍스트필드, 텍스트필드 모달, 드롭다운, 라디오, 체크박스, alert, switch 등)- 새로운 공통 Header 만듬- 디자인대로 웹사이트 리뉴얼- 하이라이트할 날짜를 props를 통해 전달할 수 있는 Custom Calendar 개발 2025. 7. 14. 배열에서 원소만 추출한 후 중복 제거하기 const 중복제거배열 = [...new Set(기존배열.map(({ 뽑고싶은원소 }) => 뽑고싶은원소))]; 2025. 7. 8. 2025년 5월 개발 회고 유저의 타입을 통해 유저가 접근해도 되는 페이지인지 아닌지를 판별해, 유저가 접근해서는 안되는 페이지라면 접근 불가 페이지를 보여주기. Layout 컴포넌트에서 공통적으로 처리하도록 했다. 다이나믹 링크 기능을 구현했다. (로그인 페이지에서 리다이렉트하기 직전에, 리다이렉트되려는 페이지가 유저에게 접근 권한이 있는지를 판별해서, 권한이 있다면 그대로 리다이렉트하고, 권한이 없다면 기본 랜딩페이지로 이동시키도록 코드 수정)이미지 리사이즈 로직 개선엔터가 쳐져 있는 글 개행 처리 whiteSpace:"pre-line" 사용. 이거 안 쓰면 엔터처리가 적용이 제대로 안됨.useRef를 사용해 아이디를 입력하고 엔터를 누르면 비밀번호로 포커스 이동, 비밀번호를 입력하고 엔터를 누르면 로그인이 가능함import .. 2025. 5. 30. 5월을 돌아보며........ 5월은 정말 많은 일이 있었다.. 대형 프로젝트를 내가 맡아서 진행하게 되었고 성공적으로 마무리했다. 회사 동료 분 한 분은 더 좋은 기회를 잡아 떠나시게 되었고 우리 모두 그분의 앞날을 응원했다. 요즘은 헬로키티에 푹 빠졌다. 테무에서 귀여운 선풍기도 샀다.. 쿠팡에서 듀퐁 라이터도 샀는데 매우 맘에 든다.. 사진 촬영도 열심히 하고 있다.. 대통령 선거가 코앞이다.. 투표도 해야 한다...이것저것 개발 열심히 했는데 그건 따로 2025년 개발 회고에 열심히 적어보려 한다..내가 좋아하는 가수분이 우리 사장님 지인이셔서 좋은 기회로 만나뵙게 되어 같이 사진도 찍었다.. 실제로보니 진짜이쁘고상냥하셨다..초딩 중딩 때 내 우상이던 분이 내가 개발에 참여한 웹사이트를 잘 쓰고 계신다고 해주셨다.... 참 .. 2025. 5. 30. 2025년 4월 개발 회고 게시글 수정 페이지에서, 새로 수정할 값을 입력하고 다른 탭 갔다 돌아온 경우, 새로 수정한 값들이 없어지고 기존에 있던 데이터로 덮어씌워지는 이슈가 있었다. 의존성 배열에 값이 두 개가 들어가 있어서 한 값 때문에 실행되던 함수가 다른 값에 영향을 줘서 다른 페이지를 갔다 올 때마다 새로고침이 되던 거였다. 의존성 배열을 분리해 해결했다.안내 팝업을 띄우고, 유저가 확인을 누르면 일시적으로 팝업이 닫히게, 유저가 다시 보지 않기를 누르면 localStorage를 사용해 팝업을 닫고 영원히 보여주지 않게끔 함 const [showPopup, setShowPopup] = useState(false); const handleCloseForever = () => { localStorag.. 2025. 5. 2. 2025년 3월 개발 회고 화면 너비와 스크롤 여부에 따라 UI가 달라지는 GNB 만들었다. Swiper를 사용해 유저들의 작업물들이 자동으로 스크롤되고 마우스 호버 시 멈추는 UI를 만들었다. 모바일에서는 유저들의 리뷰를 하나하나 넘겨볼 수있게, 그리고 '@ramonak/react-progress-bar' 를 사용해 몇개나 넘겨봤는지를 확인할 수 있게 프로그레스 바를 만들었다. 유저들의 리뷰 또한 자동스크롤, 호버 시 멈추도록 했다. 버튼 클릭 시 파일 다운로드 받을 수 있게 했다. const serviceDownloadHandler = () => { if(router.locale == 'ko') { const link = document.createElement('a'); .. 2025. 5. 2. 이전 1 2 3 4 ··· 11 다음
