![]()
NHN CSS 컨벤션 1. css 속성 선언 순서 (2012년 기준) - 속성 선언 시, 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 순서로 선언 - 관련 속성은 대표되는 속성 다음으로 선언하며, 다음과 같은 표에 표기된 의미 순서대로 선언 순서 의미 대표되는 속성 1 레이아웃 display visibility overflow float clear position top right bottom left z-index 2 BOX width height margin padding border 3 배경 background 4 폰트 font color letter-spacing text-align text-decoration text-indent vertical-align white-sp..
커밋 메시지 수정하기 1. 커밋이 아직 local에 있을 때 - commit --amend 입력 후, 수정 - git local 입력 후, 확인
![]()
role 속성 1. role 속성 - 웹 페이지의 접근성을 향상시키기 위해 사용되는 속성 - 해당 요소의 역할(role)을 정의하며, 스크린 리더 등의 보조 기술을 사용하는 사용자에게 콘텐츠를 전달하는 데 도움을 줌 2. 예시
![]()
HTTP와 HTTPS 1. HTTP와 HTTPS - 인터넷에서 데이터 전송에 사용되는 두 가지 주요 프로토콜(통신 규약) - 이들은 데이터의 보안성과 개인 정보 보호를 위한 중요한 역할을 함 HTTP (HyperText Transfer Protocol) 설명 목적 - 웹 서버와 웹 브라우저 간의 데이터 전송을 위한 프로토콜로 사용 - 웹 브라우저는 HTTP 요청을 서버로 보내고, 서버는 요청에 따라 데이터를 클라이언트에 응답 ※ 여기서 데이터는 웹 페이지, 이미지, 비디오 등을 의미 보안성 - 데이터를 평문으로 전송하므로, 데이터가 중간에 가로채어질 수 있어 보안상 취약함 ※ 개인 정보와 민감한 데이터를 전송할 때는 사용하지 않는 것이 좋음 포트 (Port) - 기본적으로 80번 포트를 사용 - 일반적으..
![]()
& 선택자 1. & 선택자 - CSS에서 부모 요소를 나타내는 선택자 - 주로 Sass(SCSS)와 같은 CSS전처리기에서 사용 - 중첩된 선택자를 나타내는데 사용됨 2. 예시 See the Pen Untitled by NewBean0312 (@newbean0312) on CodePen.
![]()
@function 1. @function - 사용자 정의 함수를 만들어 스타일 시트에서 재사용 가능한 코드를 작성하는데 사용 - 스타일 속성을 계산하거나 값을 조작할 수 있으며, 더욱 유연한 스타일링 가능 2. 사용법 See the Pen Tistory_Front-End Study_Sass_@function_2. 사용방법 by NewBean0312 (@newbean0312) on CodePen.
React 프로젝트 빌드하는 법 1. React 프로젝트 빌드 - #1. vsCode에서 터미널에 들어간 후, npm run build라고 입력 - #2. 생성된 build 파일을 미리 만들어 놓은 깃허브 repository에 넣음
![]()
immer 1. immer - React와 함께 사용되며, JavaScript에서 불변성을 관리하기 위한 라이브러리 중 하나 - 상태 관리 및 업데이트를 보다 간편하게 만들어줌 - 불변성을 지키면서 상태 업데이트 가능 2. 사용방법 ※ immer 사용 시, 설치 필요 (npm install immer or yarn add immer) - produce 함수를 사용하여, 업데이트할 데이터를 전달하고, 업데이트할 내용을 함수 안에서 변경함 const userState = { name: 'Kim', age: 15, }; const newState = userState(state, (draft) => { draft.age += 1; }); console.log(newState); - 중첩된 객체와 배열의 업데이..
![]()
React 프로젝트 생성 원하는 프로젝트에서 cmd에 들어간 후, npx create-react-app 프로젝트명 입력
![]()
useParams 1. useParams - React 애플리케이션에서 동적 URL 파라미터를 추출하는데 사용되는 훅 - 사용자 정의 데이터를 전달하는 데 유용 - 이를 통해, 블로그 게시물 ID or username과 같은 정보를 URL에 포함시킬 수 있음
![]()
NavLink 1. NavLink - React Router에서 제공하는 컴포넌트 - 네비게이션 메뉴 or 링크를 만들 때 사용함 2. 예시 - RouterEx.js - NavLink에서 to로 이동할 URL을 지정 import React from "react"; import { Routes, Route, Navigate, useLocation, NavLink, } from "react-router-dom"; function HomeMainPage() { return ( Home, Main ); } function HomeAboutPage() { return ( HOME, ABOUT ); } export default function RouterEx() { const location = useLocati..
![]()
useLocation 1. useLocation - React Router 라이브러리의 일부 - React 기반 웹 애플리케이션에서 현재 URL의 정보를 가져오는 데 사용되는 훅 - 현재 경로 및 관련 정보에 쉽게 엑세스할 수 있도록 도와줌 2. 예시 - RouterEx.js - location.pathname으로 현재 경로를 나타냄 import React from "react"; import { Routes, Route, Navigate, useLocation } from "react-router-dom"; function HomeMainPage() { return ( Home, Main ); } function HomeAboutPage() { return ( HOME, ABOUT ); } export..
![]()
Router※ 24.05.04 부로 수정하였습니다. 1. RouterRouter란? 사용자의 웹 애플리케이션 내에서 다양한 URL 경로에 따라 다른 컴포넌트를 렌더링하기 위한 도구입니다.React 애플리케이션의 라우팅을 관리하고, URL에 따라 애플리케이션의 다른 부분을 표기할 수 있게 합니다.이를 통해, 사용자가 애플리케이션을 사용할 때, 뒤로 가기, 앞으로 가기, 북마크 등과 같은 브라우징 기능 사용 가능합니다. ※ Router를 사용하려면, React Router 라이브러리를 설치해야 합니다. 2. Router 특징Router에는 여러가지 컴포넌트가 존재합니다.BrowserRouter컴포넌트 최상위에 작성되어 경로 변경에 대해 여러 편의 기능을 제공합니다.Routes여러 Route 컴포넌트를 ..
![]()
Recoil Persist 1. Recoil Persist - Recoil 상태 관리 라이브러리와 함께 사용할 수 있는 라이브러리 중 하나 - Recoil 상태를 로컬 스토리지 or 세션 스토리지와 같은 웹 브라우저 저장소에 영속적으로 저장 및 복원하는 기능을 제공 - 이를 통해, 웹 애플리케이션의 상태를 사용자의 브라우저 세션 간에 유지할 수 있음 - Recoil로 관리되는 상태를 브라우저 저장소에 저장하고, 다시 로드하는 기능을 제공해 애플리케이션의 지속성을 개선
![]()
localStorage 1. localStorage - JavaScript에서 localStorage는 웹 브라우저에서 데이터를 로컬로 저장하고, 유지할 수 있는 웹 스토리지 메커니즘 - 클라이언트 측에서 데이터를 영구적으로 저장하기 위한 간단하고 편리한 방법을 제공 - 사용자의 브라우저 세션 간에 데이터를 유지하며, 브라우저를 닫았다 열어도 데이터가 유지됨 2. 사용방법 - 데이터 저장 // localStorage.setItem('키', '값'); // 예시 localStorage.setItem('a', 10); localStorage.setItem('b', 20); console.log(localStorage); - 브라우저 안에 키와 값이 저장됨 - 데이터 가져오기 // const a = local..
