MDN Web Docs
HTML과 CSS, JavaScript 및 웹 API의 설명과 예제를 읽는 개발 문서입니다. 웹 기능의 사용법과 주의할 점을 함께 살펴볼 수 있습니다.
활용 웹 코드를 작성하며 문법과 브라우저 동작을 확인해야 할 때 씁니다.
장점 언어 문서와 웹 API, 학습 가이드를 연결해 탐색할 수 있습니다.
확인할 점 번역본의 갱신 상태와 실험적 기능 표시, 대상 브라우저를 확인하세요.
문법을 읽는 자료, 예제를 실행하는 환경, API와 데이터 구조를 점검하는 도구를 나누어 모았습니다. 프로젝트 버전과 공개 범위, 실행 권한을 확인하면서 필요한 도구를 선택하세요.
기능·활용 상황·장점과 확인할 점을 함께 정리했습니다
HTML과 CSS, JavaScript 및 웹 API의 설명과 예제를 읽는 개발 문서입니다. 웹 기능의 사용법과 주의할 점을 함께 살펴볼 수 있습니다.
활용 웹 코드를 작성하며 문법과 브라우저 동작을 확인해야 할 때 씁니다.
장점 언어 문서와 웹 API, 학습 가이드를 연결해 탐색할 수 있습니다.
확인할 점 번역본의 갱신 상태와 실험적 기능 표시, 대상 브라우저를 확인하세요.
코드 저장소와 변경 이력을 관리하고 개발 작업을 함께 진행하는 플랫폼입니다. 공개 프로젝트를 읽고 협업 흐름을 살펴볼 수 있습니다.
활용 프로젝트 코드를 보관하거나 공개 소프트웨어의 변경 내용을 조사할 때 씁니다.
장점 저장소와 개발 협업 관련 정보를 같은 프로젝트 단위로 묶을 수 있습니다.
확인할 점 공개 저장소에 비밀키를 올리지 말고 가져온 코드의 라이선스를 확인하세요.
코드 관리와 개발 협업, 소프트웨어 전달 과정을 연결하는 플랫폼입니다. 프로젝트의 변경과 자동화 흐름을 함께 구성할 수 있습니다.
활용 팀의 코드 변경 검토와 개발 자동화 환경을 함께 비교할 때 맞습니다.
장점 개발 작업과 소프트웨어 전달 기능을 통합해 살펴볼 수 있습니다.
확인할 점 서비스형과 자체 운영형의 기능·관리 책임·이용 조건을 구분하세요.
브라우저에서 개발 프로젝트를 열고 코드를 작성하는 온라인 개발 환경입니다. 예제를 실행하며 작업 내용을 공유하는 데 활용할 수 있습니다.
활용 웹 프로젝트의 작은 예제를 만들어 다른 사람과 확인할 때 씁니다.
장점 브라우저 기반 개발 환경에서 프로젝트를 빠르게 살펴볼 수 있습니다.
확인할 점 지원 런타임과 브라우저 조건, 외부 연결 및 비밀정보 처리를 확인하세요.
온라인 개발 환경에서 프로젝트를 열고 코드를 다루는 서비스입니다. 작업 환경과 재현용 예제를 공유하는 방식을 비교할 수 있습니다.
활용 설치 안내를 줄이고 개발 예제나 문제 상황을 전달하고 싶을 때 맞습니다.
장점 프로젝트 기반의 개발 환경과 공유 경로를 제공하는 점을 살펴볼 수 있습니다.
확인할 점 환경 실행 자원과 보관 기간, 공개 범위의 이용 조건을 확인하세요.
웹 화면을 구성하는 코드를 편집하고 결과를 확인하는 온라인 코드 에디터입니다. 작은 인터페이스와 시각 효과의 예제를 만들 수 있습니다.
활용 HTML과 CSS로 만든 화면의 동작을 짧은 예제로 확인할 때 씁니다.
장점 코드와 화면 결과를 연결해 프론트엔드 실험을 진행할 수 있습니다.
확인할 점 예제의 공개 여부와 외부 라이브러리 권한·버전 조건을 확인하세요.
HTML과 CSS, JavaScript의 작은 코드를 작성하고 실행 결과를 확인하는 웹 실험 도구입니다. 문제를 재현할 예제를 만들 때 쓰기 좋습니다.
활용 브라우저 화면에서 발생하는 문제를 최소 예제로 정리할 때 활용합니다.
장점 여러 코드 영역과 결과를 한 예제로 묶어 살펴볼 수 있습니다.
확인할 점 사용할 라이브러리와 실행 순서를 확인하고 민감한 데이터를 넣지 마세요.
온라인에서 앱과 웹사이트를 만드는 개발 작업 환경입니다. 작성한 프로젝트를 실행하고 공개하는 과정을 한 서비스에서 살펴볼 수 있습니다.
활용 작은 앱 아이디어를 프로젝트로 만들어 실행해 보고 싶을 때 맞습니다.
장점 앱 제작과 실행·공개 관련 흐름을 연결해 검토할 수 있습니다.
확인할 점 생성 코드와 공개 설정을 검토하고 실행·배포 자원의 이용 조건을 확인하세요.
API 요청과 관련 개발 작업을 구성하고 팀과 공유하는 플랫폼입니다. 서버와 주고받는 내용을 확인하는 도구를 살펴볼 수 있습니다.
활용 API의 요청 형식과 응답을 점검하며 작업 내용을 팀과 공유할 때 씁니다.
장점 API 작업을 프로젝트와 협업 흐름으로 정리할 수 있습니다.
확인할 점 인증 토큰과 실제 고객 데이터가 공유 공간에 포함되지 않도록 확인하세요.
API 요청을 만들고 응답을 살펴보는 오픈소스 개발 도구입니다. 웹에서 API의 기본 동작을 확인할 경로를 제공합니다.
활용 간단한 API 요청을 구성하며 응답 내용을 빠르게 살펴볼 때 활용합니다.
장점 요청과 응답 중심의 API 작업을 위한 도구 구성을 확인할 수 있습니다.
확인할 점 브라우저 연결 제한과 인증정보 저장 방식, 공유 설정을 먼저 보세요.
여러 개발 기술의 API 문서를 모아 찾아보는 문서 탐색 도구입니다. 사용하는 언어와 도구의 설명을 한 검색 경로로 접근할 수 있습니다.
활용 여러 언어와 라이브러리 문서를 번갈아 찾아야 할 때 유용합니다.
장점 다양한 기술 문서의 검색을 한 인터페이스에서 이어갈 수 있습니다.
확인할 점 수록 문서 버전이 실제 프로젝트 버전과 일치하는지 확인하세요.
웹 기능의 브라우저 지원 현황을 표로 살펴보는 자료 사이트입니다. 대상 브라우저에서 기능을 쓸 수 있는지 비교하는 데 참고합니다.
활용 새로운 HTML·CSS 기능을 적용하기 전 브라우저 범위를 점검할 때 씁니다.
장점 여러 브라우저의 기능 지원 정보를 같은 표에서 비교할 수 있습니다.
확인할 점 지원 표의 각주와 부분 지원 조건을 읽고 실제 기기에서도 시험하세요.
정규표현식을 입력하고 예시 문자열에서 일치 결과를 확인하는 도구입니다. 패턴의 설명을 보며 수정하는 데 활용할 수 있습니다.
활용 문자열 추출과 검증에 쓸 정규식을 작은 입력으로 시험할 때 맞습니다.
장점 패턴과 시험 문자열의 대응을 확인하며 수정할 수 있습니다.
확인할 점 선택한 정규식 엔진이 실제 코드와 같은지 확인하고 비밀 문자열은 빼세요.
JSON 텍스트의 문법을 검토하고 읽기 편한 형태로 확인하는 도구입니다. 데이터 전달 중 발생한 형식 문제를 찾는 데 활용합니다.
활용 JSON 파일이 읽히지 않을 때 괄호와 쉼표 등 문법을 점검하려고 씁니다.
장점 JSON 형식 확인에 집중한 간단한 검사 경로를 제공합니다.
확인할 점 문법 통과가 업무 데이터의 정확성을 뜻하지 않으며 민감정보는 제거하세요.
텍스트로 다이어그램을 작성하고 화면 결과를 확인하는 편집기입니다. 흐름과 순서를 코드처럼 관리하는 데 활용할 수 있습니다.
활용 업무나 시스템 흐름을 텍스트로 기록해 그림과 함께 관리할 때 씁니다.
장점 텍스트 설명을 바탕으로 다이어그램을 수정하는 방식을 제공합니다.
확인할 점 다이어그램 종류별 문법과 표시 버전을 확인하고 기밀 구조는 공유하지 마세요.
데이터베이스 테이블과 관계를 정의해 구조를 시각화하는 설계 도구입니다. 테이블 간 연결을 문서로 정리할 때 활용할 수 있습니다.
활용 데이터베이스 설계의 테이블과 관계를 팀과 검토하고 싶을 때 맞습니다.
장점 구조 정의와 관계 그림을 연결해 설계 내용을 살펴볼 수 있습니다.
확인할 점 지원 문법과 내보내기 형식, 설계 문서의 공개 설정을 확인하세요.
Docker 제품과 컨테이너 사용법을 안내하는 공식 기술 문서입니다. 설치와 실행 개념, 설정 방법을 목적에 맞게 찾아볼 수 있습니다.
활용 컨테이너 기반 작업을 시작하며 공식 설치·설정 방법을 확인할 때 씁니다.
장점 제품별 공식 문서와 기초 학습 경로를 함께 탐색할 수 있습니다.
확인할 점 운영체제와 제품 버전을 맞추고 실행 명령의 권한·마운트 범위를 검토하세요.
소프트웨어 문서를 빌드하고 게시하는 문서 배포 플랫폼입니다. 프로젝트의 기술 문서를 버전과 함께 관리할 방법을 살펴볼 수 있습니다.
활용 개발 프로젝트의 사용 설명서를 웹 문서로 공개하려 할 때 활용합니다.
장점 문서 작성 결과와 게시 과정을 연결하는 플랫폼을 제공합니다.
확인할 점 빌드 환경과 공개·비공개 문서 조건, 저장소 접근 권한을 확인하세요.
검색한 예제가 동작하지 않는다면 코드부터 바꾸기 전에 언어와 라이브러리 버전, 브라우저나 운영체제를 확인하세요. 같은 이름의 기능도 버전에 따라 사용법과 지원 조건이 달라질 수 있습니다. 공식 문서에서 대상 버전을 선택하고, 실제로 필요한 입력과 기대한 출력을 짧게 적어두면 어떤 설명을 찾아야 할지 분명해집니다.
일반 문서 검색은 용어를 찾는 데, 브라우저 지원 표는 적용 범위를 비교하는 데 활용할 수 있습니다. 문서가 설명한 지원 여부와 실제 사용자 환경의 동작은 같은 확인 단계가 아닙니다. 부분 지원과 실험적 기능에 대한 각주를 읽고, 제품에 반영하기 전에는 대상 기기나 실행 환경에서 작은 예제를 시험하는 것이 좋습니다.
온라인 코드 편집기는 전체 프로젝트를 전달하지 않고도 현상을 보여줄 수 있습니다. 문제와 관계없는 화면과 코드를 줄여 최소 예제를 만들고, 외부 라이브러리의 이름과 버전을 함께 기록하세요. 계정 토큰, 개인 데이터와 내부 주소는 예제용 값으로 바꾸어야 하며, 저장하거나 공유할 때 공개 범위가 어떻게 설정되는지도 확인하세요.
API 도구에서는 요청 주소와 메서드, 헤더와 본문을 구분해 확인하세요. 정상 응답이 왔다는 사실만으로 업무 처리가 의도대로 완료되었다고 판단하지 말고 상태와 반환 데이터를 살펴보는 것이 좋습니다. 실제 사용자 데이터를 바꾸는 요청은 테스트 환경과 권한을 확인한 뒤 다뤄야 하며, 읽기 점검과 변경 작업을 섞지 마세요.
저장소에는 코드뿐 아니라 실행 조건과 필요한 설정의 설명도 남겨야 합니다. 비밀값 자체는 넣지 말고 어떤 값이 필요한지 예시로 안내하세요. 공개 프로젝트의 코드를 가져올 때에는 라이선스와 유지보수 상태를 읽고, 패키지 설치나 컨테이너 실행 명령이 시스템에서 어떤 권한과 파일에 접근하는지도 검토해야 합니다.
정규식과 JSON 검사 결과는 입력 예제에 대한 한 단계 확인일 뿐입니다. 예외 값과 큰 입력, 잘못된 형식도 시험하고, 문법 검사를 통과한 데이터가 실제 업무 규칙에도 맞는지 확인하세요. 다이어그램과 기술 문서는 코드가 바뀔 때 함께 갱신할 수 있도록 관리하고, 공유 문서의 공개 범위와 연결된 저장소 권한을 정기적으로 살펴보세요.
조직의 외부 서비스 이용 규칙과 코드 공개 권한부터 확인해야 합니다. 재현에 필요한 최소 코드만 남기고 비밀키·개인정보·내부 주소를 예시 값으로 바꾸는 방법을 우선 검토하세요.
각 도구가 확인하는 범위는 제한적입니다. JSON 문법은 데이터의 의미를 검증하지 않고, 지원 표는 실제 환경의 모든 조합을 대신 시험하지 않습니다. 프로젝트의 입력과 사용자 환경으로 추가 확인하세요.