본문 바로가기

반응형

분류 전체보기

(362)
나중에 참고할 수도 있는 코드 모음집 보호되어 있는 글입니다.
[모음집] 타입스크립트 모음집 오늘의 명언 해당 포스트 목적타입스크립트와 관련해서 수집한 내용을 모두 정리하기 위한 모음집으로 사용하기 위해 작성되었다. 이는 수정사항이나 추가 내용이 존재하면 새로 갱신되어 업로드  할 예정이다. 유니온 타입과 인터섹션 타입type 키워드를 사용할 때 주로 활용되는 부수적인 타입으로 유니온 타입과 인터섹션 타입이 있다. 이는 자바스립트에서 OR 연산자나 AND 연산자 역할을 하는 각각의 ||, && 과 유사한 역할을 한다.  유니온 타입( A | B) | 둘 중 하나라도 만족하는 경우 타입 검사를 통과 시킴유니온 타입은 두 가지의 타입이 존재하면 그 중 하나의 타입과 일치하는 경우 타입 검사를 통과시키고자 할 때 사용한다. 즉, 아래와 같이 사용할 수 있다.type Value = number | st..
HTML/CSS 를 이용한 로딩 스피너 만들기 이전 애니메이션 | 마우스 호버 시 따라다니는 언더라인 만들기 바닐라 JS/HTML/CSS 로 재밌는 애니메이션 효과 만들기 (3탄)2탄 | HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기 HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기(var 함수 활용)(2탄)1탄 | JS/HTML/CSS 로 랜딩 애니메이션 구현 바닐라 자바스duklook.tistory.com미리보기이번 포스트를 따라오시면 아래와 같은 로딩 스피너를 구현하실 수 있는 능력을 얻게 됩니다. 순수 HTML/CSS 를 사용하여 구현되었고, 응용에 따라서는 각 도트가 제자리에 있는 상태에서 투명도만 조절하여 순차적으로 파도타기가 되는 애니메이션 등을 구현해보실 수 있습니다. 무엇이든 응용에 달렸습니다. 간단한 원..
[모음집] Zustand 모음집 해당 포스트는..이 포스튼 클라이언트 상태관리 라이브러리인 Zustand 에 대한 일부 팁이나 내용들에 대한 것들을 모음집 형태로 모아두기 위한 포스트 입니다. 추가된 내용이 있으면 당일 날짜로 업데이트 됩니다. 저장소 내에 꼭 상태와 업데이트 함수를 같이 둘 필요는 없음일반적으로 Zustand 를 사용 시 스토어를 정의하면일반적인 방식으로 스토어를 정의하면 아래와 같이 상태와 업데이트 함수가 하나의 스토어에 같이 위치하고 있습니다.이 방식은 권장하고 있기도 하구요.export const useBoundStore = create((set) => ({ count: 0, text: 'hello', inc: () => set((state) => ({ count: state.count + 1 })), s..
[모음집] IT 용어 모음집 오늘의 명언예제 코드가 있다면 자바스크립트/타입스크립트 기준으로 작성되어 있습니다. 블로킹과 논블로킹블로킹(Blocking) | 특정 작업 완료 까지 다음 작업을 중단하는 방식블로킹 작업은 특정 작업이 완료될 때까지 프로그램의 실행을 중단하는 방식입니다. 즉, 어떤 작업이 완료될 때까지 그 다음 명령을 실행하지 않고 기다립니다. 블로킹 방식은 직관적이며, 단순한 프로그램에서 자주 사용됩니다. 예를 들어, 파일을 읽는 블로킹 호출을 사용하면, 파일 읽기 작업이 완료될 때까지 프로그램의 실행이 멈추게 됩니다. 그 동안 프로그램은 아무런 작업도 수행하지 않습니다. 논블로킹(Non-Blocking) | 특정 작업 완료를 기다리지 않고 다음 작업을 실행하는 방식논블로킹 작업은 작업이 완료될 때까지 기다리지 않고,..
HTML/CSS 를 이용하여 실제 같은 페이퍼 만들기 보호되어 있는 글입니다.
바닐라 JS/HTML/CSS 로 재밌는 애니메이션 효과 만들기 (3탄) 이전 애니메이션 | HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기 HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기(var 함수 활용)(2탄)1탄 | JS/HTML/CSS 로 랜딩 애니메이션 구현 바닐라 자바스크립트로 재밌는 애니메이션 /효과 구현해보기 (1탄)결과 미리보기이번 포스팅을 잘 따라오시면 아래와 같은 애니메이션을 구현할 수 있duklook.tistory.com 미리보기이번 포스팅을 잘 따라오시면 아래와 같은 네비게이션 애니메이션을 구현하실 수 있는 능력을 얻을 수 있습니다. HTML            Home      About      Contact      Project      Post      Map             우선 헤더 내 위치하는 네비게이션..
HTML/CSS 만으로 재밌는 마우스 호버 애니메이션 구현하기(var 함수 활용)(2탄) 1탄 | JS/HTML/CSS 로 랜딩 애니메이션 구현 바닐라 자바스크립트로 재밌는 애니메이션 /효과 구현해보기 (1탄)결과 미리보기이번 포스팅을 잘 따라오시면 아래와 같은 애니메이션을 구현할 수 있게 됩니다.  영상은 약간 짤려서 나왔는데 원래 시작 화면은 하얗게 가득찬 상태에서 시작됩니다.   HTML우duklook.tistory.com미리보기이번 포스팅을 잘 따라 오시면 다음과 같은 애니메이션을 구현하실 수 있게 됩니다.    HTML HTML 마크업 구조에서 제일 중요한 부분은 style 속성의 값으로 --c와 --r 이라는 사용자 정의 CSS 변수를 지정하는 것입니다. 또한 각 div 태그 마다 .card 라는 class 속성의 값을 지정하여 향후 CSS 에서 .card 클래스 선택자에 접근하기..

반응형