전체 글 33

HTML div 태그, span 태그

📌div- 블록 태그- 기본적으로 한 줄 전체를 차지- 위아래로 자동 줄바꿈 발생- 레이아웃 구성에 주로 사용(ex. 헤더, 본문, 푸터)📌span- 인라인 태그- 텍스트 한 줄 안에서 사용- 줄바꿈 없이 글자 일부 또는 문장 일부에 스타일 지정할 때 사용 💡 같이 사용 상품명: 무선 이어폰div : 큰 영역을 나눔span : 글자 스타일만 강조 안녕하세요 반갑습니다. 안녕하세요 안녕하세요 안녕하세요 반가워요 홍길동 안녕하세요 안녕하세요

HTML form 태그, input 태그

📌 form 태그란?- 사용자에게 입력을 받기 위함- 클라이언트에서 서버로 데이터를 전송하기 위해 사용 💡 주요 속성method : 데이터를 전송하는 방법을 지정(get, post)action : 데이터를 전송할 URL ☑️ method 속성 비교get전송시 데이터가 주소창에 노출 됨전송 길이 제한 있음즐겨찾기 / 다른사람에게 공유 가능post전송시 데이터가 주소창에 노출 되지 않음전송 길이 제한 없음다른사람에게 공유 불가능보안에 적합파일 전송 시 필수(파일 첨부 시 enctype="multipart/form-data" 추가)구분GETPOST전송 방식주소(URL)에 데이터를 붙여서 전송HTTP 요청 본문(body)에 데이터를 담아 전송보안성낮음 (주소창에 보임)높음 (주소창에 안 보임)URL 예시..

HTML 태그(iframe, video, img, source)

📌 iframe외부 웹페이지(Daum)를 현재 페이지에 삽입YouTube 동영상 삽입(소스코드 복사)📌 video 태그 (video.js 사용) 로컬에 있는 비디오(mp4)를 Video.js 라이브러리로 재생 poster: 영상 시작 전 썸네일 이미지controls: 재생 컨트롤러 표시 src : 실제 동영상 파일 경로 type : 동영상 파일의 MIME 타입을 지정 / 브라우저가 어떤 형식 파일인지 파악할 수 있게 도와줌💡Video.js란?- class="video-js"와 --> To view this video please enable JavaScript, and consider upgrading to a web brows..

정렬) 다양한 정렬 예제

💡전체 코드더보기public class SortEX { public static void main(String[] args) { int[] arr = new int[] { 2, 5, 1, 4, 3 }; // 기본자료형 오름차순 정렬 Arrays.sort(arr); System.out.println(Arrays.toString(arr)); // 기본자료형 내림차순 정렬 // Comparator.reverseOrder()안됨 (문자열은 됨)// Arrays.sort(arr, Comparator.reverseOrder()); String[] names = { "최길동", "박길동", "홍길동", "김길동" }; Arrays.sort(names); System.out.println("문..

코딩테스트 2025.04.16

자바) Comparator.reverseOrder(), Collections.reverseOrder()

Comparator.reverseOrder()Comparator.reverseOrder()는 Comparator 인터페이스를 구현하는 객체에 대한 내림차순 정렬을 위한 메서드입니다.이 메서드는 Comparator 객체를 반환합니다. 반환된 Comparator는 주어진 자료형에 대해 내림차순으로 정렬하는 기준을 제공합니다.주로 Arrays.sort()나 Collections.sort()와 같은 정렬 메서드에서 Comparator를 사용해 정렬 기준을 지정할 때 사용됩니다.예시// 내림차순 정렬 System.out.println(Arrays.toString(arr)); // [9, 5, 4, 3, 1, 1]Integer[] arr = {3, 1, 4, 1, 5, 9}; Arrays.sort(arr, Comp..

신한DS 금융SW 아카데미 5기 면접 & 합격 후기

📌 신한DS 금융SW 아카데미 5기 면접 및 합격 후기(전공자) 안녕하세요 :)최근에 신한DS 금융SW 아카데미 5기에 최종 합격하게 되어, 준비 과정과 면접 후기를 공유드리려고 합니다! 신한DS 금융SW 아카데미에 대해 궁금하신 분들은 아래 공식 홈페이지에서 자세한 정보를 확인하실 수 있습니다.https://www.shinhanacademy.com/training/detail/9 신한DS 금융SW 아카데미 www.shinhanacademy.com📝 지원 과정 안내신한DS 금융SW 아카데미의 선발 절차는 다음과 같은 단계로 진행되었습니다. 원서 접수 (02/10~03/05)공식 홈페이지를 통해 온라인으로 지원서를 제출합니다.인성검사온라인으로 진행되며, 지원자의 성향과 조직 적합도를 평가하는 단계입니다..

Link vs useNavigate()

Link와 useNavigate는 모두 React Router를 사용하여 페이지를 이동하는 기능을 제공하지만, 사용 방식과 주요 목적에서 차이가 있습니다. Link 컴포넌트Link는 리액트 컴포넌트로, 사용자가 클릭할 수 있는 링크를 만들 때 사용합니다. 주로 UI에서 사용자에게 클릭 가능한 요소를 제공할 때 사용합니다. Link는 실제 HTML 태그처럼 동작하지만, 페이지를 리로드하지 않고 클라이언트 측 라우팅을 통해 이동합니다. 1. Link 사용 시기✔️ 주로 정적인 내비게이션 (예: 메뉴, 리스트 등)에서 사용 / 주로 렌더링되는 JSX 내에서 사용✔️ 페이지 이동만 필요할 때 사용 (추가적인 로직 없이)✔️ HTML의 태그와 비슷한 역할을 하지만, 페이지 새로고침 없이 SPA 방식으로 이동하..

리액트 2025.03.04

재렌더링 구조와 최적화

재렌더링이 발생하는 조건리액트에서 재렌더링을 적절하게 제어하기 위해서는 재렌더링이 언제 발생하는지 알아야 합니다. 재렌더링이 발생하는 세 가지 패턴재렌더링이 발생하는 조건은 다음과 같이 세 가지입니다. 1. State가 업데이트된 컴포넌트2. Props가 변경된 컴포넌트3. 재렌더링된 컴포넌트 아래의 모든 컴포넌트 1, 2번 조건은 쉽게 떠올릴 수 있을 것입니다. 1번의 State는 컴포넌트 상태를 나타내는 변수입니다. 업데이트될 때 재렌더링되지 않으면 화면 표시를 올바르게 저장할 수 없습니다. 지금까지 본 것처럼 카운트업 변수를 실행해서 State를 변경하면 화면에 변경한 값이 실시간으로 반영되는 것은 State가 업데이트됨에 따라 컴포넌트가 재렌더링되기 때문입니다. 2번의 경우, 리액트 컴포넌트는 P..

리액트 2025.02.13