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..

인턴을 하게 되면서 알고리즘 문제를 많이 접하게 되지만,, 나에게는 아직도 알고리즘은 머리 아픈 숙제와 가깝다.그래도 인턴으로 있으면서 잊어버렸던 전공지식이 되살아나는 중이다. 함께 일하는 분들에게 어찌나 감사한지.. 이번에는 집합 문제 풀 때 유용하게 사용할 수 있다는 비트 마스킹에 대해 알아보려고 한다. 그냥 재귀로 풀면 되는거 아냐?생각했는데, 비트마스킹을 이용하면 훨씬 간단하고 빠른 속도로 알고리즘을 풀 수 있다는 사실을 배우게 되었다. 대학생 때 분명 배웠던 것 같은데..왜 이렇게 익숙해지지 않는지.. 비트마스킹이란?비트 마스킹은 정수의 이진수 표현을 자료구조로 사용해서 알고리즘을 효율적으로 구현하는 기법이다. 비트 연산자는 수학적 계산을 넘어서 다양한 문제를 간결하고 빠르게 해결할 수 있도록 ..

난이도는 1레벨이고 엄청 간단했지만 신기한 정규식 풀이가 있어서 남겨본다var solution=(_,$)=>_.find(_=>!$[_]--,$.map(_=>$[_]=($[_]|0)+1))var solution=(participant,completion)=>participant.find(name=>!completion[name]--,completion.map(name=>completion[name]=(completion[name]|0)+1)) 주자 배열을 {이름:완주자배열에 등장하는 횟수}로 맵핑하고, 그 맵에 참가자 이름 하나씩 넣어서 찾아볼때마다 횟수 떨어뜨려서 횟수 0나오는 놈 찾아뱉는 함수같네요  라는 고인물의 코멘트 어렵다 어려워... function solution(participant, com..

더보기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. 검색할 때는 배열 대신 set 2. 반복문 대신 연산으로 할 수 있으면 되도록 연산으로 -> includes/while문 말고 자료구조(스택, 큐) 쓰는 방법도 생각해보기 3. 기본 제공 메소드 너무 믿지 말기 시간복잡도함수명 O(1) at() , entries() , every() , isArray() , keys() , pop() , push() , shift() , values() , with() O(n) concat() , copyWithin() , fill() , filter() , find() , findIndex() , findLast() , findLastIndex() , flat() , flatMap() , forEach() , from() , fromAsync() , group()..