본문 바로가기

분류 전체보기

HTML 이메일을 작성할 때 주의해야 할 CSS 관련 요소들 HTML 형식으로 제작된 이메일은 마케팅에 흔히 사용되는 요소입니다. 그런데, 이메일 HTML을 작성할 때에는 CSS 사용에 주의해야 합니다. 모던 브라우저에서 흔하게 사용되는 css 속성들이 이메일 클라이언트에서는 지원되지 않는 경우가 많기 때문입니다. 예를 들어 Gmail은 flex 속성을 제대로 지원하지 않습니다. 이렇듯 이메일 클라이언트와 서비스 제공 업체에 따라 다양한 제한 사항이 있으므로 이메일 HTML에 CSS를 사용할 때에는 다음과 같은 요소를 고려하는 것이 좋습니다. 1. 인라인 스타일 사용 이메일 클라이언트 대부분은 외부 CSS 파일을 지원하지 않습니다. 따라서 스타일을 HTML 인라인 요소로 작성해 주어야 합니다. inline-css 같은 패키지를 사용하면 간단하게 css파일을 인라인..
러스트 플러그인(모드) 추가 방법 2023 먼저 이전 포스팅을 참조해 서버를 열어준 후, 아래 작업을 진행합니다. 1. oxide를 설치합니다. https://umod.org/games/rust/download?tag=public 2. 압축을 풀면 RustDedicated_Data 라는 파일이 나옵니다. 이 파일을 러스트 서버 폴더에 붙여넣기 해 줍니다. 서버를 한번 실행시켜줍니다. 3. 원하는 모드를 다운로드 후 oxide/plugins 에 압축을 해제해 줍니다. 4. 서버를 실행시키면 로그에 oxide 관련 내용이 출력됩니다.
러스트 서버구축 방법 2023 1. 우선 설명의 편의를 위해서 C드라이브에 설치한다고 가정하겠습니다. C드라이브에 restserver, steamcmd 폴더를 생성합니다. 2. 운영체제에 맞는 스팀 CMD를 다운받습니다. 그리고 steamcmd에 압축을 풀어줍니다. https://developer.valvesoftware.com/wiki/SteamCMD:ko#.EC.9C.88.EB.8F.84.EC.9A.B0 스팀CMD - Valve Developer Community 스팀 콘솔 클라이언트 또는 스팀CMD 는 스팀 클라이언트의 콘솔 버전입니다. 이 프로그램의 주된 용도는 콘솔 인터페이스를 사용하여 스팀에서 사용할 수 있는 다양한 게임 전용 서버를 설치하 developer.valvesoftware.com 3. 압축을 풀었으면 steamc..
input 태그의 size 프로퍼티 input 태그에는 size라는 프로퍼티가 있다. input 태그의 최소 크기를 정해주는 프로퍼티로 디폴트 값 20 (대략 100px정도 됨)으로 설정되어 있다.
create react app .env 파일 순서 CRA 공식 문서에 따르면 파일 순서는 아래와 같다. Files on the left have more priority than files on the right: npm start: .env.development.local, .env.local, .env.development, .env npm run build: .env.production.local, .env.local, .env.production, .env npm test: .env.test.local, .env.test, .env (note .env.local is missing) 출처] CRA adding custom enviroment .env파일이 하나 이상 있으면 위 규칙이 적용된다. .env .env.production 이렇게 있으면,..
react query optimistic update 테이블에서 메모를 실시간으로 업데이트 해야 했다. 문제는 메모를 수정할 때, 잠깐동안 이전 데이터가 보였다가 수정된 데이터가 보였다. 예를 들어, 'abc'라는 상태에서 '가나다'로 메모를 수정하면 잠깐동안 'abc'로 데이터가 렌더링되었다가 patch가 완료되면 다시 '가나다'로 변경되는 식이었다. 원인은 데이터가 patch(이하 mutate) 되는 동안 아직 업데이트 되지 않은 데이터를 참조하기 때문이었다. ({ ...data memo: }))} /> 대략 이런 구조에서, 데이터를 mutate 할 때 수정된 데이터가 아닌 기존의 list를 참조하기 때문에 잠시 이전의 데이터가 나타났던 것이다. optimistic update를 통해 이 문제를 해결할 수 있었다. optimistic update는 말 ..
tailwind css의 classname 순서 문제 tailwind를 사용해보니 편리하지만 직관적으로 이해하기 어려운 부분도 많다. 그 중 대표적인 것이 스타일이 classname에 적힌 순서대로 적용되지 않는 점이다. 아래 포스트가 좋은 예시를 들고 있다. https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/#tailwind-class%EC%9D%98-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84 Tailwind CSS 사용기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 위 포스트의 예시를 한 마디로 정리하면, 아래 코드는 text-blue 를 보장하지 않는다. Hello world tailwind는 classname은 순서는 고려하지 않기..
react 자식 컴포넌트의 함수를 부모 컴포넌트에 내보내기 가끔 react에서 자식 컴포넌트의 함수를 부모 컴포넌트로 내보내야 할 때가 있습니다. 좋은 패턴은 아니지만 필요하다면 useImperativeHandle을 사용하면 됩니다. useImperativeHandle의 특징은 공식 문서 한글 번역이 굉장히 난해하다는 점입니다. 아마 쓰지 말라는 무언의 암시가 아닐까 생각합니다. 공식 문서에서 제공하는 번역은 다음과 같습니다. useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes)합니다. 다행히 원문은 아래와 같습니다. useImperativeHandle customizes the instance value that is exposed to parent components when using..