분류 전체보기 (14) 썸네일형 리스트형 [CodePen] tistory에서 CodePen 사용하는 방법 1. CodePen 로그인 하기 (github 연동하면 편리) 2. Pen 작성하기 3. 우측 하단의 Embeded 눌러 소스 코드 복사하기 4. HTML 블럭에 카피한 코드 붙여넣기 See the Pen Fibonacci Calculator by NKKIM3107 (@NKKIM3107) on CodePen.">See the Pen Fibonacci Calculator by NKKIM3107 (@NKKIM3107) on CodePen. !주의할 점!공유한 이후더라도 CodePen에서 코드를 수정하면 공유된 페이지에서도 코드가 동기화 되어 바뀌므로 새 코드를 작성할 때에는 새로운 work 페이지를 열어 작성해야 한다! 8주차 (2024.11.25) 프로젝트 (감정 일기장)1. 프로젝트 기획 및 준비감정을 포함한 일기를 작성할 수 있는 웹 서비스 외부 폰트 사용불러온 이미지 사용 및 최적화다양한 페이지를 제공공통 컴포넌트로 UI 요소 모듈화복잡한 데이터 다루기리액트 앱을 실제로 배포 2. 페이지 라우팅페이지 라우팅이란 경로에 따라 알맞은 페이지를 렌더링 하는 과정이다.더보기MPA 방식서버가 사용자들에게 제공할 여러개의 페이지를 미리 가지고 있는 방식을 '여러 개의 페이지를 갖는 어플리케이션이다' 라는 뜻에서 MPA(Multi Page Application)라 한다. 이런 방식에서 브라우저가 새로운 페이지를 요청했을 때 서버측에서 미리 완성해 놓은 HTML 파일을 보내주면 브라우저가 그것을 그대로 렌더링하는 방식은 '서버측에서 페이지를 미리 렌더링 .. 7주차 (2024.11.18) 1. useReduceruseReducer란 react hook들 중 하나로 컴포넌트 내부에 새로운 state를 생성하기 때문에 모든 useState는 useReducer로 대체가 가능하다. useReducer를 이용할 경우, useState와 달리 상태 관리 코드를 컴포넌트 외부로 분리할 수 있다. 1.1. useReducer 실기6주차 프로젝트 업그레이드 6주차 (2024.11.11)프로젝트(투두리스트)1. 프로젝트 준비 [WEB] 리액트 앱 생성 기본 설정1. 파일 생성 후 터미널에서 리액트 앱 생성 2. 기본적으로 필요한 라이브러리들 설치 3. 불필요한 파일 삭제 및 ESLintnkkim3107.tistory.com useStateuseReducerimport './App.css'impor.. 코드블럭 커스텀하기 (Mac Style) BEFOREAFTER 1. CSS 편집CSS/* 코드 블럭 *//* 현재 코드블헉의 language 정보 표시 */pre { position: relative;}pre::after { content: attr(data-ke-language); position: absolute; bottom: 8px; right: 12px; color: #cfd2d1; font-size: 12px;}.hljs { display: flex !important; flex-direction: column; padding: 0 !important; font-size: 14px; border-radius: 8px; box-shadow: 0 12px 24px rgb(0 0 0 / 40%); color: .. 스크롤바 커스텀하기 BEFOREAFTER CSS/* Scrollbar */::-webkit-scrollbar { width: 14px; /* 세로축 스크롤바 길이 */ height: 14px; /* 가로축 스크롤바 길이 */}/* Top, Left 방향의 이동버튼 */::-webkit-scrollbar-button:start { background-color: rgba(255, 255, 255, 0);}/* Bottom, Right 방향의 이동버튼 */::-webkit-scrollbar-button:end { background-color: rgba(255, 255, 255, 0);;}/* 스크롤 바 배경 색상 */::-webkit-scrollbar-track-piece { background.. 6주차 (2024.11.11) 프로젝트(투두리스트)1. 프로젝트 준비 [WEB] 리액트 앱 생성 기본 설정1. 파일 생성 후 터미널에서 리액트 앱 생성 2. 기본적으로 필요한 라이브러리들 설치 3. 불필요한 파일 삭제 및 ESLint 설정ESLint 파일의 rules에 설정 추가 "no-unused-vars":"off", "react/prop-types":"ofnkkim3107.tistory.com 2. UI 구현1) 컴포넌트 생성 및 연결2) 기본 레이아웃 설정3) Header 컴포넌트이모지 넣는 법 - 윈도우: window + . - 맥 : ctrl + cmd + space바{new Date().toDateString()} 문자열로 날짜를 렌더링하는 JavaScript 코드4) Editor 컴포넌트5) .. 상단바 고정하기 BEFOREAFTER CSS#header { position: fixed; z-index: 999; top: 0; width: 100%; background-color: rgba(255, 255, 255, 0.9);}#content{ margin-top: 80px;}/* Media Screen - Mobie */@media screen and (max-width:767px) { #content{ margin-top: 60px; } #header {1. position'relative' → 'fixed'로 변경할 경우 위 쪽에 있던 상단바의 컴포넌트가 말 그대로 항상 고정되어 스크롤을 하더라도 화면상에 나타나게 된다. 2. z-indexz-index란 3차원의 개념으로 화면상의 가로와.. [WEB] 리액트 앱 생성 기본 설정 1. 파일 생성 후 터미널에서 리액트 앱 생성 2. 기본적으로 필요한 라이브러리들 설치 3. 불필요한 파일 삭제 및 ESLint 설정ESLint 파일의 rules에 설정 추가 "no-unused-vars":"off", "react/prop-types":"off",불필요한 파일 삭제/public/vite.svg/src/assets/react.svg불필요한 코드 삭제\src\App.jsx리턴문 안의 빈태그 코드import './App.css'를 제외한 import문 const [count, setCount] = useState(0)/src/App.css 모든 코드/src/index.css 모든 코드 /src/main.jsx스트릭트모드: StrictMode>와 StrictMode>, 이전 1 2 다음
