본문 바로가기

분류 전체보기360

CSS - 배경 이미지 animation 으로 이동시키기 updated 02/21/24 페이지를 만드는 도중 로딩이 뙇뜨면 배경이미지를 스르륵 올려주는 효과가 필요하다. 이럴 때 당황해하지 말고 css animation 속성을 사용해 구현해보자 결과화면 미리보기 CSS - 배경 이미지 animation 으로 이동시키기 일단 이미지태그에 클래스 이름을 활용해서 css 로 animation 을 사용해보자 // 이미지 태그가 있다. animation 속성은 따로 정리할 필요가 있을 것 같아 나중에 따로 포스팅을 정리해야겠다는 생각을 해보았다. ** 참고로 transfrom: translateY(의 값이) - 이면, 위로 + 이면 아래로 움직인다. 방법1 .building-img { position: absolute; // 일단 위치지정은 필수지! top: 500px.. 2022. 7. 3.
JavaScript - scrollTop / scrollHeight / clientHeight 이란 (feat.최대스크롤 값) 스크롤 핸들링은 항상 숙제같은 녀석이었다. 몇번을 마주쳤지만 피하고 싶었던 녀석, 그래서 자세한 개념 아묻따하고 그때그때 해결하기 바빳는데, 결국 확실히 알고 넘어가야겠다는 생각이 들어 그동안 야금야금 쌓아왔던 포스팅을 방출하고자 한다. JavaScript - scrollTop / scrollHeight / clientHeight 이란 (feat.최대스크롤 값) 긴 게시글이 하나있다고 치고 설명하겠다. scrollTop 아래 참고 이미지에 보이는 것처럼, 원글 맨 처음부터 ~ 현재 화면에 보이는 부분까지의 길이가 scrollTop 이다. 글의 맨 처음 부터 얼마나 내려왔는지 현재 스크롤 위치 를 알수있다. An element's scrollTop value is a measurement of the di.. 2022. 7. 2.
CSS - border 뾰족한 대각선 모서리 채워넣기 (feat.box-shadow) 탭 버튼을 클릭했을 때, 굵게 표시된 테두리 영역을 자세히 보면 edge가 대각선으로 뾰족하게 나와있다. 멀리서보면 잘 티가 안나지만, 확대해보면 여간 신경쓰이는 게 아니다. 이때 대각선으로 뾰족하게 보이는 edge 를 예쁘게 펴봤던 과정을 포스팅으로 정리해보았다. 결과화면 미리보기 CSS 테두리가 있는 박스 안에서 생긴 이슈이기 때문에 box-shadow 를 사용해보았다. box-shadow 는 요소의 테두리에 그림자 효과를 준다. 박스 요소 바깥은 물론 박스 안에도 그림자 효과를 줄 수 있다. box-shadow 의 inset 옵션을 사용을 사용하여 요소 안에 그림자 효과를 넣어 뾰족한 edge 를 채워넣었다. .tab-items .item { width: 100%; height: 77px; } .t.. 2022. 6. 30.
JavaScript 알고리즘(8) Multiple Pointers Pattern - isSubsequence 차근차근 시간날 때마다 알고리즘을 풀고 있다. 이번 하반기에는 좀더 집중해서 알고리즘을 공부할 생각이다.(선선포 후공부라 하자) Multiple Pointers 패턴에서 isSubsequence 문제이다. 먼저 풀면서 느낀점은 우선 멀티 포인터를 쓰는 부분이 익숙하지 않았고, 2중 루프를 쓰지 않는다는 것 그래서 O(N) 으로 성능을 좀 더 개선시키는 방향으로 풀어보았다는 부분이었다. 어려웠지만 풀고나면 항상 성장하는 기분이 들어 뿌듯하다 😁 JavaScript 알고리즘(8) Multiple Pointers Pattern - isSubsequence 쉽게 한방에 설명해보겠다. 함수의 첫번째 인자로 주어진 'sing' 문자열과 두번째 인자로 주어진 'sting' 문자열이 있다. 두번째 문자열 sting 안.. 2022. 6. 29.
React(76) TypeScript - 채팅목록에서 마지막 메시지 보여주기 요즘 새발자는 한창 채팅 기능을 유지보수 하는 중이다. (매우어렵 🤯) 채팅 기능에서 중요한 요소 중 하나는 마지막 메시지이다. 마지막 메시지를 채팅리스트에 출력하거나, 마지막 메시지를 통해 읽기 표시 등의 알림 설정 등을 할 수 있기 때문이다. 오늘은 채팅리스트에서 마지막 메시지를 함께 출력하는 기능을 공부한 내용을 토대로 포스팅해보려고 한다. 그럼 시작해보도록 하자 React(76) 채팅목록에서 마지막 메시지 보여주기 채팅리스트에 마지막 메시지를 가져와 채팅목록에서 같이 보여주자. MessageList.tsx 먼저, api 로 채팅리스트를 get 해서 채팅방 목록을 배열로 받아오고, 각각의 채팅방의 정보를 또 받아와서 마지막 메시지를 추가해줄 것이다. interface MessageProps { ms.. 2022. 6. 27.
React(75) shift + enter 줄바꿈 (feat. 두번씩 출력되는 버그처리) Updated 08/22/22 채팅창에 메시지를 입력할 때, 엔터키를 치면 전송이 되는 기능과 + [ shift + 엔터키 ] 로 줄바꿈을 하는 기능 요렇게 두가지를 동시에 구현 중이다. 이 기능들은 키보드 이벤트를 알아야 구현을 할 수 있다. 그럼 이제 구현하러 가보자 Hoxy 자바스크립트의 키보드 이벤트에 대해 자세한 개념이 궁금하시다면 ? ( ↓↓↓ 아래포스팅을 확인하세요) JavaScript - KeyDown / KeyPress / KeyUp 이벤트 메시지 입력창에서 엔터키로 메시지 전송을 할 때나 줄바꿈을 할 때 키보드 이벤트를 사용하게 된다. 대표적인 키보드 이벤트인 keyDown / keyPress / KeyUp 에 대해서 정확히 알고싶어서 공부해보았다 devbirdfeet.tistory.c.. 2022. 6. 26.
JavaScript - KeyDown / KeyPress / KeyUp 이벤트 메시지 입력창에서 엔터키로 메시지 전송을 할 때나 줄바꿈을 할 때 키보드 이벤트를 사용하게 된다. 대표적인 키보드 이벤트인 keyDown / keyPress / KeyUp 에 대해서 정확히 알고싶어서 공부해보았다. JavaScript - KeyDown / KeyPress / KeyUp 이벤트 keyDown 키보드를 누를 때 + 계속 누르고 있는 경우 실행 (아무 키나 다 반응) keyPress 키보드를 누를 때 + 계속 누르고 있는 경우 실행 (text 입력되는 키만 반응 - 방향키, 탭 같은 거 제외) keyUp 키보드를 눌렀다가 키에서 손을 뗄 때 실행 Key 이벤트 동작 순서 key event 사이의 동작 순서는 다음과 같다. keydown → keypress → keyup 하지만, 실제 글자가 입.. 2022. 6. 22.
React(74) StoryBook으로 UI 컴포넌트 작업하기 스토리북은 UI 컴포넌트 개발을 위한 툴이다. 공통으로 사용되는 UI 컴포넌트들을 개발할 때, 스토리북을 localhost 로 띄워놓고 디자인을 직접 확인할 수 있다. 원래 SPA에서 웹으로 ui 컴포넌트를 만들려면 이것저것 세팅을 해야한다. 특히 공통 컴포넌트로 만드려고 하면 기능도 고려를 해야하니 더 손이 많이 간다. (컴포넌트들로 레이아웃도 만들고 그안에 또 ui 컴포넌트 만들어서 사이즈 맞춰서 집어넣고 등등등 귀찮다) 스토리북을 활용하면 간단하게 로컬호스트로 스토리북을 띄워놓고 거기에 테스트할 디자인 컴포넌트를 추가하면 화면으로 ui 요소만 즉각즉각 확인할 수 있다. React(74) StoryBook 에서 UI 컴포넌트 작업하기 npm 으로 스토리북 설치 후, 셋업은 마친 상황이다. Slider.. 2022. 6. 20.
안드로이드 - ADB 로 웹모바일뷰 디버깅 하기(USB연결) QA 하다가 막상 웹 브라우저에서 확인할 때와는 달리 휴대폰에서만 제대로 적용되지 않는 속성들을 발견했다. 하필 나의 갤럭시 A9 은 10 이었기 때문에(폰밍아웃) 무선기능이 되지 않아(11 이후 가능) USB 디버깅만 가능한 상태였다. 하지만 포기하려는 찰나 CTO님의 도우심으로 세팅을 무사히 끝내게 되었다 좋은 건 같이봐야하기 때문에 이 포스팅을 기록해본다 안드로이드 - ADB 로 웹모바일뷰 디버깅 하기 0. 휴대폰에서 개발자 도구 활성화하기 이건 이미 다른 블로그들에서 친절하게 설명이 잘 나와있다. 구글링으로 얼른 갤럭시 개발자도구 키고 돌아오시라 1. ADB 다운받기 (Mac용) https://developer.android.com/studio/releases/platform-tools SDK 플.. 2022. 6. 17.
반응형

티스토리툴바