전체 글67 [Javascript] 백준 1764: 듣보잡 문제 김진영이 듣도 못한 사람의 명단과, 보도 못한 사람의 명단이 주어질 때, 듣도 보도 못한 사람의 명단을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 듣도 못한 사람의 수 N, 보도 못한 사람의 수 M이 주어진다. 이어서 둘째 줄부터 N개의 줄에 걸쳐 듣도 못한 사람의 이름과, N+2째 줄부터 보도 못한 사람의 이름이 순서대로 주어진다. 이름은 띄어쓰기 없이 알파벳 소문자로만 이루어지며, 그 길이는 20 이하이다. N, M은 500,000 이하의 자연수이다. 듣도 못한 사람의 명단에는 중복되는 이름이 없으며, 보도 못한 사람의 명단도 마찬가지이다. 출력 듣보잡의 수와 그 명단을 사전순으로 출력한다. 예제 입력 3 4 ohhenrie charlie baesangwook obama baesangwook.. 2023. 5. 16. [React] 모바일 웹 100vh 스크롤 버그 + tailwind 적용법 문제 상황 페이지에 height : 100vh 속성을 주었는데, 모바일에서 테스트해보니 스크롤이 생깁니다. 1vh는 스크린 높이의 1%이므로 100vh면 스크롤없이 스크린을 가득 채워야하는데, 모바일에서만 이런 문제가 생긴겁니다!! 문제 원인 찾아보니, 모바일에서는 상하단의 주소창과 네비바의 높이를 스크린 높이에 포함하기 때문에 여백이 생겨버린 것이었습니다. 브라우저별 상하단바의 높이를 고려해서 높이를 정하기는 너무너무너무너무 귀찮기때문에, 상하단바를 제외한 실제 내부 높이를 가져올 방법을 고려해야합니다. 해결 방법 1 : vh 재정의하기 (React에 적용하기) JavaScript의 window.innerHeigh는 현재 뷰포인트의 높이를 가져올 수 있습니다. 이 속성을 이용해서, innerHeight.. 2023. 5. 8. [React] 모바일 웹 스크롤 시 주소창, 하단바 없애기 문제 상황 모바일에서 프로젝트를 볼 때, chrome이나 safari에서 하단바와 주소창이 화면을 너무 많이 가리는 모습입니다. 실제 서비스 중인 사이트들을 확인해보면 거의 대부분 스크롤 시 하단바가 사라지는 것을 확인했는데, 무언가 모바일에 추가설정이 필요한건가? 하는 생각이 들었습니다. 그래서 좀 찾아보니 크롬과 사파리 모두 특정 버전 이후부터는 스크롤 시 주소창과 하단 바가 자동으로 숨겨지는 기능을 가지고 있었습니다. 아니 근데 왜 제가 만든 웹은 자동으로 하단바가 사라지지 않는걸까요?? 한참 서치해봐도 잘 모르겠어서 가만히 제가 만든 걸 들여다보니 뭔가..갇혀있다는 느낌을 받았달까요? 그러니까 화면 자체가 내려가는 게 아니라 내부 박스안에서 스크롤이 되고 있는 느낌이었습니다. 생각해보니 모든 페이.. 2023. 5. 6. [React] 리액트 carousel 라이브러리 없이 직접 구현하기 캐러셀(carousel)이란? 캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성 요소이다. 버튼을 눌러 옆으로 사진이 넘어가는 모션이 마치 회전목마와 비슷하다고해서 붙여진 이름이다. 캐러셀은 용도에 따라 자동재생되게 하거나, 사용자가 수동으로 넘기도록 구현할 수도 있다. 대중적으로 이용되는 라이브러리 react-slick이라는 라이브러리가 가장 대중적으로 사용되는 캐러셀 라이브러리이다. 장점이라면 역시 문서보고 따라하면 잘 작동하는 캐러셀을 쉽게 구현할 수 있다는 점? 그리고 커스텀도 상당히 자유롭다고한다. 사실 직접 해당 라이브러리를 사용해보진 않아서 모르겠지만 많은 사람이 이용하는만큼 최적화도 잘 되어있으리라 짐작된다. 위 데모를 보면 1. 양옆 버튼을 눌러 앞뒤로 슬라이드가 부드럽게 .. 2023. 5. 6. [React] 모바일 웹 status bar 색상 변경하기 항상 크롬 inspect 모바일 뷰만 보고 개발을 해서 몰랐었는데, 배포 후 디자이너 분께서 상태바 색상을 테마에 맞게 흰색으로 변경해주실 것을 요청해주셨다. 찾아보니 크롬과 사파리 설정을 따로 해주어야한다는 글이 많았는데, 직접해보니 theme-color 메타 태그만으로도 safari 상태바 색상이 적용이 되었다. 그래서 MDN에서 찾아보니 safari도 15버전 이후로는 적용이 된다고 쓰여있었다. 웬만하면 15v 이상이지 않을까 싶으면서도.. 2021년 적용이면 비교적 최근이라는 생각이 들어서 그냥 아래 코드까지 모두 작성해주었다! **CRA로 만든 리액트 프로젝트의 경우, public폴더에 index.html에 theme-color meta tag는 기본적으로 포함되어있는데, 색상만 원하는 색상으로.. 2023. 5. 2. [TypeScript] 타입스크립트 2주 챌린지 (노마드코더) 이 글은 노마드코더 챌린지 진도에 맞게 노마드코더 Typescript로 블록체인 만들기 강의를 듣고 그 내용을 정리한 것입니다. 챌리지의 과제는 노마드코더 챌린지 규칙상 공유드릴 수 없음을 알려드립니다. 1. Introduction누가 타입스크립를 사용해야할까?왜 자바스크립트는 문제인가?2. Overview of TypescriptImplicit Types vs Explicit TypesTypes of Typescript part.ITypes of Typescript part.IITypes of Typescript part.III3. FunctionsCall signatureOverloadingPolymorphism(다형성) : Generic(제네릭)4. Classes and InterfacesClass.. 2023. 4. 28. 이전 1 2 3 4 5 6 ··· 12 다음
