도록

지난 11월에 프리랜서 계약을 해 3개월동안 일한 후기를 적고자 한다. 선택 배경나는 프리랜서 계약이 처음이다.프리들은 금액이 높은 대신 세금 너무 많이 내서 힘들어! 라는 후기들이 진짜인지 궁금했다. + 근로소득자와 사업소득자의 세금 계산이 궁금했다. + 어떤 것을 고려하면서 프리랜서 계약을 해야하는지도 알고 싶었다. 요약중개 서비스를 이용할 거라면, 계약서와 서비스 이용약관을 잘 보자! (내가 이용한 서비스의 이용약관) 후기보수 지급일을 조정할 수 있다. (특정 달 보수를 15일 정도 이후에 받고 싶다는 의사를 표했고, 계약서에 이 내용을 반영해 원하던 시점에 보수를 받았다.)중개 서비스와 발주사 간의 금액은 내가 알 수 없다.내가 원하는 최저 보수를 중개서비스에 전달하면, 발주사와 조정해 최종 금액..

연결 방법1. 키보드 유선 연결2. https://usevia.app/ 사이트 접속 후, 4번째 setting 탭에 들어간다3. 첫번째 탭인 키보드 모양의 configure 메뉴에서 authorize device 클릭해, via 설정할 키보드를 선택합니다.    키 맵핑 하는 방법은 키크론이 잘 설명해주기에, https://keychron.kr/via/?vid=12 요 페이지 보면서 하면 된다.      ⚠️ 아무리 권한을 줘도 configure 탭에 아무 반응이 없다면?1. via json 파일을 다운받기usevia.app에서 지원하지 않는 키보드를 설정하기 위해, 여기(https://epomaker.com/blogs/via-json/cidoo-abm066-usb-via-json-file?_pos=3&..

1. 크롬 개발자 도구Network 패널 : 네트워크 트래픽을 통해, 리소스의 크기와 로드 시점 등을 확인Performance 패널  : 웹페이지 로드 시 실행되는 모든 작업을 차트로 제공Lighthouse 패널  : 성능 측정 및 개선 방향 제시Coverage 패널  : 렌더링 과정에서 어떤 코드가 실행되었는지 보여준다. (특정 파일에서 극히 일부만 코드가 실행되었다면, 불필요한 코드가 많이 포함되었다고 판단한다)2. webpack-bundle-analyzer : webpack을 통해 번들링된 파일이 어떤 lib를 담고 있는지 보여주며, 불필요한 코드 위치와 전체에서 어느 정도의 비중을 차지하는지 알려준다. 3. React Developer Tool 의 Profiler 패널: 렌더링 발생 횟수, 렌더링..

머리 속 정리하기. 전문 용어 번역기를 주제로 사이드 프로젝트를 하려고 한다. 개발 전 미리 머리 속을 정리하고자 한다.  Why : 주제 선택의 계기는?: 지인이 건강검진에서 의심되는 병이 있어, 여러 검사를 받게 되었다. 그 검사 결과지에 적혀있는 글을 이해하기가 어려웠고, 내용을 이해하기 위해서는 다음 병원 방문일까지 기다려야 했다.  Pain point : 전문 용어는 어렵다.'어렵다'라는 단어가 공부할 때 많이 들어서 그런지, 생각할 겨를도 없이 '쉽게, 혹은 즐겁게!' 가 튀어나왔다.그치만 전문용어를 달달 외울 것도 아닐 뿐더러, 공부하는 것이 목표가 아니다. 공부보다는 커뮤니티 정도로 가벼웠으면 좋겠다 였다.내가 모르는 것을 잠깐 검색, 질문을 통해 해결하고 이러한 행위는 커뮤니티와 유사한 ..

정의사용자의 현재 화면에 보이지 않는 영역은 렌더링을 건너뛰는 속성이다.이를 통해 초기 페이지 로드 시간을 단축해, 사용자 경험을 개선할 수 있다. 사용 방법우선 각 영역을 section으로 나누고, 나누어진 섹션에 아래 css을 적용시킨다.content-visibility: auto;            // 브라우저에게 해당 요소가 현재 뷰포트에 보이지 않을 때 렌더링을 건너 뛰기contain-intrinsic-size: 1000px;    // 스크롤바가 올바르게 뜨기 위해, 요소의 예상 크기를 설정 conetent-visibility가 가질 수 있는 값의 종류는?- visible : 아무런 효과 없음- hidden : 요소 생략 (dispaly:none처럼, 페이지 내 찾기/user-agent 접..

WebSocket만 써보고 SockJs는 처음 써보기에, 하나씩 기록해보려 한다.  1. install sockjs-clientyarn add sockjs-client @types/sockjs-client  2. socket 연결부의 예제 코드 추가import React, { useEffect, useRef, useState } from 'react';import SockJS from 'sockjs-client';const SocketTest = () => {  const [messages, setMessages] = useState([]);  const socketRef = useRef(null);  useEffect(() => {    socketRef.current = new SockJS('서버주소..

git tag 조회하기git tag  원격에 tag 올리기git push origin v1.0.3  https://git-scm.com/book/ko/v2/Git%EC%9D%98-%EA%B8%B0%EC%B4%88-%ED%83%9C%EA%B7%B8 Git - 태그와일드카드를 사용하여 Tag 리스트를 확인하려면 -l, --list 옵션을 지정 단순히 모든 Tag 목록을 확인하기 위해 git tag 명령을 실행했을 때 -l 또는 --list 옵션이 적용된 것과 동일한 결과가 출력된다.git-scm.com

문제 상황- tailwind css 공식문서에서 하라는 대로 했지만, tailwind가 적용되지 않아 브라우저에서 보면 스타일이 다 깨져있다.더보기참고) 나의 개발 환경은...- vite, react, typescript, scss 를 사용하고 있다. (sass를 tailwind로 교체 중)- local 은 vite를 사용해 테스트하고, dev, prod 는 express 서버를 이용한다.- ci 는 jenkins, docker 파일을 이용해 구현되어 있으며, install 과 build가 분리되어 있으며, 서버를 내리지 않고 container 교체 방식으로 진행된다.  우선 어디가 문제인지 보자⬇️결론은 맨 아래 ⬇️  왜 스타일이 깨질까? 생각해 아래와 같은 가설을 만들었다.[가설 1] tailwin..