Autumnn Dev

보호되어 있는 글입니다.

반드시 기억해야 하는 CSS 선택자 30개 요약1. Universal Selector (*)모든 요소를 선택.사용 시 브라우저 성능에 부담을 줄 수 있으므로 남용하지 않는 것이 좋음.2. ID Selector (#id)특정 ID를 가진 요소 선택.유일성을 가지므로 재사용성이 낮음.3. Class Selector (.class)특정 클래스를 가진 요소를 선택.여러 요소에 적용 가능, 재사용성이 높음.4. Descendant Selector (X Y)특정 요소 내에 포함된 자손 요소 선택.예: li a → 내의 요소를 선택.5. Type Selector (X)특정 태그 타입의 모든 요소를 선택.예: ul → 모든 요소 선택.6. Pseudo-classes (X:visited, X:link)특정 상태의 ..

포트폴리오 사이트를 업데이트하던 중 3D 그래픽적인 요소를 넣으면 좋을 것 같다는 생각이 들었다.먼저 간단한 도형을 구현하는 것부터 시작해보자 1. 프로젝트 설정 및 기본 코드먼저 three.js를 React와 TypeScript 환경에서 사용하는 기본적인 방법을 알아보자. TypeScript에서는 three.js의 객체에 적절한 타입을 설정해줘야 한다. useRef와 useEffect 훅을 사용해 three.js 객체를 안전하게 다룰 수 있다.프로젝트 설치프로젝트를 시작하려면 three.js와 react-three-fiber 패키지를 설치해야 한다.다음 명령어를 터미널에 입력하여 설치하자:npm install three @react-three/fiber이 명령어는 three.js와 react-three..

더보기React는 선언적 UI 개발을 위한 강력한 도구를 제공하며, 그 중 핵심적인 역할을 하는 것이 바로 Hook입니다. Hook은 상태와 사이드 이펙트를 관리하는 기능을 제공하며, 함수형 컴포넌트에서 이러한 기능을 사용할 수 있게 해줍니다. 1. Hook의 규칙React에서 Hook을 사용할 때는 몇 가지 규칙이 있습니다. 이 규칙들을 잘 이해하고 따르면, React 애플리케이션을 더욱 효율적으로 작성할 수 있습니다.1.1. 최상위 레벨에서만 호출Hook은 컴포넌트 함수의 최상위 레벨에서만 호출해야 합니다. 조건문이나 반복문, 중첩된 함수 안에서는 호출할 수 없습니다. 이 규칙을 지키는 이유는 React가 Hook의 호출 순서를 추적하기 위함입니다.1.2. 리액트 함수 컴포넌트에서만 사용Hook은 리..

아직도 나에겐 많이 어려운 리액트..공부해도 끝이 없는 것 같다..  컴포넌트 생명주기마운트(DOM에 추가) -> 업데이트(새로운 props/state) -> 언마운트(DOM에서 제거)리액트16 +) 에러(에러 발생 시 실행)  라이프 사이클 이벤트 실행 순서constructor()를 포함한 라이프 사이클 실행 순서는 아래와 같다.constructor() : 엘리먼트를 생성하여 기본 state와 prop을 설정할 때 실행된다.componentWillMount() : 컴포넌트를 DOM에 삽입하기 전 실행render()componentDidMount() : DOM에 삽입되어 렌더링이 완료된 후 실행componentWillReceiveProps(nextProps) : 컴포넌트가 props를 받기 직전 실행sh..

https://hshyeon.github.io/ Sohyeon Portfolio hshyeon.github.io주요 페이지1. Intro : 초기 화면 페이지타자기를 치는 듯한 애니메이션을 넣어 지루함을 줄였다. 2. About : 나에 대한 설명을 담았다. 3. Works : Slick를 이용해 작업한 내용을 담았다.처음에는 유튜브만 보여주었는데, 너무 대충같이 보여서 프로젝트별 썸네일 이미지를 만들어 hover하면 유튜브가 보이도록 만들었다. 그냥 있으면 hover 안해줄까봐 마우스 아이콘도 넣어줌..ㅎㅎ추후 해당 프로젝트에 대한 설명도 추가해서 보여줄 예정! 4. Header : 특정 앵커포인트로 이동할 때마다 active 되도록 설정, 깃허블 링크를 담았다.사용 라이브러리1. Fullpage.js..

Promise와 Async/Await: 비동기 프로그래밍의 핵심JavaScript는 싱글 스레드 기반 언어로, 비동기 작업을 처리할 때 Promise와 Async/Await를 사용한다. 이 두 가지는 비동기 프로그래밍을 효과적으로 다루기 위해 도입된 도구이며, 각각의 장단점과 사용법이 있다.Promise란 무엇인가?Promise는 비동기 작업의 성공 또는 실패 결과를 나타내는 객체다. 주로 서버 요청, 파일 읽기, 타이머 같은 비동기 작업을 처리할 때 사용한다.Promise의 상태Pending: 대기 중 상태로, 작업이 완료되지 않은 상태다.Fulfilled: 작업이 성공적으로 완료된 상태다.Rejected: 작업이 실패한 상태다.Promise의 기본 사용법const promise = new Promis..

웹프로그래밍 기초때 배웠었는데 다 잊어버려서 다시 공부해야겠다.. 장애인, 특히 인지 장애나 신체 장애가 있는 사람들이 쉽게 사용할 수 있는 웹사이트와 웹 앱을 구축하는 기술을 웹 접근성이라고 합니다. 많은 장애인이 스크린 리더나 점자 디스플레이와 같은 보조 기술을 사용하여 인터넷을 검색합니다. 따라서 웹 접근성은 이러한 보조 기술을 웹사이트에 통합하는 데 필요한 도구와 자산을 배치하여 모든 사람이 디지털 컨텐츠에 접근하고 상호 작용할 수 있도록 하는 것을 의미합니다. 웹 접근성을 최우선으로 고려한다면 모든 사용자가 장애 여부와 관계없이 웹사이트에 접근할 수 있도록 할 수 있습니다. 웹 접근성을 고려한 웹사이트를 만드는 방법 1. 시맨틱 HTML 태그 사용 2. 대체 텍스트 제공 3. 접근성을 고려한 색..

javascript가 아닌 타입스크립트로 포트폴리오 웹을 제작하던 중 라이브러리를 사용하려고 했으나, 에러가 났다. 해당 라이브러리는 타입스크립트를 지원하지 않아 나타나는 에러였는데, 구글링해보니 node_modules 안에 파일을 만들어 declare한다고 하는데 파일이 잘 보이지 않아서 더 간단해보이는 다른 방법을 이용했다. 다른 방법으로는 react-app-env.d.ts에 declare module "react-fullpage";을 추가해주면 됐는데, 나의 경우는 vite를 사용했기 때문에 vite-env.d.ts 파일에 해당 코드를 추가해줬다. 이게 코드 한 줄만 넣은거라 될까 했는데 되네..?

꾸준히 업데이트 중입니다.아직 많이 부족하니까 열심히 하자! 🌟내가 한 프로젝트에 대해 충분히 숙지하기! 1. var, let, const 의 차이var는 함수 스코프, let/const는 블록 스코프 const는 재할당 불가능 var만 호이스팅 가능-> 호이스팅의 개념    - 함수 호이스팅, 함수가 스코프의 최상단으로 끌어올려지는것, 선언 전 해당 함수 호출 가능 2. 클로저란?중첩함수외부 함수의 변수에 접근할 수 있는 함수를 반환함으로써 동작하며, 외부 함수가 실행을 완료한 후에도 해당 변수에 접근할 수 있습니다  3. http 통신, 메소드 Restful API GET,POST,DELETE,PUT, PATCH 4. SPA single page application 한 번 로드된 페이지에서 필요한..