문미새 개발일지

Reflow와 Repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 중요한 작업들이며, 웹 성능과 사용자 경험에 큰 영향을 미친다.Reflow (Layout)Reflow는 웹 페이지의 레이아웃을 다시 계산하는 과정이며, DOM 구조나 CSS의 스타일이 변경되면 브라우저가 렌더 트리를 생성한 후, 각 요소의 크기와 위치를 계산해야 하는데 그 과정에서 발생한다.발생 상황DOM 요소가 추가, 제거, 혹은 수정될 때요소의 크기나 위치가 변할 때 (예: width, height, margin, padding, border 등)브라우저 창 크기가 변경될 때 (viewport 변경)글꼴이 로드되거나 변경될 때CSS 속성이 변경되어 레이아웃에 영향을 줄 때Reflow의 비용Reflow는 계산량이 많으며, 비용이 ..

클로저(Closure)클로저는 자바스크립트에서 함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능이다.주로, 함수 내부에서 선언된 다른 함수가 외부 함수의 변수에 접근할 수 있게 해주는 메커니즘을 의미하며, 클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어진다. 클로저의 형성 과정함수 내부의 함수클로저는 일반적으로 함수 내부에 선언된 함수가 반환되거나 다른 곳에서 호출될 때 형성된다.외부 변수 접근내부 함수는 자신이 선언된 스코프에 있는 변수들에 접근할 수 있다.생존 기간 연장외부 함수가 실행을 종료하더라도, 내부 함수가 외부 함수의 변수들을 참조하고 있다면, 해당 변수들은 메모리에서 지워지지 않고 유지된다. 예시 코드func..

SOLIDSOLID는 객체지향 프로그래밍(OOP)에서 유지보수성과 확장성을 높이기 위한 5가지 설계 원칙을 의미하며, 이 원칙들은 모듈화가 잘 되어 있고 재사용 가능성을 높이는 데 도움을 준다.Single Responsibility Principle (SRP) - 단일 책임 원칙정의: 한 클래스는 한 책임만을 가져야 하고, 그 역할과 관련된 변경만 반영해야 한다.목적: 각 클래스가 명확한 역할을 가지도록 설계하여 코드 변경 시 다른 부분에 영향을 최소화예시:// 잘못된 설계class UserManager { createUser() { /* 사용자 생성 */ } validateUser() { /* 사용자 검증 */ } sendEmail() { /* 이메일 전송 */ }}// 개선된 설계: ..

Typescript란?Typescript는 마이크로소프트에서 개발한 오픈 소스 프로그래밍 언어로, Javascript의 상위 집합이다.또한, 타입스크립트는 정적 타입을 지원하며, 자바스크립트 코드에 선택적으로 타입을 추가할 수 있게 해주고, 최종적으로 타입스크립트 코드는 자바스크립트로 변환되어 브라우저나 node.js 환경에서 실행된다. 자바스크립트는 대규모 애플리케이션을 개발할 때 동적 타입 언어의 특성상 버그를 찾기 어렵고 코드 유지보수가 힘들어지는 문제가 있었는데, 이를 해결하기 위해 타입스크립트를 개발하게 됐다.자바스크립트의 상위 집합이기 때문에 타입스크립트는 ES6+의 모든 기능을 지원하며, 기존 자바스크립트 라이브러리와도 완벽히 호환된다. 타입스크립트 주요 특징정적 타입변수, 함수 등에 타입을..

헤드라인 api 연동 해결재희님이 cors를 해결했다고 해서 테스트를 진행했다. 잠깐 디코하면서 코드를 실행했을 땐 코스에러가 없었는데, 재부팅 하고 재실행하니까 다시 발생했다. 이쯤되면 아마 앱 개발에서는 코스에러가 발생하지 않아서 적용이 안되는 걸수도 있을거라 결국 에뮬레이터 문제를 해결해서 사용해야되나 싶었는데, 세팅 수정으로 코스에러를 막을 수 있는 블로그를 발견했다.https://kjmhercules.tistory.com/8 [해결방법] Flutter CORS 에러 없애기플러터를 이용하여 Web을 개발하는 경우 REST API를 사용할때 CORS 이슈는 필연적으로 만나게 되는 문제점 중 하나이다. 급하게 개발하는 도중 시뻘건 에러를 만나게 되면 적잖히 당황하게 된다. 물kjmhercules.ti..

문제코드function solution(numbers) { var answer= ''; const sorted = numbers.map(String).sort((a, b) => (b + a) - (a + b)); answer = sorted.join(''); return answer[0] === '0' ? '0' : answer;} 해설numbers배열에 있는 값들을 조합해서 가장 값을 크게 만들면 된다. 배열 sorted에 numbers의 값들을 문자열로 변환해서 임의의 값 중 두 개를 골라 더 큰 값을 가진 쪽으로 정렬을 시킨다.예제에 있는 [6, 10, 2]로 계산했을 때,1. 첫 번째 비교정렬 알고리즘에서 a = "6", b = "10"을 선택했다면(b + a) = "..

문제코드function solution(array, commands) { var answer = []; for (let i= 0; i a - b); answer.push(arr[commands[i][2]-1]); } return answer;}  설명array는 값이 들어있는 배열이고 commands는 2차원배열로 시작값 i, 끝값 j, 값위치 k로 구성되어 있는 배열이 여러개 들어있다.출력은 commands의 개수만큼 answer에 값을 담아야 하기 때문에 첫번째 for문에 commands의 길이만큼 반복한다.반복하는 동안 처리되는 값을 받아줄 배열 변수를 하나 작성하고, slice기능을 사용해 commands의 i값과 j값을 추출해 배열을 잘라준다.이..

flutter의 API 연동 방식은 주로 두 가지로 나뉜다. http 패키지기본적인 HTTP 요청(REST API)을 처리하는 패키지이며, GET, POST, PUT, DELETE 등의 메소드를 지원한다.import 'package:http/http.dart' as http;import 'dart:convert';Future fetchPosts() async { final url = Uri.parse('https://jsonplaceholder.typicode.com/posts'); try { final response = await http.get(url); if (response.statusCode == 200) { final List data = json.decode(resp..