회고

홈페이지를 구축할 때, 얼마나 많은 시간과 노력이 드는지 어떻게 판단할 수 있을까?프로젝트의 노력수준은 페이지 수 자체보다는 해당 페이지에 포함된 기능과 구성 요소에 의해 결정된다. 따라서 재활용할 수 있는 구성 요소들을 작성하는 스타일 가이드가 있다면, 프로젝트의 능률은 올라갈 수 있다.Atomic Design System  원자 설계 방법론 그러한 스타일 가이드를 작성하는 방법으로, 자연계에서 아이디어를 얻은 'Atomic Design System'을 활용할 수 있다. 자연계에서 원자들이 서로 결합하여 분자를 형성하고, 분자들은 결합해서 복잡한 유기체를 형성한다. Atomic Design System에서는 이를 바탕으로 원자, 분자, 유기체, 템플릿, 페이지 총 5개의 설계 단계를 거친다.  1. 원..

Throttle 장애물을 사용하여 유체의 흐름 속도를 늦추는 뜻으로, 프로그래밍에서는 특정속도로만 작업을 수행하는 것을 가리킨다. 여러 번 발생하는 이벤트를 일정시간 동안 한번만 실행한다.Debounce여러 번 발생하는 이벤트에서 지정된 시간 내의 가장 마지막 입력만 실행한다. https://www.linkedin.com/posts/sleeksky_%3F%3F%3F%3F%3F%3F%3F%3F%3F%3F-%3F%3F-%3F%3F%3F%3F%3F%3F%3F-activity-7119939361386766337-Q5tEThrottle 사용사례와 코드 예시지속적으로 업데이트 되는 다른 상태와 안정적으로 동기화할 때 사용한다. ex) 계속 화면 밑바닥과 얼마나 떨어져 있는 지 확인해야 하는 scroll이벤트의 경우..

Custom Element클래스에서 설명하는 사용자 지정 HTML 요소를 자체 방법과 속성, 이벤트 등으로 만들 수 있습니다. 사용자 지정 요소가 정의되면 내장된 HTML 요소와 동등하게 사용할 수 있습니다.HTML Dictionary은 풍부하지만 무한하지는 않기 때문에 이 선택이 좋습니다.HTML Dictionary에는 easy-tabs, sliding-carousel, beautiful-upload등이 없습니다… 우리가 필요로 할 다른 tag들에 대해 생각해봅시다.그를 특별 클래스로 정의한 다음 항상 HTML의 일부인 것처럼 사용할 수 있습니다.두 가지 종류의 사용자 지정 요소가 있습니다:Autonomous custom elements자율 사용자 지정 요소 - 추상적인 HTMLElement 클래스를 ..

코드를 짤 때면 재귀를 사용한 함수를 만날 때가 많은데, 조금만 복잡해도 이게 어떻게 동작했더라? 헷갈리는 경우가 많았다. 가장 단순한 예시(누산기)의 분석을 통해 재귀함수를 머릿속에 박아놓자.function sumUpTo(n) { // 종료 조건: n이 1이면 1을 반환 if (n === 1) { return 1; } // 현재 숫자 n을 더하고, 그 다음 숫자에 대해 재귀 호출 return n + sumUpTo(n - 1);}let result = sumUpTo(5); // 1부터 5까지의 합 구하기console.log(result); // 최종 결과 출력실행 흐름첫 번째 호출: sumUpTo(5)n = 5, return 5 + sumUpTo(4)을 호출. ..

1. 비동기(async) 통신의 필요성동기(Sync) 통신에서는 모든 데이터를 한 번에 전송하고 처리해야 하지만, 비동기(Async) 통신은 필요한 데이터만을 독립적으로 처리할 수 있어, 효율적으로 데이터를 변경하고 업데이트할 수 있다. 비동기 통신이 필요한 경우는 아래와 같다.Web API* 요청 (서버에 데이터를 받아올 때)]파일 읽기 (서버에 파일을 읽어와야 할 때)파일 쓰기 (클라이언트 단에서 데이터를 생성할 때 )파일 수정 (클라이언트 단에서 데이터를 수정할 때 )파일 제거 (클라이언트 단에서 데이터를 제거할 때)암호화 / 복호화예약 작업 (특정 날짜와 시간에 작업을 수행할 때)API란 Application Programming Interface의 약자로, 두 소프트웨어 시스템이 서로 상호작용할..

버블 정렬이란?두 인접한 원소를 검사하여 정렬하는 알고리즘이다.버블 정렬은 기본적으로 배열의 두 수(a,b)를 선택한 뒤, 만약 그 두 수가 정렬되었다면 놔두고 아니라면 두 수를 바꾸는 방식으로 진행된다. 오름차순으로 정렬할 때는 a버블 정렬의 작동 과정인접한 원소들을 비교하여 크기 순서가 잘못되어 있으면 교환(swap)한다. 이 과정을 리스트가 정렬될 때까지 반복한다.1. 가장 큰 수인 6을 정확한 위치에 놓는다.검사횟수 n = 배열갯수 - 12. 가장 큰 수인 6을 맨 끝으로 고정하고 남은 노드들을 검사하여 두번째로 큰 5를 정확한 위치에 놓는다.검사횟수 n = 배열갯수 - 23. 조건에 맞게 정렬된 5, 6을 고정하고 남은 노드들을 검사하여 3번째로 큰 수를 정확한 위치에 놓는다.검사횟수 n = 배..