본문 바로가기

분류 전체보기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.
[웹개발] 자바스크립트 프레임워크 React와 Vue의 장점과 비교 React와 Vue 비교 리액트는 라이브러리이므로 비교적 자유도가 높은 반면 뷰는 프레임워크이므로 기능이 이미 다 정해져 있다 라이브러리 vs 프레임워크 라이브러리: 사용자가 필요할 때에 가져다 썼다가 뺐다가 할 수 있고 부분적으로 사용이 가능 (리액트) 프레임워크: 부분적 사용이 불가능하고 프레임 워크의 안으로 들어가서 프레임 워크가 지원해주는 문법에 따라서 작성해줘야 제대로 동작 (뷰) 예시 자유도가 높은 React, 정해진 방식대로만 하면 되는 Vue 리액트: 여러가지 방법중 마음에 드는것을 선택해 개발 (자유도가 높음) 뷰: 해당 기능을 개발하는 방법이 정해져있음 (프레임워크 문법을 따라야함) 1. 버튼을 화면에 안보이도록 만들기 리액트: && 연산자 방식, 삼항 연산자 방식 // 1. && 연산.. 2022. 11. 22.
[웹개발] 번들러와 웹팩 번들러(Bundler) 리액트 프로젝트를 시작하기 위해 create-react-app이라는 도구로 필요한 환경을 모두 구축해준다. 이때 웹팩이라는 번들러도 함께 설치가 된다. 번들러란 여러개로 나눠진 파일을 하나로 합쳐주는 도구를 말한다. 리액트에서는 왜 여러개로 나눠진 파일을 하나로 합쳐주는 도구가 필요할까? 리액트에서는 import라는 예약어를 사용해 모듈을 불러온다. 모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이다. 즉, 브라우저는 import라는 코드를 해석할 수 없다. 리액트로 된 프로젝트를 브라우저가 이해할 수 있으려면 번들러라는 도구를 사용해 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한 후 브라우저에 전송해야한다. 번들러의 종류는 여러개가 있지만 리액트에서는 대부분 웹팩을 사용한다.. 2022. 11. 22.
[웹개발] 프론트앤드 빌드 시스템 (바벨, Node.js, NPM, ESLint, Prettier) 프론트앤드 빌드 시스템 프론트앤드 개발은 여러 컴포넌트를 빌드해 소스코드 파일을 컴퓨터에서 실행할 수 있게 변환한다. 이때 코드를 변환하도록 도와주는 도구가 빌드 시스템이다. 컴파일 (Compile) 사람이 프로그래밍 언어로 작성한 소스코드를 컴퓨터가 이해할 수 있는 바이너리 언어로 작성된 코드로 변경하는 것 (사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업) 컴파일러 (Compiler) 개발자가 작성한 소스코드를 컴퓨터가 이해할 수 있는 코드로 변경해주는 프로그램 빌드 (Build) 소스코드 파일을 소프트웨어로 만드는 과정 (소스코드 파일을 컴퓨터에서 실행할 수 있게 변환하는 과정) 빌드의 단계 중 컴파일이 포함이 되어 있는데 컴파일은 빌드의 부분집합이라 할 수 있다 빌드 시스템 .. 2022. 11. 22.
[자바스크립트] 호이스팅(Hoisting)이란? 자바스크립트는 동기적이다 호이스팅이 된 후 부터 코드가 작성한 순서에 맞춰 순차적으로 실행된다 호이스팅(Hoisting)이란? 자바스크립트 코드에 선언된 함수 및 변수 코드가 실제로 이동하지는 않지만 최상단으로 끌어올린 것처럼 동작하는 것을 호이스팅이라고 한다. 스코프 내부 어디서든 변수 선언(var, let, const)은 최상위에 선언된 것 처럼 행동하는 것을 말하며 호이스팅은 스코프 단위로 일어난다. 호이스팅의 대상 var 변수 선언, 함수 선언만 호이스팅이 되며 할당은 호이스팅이 발생하지 않는다 let/const 변수의 선언도 호이스팅이 일어나지만 TDZ(Temporary Dead Zone)에 영향을 받기 때문에 호이스팅이 발생하지 않는것처럼 보인다 let/const 변수 선언과 함수 표현에서는 .. 2022. 11. 22.
[타입스크립트] 다형성(polymorphism) 제네릭(generic) 클래스(class) 인터페이스(interface) 합치기 다형성: 다른 모양의 코드를 가질 수 있게 해주는 것 (제네릭 사용) 제네릭은 placeholder 타입을 쓸 수 있도록 해줌 (placeholder concrete) 타입스크립트가 placeholder 타입을 concrete 타입으로 바꾸어줌 예제 브라우저에서 쓰는 로컬스토리지 API와 비슷한 API 만들고 타입만 넣어주기 // Storage is reserved word interface SStorage { [key:string]: T } class LocalStorage { private storage: SStorage = {} set(key:string, value:T){ this.storage[key] = value } remove(key:string){ delete this.storage[ke.. 2022. 11. 20.

티스토리툴바