Bleeding edge

"화면의 너비에 따라 아이콘 크기 변경하기"라는 주제로, 화면 크기에 따라 유연하게 아이콘 크기를 조정하는 방법을 정리해보겠습니다. 이 방법은 특히 이미지와의 상호작용이 필요한 경우나, 부모 요소의 너비가 명시되지 않아 % 단위를 사용할 수 없는 상황에서 유용합니다. 주로 네비게이션 아이콘이나 햄버거 메뉴 아이콘처럼 고정된 크기의 아이콘이 아닌, 다양한 해상도에서 크기가 조정되어야 하는 아이콘에 적용할 수 있습니다.방법 개요아이콘 크기 조정 시 화면의 max-width가 설정된 경우와 그렇지 않은 경우가 있는데요, 이 글에서는 max-width가 지정된 경우를 다루겠습니다. 가장 작은 화면에서도 동일한 논리를 반대로 적용해 크기를 조정할 수 있습니다.1. 미디어 쿼리로 기본 크기 설정먼저, 화면 너비가 ..

이미지와 PDF 업로드 및 미리보기 구현기이번 프로젝트에서 이미지와 PDF 파일을 업로드하는 기능을 개발해야 했고, 특히 PDF 파일에 대한 미리보기를 구현하는 부분에서 고민이 많았다. 이미지는 비교적 간단히 처리할 수 있었지만, PDF 미리보기는 구현 경험이 없어서 새로운 접근법을 찾는 과정이 필요했다. 아래에서는 문제 해결 과정을 공유하고, 각 문제점과 해결 방안을 설명한다. 접근 방법먼저 input 요소의 change 이벤트에서 파일 타입을 기준으로 이미지와 PDF 파일을 구분하여 상태(state)로 관리했다. const handleFileChange = (event: ChangeEvent) => { const selectedFiles = Array.from(event.target.files..

Fade-Out Gradient 효과 구현기이 글에서는 내가 개발 중인 프로젝트에서 overflow가 발생하는 컴포넌트에 적용한 "fade-out gradient" 스타일에 대해 설명한다. overflow된 부분이 단순히 잘리는 대신, 서서히 사라지는 느낌을 주기 위해 이 효과를 사용했다. 이 글에서는 문제 해결 과정과 함께, Tailwind CSS를 활용하여 효과를 구현한 방법을 공유하려 한다. 접근 방법 - Pseudo 클래스 활용하기현재 프로젝트에서는 Tailwind CSS를 사용하고 있다. Tailwind는 기본적으로 mask-image 속성을 지원하지 않지만, 양쪽 끝에 fade-out gradient를 적용하라는 요구사항이 있었다. 처음 시도한 방법은 before와 after pseudo 요소..

1. 업데이트를 한 이유create-convention는 작년에 회사에서 새로운 프로젝트를 자주 시작하다보니, 일일이 convention을 적용하는 것이 너무 번거로워서 이를 줄이기 위해 만든 라이브러리이다. (코드를 보니 그 당시에 라이브러리 만들고 코드 정리도 못하고 올렸었던 것 같다.. 회고가 없음이 그를 보여주는 증거..!) 코드 자체가 js로 작성이 되어있었고, 파일이 하나로 작성되어 있어서 가독성도 너무 떨어져서 수정하였다.2. TS로 변환하면서 추가한 사항들2-1. entry 포인트 수정모든 기능을 index.js에 넣다보니, 기능 구분과 문제가 생겼을 때 원인 파악이 힘들었으며, 함수를 분리하여보기 힘들었다. 그래서 main.ts를 기준으로 기능을 분리하여 수정하였다.2-2. main.ts..

https://medium.com/codecrain/%EC%BD%94%EB%93%9C%ED%81%AC%EB%A0%88%EC%9D%B8-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-%EC%9B%B9%EC%96%B4%EC%85%88%EB%B8%94%EB%A6%AC%EC%99%80%EC%9D%98-%EB%B9%84%EA%B5%90-%EC%96%B8%EC%A0%9C-%EC%9B%B9%EC%96%B4%EC%85%88%EB%B8%94%EB%A6%AC%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%..

이 글을 쓴 이유이전에 조합에 대한 글을 올린적이 있었다. https://codevil.tistory.com/6 순열(permutation)과 조합(combination)둘의 function을 간단하게 적을 것이다. 둘의 결과값에 대한 차이는, 순서의 유무로 갈린다. 순열은, per- mutate 즉, 아주 작은 부분만 변하기만해도 순열이라 친다 즉, 구성원이 같아도 순서가 살짝codevil.tistory.com그냥 평소에 천천히 여유로울 때는 천천히 잘사용하지만, 문제는 코테중에 갑자기 나타나면 조금 당황을 하는 경우가 있어서 조금 더 직관적인 조합에 대해 새로 정리하기로 했다. 어떤 방식을 사용할까?보통 수학시간이나 경우의 수를 구할 때는 보통 배열에 있는 값들을 한 개씩 넣어가며 경우의 수를 구한다..

이번이 벌써 배포한 npm package가 네번째인데, npm package하면서 처음 보는 에러를 발견했다. 우선 이 에러는 배포할 때 나타나는 에러는 아니고 npx [package-name]을 하였을 때 나오는 에러이다이전에 배포한 패키지와의 차이는 babel로 하냐 tsc로 컴파일하냐의 차이와 type module과 type commonjs차이가 있었다. 구글링해본 결과 Shebang line을 첫번째 줄에 써야했다.#!/usr/bin/env nodetsc 같은 경우 main.ts 첫줄에 넣거나 shebang을 넣는 라이브러리로 처리하면 된다.끝!

https://github.com/MoonZoon/MoonZoon GitHub - MoonZoon/MoonZoon: Rust Fullstack Framework Rust Fullstack Framework. Contribute to MoonZoon/MoonZoon development by creating an account on GitHub. github.com Rust로 만들어진 Full-stack library

https://kinghell.tistory.com/entry/React-Native-Plugin-with-id-maven-not-found-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95 [React-Native] Plugin with id 'maven' not found. 해결 방법 Plugin with id 'maven' not found. 해결 방법 리액트 네이티브 앱 빌드 시 Plugin with id 'maven' not found 문구가 출력되며 빌드가 안되는 상황이 발생하였습니다. 찾아보니 Gradle 버전으로 인한 문제였습니다. kinghell.tistory.com 메모 : 프로젝트 끝난 후 사용하는 프로젝트에 사용하는 라이브러리에 pr 날리기!