본문 바로가기

반응형

코드스테이츠 SEB FE 41기

(123)
section4/Unit3/[HTML/CSS] 심화(11/23) 번들링 번들링은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음이다. 웹펙 2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다. Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다. 모듈 번들러(Module Bundler)의 등장 모던 웹으로 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고, 또 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일이 폭발적으로 증가했다. 이 모듈 단위의 파일들을 호출을 해 브라우저에 띄워야 하는데..
[알고리즘/javascript] 바코드 문제 1, 2, 3으로만 이루어진 수열 바코드를 만들어야 합니다. 무조건 1, 2, 3만 붙여서 바코드를 만들었다면 쉬웠겠지만, 아쉽게도 바코드를 만드는 데에 조건이 걸려 있습니다. 바코드에서 인접한 두 개의 부분 수열이 동일하다면 제작할 수 없다고 할 때, 주어진 길이 len의 바코드 중 가장 작은 수를 반환하는 함수를 작성하세요. 만들 수 없는 바코드 만들 수 있는 바코드 112 1312 1231312 3 232312 231213 부분 수열? 주어진 수열에서 연속된 모든 구간을 말합니다. 수열 123의 부분 수열은 1, 2, 3, 12, 23, 123 입니다. 인접한 두 부분 수열? 첫번째 부분 수열과 두번째 부분 수열이 연속된 경우를 말합니다. 수열 1234에서 인접한 부분 수열 (우리는 두 부분수..
section4/Unit2/[HTML/CSS] 심화(11/22) CSS 애니메이션 CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다. 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다. @keyframes 키프레임을 활용하기 위해서는 우선 CSS로 키프레임 블록을 만들어야 한다. /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : ..
section4/Unit2/[HTML/CSS] 심화(11/21) 브라우저 웹 브라우저라고도 하고, 웹 탐색기라고도 하는 브라우저는 웹 서버에서 양방향으로 통신을 하며 HTML 문서 및 그림, 멀티미디어(ex. 동영상) 등의 컨텐츠를 열람할 수 있게 해주는 GUI 기반의 소프트웨어 프로그램이다. 브라우저는 페이지를 다운로드 하기 위해 응용 계층의 대표적인 프로토콜인 HTTP를 통해 송수신을 한다. 웹 이런 브라우저 상에서 제공되는 웹(Web)은 월드 와이드 웹(World Wide Web)이 풀 네임이며, 인터넷 상에서 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공한다. HTML 언어를 사용하여 작성된 문서 형태로 제공이 되며, 이러한 문서들을 웹 페이지(Web Page)라고 부른다. 그리고 이런 웹 페이지..
[알고리즘/javascript][DFS / BFS] 연결된 정점들 연결된 정점들 문제 방향이 없는 간선들의 목록이 주어질 때, 연결된 정점의 컴포넌트(그룹들)가 몇 개인지 반환하는 함수를 작성하세요. 입력 인자 1: edges 2차원 Array 타입을 요소로 갖는 시작과 도착 정점이 담겨있는 배열들을 담고 있는 목록 (2차원 배열, 정수 요소) ex) [[0, 1], [1, 2], [3, 4]] 출력 Number 타입을 리턴해야 합니다. 연결된 정점의 컴포넌트의 수를 숫자로 반환합니다. 주의 사항 주어진 간선은 무향입니다. [1, 2] 는 정점 1에서 정점 2로도 갈 수 있으며, 정점 2에서 정점 1로도 갈 수 있습니다. 입출력 예시 const result = connectedVertices([ [0, 1], [2, 3], [4, 5], ]); console.log(r..
[알고리즘/javascript][Graph] 인접 행렬 길찾기 인접 행렬 길찾기 문제 주어진 인접행렬에서 한 정점으로부터 다른 정점으로 이어지는 길이 존재하는지 반환해야 합니다. 입력 인자 1: matrix Array 타입을 요소로 갖는 인접 행렬이 담긴 2차원 배열 인자 2: from Number 타입의 시작 정점 인자 3: to Number 타입의 도착 정점 출력 boolean 타입을 리턴해야 합니다. 입출력 예시 const result = getDirections( [ [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1], [0, 1, 0, 0], ], 0, 2 ); console.log(result); // true // 정점 0에서 2로 가는 길이 존재하는지 확인합니다. // 0 --> 1 로 가는 간선이 존재하고, 1 --> 2 로 가..
[알고리즘/javascript] [Graph] 인접 행렬 생성하기 인접 행렬 생성하기 문제 방향이 있는 간선과 방향이 없는 간선들의 목록들을 받아 2차원 배열의 인접행렬을 반환하는 함수를 작성하세요. 조건 각 간선은 3가지 정보를 담고 있습니다. 0번째: 간선의 시작 정점 (0 이상의 정수) 1번째: 간선의 도착 정점 (0 이상의 정수) 2번째: 방향성 ('undirected' 일시 무향, 'directed' 일시 방향) 입력 인자 1: edges Number 타입의 방향/무향인 간선들의 목록이 담긴 배열 출력 Array 타입을 리턴해야 합니다. 2차원 배열의 인접 행렬 주의 사항 정점 0에서 정점 4로 이어주는 간선이 존재할 경우 정점 1, 2, 3도 존재합니다. 반환하는 인접행렬은 2차원 배열이며, 행(row)는 바깥 배열, 열(column)은 안쪽 배열입니다. l..
section4/Unit1/[자료구조/알고리즘] 기초(11/18) Tree 자료구조 Tree는 이름 그대로 나무의 형태를 가지고 있다. 정확히는 나무를 거꾸로 뒤집어 놓은 듯한 모습을 가지고 있다. 그래프의 여러 구조 중 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮아 있다고 해서 트리 구조라고 부른다. 마치 가계도와 흡사해 보이는 이 트리 구조는 데이터가 바로 아래에 있는 하나 이상의 데이터에 한 개의 경로와 하나의 방향으로만 연결된 계층적 자료구조이다. 데이터를 순차적으로 나열시킨 선형 구조가 아니라, 하나의 데이터 아래에 여러 개의 데이터가 존재할 수 있는 비선형 구조이다. 트리 구조는 계층적으로 표현이 되고, 아래로만 뻗어나가기 때문에 사이클(cycle)이 없다. 여기서 사이클이란 시작 노드에서 출발해 다른 노드를 거쳐 시..

반응형