728x90 반응형 source-code229 직접 두드려본 cjs esm 모듈 시스템 2023. 11. 30. 프로그래머스 - 폰켓몬, 최소직사각형 다리를 다쳐 꼼짝없이 집에만 있다 보니... 문득 회사에 다니기 전 풀었던 알고리즘 문제가 생각나 프로그래머스에 들어갔다. (심심해서 알고리즘을 풀다니! 대학생 시절 나였으면 상상도 못 했을 텐데) 이전 풀이를 보니... 귀엽기도 하고, 답답하기도 하고. 하하. 그때 풀던 level 1 문제 중 안 푼 게 있어서, 재미 삼아 풀어보았다. 언어는 JS로! 폰켓몬 https://school.programmers.co.kr/learn/courses/30/lessons/1845 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(num.. 2023. 11. 25. "'React'은(는) UMD 전역을 참조하지만 현재 파일은 모듈입니다" 에러 해결 typescript로 React 애플리케이션을 작성하고 있는데 다음과 같은 타입 에러와 마주쳤다. react component 내에 작성된 JSX 표현식에서 에러가 발생했는데... 해결 방안 해결 방법 자체는 단순하다. 아래의 두 해결책 중 하나를 사용하면 된다! 1. 해당 tsx 파일 내 React import import React from "react"; React를 import 해주면 된다. 2. tsconfig compilerOptions 변경 { "compilerOptions": { // ... "jsx": "react-jsx", // react-jsx 또는 react-jsxdev로 설정 } } tsconfig의 compilerOptions 중 jsx 속성을 변경해 주면 된다. 원인 그런데 영.. 2023. 11. 18. getElementsByClassName에 for each 사용해 HTMLElement 접근하기 같은 className의 요소들을 순회하며 특정 동작을 수행해야 할 때가 있다. const balls = document.getElementsByClassName("ball"); balls.forEach((element) => {}); // Error! 위와 같이 작성하면 될 것 같지만... HTMLCollectionOf 에는 forEach가 없단다. 왜? https://developer.mozilla.org/ko/docs/Web/API/HTMLCollection HTMLCollection - Web API | MDN HTMLCollection 인터페이스는 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments처럼 배열과 유사한 객체)을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합.. 2023. 11. 16. 추상 팩토리(Abstract Factory) 패턴 추상 팩토리 패턴이란? 추상 팩토리는 객체의 인스턴스 생성에 관여하며, 클래스 정의와 객체 생성 방식을 구조화/캡슐화하는 생성 패턴의 한 종류이다. 서로 연관되거나 의존적인 객체의 집합을 생성하기 위한 인터페이스를 제공해 구체적 클래스에 의존하지 않음으로써, 새로운 객체 생성 로직의 추가나 변경 사항에 쉽게 대응할 수 있다. 사용 예제 다음과 같은 요구 사항이 있었다. 1. DB에 Template이라는 table이 존재한다. (사용자가 입력한 여러 데이터로 구성) 2. 각 Template은 type이라는 속성을 갖는다. 해당 속성을 통해 Template의 종류를 구분한다. ex) modal, tool-tip... 3. 각 Template은 type에 따라 각기 다른 형태의 HTMLElement를 갖는다 .. 2023. 11. 8. 유한 상태 기계를 통한 사용자 선택 UI 개발 (feat xState) 프론트엔드 개발을 하다 보면, 다음과 같은 요구사항과 심심찮게 만날 수 있다. 1. 사용자는 여러 선택지 중 하나를 선택할 수 있다. 2. 선택된 요소는 스타일이 변경된다. 3. 선택된 요소를 다시 선택했을 경우, 해당 요소의 선택이 해제된다. 사실 여기까지는 별다른 문제 없이, 쉽게 구현이 가능하다. 현재 선택한 role 도망자 선택 수사관 선택 선택 안함 도망자 로 변경 수사관 으로 변경 도망자 선택 안함 으로 변경 선택 안함 으로 변경 수사관 도망자 로 변경 수사관 으로 변경 role을 선택하는 동작은 현재 선택된 role(상태)에 따라 각기 다른 동작을 수행하며, 만약 React로 이를 구현한다면... import React, { useState } from "react"; const page =.. 2023. 10. 11. [정보처리기사 실기] 결합도 / 응집도 결합도 서로 다른 모듈 간 상호 의존 하는 정도 또는 두 모듈 사이의 연관된 관계 데이터 결합도 (Data Coupling) 모듈 간의 인터페이스가 자료 요소로만 구성될 때의 결합도 스탬프 결합도 (Stamp Coupling) 모듈 간의 인터페이스로 배열, 레코드 등의 자료 구조가 전달될 때의 결합도 제어 결합도 (Control Coupling) 모듈 간의 인터페이스로 데이터를 어떻게 처리해야 하는지를 결정하는 제어 요소가 전달될 때의 결합도 외부 결합도 (External Coupling) 어떤 모듈에서 선언한 데이터(변수)를 외부의 다른 모듈에서 참조할 때의 결합도 공통 결합도 (Common Coupling) 인터페이스가 아닌, 모듈 밖에 선언된 전역 변수를 참조, 갱신하는 식으로 상호작용할 때의 결합.. 2023. 10. 1. [정보처리기사 실기] C언어 printf 출력 형식 C언어 → 줄바꿈 없을 경우 기본적으로 한 줄 출력 2020 기출 1회 14번 #include main() { int c=1; switch(3){ case 1:c+=3; case 2:c++; case 3:c=0; case 4:c+=3; case 5:c-=10; default : c--; } printf("%d",c); } 더보기 -8 1회 20번 #include void align(int a[]){ int temp; for(int i=0;i age); } 더보기 Lee 38 구조체 **insa**를 정의하고 **name**과 age 두 개의 멤버를 가지고 있습니다. 구조체 배열 **a**를 초기화하고 이름과 나이를 번갈아가며 초기화합니다. 구조체 포인터 **p**를 선언하고 a 배.. 2023. 9. 27. [정보처리기사 실기] 네트워크 OSI 참조 모델 다른 시스템 간의 원할한 통신을 위해 ISO에서 제안한 통신 규약(protocol) 하위 계층 : 물리 계층 → 데이터 링크 계층 → 네트워크 계층 상위 계층 : 전송 계층 → 세션 계층 → 표현 계층 → 응용 계층 물리 계층 전송에 필요한 두 창지 간의 실제 접속과 절단 등 기계적, 전기적, 기능적, 절차적 특성에 대한 규칙 정의 물리적 전송 매체와 전송 신호 방식을 정의 관련 장비 : 리피터, 허브 데이터 링크 계층 2개의 인접한 개방 시스템들 간에 신뢰성 있고 효율적인 정보 전송을 할 수 있도록 시스템 간 연결 설정과 유지 및 종료를 담당 흐름 제어, 프레임의 동기화, 오류 제어, 순서 제어 관련 장비 : 랜카드, 브리지, 스위치 네트워크 계층 개방 시스템들 간의 네트워크 연결을 .. 2023. 9. 25. 이전 1 ··· 4 5 6 7 8 9 10 ··· 26 다음 728x90 반응형
