OI7MI

전에 다녔던 학원에서 나만 맥북이라Java와 Eclipse 설치, 환경변수 때문에 꽤 애먹었던 기억이 있는데,한 번 해봤다고 이번엔 수월하게 설치할 수 있었다. 내 노트북은 맥북 에어 M2라서 Windows와 설치 파일이 다르다.Mac M2는 ARM 계열 칩이기 때문에 반드시 AArch64 버전을 선택해야 한다. 1. Java 25 설치아래 Oracle 공식 페이지에서 다운로드한다. Download the Latest Java LTS FreeSubscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts.www.oracle.com macOS 탭에서 ARM64 DMG..

우당탕당 입학 기록 합격자 발표일 2026.01.22등록금 납부 기간 2026.01.22 ~ 2026.01.27 드디어 기다리던 합격 발표 날. 설레는 마음으로 검색창에 '한국방송통신대학교'를 검색해 들어간 사이트에서 이름과 주민등록번호를 입력했다. 그런데 화면에 뜬 결과는 뜻밖에도 '불합격' ???????????순간 심장이 덜컥 내려앉으며 오만가지 생각이 다 들었다. '설마 서류에 문제가 있었나?' 싶어 한참을 당황했는데알고 보니 내가 들어갔던 곳은 엉뚱한 사이트(?) 엉뚱한 경로(?) 였다 ㅎㅎ. 사이트를 잘못 들어갔는데 왜 내 정보로 조회가 됐던 건지 지금 생각해도 미스터리하지만입학 전 가슴 철렁했던 짧은 해프닝으로 웃어넘기기로 했다. 진짜 합격을 확인했으니, 이제 산 넘어 산이었던 등록금과 학..

1. 문제 상황: "데이터가 부족하다?"기존에 사용하던 영화 상세 정보 API 호출 방식으로는 영화의 줄거리나 평점 정보는 가져올 수 있었지만영화의 핵심 콘텐츠라고 할 수 있는 ‘예고편 영상’ 데이터가 포함되어 있지 않았다. 이를 어떻게 해결할 수 있을지 고민하던 중,TMDB에서 제공하는 append_to_response 기능을 사용하기로 했다.기존에 사용하던 API 호출 방식은 다음과 같다.const url = `https://api.themoviedb.org/3/movie/${id}?language=ko-KR`; 여기에 유튜브 예고편 영상을 함께 가져오기 위해아래와 같이 append_to_response=videos 옵션 추가 const url = `https://api.themoviedb.org/..

숫자로만 표시되던 평점을 별점 UI로 표현하고 싶어 관련 라이브러리를 찾아보았다.그 과정에서 아주 간편하게 별점 UI를 구현할 수 있는 라이브러리를 발견해 프로젝트에 적용해보았다.특히 소수점(반쪽 별)까지 자동으로 처리해줘서 별도의 로직 없이도 자연스러운 평점 표시가 가능해 사용성이 좋았다. 사용한 라이브러리react-simple-star-rating가볍고 설정이 단순함소수점 별점 지원클릭 가능한 별점 / 표시용 별점 모두 가능 라이브러리 설치npm install react-simple-star-rating 별점 컴포넌트 생성영화 API(TMDB)는 10점 만점 평점을 반환하기 때문에, 별점 UI(5점 만점)에 맞게 2로 나눠서 변환했다 import { Rating } from "react-sim..

React 에서 를 쓰는데, CSS에서는 왜 a로 스타일을 잡아야 하는가? 는 결국 태그로 변한다 브라우저가 실제로 이해하는 것은 가 아님 ❌리액트는 빌드 및 렌더링 과정에서 컴포넌트를 표준 HTML 태그인 로 변환해서 브라우저에 전달한다브라우저는 라는 태그를 모름브라우저가 이해할 수 있는 것은 오직 HTML 표준 태그👉 그래서 개발자 도구로 보면 는 항상 태그로 렌더링되어 있다 그런데 왜 그냥 를 안 쓰고 를 쓸까? 태그의 동작 방식이동클릭 시 페이지 전체를 새로 요청브라우저가 새 HTML을 다시 받음화면이 깜빡이고리액트 상태(state)가 전부 초기화됨 태그의 동작 방식이동페이지 새로고침 없음주소창만 변경필요한 컴포넌트만 교체 렌더링상태 유지 + 부드러운 화면 전환즉, 페이지 이동 ..

리액트 라우터(React Router) : 페이지 이동 구현리액트는 SPA(Single Page Application) 구조를 사용한다. 즉, 페이지를 이동하더라도 매번 서버로부터 새로운 HTML 파일을 받아오는 것이 아니라, 하나의 HTML 문서 위에서 URL 변경에 따라 렌더링되는 컴포넌트만 교체한다.이때 URL 경로(path)에 따라 어떤 컴포넌트를 렌더링할지 매핑해 주는 라이브러리가 react-router-dom 이다.이를 통해 브라우저 주소창의 변경을 감지하고, 새로고침 없이도 페이지 이동이 가능한 것처럼 동작하게 만들 수 있다. 1. 라이브러리 설치npm install react-router-dom 2. 기본 구조가장 먼저 Router로 전체를 감싸고, 그 안에 Routes와 Route를..

리액트에서 외부 데이터를 가져올 때 보통 fetch를 사용한다예전에는 .then()을 활용한 체이닝 방식이 많이 쓰였지만요즘은 가독성과 유지보수 측면에서 async/await 방식이 사실상 표준처럼 사용된다. then() vs async-await기존 방식→ .then() 체이닝.then()을 계속 이어 붙이다 보면 코드가 점점 길어지고 비동기 흐름을 한눈에 파악하기 어려워진다useEffect(() => { fetch(`https://yts.mx/api/v2/list_movies.json`) .then((response) => response.json()) .then((json) => { setMovies(json.data.movies); setLoading(false); ..

useState 상태 업데이트의 두 가지1. 단순 값 전달 (Direct Update)상태를 특정 값으로 완전히 대체하고 싶을 때 사용setTodo("");// 단순 값 전달 // 입력이 끝난 후 input 상태를 빈 문자열로 초기화동작 원리: 이전 상태값과 관계없이, 인자로 전달된 새로운 값을 즉시 상태로 반영주요 용도: 입력 필드 초기화모달창 열기/닫기 (Boolean 값 변경)데이터 로딩 상태(Loading/Success/Error) 변경 2. 함수형 업데이트 (Functional Update)이전 상태를 기반으로 새로운 상태를 생성할 때 사용setTodos((prev) => [todo, ...prev]);// 함수형 업데이트// 최신 상태인 prev 배열을 가져와서 새 항목을 결합동작 원리: se..