분류 전체보기 (358) 썸네일형 리스트형 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지 이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인접 형제 선택자(+) 를 사용하기 위해 input 아래에 label 을duklook.tistory.com 들어가기 전 | 포스트 작성 방식 변경 합니다.오늘 부터 UI 디자인 애니메이션 연구소 라는 카테고리 타이틀에 맞게 포스트를 작성하는 방식을 바꿔볼까 합니다. Codepen 을 이용해서 여러 가지를 시도하다보니, 나중에 포스트에 작성할 때는 작성한 코드를 일일이 설명하는 방식이 되었고, 게시글의 목적과는 다른 방향으로 적어왔던 것 같습니다. 그래서 2024.06.25 부터는 새로운 방식으.. 자바스크립트로 구현하는 이진 힙 보호되어 있는 글입니다. 사이트맵 색인은 꾸준히 증가하는데, 색인이 실패하는 건 수도 증가? [들어가는 말] 사이트맵 색인도 증가, 실패도 증가명언 웹 사이트를 만들고, 구글 셔치 콘솔을 통해 색인 생성을 신청한지 약 3달이 되어 가는 시점입니다. 원래 이렇게 색인이 늦게 증가하는게 맞는가 싶지만, 시간이 흐를 수록 정상적인 색인 수치의 70% 이상을 육박하여 좋게 보고 있었습니다. 그러던 중, 구글 이메일로 색인이 생성되지 않은 건수가 있다는 메일 받았습니다. 왜 색인을 실패하였을까?상황 파악단 몇 건도 아니고 거의 1/6 가량의 페이지 색인이 실패했습니다. 사이트의 검색 순위를 높이기 위해서는 꼭 해결해야 하는 문제이므로 해당 문제가 발생한 원인을 찾아 보았습니다. 다행히 친절하게 어떤 이유로 색인 생성이 실패되었는지 이유가 모두 나와있었고, 그 중에서 사용자가 선택한 표준이 없는 중복.. 리액트에서 변동 가능성이 없는 변수의 위치는? 함수 내부 VS 함수 외부 함수 내부 인가, 함수 외부인가리액트에서 함수 컴포넌트를 사용하다보면 한 가지 의문이 들 때가 있습니다. 변수는 함수 외부에 두는 것이 좋을까? 아니면 내부에 그대로 두는 것이 좋을까? 에 관해서 입니다. 예를 들어, 다음과 같은 변수가 컴포넌트 내부에 선언되어 있다고 가정해 봅시다.import React from 'react';const MyComponent = () => { const value = 42; return ( The value is: {value} );}; 여기서, value 은 MyComponent 내부에 선언되어 있습니다. 컴포넌트는 함수이므로 상태가 업데이트 될 때 마다 변수는 매번 메모리에 재할당이 됩니다. 그럼 한 가지 생각해볼 수 있습니다. val.. JS/TS/HTML/CSS /... 등 관련 개념 및 활용 예제를 모아두는 아카이브 연관 포스트[연관 포스트] IT 용어 모음집 [모음집] IT 용어 모음집오늘의 명언예제 코드가 있다면 자바스크립트/타입스크립트 기준으로 작성되어 있습니다. libuv 라이브러리libuv는 Node.js에서 주로 사용되는 C 라이브러리로, 주로 비동기 이벤트 기반 프duklook.tistory.com[연관 포스트] 자바스크립트 활용 모음집 자바스크립트 활용 모음집해당 포스트는..자바스크립트 활용을 위한 간단한 예제를 정리해두는 모음집입니다. 필요에 따라 추가될 수 있고, 추가되는 경우 해당 날짜를 기준으로 갱신됩니다. 이미지 미리보기 기능을 구duklook.tistory.com[연관 포스트] 리액트 활용 모음집 리액트 활용 모음집해당 포스트는..해당 포스트는 리액트를 사용하면서 알게된 팁이나 주요하다고 판.. [나만의 명언집] GithubActions 을 통한 CI 와 AWS CodePipeline (CodeDeploy)을 통한 CD 구축 | NextJS 프로젝트를 EC2 인스턴스로 배포하는 과정 들어가기 전아마 두 CI/CD 도구를 혼합해서 사용하는 경우는 많이 없을 것 같긴 합니다(현장마다 어떻게 활용하고 있을지 자세히 모르니, 추측일 뿐입니다). 보통 Github Actions + AWS CodeDeploy 만 같이 사용하거나, 아에 CodePipe 라인으로 빌드, 커밋, 배포 까지 한 방에 처리할 수도 있겠죠. 이 두 방식을 같이 사용하는 이유는 학습 목적도 있지만, AWS CodePipe 라인이 제공하는 로그 추적의 이점이 있기 때문입니다. 실제 인스턴스 터미널에서 CodeDeploy 로그를 확인하기 전에 어떤 부분에서 문제가 발생하였는지 대략적, 시각적으로 확인 가능하고, 버킷 마다 버전관리를 자동으로 해주기 때문에 필요에 따라 문제가 발생하면, 이전 버전으로 롤백하여 배포할 수 있.. HTML, CSS 로 불타는 입력창(Input) 만들기 미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인접 형제 선택자(+) 를 사용하기 위해 input 아래에 label 을 위치시켜 줍니다. 또한 input 의 경우 속성으로 required 를 지정해 줍니다. 유효성 검사를 통과하는 경우 input:valid { 속성들 } 로 지정한 속성들이 유지되도록 해주기 위해서 꼭 필요한 속성입니다. 아이디 비밀번호 CSSCSS 초기화해당 부분은 불필요한 기본 CSS 속성을 제거하는 부분입니다. input 의 경우에는 기본 border 의 색상을 gray 로 설정하기 위해 border: 1px s.. WIndow 환경에서 Open SSH 로 접속 및 AWS EC2 인스턴스와 연결하기(+ 번외: SCP 사용해서 EC2 인스턴스로 파일 전송하기) 들어가는 말기존에 Putty 를 사용해서만 AWS EC2 인스턴스 터미널로 접근했습니다. 이는 학습목적으로 OPEN SSH 를 이용해 접근해보는 시간을 가졌고, 이 과정에 대해서 정리한 포스트입니다. WSL 설치하기해당 사이트(https://learn.microsoft.com/ko-kr/windows/wsl/install) 에 접속하여 WSL2 를 설치해줍니다.사실 설치를 하지 않아도 최신 PowerShell 에서는 OpenSSH 설치를 지원해주기 때문에 리눅스 가상환경을 윈도우 환경에서 접속하게 해주는 WSL 이 꼭 필요하지 않을 수 있습니다. 다만 저의 경우에는 문제가 있었기 때문에 해당 WSL2 를 같이 설치해주었습니다. Open SSH 설정window powershell 에서 OpenSSH 서버 .. 이전 1 2 3 4 ··· 45 다음
