8월 7일

오늘 배운 것 (TIL)

프로그래머스에서 6개 문제 해결과 프론트엔드 기술면접 문서 정리

핵심 요약 (TL;DR)

알고리즘 학습에서는 문자열 조작과 반복문 활용 문제를 해결했고, 기술면접 대비를 위해 HTML/CSS, JavaScript 관련 심화 개념을 정리했다. 특히 TailwindCSS와 CSS-in-JS의 장단점, 실행 컨텍스트와 이벤트 루프를 통한 비동기 처리 과정을 체계적으로 학습했다.

풀어본 문제들

1. 문자열의 앞의 n글자

• 문제링크
• 핵심: 문자열의 앞에서부터 n개 글자를 추출
• 학습 포인트: substring 또는 slice 메서드를 활용한 문자열 부분 추출
• 태그: 문자열

2. A 강조하기

• 문제링크
• 핵심: 문자열에서 'A'를 대문자로, 'a'를 소문자로 변환
• 학습 포인트: 조건에 따른 문자 대소문자 변환 로직
• 태그: 문자열

3. 특정한 문자를 대문자로 바꾸기

• 문제링크
• 핵심: 주어진 문자와 일치하는 모든 문자를 대문자로 변환
• 학습 포인트: 문자열 순회하며 조건부 문자 변환하기
• 태그: 문자열

4. 조건에 맞게 수열 변환하기 3

• 문제링크
• 핵심: 배열 요소를 특정 조건에 따라 변환
• 학습 포인트: 배열 순회와 조건문을 활용한 요소 변환
• 태그: 반복문

5. l로 만들기

• 문제링크
• 핵심: 특정 문자보다 사전 순으로 앞서는 문자들을 'l'로 변경
• 학습 포인트: 문자 아스키 코드 비교와 조건부 변환
• 태그: 반복문

6. 문자열 바꿔서 찾기

• 문제링크
• 핵심: 'A'와 'B'를 서로 바꾼 후 패턴 찾기
• 학습 포인트: 문자열 치환과 패턴 매칭
• 태그: 문자열

---

프론트엔드 기술면접 대비

HTML/CSS 관련 학습 내용

TailwindCSS 심화 개념

• 유틸리티 퍼스트 접근방식의 장단점 분석
• PurgeCSS를 통한 불필요한 CSS 제거 메커니즘
• 반응형 디자인 구현의 효율성과 클래스 복잡성의 트레이드오프
• 디자이너와의 협업 시 발생할 수 있는 커뮤니케이션 이슈

CSS-in-JS 라이브러리 비교

• styled-components, emotion, stitches 각각의 특징과 장단점
• 컴포넌트 스코프 스타일링의 이점과 런타임 성능 비용
• 서버사이드 렌더링(SSR) 구현 시 고려사항
• 테마 시스템 구축과 동적 스타일링 전략

JavaScript 심화 개념

실행 컨텍스트와 이벤트 루프

• Call Stack, Microtask Queue, Macrotask Queue의 동작 원리
• Promise와 setTimeout의 실행 순서 차이점
• async/await와 이벤트 루프의 상관관계
• React 렌더링과 이벤트 루프의 상호작용

성능 최적화 관점

• 대량 데이터 처리 시 UI 블로킹 방지 전략
• 이벤트 루프를 활용한 청크 단위 비동기 처리
• 메모리 관리와 클로저를 활용한 최적화 기법

---

오늘의 깨달음

• 알고리즘: 문자열 조작 문제에서는 조건부 변환과 패턴 매칭이 핵심이며, 기본 문자열 메서드들의 활용도가 높다
• 프론트엔드 기술: CSS-in-JS와 TailwindCSS 같은 스타일링 도구들은 각각 명확한 트레이드오프가 있으며, 프로젝트 특성에 맞는 선택이 중요하다
• JavaScript 심화: 이벤트 루프와 실행 컨텍스트의 이해는 비동기 코드 디버깅과 성능 최적화에 필수적이다
• 학습 방향: 알고리즘 기초기를 다지는 동시에 실무에서 자주 묻는 기술면접 질문들을 체계적으로 정리하는 것이 효과적이다