Intro사내 프로젝트를 진행하는 도중 Grid를 사용하여 레이아웃을 짜는 도중에 row가 5줄이고 각각 14px 만큼 gap을 가지는 레이아웃을 만들기 위해 처음에는 % 단위를 사용하여 grid-template-rows를 값을 넣고 row-gap을 추가하였을 때 전체 높이(height)가 부모 요소의 크기를 초과하는 문제가 발생하였다. 이 문제를 해결하기 위해 fr 단위를 사용했더니 정확히 부모 요소 높이에 맞춰서 원하는 레이아웃이 배치가 되었다.이 과정을 정리하며 CSS Grid에서 %와 fr 단위의 차이를 알아보려 한다.문제 원인grid-template-rows: repeat(5, 20%);row-gap: 14px; % 단위는 부모 요소의 height를 기준으로 계산되기에 위와 같이 CSS 를 적용..

Vue.js 리스트 렌더링Vue.js에서 리스트 렌더링은 배열이나 객체를 기반으로 동적인 목록을 생성하는 데 사용됩니다.이를 위해 v-for 디렉티브를 사용하며, 각 항목을 반복하여 렌더링할 수 있습니다.기본적인 v-for 사용법v-for 디렉티브는 배열의 각 요소를 반복하여 출력할 때 사용됩니다.// 숫자 범위 {{ n }} // 배열 또는 객체 {{ item.text }} 인덱스 사용두번째 선택 인자를 통해서 인덱스를 가져와서 사용할 수도 있습니다. {{ index + 1 }}번쨰 : {{ item.text }} 객체 사용시객체의 속성을 반복할 때, 객체를 받아서 사용할 수도 잇찌만 아래와 같이 value, key 형식으로 따로 받아서 사용가능 하며 이때는 세번째에 선..

Vue.js 조건부 렌더링이란?Vue.js에서 조건부 렌더링이란 특정 조건에 따라 DOM 요소를 표시하거나 제거하는 기능을 의미하며, 이를 통해 사용자는 동적으로 화면을 구성할 수 있습니다.v-ifv-if는 조건이 참일 경우 요소를 렌더링하고, 거짓이면 DOM에서 제거합니다. 내용 숨기기 내용 보이기 v-if를 이용하여 내용이 사라지게도 보이게 할 수 있습니다.v-else 및 v-else-ifv-else는 v-if 조건이 거짓일 때만 요소를 렌더링하며, v-else-if는 추가적인 조건을 설정할 때 사용됩니다. 버튼 A를 눌렀습니다. 버튼 B를 눌렀습니다. 나머지 버튼들을 눌렀습니다. 버튼 A 버튼 B 버튼 C 버튼 Dv-showv-show는 display 속성을 변경하여 요소를 숨깁니..

Intro학원에서나 또는 이전까지 프로젝트를 진행하며 프론트 영역에서 백엔드와 API 통신을 할 때면 Ajax를 사용해서 비동기 통신을 작업을 하였었는데 Vue.js를 공부하고 다루며 Vue에서는 Ajax 대신 Axios를 사용하기를 권고하고 있다는 걸 알게 되었다.처음에는 Axios를 알아보기전에는 Vue에 내장된 비동기 통신이구나 라고 생각했었는데...두 개 모두 제대로 사용하기 위해 Ajax와 Axios가 어떻게 다르면 왜 Axios를 사용하기를 권고하는지 알아보자Axios브라우저와 Node.js 환경에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리이다.특징XSRF 보호자동으로 JSON 데이터 형식으로 변환Promise API를 지원타임아웃 설정 및 요청 재시도 가능요청 및 ..

보호되어 있는 글입니다.

Intro처음 개발자가 되어야겠다고 결심하고 개발자에 대해 알아 보자마자, 나는 백엔드 개발자가 되어야겠다고 생각했다. 프론트엔드는 해볼 생각이 없는 것일까? 왜 프론트를 하지 않으려는 걸까? 라는 의문이 들 수 있다.내가 생각하기에 웹에서의 프론트엔드는첫째로, 아름다운 화면을 만드는 것이기 때문에 미술적인 감각이 필요하다고 생각했다.처음 개발 강의를 구매해서 이리저리 CSS 작업을 하면서 생각했던 결과물과 전혀 비슷하지도 않고마음에 들지 않아서 나와 맞지 않다고 느꼈다.둘째로, JavaScript를 접했을 때, Java처럼 int, string과 같은 타입이 없고 var, const, let이 으로 거의 모든걸 해결하고, 콜백 함수와 같은 개념이 생소하게 느껴져 이해하기 어려웠고, Java를 공부했을 ..