728x90

분류 전체보기 492

[EPL] 리즈 유나이티드 FC - 다시 돌아올 백조의 부활 서사

“리즈는 무조건 돌아온다.” 이 말은 그냥 희망이 아니라, 실제로 수십 년 동안 팬들이 몸으로 겪은 현실이다. 한때 잉글랜드 최정상까지 올라갔다가, 재정 파탄으로 리그 3부까지 떨어지고… 그러다 또다시 프리미어리그에 복귀해 ‘리즈는 리즈다’라는 말을 증명했던 팀. 이번 포스팅에선 리즈 유나이티드가 어떤 팀인지, 역사와 부침, 상징적인 인물들, 최근 흐름, 그리고 “왜 리즈엔 특별한 무언가가 있는가?”까지 깊게 정리해봤다. ⚽ 구단 기본 정보항목내용정식 명칭Leeds United Football Club창단 연도1919년연고지잉글랜드 웨스트요크셔, 리즈홈구장엘런드 로드 (Elland Road, 수용 인원 약 37,000명)별명The Whites, The Peacocks소속 리그EFL 챔피언십 (202..

스포츠/EPL 2025.07.18

[EPL] 손흥민과 함께한 토트넘의 10년 - 성적 흐름과 특별한 동행

토트넘 홋스퍼 연도별 성적 정리 (2015–2024) 토트넘은 늘 상위권에 머무르면서도 우승 문턱에서 아쉽게 미끄러진 시즌이 많았다. 특히 손흥민이 입단한 2015–16 시즌 이후를 중심으로, 10년간의 흐름을 요약해봤다. 시즌리그 순위비고2015–163위레스터 우승 시즌. 막판에 아스날에 밀려 2위 실패2016–172위클럽 역사상 프리미어리그 최고 순위. 홈 무패 달성2017–183위안정적인 TOP4. 손흥민 두 자릿수 득점2018–194위UCL 준우승 (결승 vs 리버풀)2019–206위포체티노 경질 → 무리뉴 부임2020–217위시즌 중반 1위도 찍었으나 후반기 급락2021–224위손흥민 EPL 공동 득점왕. 콘테 감독 체제 시작2022–238위부진한 시즌, 콘테 → 스..

스포츠/EPL 2025.07.17

[EPL] 토트넘 홋스퍼 FC - 우승보다 철학을 중시한 런던의 자존심

프리미어리그를 보다 보면 한 번쯤은 듣게 되는 팀, 토트넘 홋스퍼 FC. 팬들 사이에선 “우승 없는 명문”, “기대는 하지만 늘 2% 부족한 팀” 같은 이미지도 있지만, 토트넘은 그 이상의 깊은 역사와 철학을 가진 팀이다. 이번 포스팅에선 토트넘이 어떤 구단인지, 그리고 왜 세계적인 클럽으로 여겨지는지를 우승 횟수부터 철학, 재정, 최근 흐름까지 분석해봤다. ⚽ 구단 기본 정보항목내용정식 명칭Tottenham Hotspur Football Club창단 연도1882년연고지잉글랜드 런던 북부, 토트넘 지역홈구장Tottenham Hotspur Stadium (62,850석)별명스퍼스(Spurs), 릴리화이트(Lilywhites)슬로건To Dare is to Do (도전하는 자가 실행한다)소속 리그잉..

스포츠/EPL 2025.07.15

[React] 리액트 useEffect 호출 시점, 제대로 정리해봤다

리액트 쓸 때 거의 무조건 쓰게 되는 훅 중 하나가 useEffect다. 처음에는 "컴포넌트 마운트 될 때 실행되는 함수 아니야?" 하고 쉽게 생각할 수 있는데, 막상 실제로 쓰다 보면 언제 호출되는지 헷갈리는 경우가 꽤 많다. 이번 글에서는 useEffect가 정확히 언제 호출되는지, 그리고 디펜던시 배열에 따라 어떻게 달라지는지 정리해봤다. ✅ useEffect 기본 구조useEffect(() => { // 실행할 코드}, [/* 의존성 배열 */]); 의존성 배열(dependency array)에 뭐가 들어가느냐에 따라서 실행 타이밍이 달라진다. 아래에서 하나씩 살펴볼게. 1️⃣ 의존성 배열이 없는 경우useEffect(() => { console.log('렌더링 이후마다 실행됨')..

[Spring] Spring에서 @Value 어노테이션 사용 시 주의할 점 정리

스프링에서 설정값 주입할 때 가장 직관적인 방법 중 하나가 @Value다. application.properties나 application.yml에 있는 값을 ${}로 꺼내서 바로 필드에 넣을 수 있어서 간단하고 편하기 때문. 근데 실무에서 무심코 쓰다가 에러를 겪거나, 나중에 유지보수하다가 “이게 왜 이렇게 되어 있지?” 싶을 때가 은근 많다. 그래서 이번엔 @Value 어노테이션 쓸 때 주의해야 할 점들만 쏙쏙 뽑아서 정리해봤다. ✅ 기본 사용법부터 간단히 보자@Value("${myapp.name}")private String appName; application.properties에 아래처럼 설정해두면,myapp.name=MySpringApp Spring이 자동으로 appName에 "MyS..

[Javascript] 자바스크립트 호이스팅(Hoisting) 완전 정복 - 변수, 함수, let vs var의 차이까지!

JavaScript에서 코드를 작성하다 보면 “변수를 선언하기 전에 썼는데 왜 오류가 안 나지?” 하는 경험을 해봤을 것이다. 이 현상의 정체가 바로 호이스팅(Hoisting)이다. 이번 포스팅에서는 호이스팅이 정확히 무엇인지, 어떤 요소들이 호이스팅되는지, 그리고 실무에서 어떻게 안전하게 코드를 작성해야 하는지까지 깔끔하게 정리해본다. 🧠 호이스팅(Hoisting)이란? "선언부가 코드의 맨 위로 끌어올려지는 것처럼 동작하는 자바스크립트의 특징" 실제로 코드가 이동하는 건 아니지만, 자바스크립트 엔진이 실행 전에 변수와 함수의 선언을 ‘미리 메모리에 등록’해놓기 때문에 발생하는 현상이다. 🔍 예제를 보며 이해해보자 ✅ 변수 호이스팅 (var)console.log(a); // undefined..

[React] useEffect vs useLayoutEffect - 언제 어떤 걸 써야 할까?

React에서 컴포넌트를 만들다 보면 useEffect와 useLayoutEffect라는 두 훅(Hook)을 마주하게 된다. 이름은 비슷하지만 실행 타이밍과 용도, 그리고 렌더링 성능에 미치는 영향까지 완전히 다르다. 이번 포스팅에서는 이 둘의 차이점, 실행 순서, 사용 시 주의점, 그리고 실전 예제까지 한 번에 정리해본다. 📌 핵심 요약항목useEffectuseLayoutEffect실행 시점화면 그린 뒤 (비동기)화면 그리기 직전 (동기)렌더 차단 여부❌ 렌더 차단 안 함✅ 렌더 차단함목적API 호출, 로깅 등 비 UI 작업DOM 측정, 스타일 조정 등 UI 관련 작업성능 영향렌더링 후 실행 → 퍼포먼스에 유리렌더링 전에 실행 → 렌더 지연 가능성SSR(Server Side Rendering)S..

[React] 리액트의 Render Phase와 Commit Phase 완벽 정리

리액트를 쓰다 보면 "렌더링"이라는 말을 자주 접하게 된다. 하지만 리액트의 렌더링 과정은 단순히 return 하는 걸로 끝나는 게 아니다. React의 내부 렌더링은 두 단계, Render Phase와 Commit Phase로 나뉘며, 이 둘을 명확히 이해해야만 예상치 못한 사이드 이펙트나 성능 문제를 피할 수 있다. 이번 포스팅에서는 이 두 단계가 각각 무엇을 하는지, 왜 나뉘어 있는지, 개발 시 주의할 점은 무엇인지까지 깔끔하게 정리해본다. 🎬 리액트 렌더링 프로세스의 큰 그림리액트의 렌더링은 다음과 같이 이루어진다: - Render Phase (렌더 단계): 어떤 UI를 보여줄지 계산하는 단계 - Commit Phase (커밋 단계): 계산된 결과를 DOM에 실제 반영하는 단계 이 둘..

[React] React에서 key로 index를 쓰면 안 되는 이유

React로 리스트를 렌더링하다 보면 .map() 안에서 key 값을 필수로 지정하게 된다. 이때 초보자부터 숙련자까지 흔히 하는 실수가 바로 index를 key로 사용하는 것이다. // 흔히 하는 실수items.map((item, index) => {item.name}); 간단해 보이지만, 이 코드는 예기치 않은 버그의 원인이 된다. 이번 포스팅에서는 왜 index를 key로 쓰면 안 되는지, 그리고 어떨 때는 써도 되는지를 예제와 함께 정리해본다. 📌 key란 무엇인가? React는 리스트를 렌더링할 때 어떤 항목이 추가되었는지, 삭제되었는지, 혹은 순서가 바뀌었는지를 파악하기 위해 key라는 식별자를 사용한다. 이 key는 각 요소를 고유하게 식별해야 하고, 이를 기반으로 효율적으로 DOM..

[React] Strict Mode 완전 정복 - 사이드이펙트, 더블 렌더링, Deprecated 감지까지

🔷 들어가며 React를 사용하다 보면 라는 컴포넌트를 본 적이 있을 것이다. 보통 index.js 파일에서 루트 컴포넌트를 감쌀 때 사용한다. 하지만 정확히 어떤 역할을 하는지, 왜 사용하는지에 대해선 모호한 경우가 많다. 이번 글에서는 StrictMode가 실제로 어떤 일을 하는지, React 18에서 어떤 변화가 있었는지, 그리고 우리가 코드에서 어떻게 대응해야 하는지까지 정리해보려한다. ✅ StrictMode란?StrictMode는 React에서 잠재적인 문제를 사전에 감지할 수 있도록 도와주는 개발용 유틸리티 컴포넌트이다. - 개발 모드에서만 동작 - 실제 UI에는 아무 영향도 주지 않음 - 앱 전체 또는 일부분에만 적용 가능import React from 'react';import Rea..

728x90