아카이브
전체 글
104편의 기록
-
프론트엔드에서 도메인은 어디에 있나 — 뷰 규칙은 비즈니스 규칙인가
DDD를 프론트엔드 코드에 대보면 내가 하루 종일 내리는 결정의 대부분이 '도메인 밖'으로 분류된다. 그럼 프론트엔드에는 도메인이 없는 걸까? 막힌 지점을 파고들어 '프론트엔드에서 비즈니스 규칙은 무엇인가'를 다시 정의한 기록.
-
모듈은 어떻게 번들이 되나 #3 — 왜 번들러가 이렇게 많은가
webpack·Rollup·esbuild·Vite·Rspack·Turbopack·Rolldown — 왜 이렇게 많을까. 이름을 외우는 대신 각 도구가 어떤 문제를 풀려고 태어났는지 계보를 따라가면 지형도가 저절로 그려진다. Browserify부터 Rust 세대까지, 그리고 2026년의 수렴 지점.
-
모듈은 어떻게 번들이 되나 #2 — 안 쓰는 코드는 어떻게 사라지나
import한 함수만 번들에 남고 나머지는 사라진다. 누가 지웠나(tree-shaking), 왜 CommonJS에선 안 되나, 왜 개발 서버에선 안 지워지나(dev≠prod), 그리고 import type은 왜 필수인가 — 1편의 정적 그래프 위에서 번들러가 실제로 부리는 것들을 따라갔다.
-
모듈은 어떻게 번들이 되나 #1 — 브라우저는 원래 import를 몰랐다
브라우저는 원래 import를 몰랐다. 수백 개 파일에 쓰는 import가 하나로 합쳐져 브라우저에서 돌기까지 무슨 일이 일어나는지 — 모듈 시스템(격리·정적)부터 ESM 3단계 로딩, 그리고 번들러 런타임까지 밑바닥부터 따라갔다.
-
번역 키를 컴파일 타임에 잡기 #6 — 남의 라이브러리 타입을 내 코드에서 확장하기, module augmentation
#3에서 declare module 한 줄로 번역 키를 잠갔는데, 그게 왜 아무도 import 안 해도 프로그램 전역에 퍼지는지가 남아 있었다. i18next의 빈 interface를 채우는 module augmentation을 밑바닥까지 파고, barrel export가 왜 다른 앱까지 타입을 오염시키는지까지 내려갔다.
-
모래 위의 디버깅 — 9규칙 중 하나를 건너뛰면 나머지가 무너진다
디버깅 9규칙 중 여덟 개를 지켜도 1번(시스템 이해)을 건너뛰면 나머지가 전부 모래 위의 집이 된다. '이거 간단하네' 한마디로 이틀을 잘 정리된 오답에 쓴 기록.
-
번역 키를 컴파일 타임에 잡기 #5 — JS 모듈 시스템, 모듈이냐 스크립트냐
#3에서 declare module 한 줄로 번역 키를 잠갔는데, 그게 왜 아무도 import 안 해도 프로그램 전역에 퍼지는지는 안 풀렸다. 그걸 이해하려고 TypeScript를 잠깐 내려놓고 그 밑 JS 모듈 시스템으로 내려갔다 — 모듈이냐 스크립트냐를 누가 정하고, ESM과 CommonJS는 왜 다른가.
-
번역 키를 컴파일 타임에 잡기 #3 — JSON을 타입으로, 도구 없이 declare module로 키 잠그기
번역 키를 타입으로 잠그려고 코드 생성기부터 떠올렸는데, 막상 해보니 내가 직접 짠 건 열 줄 남짓이었다. 중첩 키 평탄화 같은 어려운 부분은 i18next 타입이 이미 다 해두고 있었다.
-
번역 키를 컴파일 타임에 잡기 #4 — 타입을 집합으로 보기, i18next 타입을 읽는 법
#3에서 keyof·조건부 타입·템플릿 리터럴을 "썼지만" 왜 동작하는지는 파고들지 않았다. '타입은 값의 집합이다' 한 문장으로 그 밑바닥을 꿰고, i18next의 실제 타입 한 줄을 직접 읽어냈다.
-
번역 키를 컴파일 타임에 잡기 #2 — 왜 조용히 터지나, 그리고 왜 개발 단계에서 잡아야 하나
번역 키 t('user.profile.title'), 딱 한 글자 잘못 쳤을 뿐인데 컴파일도 CI도 다 통과했다. 그런데 프랑스어 화면엔 영어가 떠 있다. 왜 이런 버그는 런타임에야 조용히 드러날까 — 그리고 나는 이걸 어디서 잡았어야 했을까.
-
번역 키를 컴파일 타임에 잡기 #1 — TypeScript는 언제 무엇을 하는가
t('user.profile.title')의 오타는 왜 컴파일도 테스트도 다 통과하고 런타임에야 조용히 터질까. 그걸 타입만으로 잡고 싶어서, 먼저 TypeScript가 언제 무엇을 하는지 — 컴파일·실행 모델과 타입 소거부터 다시 봤다.
-
좋은 테스트는 어떻게 쓰나 — e2e와 Playwright
1·2편이 '무엇을, 어디에'였다면 이번 편은 '그래서 어떻게 쓰나'다. e2e를 Playwright로 — 왜 그렇게 생겨먹었는지 따라가면 e2e의 본질이 보인다.
-
좋은 테스트는 어디에 두나
좋은 테스트를 손에 쥐고 나니 다음 질문이 왔다 — 그래서 그걸 어디에 두나? 단위·통합·e2e, 그리고 프론트엔드.
-
좋은 테스트는 구현이 아니라 동작을 검증한다 — 동작 vs 구현, 단 하나의 칼날
같은 동작인데 구현을 바꿨다고 테스트가 깨진다면, 그 테스트는 무엇을 지키고 있는 걸까. 그 직관을 끝까지 밀어붙인 기록.
-
그래서 어제 방청소를 했다
AI로 코드를 너무 쉽게 고치게 되자 6개월 동안 구조를 마구 갈아엎었다. 방어선은 없었고, 버그는 또 AI로 막았다. 무엇이 새는지부터 측정하기로 한 이야기 — 그리고 어제, 진짜로 방을 치운 이야기다.
-
AI로 빠르게 개발하는 팀이 회귀와 싸운 기록 — 결국 '측정'부터
AI로 개발 속도가 빨라지자 회귀가 폭증했다. 온갖 검증을 시도하다 결국 '무엇이 새는지부터 측정하자'로 돌아온 이야기다.
-
z-fighting을 6시간 쫓다가 polygon offset을 다시 배웠다
VTK에선 정상이던 화면이 three.js로 옮기자 두 군데서 깨졌다. 결론은 셰이더 한 줄이지만, 거기까지의 경로가 사실상 전부였다.
-
한 줄의 보안 패치가 PWA를 깨운 이야기 — noopener와 링크 캡처
보안 스캐너 경고를 끄려고 넣은 noopener 한 줄. 그게 멀쩡하던 새 탭을 설치형 PWA 창으로 깨워버렸습니다. 게다가 그 경고는 오검출이었어요.
-
3D 엔진을 갈아끼우고 나서야 UV를 공부했다
검은 메시, 흰 메시, 사라지는 텍스처… 두더지잡기처럼 끝없이 튀어나오던 버그의 진짜 정체는 "개념 구멍"이었습니다.
-
Claude Code로 나만의 AI 비서 만들기 - 경제 뉴스 자동 수집 여정
"클로드 코드를 활용해서 AI 비서같은 걸 만들 수 있을까?" 그 질문에서 시작된 삽질과 발견의 기록입니다.
-
엄마 손글씨 장부를 앱으로 만들게 된 이야기
"좋아 너도 느끼겠지만, 이거 너무 귀찮잖아." Claude에게 던진 이 한마디가 앱 기획의 시작이었습니다.
-
Claude에게 테스트 코드 작성을 맡기면 생기는 일
AI와 협업하는 테스트 자동화 워크플로우
-
E2E 테스트 인프라, Docker + EKS 삽질기 (그리고 EC2로 돌아온 이유)
"제대로 해보자"며 Docker + EKS로 시작했습니다. 3일 만에 포기하고 EC2로 돌아왔습니다. 그 삽질의 기록과, 오버엔지니어링에서 배운 것들.
-
매일 아침 스탠드업, 직접 쓰고 계신가요?
팀에서 스탠드업 메시지 작성을 기본적으로 하고 있고, 최근에 하루동안 진행한 작업 내용들에 대해서 좀 정리가 되면 좋을 것 같다는 개인적인 필요가 생겨 고민이 있었습니다.
-
Todo 앱에 TDD 적용해보기(3)
먼저 Todo 앱에서 사용될 기본적인 Todo 엔티티를 생성해보자.
-
Todo 앱에 TDD 적용해보기(2)
이전에 Todo 앱의 요구사항을 정의하고 간단한 디자인을 만들어봤다. 이제 이 요구사항을 바탕으로 앱을 만들어보자. 이번 포스트에서는 앱 초기 설정을 진행해 볼 것이다.
-
프론트엔드에서 도메인 모델링이 필요한 이유
-----
-
DTO vs Domain entities
프론트엔드 개발에서 서버 응답 데이터를 DTO(Data Transfer Object) 형태로 그대로 사용하지 않고, 클라이언트의 도메인 엔티티(Domain Entity) 형태로 변환하여 사용하는 것은 애플리케이션의 유지보수성, 유연성, 그리고 관심사의 분리를 위해 매우...
-
Todo 앱에 TDD 적용해보기(1)
간단한 Todo 앱을 만들면서 타입 기반 설계를 적용해보자.
-
Proxy!
프론트엔드 개발을 하다 보면 CORS, API 프록시, nginx, devServer proxy 같은 단어들과 함께 “프록시”라는 개념을 자주 마주치게 된다. 그런데 프록시에는 forward proxy(포워드 프록시)와 reverse proxy(리버스 프록시)라는 두 ...
-
Axios 버전을 올리게 된 이유
SSRF(Server-Side Request Forgery)는 서버 측에서 위조된 요청을 발생시켜 직접적인 접근이 제한된 내부 자원에 접근하거나 데이터를 유출하고 오작동을 유발하는 공격입니다.
-
TDD? TDD!
“가능한 모든 유효하지 않은 상태를 타입으로 표현 불가능하게 만든다면?” 이 질문에서 타입 주도 개발(Type-Driven Development)은 시작됩니다.
-
프론트엔드 테스트 코드
프론트엔드 테스트 코드는 일반적으로 다음 네 가지로 구분할 수 있으며, 각각은 계층적으로 역할이 다르고, 목적도 명확히 구분됩니다.
-
Git Flow? Trunk based?
Git Flow와 트렁크 기반 개발은 소프트웨어 개발 팀이 코드를 작성, 병합 및 배포할 때 채택하는 대표적인 브랜치 전략입니다. 두 전략은 각각의 핵심 원칙과 목표에 따라 브랜치 관리 방식과 개발 워크플로에서 명확한 차이를 보입니다.
-
ErrorBoundary를 잘 사용하고 있나요?
리액트로 서비스를 개발할 때 에러처리를 할 수 있는 방법은 다양하다. if문을 사용해서 데이터가 없을 때를 분기 처리하거나, ErrorBoundary를 사용해서 fallback UI를 보여주는 것처럼 여러 방법이 있다.
-
슬기로운 인턴 생활 - (5)
매주 인턴 생활을 블로그에 작성하다 보니 한 주 동안 무슨 일을 하면서 보냈는지 생각하게 됩니다. 이번 주는 길었던 추석 연휴가 끝나고 다음 주였는데, 월요일이 공휴일이라 너무 좋았던 건 저만 그런 게 아니겠죠?
-
슬기로운 인턴 생활 - (4)
벌써 시간이 1달이 넘어 빠르게 지났네요. 그만큼 이마고웍스에 많이 적응해서 기분이 좋습니다. 이번 블로그 포스팅은 추석 연휴가 있어 조금 늦어졌습니다.
-
슬기로운 인턴 생활 - (3)
정신 차리니 벌써 3주가 지나갔네요. 이번 월요일에는 예비군 훈련으로 출근을 안해서 한 주가 더 빨리 흐른 느낌입니다... 이번주는 정말 재밌는 한 주였습니다. 바로 멘토 멘티 6명이 회식을 했기 때문이죠! 이건 조금 이따 얘기하고 먼저 무슨 일이 있었는지 말해보겠습니...
-
슬기로운 인턴 생활 - (2)
첫 테스크는 설명을 듣고 피그마 디자인을 봤을 때 크게 어렵지 않게 구현이 가능할 거라고 생각했습니다. 물론 다른 분들의 코드를 보면서 내가 쓴 코드가 잘 동작을 하는 지, 또 제대로 이해하고 기존 코드를 바꾸고 있는 건지 의문이 들었습니다. 그래도 어찌저찌 기능은 동...
-
슬기로운 인턴 생활 - (1)
개발 환경을 세팅하고 정신없이 하루를 보내다 보니 벌써 점심시간이... 다른 팀원분들 가시는 식당에 조용히 끼어서 같이 먹게 되었습니다. 닭볶음탕을 먹었는데 생각보다 매워서 놀랐지만 그래도 맛있었어요. 사진을 못 찍은게 아쉬워도 제 혀바닥은 맛을 기억하니 그거면 충분합...
-
인디버디 리팩토링하기 (3)
useCheckAuth(PATHURL.LOGIN);
-
인디버디 리팩토링하기 (2)
위 부분이다. 크게 보면 2개의 부분으로 나눌 수 있다. 인기, 신규 탭을 보여주는 네비게이션 바과 게임 카드와 페이지네이션이 보여지는 부분이다. 또 게임 카드들과 페이지네이션도 분리할 수 있다.
-
인디버디 리팩토링하기 (1)
시간이 없다는 핑계로 대충 코드를 짜면서 이렇게 짜면 나중에 무조건 고쳐야하는데...하고 생각을 했고, 그 벌을 지금 받으려고 한다.
-
클라이언트 배포
하지만 간과한게 있었다. S3는 정적 웹페이지 호스팅 방법이다. 그렇기 때문인지 동작이 되지 않는 것이 있었다. 바로 로그인 시 POST요청을 하게 되는데 이 경우 405 error를 받게 되었다. 확인해보니까 s3에서 post 요청을 막는 줄 알았는데 그것이 아니라 ...
-
이미지 넣고 수정하기
프론트엔드에서 이미지를 보여주기 위해서는 해당 이미지의 url 정보나 base64로 인코딩 된 값이 필요했다. 하지만 방금 막 업로드한 이미지의 url은 서버에 저장되어 있지 않고, 클라이언트에서 임시로 url을 만들어 보여주는 단순 미리보기 기능밖에 구현이 되지 않는...
-
고민했던 거
버튼 컴포넌트 만드는데 헤더에서만 사용할 컴포넌트이지만, 로그인 회원가입 두개의 버튼이라 어떻게 구현할까 고민
-
컨벤션 정하기
const StyledDiv = styled.div ...styles import 순서는 기본 린트 설정을 따른다. // 외부 라이브러리 패키지 // 컴포넌트 // 스타일 관련 파일
-
타입 스크립트 eslint 적용하기
eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest √ Would you like to install them now? · No / Yes √...
-
Inddy Buddy - 인디 게임 커뮤니티
커뮤니티 형식의 프로젝트를 진행하게 되었다. 팀은 프론트엔드 3인, 백엔드 3인으로 이루어져있고, 기본 기술 스택은 프론트엔드 REACT, 백엔드는 JAVA, SPRING을 이용할 것이다.
-
Pre-Project DAY 7,8
페이지를 담당하는 컴포넌트들이 중복되는 컴포넌트들을 가지고 있는 경우가 있다. 특히, 사이드 바가 그렇다. 이건 어느 웹 사이트나 마찬가지일 것이다. 이때 사용할 수 있는 방법이 리액트 라우터에서 네스팅 방식을 사용하는 것이다. 그렇게 했을 때 <Outlet /컴포넌트...
-
Pre-Project DAY 5,6
병합이 완료된 이후, 레이아웃 정리는 팀장이 진행 후 dev브랜치에 올려 다른 팀원들이 최종 결과를 pull했다.
-
Pre-Project DAY4
사용자 요구사항 정의서 최종적으로 검토 후 제출 화면 정의서 작성
-
Pre-Project DAY3
요구사항 정의서 완성본은 아래 링크에서 확인할 수 있다. https://www.notion.so/6c4ccc302ffb4c4ca3f6fc33a8588fc0?v=1df103092c344c07b92d77cd8e15fc58
-
Pre-Project DAY2
할 것들? - 트렐로 - 슬랙? - 깃 플로우 정하기 - 컨벤션 정하기 (코드, 커밋) - 피그마 어떻게 할지
-
서버 배포와 쿠키 문제
이는 vim .env를 통해 파일을 생성하고 환경변수를 넣어주는 것으로 해결했다. 사실 .env파일을 이렇게 ec2 내에서 직접 만들어서 사용해도 괜찮은 가 모르겠는데 뭐 지금은 이것말고는 방법이 없으니...
-
virtual DOM
리액트를 공부하다 보면 항상 마주치는 내용이 virtual DOM입니다. 그렇다면 과연 이것이 무엇이길래 그럴까요? DOM virtual DOM을 보기 전에 DOM(document object model)에 대해서 알아봅시다. 이전에 포스팅을 한 적이 있지만, 그때는 ...
-
todo list server
서버 구현이 어느 정도 완료된 것 같습니다. 폴더 구조는 아래와 같습니다. api sheet은 따로 만들지 않았습니다.
-
todo list 기획하기
솔로 프로젝트로 투두 리스트를 만들어보기로 했습니다. 많은 사람들이 처음 개발 공부를 하면서 만들어보게 되는 것인데 전 아직 제대로 만들어 본 적이 없었네요.
-
쿠키
무상태성으로 인해서 이전 요청에 대한 정보가 필요할 때 어떤 처리를 하기 어려운 경우가 생깁니다. 예를 들면, 로그인 된 유저를 상태로 저장하고 있고, 이에 따라 다른 페이지로 넘어가는 것과 같이 로그인 된 유저 정보가 필요한 요청에 대해서 매번 로그인을 다시해야 하는...
-
이진 트리 순회
코드를 짠다고 하면 다음과 같이 됩니다.
-
서버에 요청하기
위의 두 컴포넌트에서 필터 요소나 페이지를 클릭하게 되면 쿼리스트링을 바꿔 데이터 요청을 할 수 있게 했습니다.
-
리덕스 사용해보기
이전 아고라스테이츠 리액트 프로젝트에서 문제가 되었던 것은 상태 끌어올리기로 인한 props drilling이었습니다. 제일 먼저 손을 봐야 하는 것이 현재 로그인 된 유저를 저장한 상태였는데요. 이것을 리덕스를 이용해서 바꿔보도록 하겠습니다.
-
Redux를 왜 쓸까
리액트로 프로젝트를 하다보면 상태 관리에 어려움을 느끼는 경우가 많습니다. 컴포넌트 별로 공유 되어야 하는 상태를 다룰 때 보통 상태 끌어올리기를 통해서 해결하게 됩니다. 하지만 props로 넘겨지는 상태가 많아지고 그 깊이가 깊어지면 코드 자체가 복잡해져 관리가 어려...
-
useState
함수 컴포넌트에서 상태를 다룰 때 사용하는 훅은 useState입니다. 그냥 변수를 사용하면 되는 것을 왜 state를 사용해야할까요?
-
useRef
리액트 훅 중 useRef에 대해 알아보자. 보통 리액트에서 변하는 값을 다룰 때는 상태를 이용하게 된다. 또한, 리액트에서는 특정 DOM객체에 접근하고 싶을 때 document.querySelector과 같은 방법은 권장하지 않는다. 이럴 때 사용을 고려해볼 수 있는...
-
Atomic design
이것 저것 찾아보다 보게 된 네이버의 설명 영상은 styled component와 story book을 이용한 atomic design에 대해 간략하게 다루고 있습니다. 기존 brad frost가 제안한 아토믹 디자인은 5단계를 가지고 있지만, 영상에서는 의미가 비슷한...
-
문자열 폭발
문제를 요약하자면 기준 문자열과 폭발 문자열을 입력받고, 기준 문자열에서 폭발 문자열을 제거한 새로운 문자열을 만들고 거기서 폭발 문자열을 다시 제거하고를 반복해서 최종적으로 나오는 문자열을 출력한다.
-
순수 함수
함수형 프로그래밍을 처음 공부하게 되면 먼저 접하는 개념이 바로 순수 함수입니다. 프로그래밍 패러다임의 기반이 되는 개념이죠. 그렇다면 순수 함수는 무엇일까요?
-
깃허브를 꾸밀 수 있다고?
다른 사람들의 깃허브를 구경하다 보니 뭔가 내 깃허브보다 잘 정리되어 있다는 느낌을 받았다. 그래서 뭐 때문에 그런 것일까 고민을 해봤는데, 큰 차이가 있었다. 바로 깃허브 첫 페이지의 모습이었다.
-
이벤트
여기서 알고 있어야 하는 것은 이벤트 핸들러 함수는 비동기적으로 동작한다는 것입니다. 이미 콜스택에 남아있는 실행 컨택스트가 없는 상태에서 어떤 이벤트가 발생했을 때 함수가 실행된다는 것이니까요. 그렇기 때문에 핸들러 내부에서 특정 값에 변화를 주어도 화면에 반영이 되...
-
DOM
자바스크립트가 생긴 목적은 HTML과 CSS만으로 이루어진 기존의 웹 페이지의 특정 기능들을 수행할 수 있게 하기 위해서 만들어진 프로그래밍 언어인데요. 즉, HTML요소들을 조작할 수 있게 하는 것이 주된 목표였죠. 또, HTML은 브라우저 내에서 사용하는 마크업 언...
-
아고라스테이츠 리팩토링1
이전 아고라스테이츠 과제 회고 당시 생각했던 수정사항 일부를 리팩토링했다.
-
프로미스
자바스크립트에서 비동기 처리에 관한 글을 저번 포스트에서 남겼다. 그 글에서 비동기 처리를 하면서 만날 수 있는 문제에 대해 설명했는데, 그렇다면 그 문제를 해결하는 방법이 무엇이 있는지 확인해보자.
-
비동기
비동기 처리는 정확하게 이해했다고 장담할 수 없다. 그렇기 때문에 내가 아는 선에서 최대한 설명해보겠다.
-
생성자 함수
생성자 함수란 new키워드와 함께 함수를 호출해서 객체를 생성할 수 있는 함수를 말한다. 이때 생성되는 객체를 인스턴스라고 한다.
-
클래스
ES5까지는 생성자 함수를 이용해서 클래스를 정의했지만, ES6부터는 클래스 문법을 제공하기 때문에 클래스 문법을 사용해서 작성하면 된다. 하지만, 클래스 문법을 제공한다고 해서 프로토타입의 언어에서 클래스를 기반으로 한 언어로 바뀐 것은 아니고 새로운 인스턴스 생성 ...
-
프로토타입
자바스크립트의 거의 모든 것은 객체다 -누군가 했던 말인 거 같은데
-
고차함수
위의 특징을 만족하는 객체를 일급 객체라고합니다. 자바스크립트에서는 함수가 일급 객체로 동작합니다. 즉, 함수를 하나의 값으로 평가할 수 있다는 것입니다. 그렇기 때문에 변수에 할당하거나, 함수의 인자로 넘겨주거나, 함수의 반환값으로 함수를 반환할 수 있게 되는 것이죠...
-
아고라스테이츠
javascript const data = {id: { id, cretaedAt, title, url, author, answer: { id, createdAt, url, author, body, avatarUrl }, body, avatarUrl, tag } } 데이...
-
리스트 순회
javascript const li = [1,2,3,4]
-
이터러블과 이터레이터
for(const a of arr) console.log(a); // 1 2 3
-
closure
클로저는 자바스크립트의 꽃이라고 할 수 있다. 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이다.
-
this
this에 대해 정확하게 알고 있다고 생각했지만, 전혀 아니었다. 제대로 알기 위해서 여러가지 실험을 했고 어느 정도 감이 잡힌 것 같기 때문에 포스팅을 한다.
-
팩토리 패턴
팩토리 패턴은 특정 인스턴스를 생성하는 클래스를 만들어 인스턴스의 생성과 기능 구현을 분리시킨 디자인 패턴이다.
-
싱글톤 패턴
개발 공부를 하다 보니 디자인 패턴이라는 것을 듣게 되었다. 디자인 패턴은 지금까지 자주 사용되었던 코드를 템플릿처럼 만든 개발 방법이다.
-
rem vs vw
css로 상대 단위를 이용해 계산을 할 때 어떤 단위를 사용하는 것이 좋을까요? 우선 rem과 vw의 의미가 무엇인지 알아보겠습니다.
-
scroll bar 조작
HTML문서를 작성하다 보면 그 내용이 길어져 화면을 벗어나는 경우가 있습니다. 이런 경우 브라우저에서 자동으로 스크롤 바를 제공합니다. (overflow가 auto혹은 scroll인 상태의 경우입니다.)
-
미디어 쿼리 사용하기
웹사이트를 보면 브라우저 크기에 따라 화면이 변하는 경우를 본 적이 있습니다. 이때 사용할 수 있는 것이 미디어 쿼리입니다.
-
요소를 안 보이게 하는 방법
css를 작성하다 보면 특정 요소를 보이지 않게 하거나, 보이게 하고 싶은 경우가 있습니다. 이런 경우 어떻게 하면 좋을까요?
-
CSS
HTML <!DOCTYPE html <html lang="ko" <head <meta charset="UTF-8" <meta name="viewport" content="width=device-width, initial-scale=1.0" <titleParadigm S...
-
CSS 선택자(SELECTOR)
{}
-
HTML 기본
HTML <!DOCTYPE HTML <html <!-- head 요소-- <head <!-- 시작 태그-- <!-- 내용 -- </head <!-- 종료 태그-- <body </body </html 태그의 내용은 텍스트를 담을 수도 있고, 태그를 담을 수도 있습니다. ...
-
시멘틱 마크업
이런 검색 엔진에 잘 노출되기 위해서 검색 엔진 최적화를 통해 검색을 하는 유저들의 방문을 늘리는 방식을 이용하게 됩니다. 검색 엔진 최적화는 검색하는 유저들의 의도에 맞게 웹 페이지를 최적화해서 검색 엔진의 평가를 높여 결과 페이지에 노출되게 하여 자연스러운 유입을 ...
-
태그의 속성
속성은 태그에 기능을 수정하거나, 기능을 제공하는 역할을 한다고 생각하세요.
-
var, let, const
지금까지 코드 설명을 var키워드를 이용하여 설명했습니다. 하지만 var를 사용하는 것은 문제를 발생시킬 소지가 있기 때문에 사용이 권장되지 않죠. 그렇다면 지금부터 무엇이 문제이고, 그것을 해결하기 위해선 무엇을 해야하는 지 알아 보도록 합시다.
-
객체
객체는 0개 이상의 프로퍼티로 구성된 하나의 자료구조라고 할 수 있습니다. 자료구조라는 것은 데이터를 표현하는 하나의 방법이라고 생각하면 될 것 같네요. 프로퍼티는 무엇인지 차근차근 설명하겠습니다.
-
스코프
그렇다고 추상적으로 존재하는 것이 아니라 실재로 스코프의 개념이 있고 물리적으로 존재합니다. 그것에 대해서는 나중에 자세히 알아보도록 하고 이번에는 스코프에 대해 알아보죠.
-
함수
이전에 자바스크립트의 거의 모든 것은 객체라고 했습니다. 함수 역시 '일급객체'입니다. 객체처럼 프로퍼티를 가질 수 있고, 값으로 변수에 할당될 수 있다는 의미죠.
-
제어문 - 조건문, 반복문
제어문의 사용을 줄이기 위해서 함수형 프로그래밍에서는 map, filter, reduce와 같은 방식을 제시하기도 합니다.
-
연산자
NaN을 보게 된다면 산술이 안되는 데이터로 산술 연산을 하진 않았는지 의심해야 하는 것이죠. 예를 들어, 입력으로 받은 숫자가 사실 number타입이 아닌 string타입일 수 있는 것입니다.
-
변수
쉽다고 했지만 처음 프로그래밍을 접하는 사람에겐 값이 뭔지, 어디에 위치한다는 것인지 알 수가 없습니다.
-
타입
타입은 데이터 타입, 자료형, 형 등으로 사용되는데 모두 같은 의미입니다. 데이터(값)이 가지는 고유한 정체성같은 거라고 생각하면 되겠네요.
-
표현식과 문
javascript var score = 100; // 100은 그 자체로 표현식이다. (리터럴)
-
부트캠프 첫걸음
1. 일일 일정 평일 정규 수업 시간 : 9:00 18:00 휴식 : 18:00 19:00 수업 내용 복습 및 보완 : 19:00 주말 필요 부분 학습 : 9:00 13:00 이후 부족한 것은 시간을 더 들여 공부