본문 바로가기

분류 전체보기

 (170)
[매일메일] SSR의 개념과 장단점? (FE.250115) 2025. 1. 15. 22:14 SSR(Server Side Rendering)이란 무엇인가?- 서버에서 완성된 정적 HTML을 클라이언트에 내려주는 방식- 클라이언트는 해당 HTML을 파싱만 해서 화면을 랜더링함 CSR(Client Side Rendering)이란 무엇인가?- 서버에서 비어있는 뼈대 HTML을 클라이언트에 받음- 필요한 자바스크립트 번들을 다운로드하고 번들을 실행해서 동적으로 컨텐츠를 채움 SSR의 장점?- SEO(Search Engine Optimization)에서 유리함.- 크롤러가 컨텐츠를 쉽게 인식함.- 초기 로딩 속도가 빠름. 이미 컨텐츠가 완성된 상태로 서버에서 보내주기 때문에 번들을 다운로드/실행할 필요 없음.- 블로그나 커머스 등, 컨텐츠 노출이 중요한 웹 애플리케이션에 적합함 SSR의 단점?- 클라이언..
[매일메일] 디바운스와 쓰로틀, 무한 스크롤? (FE.250108) 2025. 1. 14. 22:10 디바운스(Debounce)와 쓰로틀(Throttle)은 이벤트 핸들러가 너무 자주 실행되지 않도록 조절하는 기법 Debounce: 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나야 이벤트 핸들러 실행검색창에 사용자가 검색어를 입력할 때, 사용자가 입력을 멈춘 후 일정 시간이 지나면 검색 요청을 보냄Throttle: 일정 시간 간격 동안 발생한 이벤트 중 첫 번째 또는 마지막 이벤트만 처리함이벤트가 계속해서 발생해도 설정된 시간 동안은 한 번만 이벤트 핸들러가 실행됨사용자가 연속 광클을 시도할 경우, 일정 간격 내 한 번만 요청을 보냄무한 스크롤 구현 시 유리한 방법은?쓰로틀: 스크롤이 하단에 위치하게 된 순간 즉시 추가 데이터 요청을 수행해서 자연스러운 스크롤 경험을 제공함디..
[매일메일] 사용자가 웹사이트에 접근하면 발생하는 일?(FE.241225/BE.250110) 2025. 1. 14. 21:52 프론트엔드 관점백엔드 관점[1단계] DNS 조회(DNS Lookup): 도메인을 IP 주소로 변환- 브라우저가 캐시된 DNS 기록을 확인함- 처음 접속하는 도메인인 경우 로컬 DNS 서버에 요청함- 도메인을 IP 주소로 변환함- 어플리케이션 계층(7th 계층)에서 이루어짐[2단계] TCP(Transmission Control Protocol) 연결- 브라우저는 서버와 3-way handshake를 수행해 TCP 연결함1. 브라우저가 SYN 패킷 보냄2. 서버가 SYN-ACK 패킷 보냄3. 브라우저가 ACK 패킷 보냄- 브라우저는 서버와 통신을 시작함- HTTP는 TCP/IP 기반으로 작동, TCP 3-Way Handshake수행- 전송 계층(4th 계층)에서 이루어짐[3단계] HTTP Request- 웹..
[매일메일] React에서 index를 key값으로 사용하면 안되는 이유(FE.250109) 2025. 1. 14. 21:20 React의 key란 무엇인가?리스트를 랜더링 할 때 엘리먼트를 구분하는 고유 식별자 역할어떤 항목이 변경(추가, 삭제, 정렬 변경)되었는지 효율적으로 파악하고, 필요한 부분만 다시 렌더링함React의 index란?배열을 순회하며 리스트를 랜더링할 때(.map), 현재 요소가 몇 번째인지 나타내는 정수 값const fruits = ['Apple', 'Banana', 'Orange'];const fruitList = fruits.map((fruit, index) => { return ( {fruit} (index: {index}) );});간단하게 구현하는 경우에는 이처럼 key에 index값을 쓰곤 하는데, 사실 이러면 문제가 생길 수 있다. React의 리스트에서 index를..
[매일메일] 웹 접근성과 개선 방법 (FE.250114) 2025. 1. 14. 20:13 웹 접근성이란?- 모든 사용자가 제약없이 웹 페이지에 동등하게 이용할 수 있도록 보장한다- 장애인, 고령자, 네트워크 환경이 약한 지역의 거주자 등에 무관하게 동등한 접근 보장 웹 접근성 개선 방법?1. 시맨틱 태그: HTML에서 콘텐츠의 의미와 구조를 명확히 나타내기 위해 사용   - 웹 페이지 구조와 의미를 명확하게 전달해 스크린 리더가 콘텐츠를 쉽게 이해시맨틱 태그설명시맨틱 태그 설명header문서나 섹션의 머리글nav네비게이션 링크 모음main문서 주요 콘텐츠 영역article독립적이고 완전한 콘텐츠section주제 기반으로 문서 구분asdie별도로 부가적인 정보 제공footer문서나 섹션의 바닥글figcaption이미지, 차트 등에 대한 설명(+ 비시맨틱 태그: 콘텐츠의 의미보다는 스타일링이나 ..
React 알잘딱깔쎈 2025. 1. 13. 20:46 면접 공부용이라서줄글 줄줄줄입니다.... 뭐부터 봐야 할까  리액트란 무엇인가요?"React is the best"https://www.youtube.com/watch?v=pVQPfTleC_4 농담입니다React란 무엇인가개요Facebook에서 개발한 JavaScript 라이브러리로 사용자 인터페이스를 효율적으로 구축하기 위해 사용React의 핵심은 컴포넌트 기반 아키텍처를 사용해 UI를 재사용 가능한 작은 컴포넌트 단위로 나누는 것컴포넌트화로 코드의 유지보수성과 재사용성을 높일 수 있다가상DOM실제 DOM을 조작하기 전 변경 사항을 메모리 내에서 계산하고 필요한 부분만 실제 DOM에 업데이트한다브라우저 렌더링 비용을 줄일 수 있다단방향 데이터 바인딩상태관리와 데이터 흐름을 단순화 하기 위해 단방향 데이..
[매일메일] HTTP 메서드의 멱등성(BE.250113) 2025. 1. 13. 20:08 멱등성?- 연산을 여러 번 적용해도 결과가 달라지지 않는 성질- 첫 번째 수행을 한 뒤 여러 차례 적용해도 결과를 변경시키지 않는 작업 또는 기능의 속성 멱등 함수?- 절대값 함수: 숫자의 절대값을 계산- 같은 값에 대해 여러 번 수행해도 처음과 같은 숫자로 돌아옴 HTTP 메서드의 멱등성?- 동일한 요청을 한 번 보내는 것과 여러번 보내는 것이 서로 동일한 효과를 지님- 돌아오는 값이 같을 뿐 아니라, 서버 상태(DB)에도 영향을 미치지 않음 HTTP 메서드 별 멱등성- GET: 여러 번 호출해도 같은 결과 반환, 리소스에 변화 일으키지 않음- PUT: 여러 번 호출해도 매번 같은 리소스로 업데이트 되기 때문에 결과가 달라지지 않음- DELETE: 여러 번 호출해도 삭제된 리소스에 대한 결과는 달라지지..
[백준] 1543 문자 검사 / 구현 / Python 2025. 1. 3. 23:53 https://www.acmicpc.net/problem/1543 string.find로 key(찾는 문자열)의 index를 구한 후, index 지점부터 key 길이만큼 1로 치환하고, 단어 count을 1 증가시킨다string.find로 key가 검색되지 않을 때까지 while문으로 반복한다 count를 반환한다 n = str(input())key = str(input())count=0while True: if n.find(key)==-1: break else: count+=1 idx = n.find(key) s = list(n) for i in range(idx,idx+len(key)): s[i]="1" ..
728x90

티스토리툴바