코드를 위한 기록

label, input처럼 함께 있어야하는 짝꿍 요소이지만 화면에서 안보이게 하고 싶을 때 - display:none처럼 화면에서 완전히 없애거나 - visibility: hidden처럼 자리 차지하지 않고 화면에 존재는 하지만 공간 배정을 없앰 .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } * 참고 github visually-hidden 2023.04.17

이미지 파일 미리보기 1. 인풋 요소(type="file")에서 파일이 첨부되면(onInput 이벤트) imgInput 상태에 저장시키면 2. 리렌더링으로 인해 useEffect 실행 - 파일이 있으면 파일을 FileReader의 readAsDataURL 메서드로 base64로 만든 후 imgInputBuffer에 저장 - 파일이 없으면 imgInputBuffer를 비워줌 3. imgInputBuffer를 원하는 태그에 할당해줌 - img면 src - 다른 태그면 background 속성 const [imgInput, setImgInput] = useState(null); const [imgInputBuffer, setImgInputBuffer] = useState(null); useEffect(() =..

타입스크립트 Typescript 자바스크립트에 타입을 부여한 언어. 브라우저에서 실행하기 위해 컴파일(compile. 파일 변환) 해주어야 함 타입스크립트를 사용하는 이유 에러를 사전에 방지할 수 있음 정의되지 않은 값을 사용하는 경우 에러 발생 코드 가이드 및 자동 완성 vscode 사용 시 해당하는 타입에 대한 메서드를 바로 볼 수 있음 Jsdoc 기본 문법을 이용한 타입 정의(in JS) // @ts-check // 타입 스크립트 에러 체크 /** * @typedef {object} Address * @property {string} street * @property {string} city */ /** * @typedef {object} User * @property {string} name * ..

switch문 표현식과 일치하는 case값에 만난다면 그 라인부터 마지막 코드까지 실행 → break를 써줘야함 case 값이 다른데 같은 코드를 실행해줘야 할 경우 break 없이 코드를 붙여주면 됨 case와 일치하지 않는 경우 default 실행(선택) switch (표현식) { case value1: 실행할 코드; break; case value2: 실행할 코드; break; case value3: case value4: 실행할 코드; break; default: 실행할 코드; } * 참고 javascipt.info switch 2023.04.14

box-shadow로 내부 모서리 만들기 box-shadow: 0 0 0 3px #000 inset; /* 가로, 세로, 블러정도, 크기, 색상 */ word-break 단어 기준 줄바꿈 word-break: break-all; /* 모든 문자 분리 */ word-break: keep-all; /* 단어마다 분리 */ overflow-wrap 라인 기준 줄바꿈 overflow-wrap: normal; /* 공백이 있어야 줄바꿈 */ overflow-wrap: break-word; /* 필요 시 언제든 줄바꿈 */ overflow-wrap: anywhere; /* break-word와 비슷한데 지원안되는 브라우저 있음 */ align-self로 요소의 위치 지정하기 align-self: start; /* ..

Optional chaining ?. 참조가 nullish(null 또는 undefined)하면 에러 대신 undefined를 리턴 참조가 누락될 가능성이 있는 경우 사용 * 참조 mdn optional chaining 2023.04.14

추천사 동작하는 코드를 수정하는 과정에서 미묘한 버그가 생길 수 있음 코드를 분석하다가 새롭게 수정할 부분을 발견하면 더 깊이 파고드는 사람이 많은데 그럴수록 수정할 부분이 많아져 헤어나오지 못할 수도 있음 이 책을 읽으며 객체 지향 소프트웨어 개발, 리팩터링 원리, 좋은 리팩터링 습관을 배울 수 있음 언제 어떤 상황에 코드를 분석해서 개선해야하는지, 특히 6장~12장 리팩터링 기법이 모여있음 각 절차를 이해하고 한 번에 한 단계씩 실행할 것 오버라이딩(overriding) : 상속 관계에 있는 부모 클래스에서 이미 정의된 메소드를 자식 클래스에서 같은 시그니쳐를 갖는 메소드로 다시 정의하는 것 오버로딩(overloading) : 한 클래스 내에서 같은 이름의 메소드를 중복하여 정의하는 것 리팩터링 : ..

1. 이미지 컨테이너(div)를 생성하여 정사각형으로 만들어줌 2. 이미지를 컨테이너 내부에 위치시키기 /* html */ /* css */ div { position: relative; width: 100%; /* 가로 100% */ padding-bottom: 100%; /* 패딩으로 세로 100% 만들기 */ background-color: var(--white); /* 기본 배경색 */ } img { position: absolute; max-width: 100%; /* 최대 너비 */ max-height: 100%; /* 최대 길이 */ top: 50%; /* div 기준 세로 중간에 위치 */ left: 50%; /* div 기준 가로 중간에 위치 */ transform: translateY(..

Position static 기본값 요소를 일반적인 문서 흐름에 따라 배치 relative 요소를 일반적인 문서 흐름에 따라 배치 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용 z-index 새로운 쌓임 맥락 생성(→ 방지하고 싶다면 z-index: auto; 설정) absolute 요소를 일반적인 문서 흐름에서 제거, 페이지 레이아웃에 공간을 배정하지 않음 가장 가까운 위치 지정 조상 요소에 상대적으로 배치 (위치 지정 조상 요소는 position: static;이 아닌 요소, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록 기준) 최종 위치는 top, right, bottom, left 값이 지정 z-index 새로운 쌓임 맥락 생성(→ 방지하고 싶..

소프트웨어 개발 단계 1. 과업 발생 2. 사업자 선정 및 계약 3. 기획/분석 4. 설계 5. 구현 6. 시험 7. 서비스 오픈 8. 유지보수 2. RFP(Request For Proposal. 제안 요청서)를 통해 제안 요청 후 프로젝트 계약이 완료되면 3. SRS(Software Requirements specification)를 통해 프로젝트의 큰 그림 설계 -> 프로젝트를 도입하고 시행하기 위한 기획의 범주, 개발할 소프트웨어를 분석하는 과정 필요 SRS를 구체적으로 분석, 설계 3.1 분석 단계 개발할 소프트웨어에 대한 분석 유스케이스 명세서 요구사항 추적표 사용자 요구사항 정의서 더보기 1. 작성 목적 시스템의 요구사항을 도출하여 발주자와 내용을 합의하고, 하나의 업무 단위로써 가치를 가지고..