Bleeding edge

C++로 코테 공부를 무작정 하다 보니, 뭔가 자꾸 길을 이리 저리 방황하는 것 같아서, 평소에 코테 공부할 때 이 글을 봐야지! 했던 글의 미션을 하나씩 해결해가며 공부하기로 결심했다.https://covenant.tistory.com/224 코딩테스트 대비를 위한 백준 문제 추천코딩테스트 대비를 위한 백준 문제 추천 끝 없는 훈련만이 실전에서 흐트럼없이 정답을 향해서 움직일 수 있습니다. (Photo by Specna Arms on Unsplash) 작년 한 해 수많은 코딩테스트를 직접 경험하고covenant.tistory.com 사담이긴 한데 VS code로 문제를 풀이를 하려다보니 이 것 저것 세팅하기 싫어서, 뭔가 쉽게 백준에서 문제를 풀기는 귀찮고 무슨 방법없나~ 찾아보다가https://git..

https://github.com/MoffKalast/vizanti GitHub - MoffKalast/vizanti: A mission planner and visualizer for controlling outdoor ROS robots.A mission planner and visualizer for controlling outdoor ROS robots. - MoffKalast/vizantigithub.comRVIZ를 Web으로 띄워주는 라이브러리(정확히 RVIZ의 일부) https://github.com/osrf/gazebo_models GitHub - osrf/gazebo_models: Gazebo database of SDF models. This is a predecessor to http..

네트워크 본딩(Network Bonding)이란 두 개 이상의 네트워크 인터페이스를 하나로 묶어 트래픽을 공유하거나 백업할 수 있도록 하는 기술입니다. 이를 통해 네트워크의 안정성을 높이고, 특정 인터페이스가 다운되더라도 연결이 유지될 수 있도록 설정할 수 있습니다. 물론 저 같은 경우에는 무선으로 인터넷을 연결하고 유선으로는 로봇을 연결하였습니다이번 글에서는 유선(eno2)과 무선(wlo1) 네트워크를 본딩하여 사용할 수 있도록 설정하는 방법을 소개합니다. 1. 네트워크 인터페이스 설정 파일 수정터미널을 열고 다음 명령어를 실행하여 네트워크 인터페이스 설정 파일을 엽니다.sudo vi /etc/network/interfaces파일이 열리면 아래 내용을 추가합니다.auto bond0iface bond0 ..

https://www.daleseo.com/docker-volumes-bind-mounts/

"화면의 너비에 따라 아이콘 크기 변경하기"라는 주제로, 화면 크기에 따라 유연하게 아이콘 크기를 조정하는 방법을 정리해보겠습니다. 이 방법은 특히 이미지와의 상호작용이 필요한 경우나, 부모 요소의 너비가 명시되지 않아 % 단위를 사용할 수 없는 상황에서 유용합니다. 주로 네비게이션 아이콘이나 햄버거 메뉴 아이콘처럼 고정된 크기의 아이콘이 아닌, 다양한 해상도에서 크기가 조정되어야 하는 아이콘에 적용할 수 있습니다.방법 개요아이콘 크기 조정 시 화면의 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%..