본문 바로가기
728x90

내일배움단40

[CS] SPA !! SPA란? 싱글 페이지 애플리케이션(single-page application, SPA)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어줍니다. MPA vs SPA SPA는 한 개(single)의 Page로 구성된 Application이지만, MPA(Multiple page Application)는 여러 개(Multiple)의 Page로 구성된 Application입니다. MPA는 새로운 페이지를 요청할 때마다 정적인 리소스가 다운되며, 매번 전체 페이지가 다시 렌더링 되는 .. 2022. 11. 16.
[TIL] CSS - Transition(애니메이션) Transition이란? CSS 트랜지션은 시작 지점과 끝 지점을 서로 연결을 해 주는데 중간 과정을 부드럽게 만들어 주는 역할을 합니다. CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다. CSS, JavaScript, Class 활용의 차이 공용 HTML 웹 퍼블리싱 왕초보 시작반 웹개발 플러스 1) CSS .button { padding: .. 2022. 11. 14.
[WIL] 코딩테스트를 하면서... 서론 이번 주부터 새로운 팀원들과 함께 JavaScript를 사용해서 알고리즘 문제를 풀기로 했습니다. 스스로 하루에 4문제씩은 풀자 다짐을 하고 시작을 했고, 프로그래머스 lv0 문제부터 시작했습니다!! 이전에 Python을 이용해서 알고리즘 문제들을 풀었었는데, JavaScript로 풀려니 Python과 차이가 조금 있어서 처음에는 좀 버벅 거렸습니다... 하지만 다양한 문제들을 풀다보니 감을 잡았고, 자주 쓰이는 문법들을 따로 공부해서 적용하였습니다. 배운점 1) 클래스와 객체 처음으로 돌아와서 JavaScipt의 데이터 타입에 대해서 공부하였고, 그중 객체 타입과 클래스를 선언하는 방법을 공부하였습니다. 그리고 클래스 내에 함수와 같이 특정 코드를 실행할 수 있는 메소드 호출하는 방법에 대해서도 .. 2022. 11. 13.
[TIL] JavaScript - map( ), filter( ), reduce( ) Array Methods 오늘은 JavaScript에서 가장 많이 쓰이는 객체인 배열 연산 관련 함수인 map, filter, reduce에 대해 공부해 보려고 합니다. 코테 준비하는데 map, filter, reduce가 많이 쓰여서 좀 더 제대로 알고 싶어서 공부를 하게 됐습니다. 글로 공부를 할 때는 이해가 잘 안 됐지만, 그림으로 보니 쉽게 이해할 수 있었습니다. 1. map( ) 1) 구문 arr.map( callback ( currentValue[, index[, array]])[, thisArg]) 2) 매개변수 callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다. currentValue : 처리할 현재 요소입니다. index ( Optional ) : 처리.. 2022. 11. 11.
[TIL] JavaScript 전개 연산자 전개 연산자 ( spread 문법 ) 전개 연산자는 ES6에서 새로 추가된 문법으로, 배열의 요소나 객체를 나열해주는 연산자이다. 배열이나 객체의 복사본( 원본에 영향을 미치지 않는)을 만들 수 있으며, 여러 개의 배열이나 객체를 손쉽게 병합할 수도 있습니다. 또한, 함수의 매개변수나 인자 값으로도 사용이 가능한 연산자입니다. 사용법은 배열을 담은 변수 앞에 ... 을 붙이면 됩니다. { ... object } // 펼칠 대상이 객체인 경우 [ ... array ] // 펼칠 대상이 배열인 경우 { ... array } // 배열일 경우 중괄호{}도 가능!! ES5 vs ES6 1) ES5 배열 조합 ES5 에서는 배열의 내용을 합쳐 새로운 배열을 만들기 위해서 concat 메소드를 활용했었습니다. le.. 2022. 11. 10.
[TIL] JavaScript Math 함수 정리하기!! Math 함수란? Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이며, 함수 객체가 아닙니다. Math는 Number 자료형만 지원하며 BigInt 와는 사용할 수 없습니다. 출처 : mdn Math - JavaScript | MDN **Math**는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다. developer.mozilla.org 자주 쓰는 Math함수 1. Math.min( ) 인수로 전달받은 값 중에서 가장 작은 값을 반환합니다. Math.min(1, 2, 3, 4, 5) // 1 Math.min(10, -10) // -10 2. Math.max( ) 인수로 전달받은 값 중에서 가장 큰 값을 반환합니다. Math.max(1, 2.. 2022. 11. 9.
728x90

티스토리툴바