전체 글328 [Software Terminology] SDK *해당 포스팅은 챗지피티에 검색결과 내용입니다. SDK stands for Software Development Kit. It's a set of tools, libraries, documentation, and code samples that developers use to create software applications for a specific platform, operating system, or programming language. SDKs provide a structured way for developers to interact with and utilize the functionalities of a particular software platform or service. They o.. 2024. 5. 7. [JavaScript] Shallow Copy vs Deep Copy *해당 포스팅은 챗지피티에 검색결과 내용입니다. In JavaScript, shallow copy and deep copy are techniques used to duplicate objects or arrays.1. Shallow Copy: A shallow copy creates a new object or array, but doesn't create copies of nested objects or arrays. It means the new object simply references the original object's properties. Modifying a nested object in the shallow copy will affect the original object, as th.. 2024. 5. 7. [자바스크립트] async와 defer HTML에서 JavaScript를 연결하는 방법 세가지 용어정리 parsing: 분석하다 fetching: 가져오다 executing: 실행하다 1. 키워드 없이 연결 자바스크립트 파일을 가져오고(fetching) 실행(executing)할때 HTML 분석(parsing)이 일시적으로 멈춘다 head에 자바스크립트 파일을 연결했을때 1) HTML 파일 분석 (parsing) 2) head에 위치한 script 코드를 만남 3) JavaScript 파일 가져옴 (fetching) & HTML 파일분석 일시 중지 4) JavaScript 파일 실행 (executing) & HTML 파일분석 일시 중지 5) 나머지 HTML 파일 분석 (parsing) 6) 페이지 준비완료 문제점: 3번 4번에서 일어나는 Ja.. 2022. 12. 12. [웹개발] 점진적 향상법 vs 우아한 성능 저하법 점진적 향상법과 우아한 성능 저하법은 웹 접근성을 위해 웹을 디자인하는 방식으로 서로 반대되는 개념이다. 점진적 향상법과 우아한 성능 저하법 모두 사용자의 웹 브라우저 종류나 버전에 상관없이 같은 서비스를 이용할 수 있도록 하는 것이 목표다. 1. 점진적 향상법 (Progressive Enhancement) 특징 레이어를 하나씩 쌓아 올리면서 단순한 것부터 복잡한 것까지 동작하도록 발전시키는 방법 많은 테스트를 통해 기능을 점진적으로 향상시키는 것 기초부터 차곡차곡 쌓아서 발전해 나가는 방법 장점 기존의 구형 디바이스와 브라우저에 대한 문제를 방지할 수 있음 추가된 기능을 지원할 때에 최소한 이전 계층들에 대해서는 신뢰 가능 예시 웹 페이지를 구성할 때 HTML, CSS, JavaScript로 레이어를 .. 2022. 12. 7. [타입스크립트] 타입스크립트 설정파일 설명 (tsconfig.json) tsconfig.json파일이 있으면 vs code는 프로젝트가 타입스크립트를 사용한다는 것을 알게 되고 타입스크립트 자동완성 기능을 제공해준다. tsconfig.json { "include": ["src"], "compilerOptions": { "outDir": "build", "target": "es5", "lib": ["ES6", "DOM"], "strict": true, "allowJs": true, // 타입스크립트 파일에 자바스크립트 import 가능하게 하기 "esModuleInterop": true, "module": "CommonJS" } } 1. include 타입스크립트 파일이 어디에 위치하는지 배열 안에는 자바스크립트로 컴파일하고 싶은 모든 디렉토리를 명시 타입스크립트가 src 폴.. 2022. 12. 7. [웹개발] 엘리의 드림코딩: 함수형 프로그래밍 노트 정리 1. 프로그래밍 패러다임(Programming Paradigm) 프로그래밍 패러다임이란? 건축을 할때 짓고자하는 건축물에 따라, 건축가의 선호도에 따라 건축의 방법이 달라지는것처럼 프로그램을 만들때도 원하는 목표에 따라 적절한 방법과 기법을 사용해 프로그램을 만들어나가게 된다. 프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코드를 어떻게 작성할 지 결정하는 역할을 한다. 즉 프로그래밍 패러다임은 프로그램을 만드는 방법론이다. 프로그래밍 패러다임의 종류 절차지향 프로그래밍 객체지향 프로그래밍 함수형 프로그래밍 함수형 반응형 프로그래밍 함수형 프로그래밍 언어들: Haskell, F3, OCaml, Erlang 함수형 프로그래밍을 지원하는 언어들: JavaScript, Kotlin, Pyt.. 2022. 11. 30. [타입스크립트] 빌드없이 타입스크립트 실행하기 & 서버 자동으로 재시작하기 package.json npm run build && npm run start 명령어로 빌드 후에 프로젝트를 실행 "scripts": { "build": "tsc", "start": "node build/index.js" // 빌드 후 index.js 실행하라는 명령어 } ts-node 빌드 없이 빠르게 새로고침하고 싶을때 사용한다. 빌드한 다음에 코드를 실행하지 않아도 ts-node가 컴파일할 필요없이 타입스크립트 코드를 대신 실행해준다. ts-node 개발용으로 설치 npm i -D ts-node package.json "scripts": { "build": "tsc", "dev": "ts-node src/index", // 추가된 코드 "start": "node build/index.js" } no.. 2022. 11. 29. [한줄정리/웹개발] 시멘틱 마크업이란? 시맨틱(Semantic)이란 "의미론적인"의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서, 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다. 📘 출처 wisdom: 웹 접근성과 시맨틱 마크업 2022. 11. 27. [웹개발] 10분 테코톡 노트정리: 웹 표준과 웹 접근성 ⚠️ 이 포스팅은 우아한Tech을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: [10분 테코톡] 🐭 미키의 웹 접근성 & 표준 웹 표준 (Web Standards) 어떠한 운영체제나 브라우저를 사용해도 *동일한 컨텐츠를 볼 수 있도록 웹에서 표준적으로 사용되는 기술이나 규칙을 말한다. *동일한 컨텐츠: 똑같은 화면을 의미하는 것이 아닌 모든 플랫폼에서 동등한 수준의 정보에 접근이 가능함을 의미 웹 표준은 어떻게 만들어질까? 팀 버나스 리를 중심으로한 world wide web consortium이라는 조직의 토론에 의해 결정 웹 표준을 지켰을때의 장점 하나의 코드로 모든 플랫폼(브라우저, 운영체제)에 대응할 수 있음 개발자가 더 코드를 이해하기 쉬워짐으로 개발의 .. 2022. 11. 27. [한줄정리/웹개발] E2E 테스팅이란? 어플리케이션이 예상대로 동작하는지 사용자 관점에서 소프트웨어를 테스트 하는 방법론 사용자 중심으로 처음부터 끝까지 어플리케이션 흐름을 테스트하는 소프트웨어 테스트 방법 중 하나 📘 참조 E2E 테스트 구축기 (used AWS Step Functions) 2022. 11. 27. [웹개발] 드림코딩 노트정리: Test와 TDD ⚠️ 이 포스팅은 드림코딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 테스트 코드와 TDD 🧪(feat. 프론트엔드, 백엔드를 위한 테스트 코드) 테스트(Test)란? 개발에서 테스트란 제품이 예상하는 대로 동작하는지 확인해 제품의 품질을 검증하는 과정으로 소프트웨어의 버그를 찾아내는 것을 말한다. 여기서 제품이란 함수, 특정 기능, UI, 성능, API 스펙등이 될 수 있다. 테스트의 종류 제품의 목표, 플랫폼, 환경이 무엇이냐에 따라서 다양한 테스트가 있다. Unit Test Functional Test Integration Test Component Test Contract Test E2E Test Performance Test 테스트 과정 비즈니스 로직.. 2022. 11. 27. [웹개발] 드림코딩 노트정리: CI/CD ⚠️ 이 포스팅은 드림코딩을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: CI/CD 5분 개념 정리 (현업에서 쓰는 개발 프로세스) CI/CD란? 어떻게 하면 시장과 고객의 요구에 빠르게 반응해서 소프트웨어 제품으로 출시, 업데이트 할것인가를 해결하기 위해 탄생한 방법. 어플리케이션 개발에서 배포까지 모든 단계를 자동화해서 더 효율적이고 빠르게 배포할 수 있도록 하는 방법을 CI/CD라고 한다. CI (Continuous Integration: 지속적 통합) 정의 코드가 메인 리포에 주기적으로 빌드, 테스트, 머지되는 것 지속적 통합의 두가지 포인트 1. 코드 변경사항을 주기적으로 머지해야한다 만약 코드를 주기적으로 머지하지 않는다면 개발자 A와 개발자 B의 코드.. 2022. 11. 27. [웹개발] 프론트앤드에서 성능 최적화란? 프로그램은 컴퓨터의 리소스(메모리 사용량, 처리 시간)를 소모하면서 동작 처리해야할 작업이 복잡하고 클수록 컴퓨터의 리소스를 더 많이 소모하고 프로그램의 성능저하로 이어짐 최소한의 데이터로 가장 빠른 시간에 최적의 화면을 보여줘 사용자 경험을 개선시켜야함 결국 성능 최적화란 프로그램을 사용할때 처리해야하는 작업을 줄여 좋은 사용자 경험을 제공하는 것을 말함 📘 출처 Stevy's wavyLog 🌊: 프론트앤드 웹 성능 최적화 가이드 - 성능 지표, 데이터 로드 최적화 2022. 11. 25. [웹개발] CORS & SOP CORS의 사전적 의미 CORS(Cross-Origin Resource Sharing)를 단어 그대로 번역하면 교차 출처 자원 공유라고 해석될 수 있다. 여기서 교차 즉, 서로 다른 출처를 의미하며 풀어서 해석하면 출처가 다른 자원들을 공유한다라는 의미다. 출처란? 웹사이트의 url은 아래 이미지처럼 프로토콜, 호스트, 포트, 패스, 쿼리스트링, 프레그먼트로 구성되어 있다. 출처가 같은 웹사이트라는 의미는 프로토콜, 호스트, 포트가 같을때를 의미한다. 동일 출처: Protocol + Host + Port 3가지가 같을때 그래서 CORS란 무엇인가 CORS는 다른 출처를 가진 리소스를 가져올 수 있도록 허용하는 메커니즘을 말한다. *메커니즘: 사물의 작용 원리나 구조 (동의어: 체제) CORS가 필요한 이.. 2022. 11. 25. [한줄정리/웹개발] 자바스크립트에서 스코프(Scope)란? 자바스크립트에서 Scope(스코프)는 변수 또는 함수 이름을 다른 대상과 구분지어 참조할 수 있는 범위를 말한다 2022. 11. 22. 이전 1 2 3 4 ··· 22 다음
