지난 포스트에서 템플릿 문법(https://velog.io/@bami/Vue.js-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%AC%B8%EB%B2%95-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B0%94%EC%9D%B8%EB%94
이전에 배운 요구분석 단계가 끝나면 소프트웨어 개발은 설계단계로 진입하게 됩니다.설계는 사용자의 요구분석에 따라 요구분석명세서가 만들어지면 해당 문서를 참조해 개발팀에서 소프트웨어 설계서를 만들고 해당 설계서를 기반으로 구현을 진행하게 됩니다. 설계는 요구분석명세서에
Vue는 컴포넌트 인스턴스 데이터들을 DOM에서 바인딩 할 수 있는 HTML 기반의 템플릿 문법을 사용하고 있습니다. 여기서 템플릿은 뷰 컴포넌트를 정의하면서 작성한 HTML, CSS, 로직을 브라우저에서 볼 수 있는 HTML의 형태로 변환하는 것을 의미합니다.다시말해
Vue.js로 앱을 제작하기 위해서는 인스턴스를 가장 먼저 생성해주어야합니다.Vue cli(https://velog.io/@bami/Vue.js-Vue-cli앱 인스턴스는 다음과 같이 생성합니다.createApp({ //최상위 컴포넌트 옵션});생성한 앱 인
Vue.js에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 속성을 의미합니다. props의 사용 이유는 기본적으로 뷰 컴포넌트가 각자 스코프를 가지기 때문에 다른 컴포넌트의 값을 바로 접근할 수 없기 때문입니다.Vue 컴포넌트는 명시적인 props의 선언
(푸 무서워)parseInt() 파라미터로 주어진 값을 특정 진수의 정수로 반환합니다.이때 진수는 선택사항이며 기본값은 10진수(10)입니다.즉, 정수를 반환하기 때문에 소수점을 넣으면 소수점 자릿수를 버림하고 돌려주죠.그러면 0.00001, 0.000001, 0.00
소프트웨어 개발에서 만들고자 요구하는 사용자는 적은 비용으로 원하는 기능들이 모두 들어가있는 소프트웨어를 만들어주기를 바랍니다.개발자는 이러한 요구사항들을 정확하게 파악해서 원하는 비용에 높은 품질의 소프트웨어를 개발할 수 있어야합니다.소프트웨어 개발에서 요구사항은 사
MUI(Material-UI)는 Material Design을 구현해놓은 라이브러리입니다. 라이브러리를 연동 후 컴포넌트를 사용하듯이 가져다 조립하면 쉽게 디자인을 할 수 있습니다.간단하게 Material Design이 뭔지 간단하게 이야기해볼까 합니다. MUI를 학습
소프트웨어 개발 과정에서 모든 부분을 개발하게 되는 경우는 드물다. 외부 API나 라이브러리, 패키지, 오픈 소스 등 다양한 도구들을 이용해서 개발을 한다. 이 경우 소프트웨어 간의 경계를 개발한 코드와 깔끔하게 통합시켜야한다.인터페이스의 제공자와 사용자 사이에는 긴장
if 문 등을 활용한 오류 처리 코드보다는 try~catch와 같은 예외 처리 코드를 사용해야한다.if문은 중첩될수록 프로그램 성능도 저하되고, 구조도 복잡해진다. try~catch를 사용해서 예외 처리로 오류 코드와 로직을 분리해야한다.try블록에서 예외가 발생하든
예전에 내장 객체 Array를 소개하면서 메소드인 sort()(https://velog.io/@bami/Javascript-%EB%82%B4%EC%9E%A5-%EA%B0%9D%EC%B2%B4-Arraysort()는 기본적으로 오름차순 정렬을 수행합니다. 그런데
오늘 가져온 밈짤은 이것입니다.벌써 어질어질하죠? 하나씩 풀어서 해석해보겠습니다.NaN은 숫자가 아님을 의미하는 Number 내장 객체의 프로퍼티입니다.그런데 숫자가 아님을 의미하지만 typeof 연산자를 통해 타입을 확인하면 number 타입으로 나오게 됩니다.이 이
오늘 소개할 Template Literal Types는 템플릿 리터럴 문자열을 사용해서 문자열 타입을 생성합니다.자바스크립트의 템플릿 문자열과 동일하게 사용되지만 또 다른 string 리터럴 타입과 함께 사용면 새로운 형태의 string 리터럴 타입을 생성할 수 있습니
인덱스드 엑세스 타입(Indexed Access Types)은 인덱스\[]를 사용해서 객체, 배열, 튜플의 특정 프로퍼티 타입을 추출하는 타입입니다.인덱스로 객체의 프로퍼티 명을 사용하면 간단하게 객체 타입에 접근할 수 있습니다.배열에서는 typeof 연산자와 함께 사
기존에 소개드린 useState, useEffect, useCallbak, useRef, useMemo, useReducer는 리액트에서 제공하는 기본적인 Hooks였습니다. 이들만 이용해도 편리하게 리액트 앱을 개발할 수 있습니다.거기에 더해서 리액트에서는 반복되는
useReducer는 컴포넌트에 리듀서를 추가할 수 있게 만들어주는 Hook입니다.이 내용은 리액트의 상태관리(https://velog.io/@bami/React-ContextAPI리듀서를 간결하게 요약하자면, 현재의 상태와 상태 업데이트를 위해 필요한 정보인
코딩테스트 문제 해답과 풀이에 대한 항목을 노션으로 따로 제작해서 분리했습니다. 당연히 접근성은 블로그가 더 좋겠지만 블로그가 너무 잡다해진다는 느낌을 받아서 따로 분리하게 되었습니다.더 정확하게 말하면, 코딩 테스트 문제가 현재 푼것만 해도 150여 문제이고, 앞으로
이전에 소개드린 transform, transition을 사용하면 웹 페이지에서 애니메이션 효과를 낼 수 있었습니다. 하지만 자연스러운 애니메이션을 만들기 위해서는 두 속성을 잘 조합해야했는데요. 그래서 애니메이션을 쉽게 만들고자 animation 속성이 등장했습니다.
이전에 배운 transform은 요소를 이동시키거나 회전시키는 동작을 했습니다. 이번에 다룰 transition은 요소를 웹 요소의 속성을 동작에따라 변경시키는 효과를 낼 수 있습니다.그러면 트랜지션을 사용하기 위한 속성들에 대해 알아보도록 하겠습니다.실습에 사용된 코
웹 표준(https://velog.io/@bami/%EC%9B%B9-%ED%91%9C%EC%A4%80-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0웹 접근성은 하드웨어, 소프트웨어, 언어, 장소, 능력, 장애에 상관없이 모든 사람들이 모든