예방이의 개발일기

import React, { useState } from 'react'; function ProductItem({ name, rank, onClick }) { const isSelected = rank > 0; const remainingCount = 3 - rank; const countText = isSelected ? `(${rank}/3)` : ``; const buttonLabel = isSelected ? '취소' : '상품 비교'; return ( {name} {countText} {buttonLabel} {!isSelected && remainingCount === 0 && ( 3개 이상 선택할 수 없습니다. )} ); } export function App(props) { const [r..

회사 프로젝트 셋팅하는 중에 롬복 에러가 났는데... 솔직히 뭐가 문제인지는 확실히 이해를 잘 못하겠다... 롬복이 뭔지도 아직 감이 안옴 ㅠㅠ 이런 내용이 계속 반복되서 콘솔에 찍혔다. 일단 project facets에서 1.8로 JAVA 값을 변경해줬다. Build Path에선 Libraries탭에서 JRE System Library 1.8로 다시 넣어주고 (Add Library) Add External JARs 클릭해서 lombok.jar를 추가해줬다. 그러니까 해결 완료!!

이클립스에서 로케일을 인식할 수 없습니다. 라고 에러가 계속 발생 맥북 M1의 고질적인 문제라고 한다... 미국 다녀오면 된다고 해서 미국도 다녀왔는데 안되다가 (맥북 언어 -> 나라를 미국 -> 전원 종료 -> 한국 -> 전원 종료 -> 이클립스 재실행) https://deafjwhong.tistory.com/32 [ Error ] Cannot create PoolableConnectionFactory (로케일을 인식할 수 없습니다.) 안녕하세요. 데프홍입니다. 제 직업상 프로그래머로서 맥북에다가 일중인데.. 어느날 OS 을 업데이트 하면서 다음 아래와 같은 에러가 발생하더군요.. 이클립스를 돌릴려고 하는데 갑자기 안되 deafjwhong.tistory.com 이 글로 해결 완료 톰캣 더블 클릭해서 설..

맥 OS 셋팅에 따라 파일질라가 다크모드로 변경 된 경우 다크모드는 좋지만 파일질라 다크모드는 파일명을 변경할 때 글자 색이 안보임...;;; 그래서 너무 불편해서 다크모드를 끄기로 했다. 터미널에 들어가서 저렇게 작성해주면 다크모드가 해제된다 defaults delete NSRequiresAquaSystemAppearance 셋팅 초기화는 이렇게 작성해주면된다.

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML Element.insertAdjacentHTML() - Web API | MDN insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하 developer.mozilla.org foo beforebegin : Element 앞에 afterbegin : Element 안 첫번째 beforeend : Element 안 마지막 afterend : Element 뒤에

JS에서 '없음'을 나타내는 값이 2개가 있음nullundefined↳ 두개의 의미는 비슷할지라도, 사용되는 목적과 장소가 다름 JS에서 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환함let foo;console.log(foo); // undefinedconst obj = {};console.log(obj); // undefined null은 '객체가 없음'을 나타냄 typeof null // 'object'tpyeof undefined // 'undefined' '없음'을 나타내기 위해 어떤걸 사용해야할까?=> null을 사용하는 것이 좋음 undefined 사용 안하는 이유는? 그 의미가 불분명하기 때문에let foo;let bar = undefined;foo; // ..

⭐️ 이미지 태그일 때 .parent { position: relative; width: 100%; height: 0; padding-top: calc(861 / 1280 * 100%); } img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } height를 0을 주었기 때문에 박스 모델 높이에 영향을 주는 건 padding-top 뿐이다. padding-top 계산식 => calc( 이미지 높이 / 이미지 폭 * 100%) 로 계산한다 이미 계산된 비율 aspect ratio | padding-top value --------------|---------------------- 16:9 | 56.25% 4:3 | 75% 3:2 ..

리액트를 웹사이트에서 연습해보자 This is a static template, there is no bundler or bundling involved! JSX를 사용하기 위해서 // 바벨을 추가해주고 // 타입을 지정해줘야한다!!

리액트 시작하기 1. 코드 플레이그라운드 사용하기 CodeSandbox: Online Code Editor and IDE for Rapid Web Development Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more. codesandbox.io CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io..