본문 바로가기

웹 스터디노트141

CDN을 이용한 "pretendard variable" 웹폰트 적용 (성능 최적화 버전) 폰트 적용 코드 페이지 내에 안에 pretendard를 로드해주고,css에서 아래와 같이 적용하면 됨.body,input,textarea,select,button,table{ color: #101010; font-size: 12px; line-height: 16px; font-family: 'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",'Noto Sans KR',sans-serif; font-weight: 500; letter-spacing: -0.4px;} preload 사용 이유를 사용하면 브라.. 2025. 4. 18.
웹폰트 사용 시 @import와 <link> 방식 중 어떤 걸 써야할까? 결론웹폰트는 방식이 성능이 좋기 때문에 @import 말고 를 사용하자. @import로딩 시점HTML 파싱 시에 바로 요청CSS파일 로드 후 요청 시작속도빠름느림SEO/접근성좋음영향 없음google pagespeed insights권장비권장 2025. 4. 18.
[css] & nesting 선택자 일반 css에서도 네스팅 선택자 사용이 가능함~브라우저 호환성도 최신 브라우저에서는 대부분 지원하고 있음. scss에서 사용하는 nesting 선택자는 사전에 컴파일이 되지만,일반 css에서의 nesting 선택자는 브라우저에 의해 파싱이 된다고 함.  한 가지 유의할 점이 태그 선택자와 같은 type selector는 아직 지원되지 않다고 하니class 선택자 등의 경우만 사용해야 한다고...  사용 예시/* 파싱 결과: .parent-rule .child-rule */.parent-rule { /* 부모 규칙 속성 */ .child-rule { /* 자식 규칙 속성 */ }}/* 파싱 결과: .parent-rule *:hover */.parent-rule { /* 부모 규칙 속성 */ .. 2025. 2. 13.
svg path코드 해석해보기 border 애니메이션을 주기 위해서 일러스트에서 path작업하고 export를 하고 나서스크립트로 요것들을 좀 변경해주려고 보니 내가 만들었지만 코드가 너무 복잡함 숫자만 보면 울렁이면서 가슴만 부여잡고 있을 수는 없기에구글링을 좀 해봤더니 아래 사이트를 발견할 수 있었음!!  https://github.com/mathieudutour/svg-path-visualizer GitHub - mathieudutour/svg-path-visualizer: Enter a SVG path data to visualize it and discover all its different commandsEnter a SVG path data to visualize it and discover all its differen.. 2024. 12. 26.
(react-ToDoList) 에디팅, 필터링 기능 추가 Edit기능 추가에 editTask()함수 추가: 배열에서 삭제 대신 변경된 배열을 반환하기 위해 editTask 내 Array.prototype.filter() 대신 Array.prototype.map() 사용editTask를 컴포넌트 prop으로 전달 (deleteTask와 동일한 방식)// #스텝1: 에 editTask()함수 추가function editTask(id, newName) { const editedTaskList = tasks.map((task) => { // if this task has the same ID as the edited task if (id === task.id) { // Copy the task and update its name ret.. 2024. 12. 4.
(react) 작업된 소스 합치기 App.jsxApp.jsx에 useState를 가져와서 작업을 상태에 저장하기 위해 App.jsx파일 맨 상단에 import 추가props.tasks를 useState() 후크에 전달하기 위해 App()함수 내 맨 위에 const ... 선언props.tasks 대신 task를 매핑한 결과가 되도록 taskList 매핑을 변경 taskList 상수 수정// #스텝1: useState를 App.jsx에 가져와 상태로 저장하기 위해import { useState } from "react";// #스텝2: props.tasks를 useState() hook에 전달하기 위해 App()함수 맨 위에 const... 추가const [tasks, setTasks] = useState(props.tasks);// #스.. 2024. 11. 27.
(react) Events & state 처리해보기 어제까지 To Do List앱의 컴포넌트화까지 완료가 되었는데... 뭔가 어렵지 않은 내용인 것 같지만, 실제로 하나하나 해보니 역시 쉽게쉽게 되는 건 없는 듯... 이제 To Do List앱이 실제로 인터랙티브하게 구동되도록 이벤트 처리, 콜백 처리 등을 공부해보면 어느정도 리액트에 대해 가냘프게나마 알 수 있지 않을까... 하는... 작은 희망을 갖고 계속 공부를 해 보겠음~ ㅋ 이벤트 핸들링Hello?  투두앱에 이벤트를 적용하기 앞서 JSX에서의 이벤트 작성법을 살짝 알아보면,예를 들어 지금까지는 위 코드와 같이 js를 사용을 했다면, jsx에서는 아래 코드와 같이 이벤트 핸들링을 직접 jsx요소에 작성해야 함.  alert("Hello!")}> Hello?  위 코드와 같이 JSX에서는 카멜케.. 2024. 11. 26.
(react) 컴포넌트 만들기4 어제 map() 함수를 사용해서 코드가 반복되는 부분을 줄여본 후 페이지는 위 캡쳐와 같이 잘 나옴~이제 React는 배열에서 데이터를 렌더링하기 때문에 컴포넌트에 key prop을 전달하여 식별할 수 있음. 키는 유니크하게 사용되어야 하는데, key는 이미 React가 관리하는 prop이기 때문에 각 task의 id값을 키로 재사용해야 하면 됨. 참고로 React에서는 반복문으로 렌더링하는 것은 모두 유니크한 키를 전달해야 한다고 함~ const taskList = props.tasks?.map((task) => ( ));   나머지 부분들 모두 컴포넌트로 만들기, 등 남은 부분들도 컴포넌트로 변경 작업을 해줘야 함~ 터미널을 열고 아래 명령어 실행 #방법 1touch src/components/.. 2024. 11. 25.
(react) 반복작업 줄이기 지금까지 만든 코드는 각 prop의 값만 다르고 반복적이기 때문에 javascript의 iteration을 이용해서 코드를 정리해줄 수 있음~코드의 다른 부분은 객체 배열을 사용해서 데이터를 만들어줌.const DATA = [ { id: "todo-0", name: "Eat", completed: true }, { id: "todo-1", name: "Sleep", completed: false }, { id: "todo-2", name: "Repeat", completed: false },];  그리고 DATA를 에 tast라는 prop으로 전달해주는데, src/main.jsx 내부에서 구성 요소 호출을 아래 코드와 같이 업데이트 해줌. DATA 배열은 이제 App 구성 요소 내부에서 props.. 2024. 11. 24.
728x90
반응형

티스토리툴바