개발 공부

e.preventDefault() Html에서 a태그나 form의 submit 태그는 고유의 동작이 있다.예를들면 a태그는 링크로 이동, submit은 form을 제출한다. 이런 태그 안에서 동작을 중단시키는 함수가 e.preventDefault() 함수이다. stopPropagation()하위 엘리먼트의 이벤트를 눌렀을 때부모로 전파가 되기 때문에e.stopPropagation를 사용하면 상위 엘리먼트로 전달되지 않는다. 참고 ) [개념잡기] e.preventDefault() 와 stopPropagation() 의 차이stopPropogation vs preventDefault e.preventDefault()와 e.stopPropagation()의 차이 두개의 코드 모두 이벤트 관련 동작에서 많이 사..

웹 접근성이란 장애인, 고령자 등의 모든 사용자가 동등하게 웹 사이트를 접근하고 이용할 수 있도록 보장하는 것을 뜻합니다.시각장애를 가지신 분이나 인지장애를 가지신 분 또는 노인분들의 웹 접근성을 지원하는 보조 기구로 스크린리더 라는것이 있습니다.스크린리더란 스크린의 정보를 음성으로 출력해주는 화면 낭독 프로그램이라고 보시면 됩니다. 웹 접근성 마크를 획득하기 위해서는 꽤 많은 비용이 들고, 재심사의 경우 60% 감면을 해준다고 하지만 그래도 큰 돈이 들어 웹 접근성 신청을 하기 이전에 미리 검사해볼 수 있는 사이트도 있습니다.(아래 블로그를 참고해주세요)https://eunyoe.tistory.com/76 웹 접근성에 도움을 주는 몇가지 속성들을 설명해보겠습니다.1. sr-only (tailwind c..

1. API Routes 란?- API Routes는 서버리스 함수를 생성할 수 있는 기능을 제공한다.별도의 서버가 없이 간단히 API를 정의하고 데이터를 처리하거나 외부 API와 통신할 수 있다.- API Routes는 Node.js 환경에서 실행되므로, Node.js의 모듈과 라이브러리를 사용할 수 있다.- pages router에서는 pages/api 디렉토리에 파일을 생성하면 해당 파일이 API 앤드포인트로 자동 설정되고,app router에서는 app/api/{path}/route.ts(or js) 파일을 생겅하면 해당 파일이 API 앤드포인트로 자동 설정된다. 참고: https://wolhyong.tistory.com/entry/Nextjs14-%EA%B0%95%EC%9D%98-13%EA%B..

ts가 기본 제공하는 타입 조작 도구들기존 타입을 재활용하거나 변형해서 새로운 타입을 쉽게 만들 수 있도록 도와준다. Partial파셜T의 모든 속성을 선택적으로 바꿔준다.type User = { id: number; name: string; age: number; }type UserPartial = Partial;// 결과// { id?: number; name?: string; age?: number } RequiredT의 모든 속성을 필수로 바꿔준다.type UserPartial = { id?: number; name?: string; }type UserRequired = Required;// { id: number; name: string } ReadonlyT의 모든 속성을 읽기 전용(read..

reduce예시const numbers = [2, 4, 3, 1];const sum = numbers.reduce((acc, num) => acc + num, 0);console.log(sum); // 10 reduce()는 배열을 순회하면서 하나의 값으로 누적(축약) 해주는 함수입니다.array.reduce((accumulator, currentValue) => { return newAccumulator;}, initialValue);accumulator (acc) : 누적 값currentValue (num) : 현재 배열 요소initialValue : 누적의 초기값 최댓값, 최솟값 찾기const numbers = [2, 4, 3, 1];const min = numbers.reduce((min, num..

router 와 window.location.href 차이Next.js 방식router.push() / router.replace() / router.back() SPA 방식 이동 (Single Page Application)페이지 전체 리로드 없이 클라이언트 쪽에서 부드럽게 이동상태(state), 세션, 리액트 컴포넌트들 유지됨빠름!Next.js 내부 라우팅 시스템을 사용해서 이동 (preloading 기능도 활용 가능)➡️ 브라우저 새로고침 없이 URL만 바뀌고 화면 전환. 브라우저 기본 이동window.location.href = '/dashboard';완전한 페이지 리로드 발생 (서버로 새 요청 보냄)브라우저가 새로 페이지를 요청함 (HTML 전체 다시 받아옴)리액트 상태(state) 초기화됨Ne..

mac에 설치된 자바 버전 확인하는 방법 /usr/libexec/java_home -V mac에 설치된 자바 삭제하는 방법터미널에서 ~/Library/Java/JavaVirtualMachines 로 이동 후 ls 입력원하는 자바 버전을 삭제rm -rf azul-21.0.2  참고 : https://jh-industry.tistory.com/156

WAS (Web Application Server) 와 웹서버의 차이 웹서버 (Web Server)WAS (Web Application Server)역할정적인 요청 처리 (HTML, CSS, JS, 이미지 등)동적인 요청 처리 (Java, JSP, Spring 등)기능요청 → 정적 파일 응답요청 → 로직 실행 + DB 조회 + 동적 결과 생성대표 예시Nginx, Apache HTTP ServerTomcat, Jetty, JBoss, WebLogic처리 대상정적 리소스 중심Java 기반 웹 애플리케이션응답 속도빠름 상대적으로 느림 예시 )요청 경로 : /logo.png  처리하는 곳 : 웹서버요청 경로 : /api/login  처리하는 곳 : WAS