solar_system_11 solar_system_11

다음 페이지로의 자연스러운 전환이나, 이미지 스크롤러의 양 끝에 자연스럽게 이미지가 사라지는 효과를 위해 background를 gradient로 설정한 div 태그 등을 넣기도 한다. 이때, graident 컴포넌트가 생기기는 하는데 이미지 뒤에 있는 경우에는 z 값 조정 대신 position 속성을 absolute로 설정하면 해결된다.아래는 예시 코드. (나는 tailwind css 사용 중이라 아래처럼 입력했다).gradient-edge { @apply absolute inset-0 left-0 right-0 top-0 bottom-0; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0.00) 25..

이번에 회사에서 웹 수정하면서 서버가 다운되는 일이 발생하여 어째저째 해결했는데,나중에 같은 일을 겪을 분들을 위해 정리해보기로 했다. 문제는 이제 클라이언트 쪽에서 새로 추가될 api를 사용하기 위해 서버 코드를 github에 업로드하면서 발생했다.지금 서버랑 클라이언트 모두 github actions을 이용해 CICD를 수행하고 있는데, 서버 쪽 CICD 과정이 덜컥 실패한 것이다.The self-hosted runner: {{name-of-runner}} lost communication with the server.Verify the machine is running and has a healthy network connection.Anything in your workflow that termi..

앞에 event를 지워주면 해결된다. 보통 public static event Action OnAction; 을 UnityEvent로 변환시키려다 발생한다. 끗

console.log일반적으로 JavaScript 프로그래밍 시 디버깅 목적으로 브라우저의 console.log 메서드를 자주 사용할 것이다.물론 콘솔 로그는 간편한 디버깅 도구이긴 하지만,보안 이슈가 발생할 우려가 있기에 실제로 배포되는 웹 어플리케이션에는 포함되지 않는 것이 좋다. ESLintESLint는 자바스크립트 코드에서 에러가 있는 부분에 표시를 해주는 정적 코드 분석 도구이다.일반적으로 Typescript, Prettier과 함께 웹 프로그래밍을 할 때 함께 설치되며, 코드의 퀄리티를 보장해준다.ESLint는 하나의 규칙으로 no-console 룰을 가지고 있는데,빌드(npm run build) 시 콘솔 로그가 포함되어 있을 경우 규칙 위반으로 처리하여 빌드가 정상적으로 완료되지 않는다. n..

// unscoped packagenpm uninstall // scoped packagenpm uninstall  더 자세한 내용은 아래의 공식 문서를 참고하자. Uninstalling packages and dependencies | npm DocsDocumentation for the npm registry, website, and command-line interfacedocs.npmjs.com 끗~

var n = 1234567890;String(n).replace(/(.)(?=(\d{3})+$)/g,'$1,')// "1,234,567,890"

Link나 a 태그 없이 웹 내부의 다른 페이지로 가기 위해서 next/navigation의 useRouter()을 이용하면 된다. const router = useRouter(); router.push('/main'); 이때 기타 옵션을 정해줄 수도 있지만 일단 넘어가고, 외부 링크로 연결하는 경우를 살펴보자. 일반적으로 Link나 a 태그의 href 속성으로 외부 링크를 입력해주면 되는데, 개발하다보면 button의 onClick에 연결해야 하는 등의 상황이 있다. 그럴 땐 window.open()을 사용하자. window.open("https://www.google.com")} /> 끗~

Nextjs든 React든 개발하다보면 useEffect를 이용하여 컴포넌트를 처음 렌더링 할 때 실행해야 할 동작을 구현할 필요가 생긴다. 나의 경우에는 서버에 data-fetch 요청을 넣고, 이 결과로 받아 온 데이터를 이용해 컴포넌트를 렌더링해야 하는 상황이었다. 그런데, 이상하게 api가 두 번씩 호출되는 현상이 계속 발생했다. (사진 참고) useState를 이용해 boolean 상태를 선언하고 한번 실행한 후에 false로 변환하여 if 문으로 실행하지 않도록 했는데도 소용이 없었다. (대강 이런 느낌의 코드) const [refresh, setRefresh] = useState(true); useEffect(() => { if (refresh) { console.log("hello"); c..