본문 바로가기

웹 개발/Front End15

스벨트(Svelte)가 미래다? Svelte란? Svelte는 2016년 출시된 차세대 프론트엔드 프레임워크로, 다른 프레임워크(예: React, Vue)와는 달리 컴파일 단계에서 작업을 수행하여 더 빠르고 효율적인 웹 애플리케이션을 개발할 수 있게 해주는 프론트엔드 프레임워크 입니다. 인터넷을 찾아보면“리액트는 끝났다. 스벨트가 미래다”라는 말이 있지만 현실은.. 결론부터 말하면 아직 갈길이 멀다... 입니다. 스벨트를 지원해주는 기업도 없고 사용하는 사례가 거의 없어서 "스벨트가 미래다"라는 말은 아직 현실성이 없는 것 같습니다. 어쨌든 왜 스벨트가 리엑트나 Vue에 비해서 차세대 프론트엔드 프레임워크로 불리는지 한번 알아보겠습니다.    React/Vue와 Svelte의 핵심 차이특징 React/Vue SvelteDOM 업데이트 .. 2025. 2. 9.
새해 덕담 카드 만들기 안녕하세요 저는 최근에 다우기술 개발센터에서 진행하는 온데이 세미나에서 이미지 생성형 ai 활용을 주제로 발표를 하게 되었습니다. 팀의 구성은 개발자 1명, 디자이너 1명으로 총 2명의 인원으로 구성되었습니다.  처음에는 기획자 1분도 계셔서 이 조합이면 어떤 서비스든 뚝딱 만들 수 있겠다고 생각했지만 기획자 1분은 개인 사정으로 불참하게 되었고 시간이 흐르고 의욕이 조금씩 떨어지게 되었습니다. 세미나 발표를 준비하면서 가장 어려웠던 부분은 다른 직무의 팀원들이 의견을 하나로 합치는게 생각보다 어려웠던 것 같습니다. 이거 엄청 괜찮다! 하는 그런 아이디어가 없었고 각자 하고 싶은 부분 그리고 세미나를 통해서 얻고자 하는 부분에서 생각이 조금 달랐습니다. 그래서 각자 하나씩 서비스를 만들어보자! 라고 의견.. 2024. 12. 1.
검색 카테고리 여러 개 동시 선택 검색 조건을 여러개 동시에 선택을 할 때 배열에 선택된 속성들을 추가한 후 보내줘야 합니다. 만약 회원 상태라는 검색 조건을 여러개 검색하고 싶은 경우 아래 코드처럼 ref로 배열을 만들고 검색 조건들을 입력합니다. 그리고 vue3에서는 v-model로 각 요소들을 연결해주면 각 조건을 체크하면 설정한 v-model에 true, false가 입력됩니다. const accountStatusList = ref([ { model: isTest1Status, id: 'test1', label: '회원상태1' }, { model: isTest2Status, id: 'test2', label: '회원상태2' }, { model: isTest3Status, id: 'test3', label: '회원상태3' },.. 2024. 6. 15.
Vue3 조직도 만들기 Vue3로 조직도를 보여주는 화면을 만들어보았습니다.조금씩 Vue에 익숙해지는 느낌이 들뻔했습니다...아직도 라이프사이클 순서가 어렵습니다...특히 재귀함수로 만들다 보니깐 중간에 흐름을 놓치면 멍때리고 있는 나를 만날 수 있습니다.  디자인 적용 전   디자인 적용 후    체크박스가 없다면 아주 간단한 기능이 될 수 있었지만 체크박스가 있음으로 인해 많이 복잡해집니다. 예를 들어 토글을 열지 않고 체크를 하는 경우 해당 부서 내의 모든 사용자를 체크 상태로 바꿔야합니다. 또한 하위 부서나 사용자 체크 박스를 해제하면 상위 부서의 체크 박스를 해제해줘야 하기 때문에 토글 버튼 상태와 체크 박스 상태를 계속해서 추적하며 관리해야합니다.  가장 어려웠던 점은 부서의 depth가 제한이 없다는 점입니다. 사.. 2024. 6. 6.
vue3-excel-editor 사용법 서브회원 초대하기 모달에서 excel기능을 사용할 일이 생겨서 vue3-excel-editor를 사용해봤습니다.Vue3 를 처음 사용해봐서 vue3-excel-editor 사용에 있어서 놓친 부분이 많지만 나중에 여유가 생기면 다시 도전하려고 합니다.   필요기능1. 이메일 중복 시 -> 유효성 통과 X2. 모든 입력칸 미입력시 -> 유효성 통과 X3. 유효하지 않은 이메일, 이름, 휴대폰 번호 형식 -> 유효성 통과 X4. 입력한 총 건수 표시      디자인 적용 후(아직 디자인 깨지는 부분 있음)   서브호원을 초대하는 모달에서 vue3-excel-editor를 사용했고 아래 코드 예시는 vue3-excel-editor과 관련된 메서드들을 가져왔습니다. 필요한 경우 커스터마이징 할 수 있습니다.  .. 2024. 6. 1.
Javascript를 이용한 Todo list 자바스크립트를 이용해서 간단한 Todo list 페이지를 만들어봤습니다. https://github.com/Lemon-soju/JavaScript_Todo_list/commit/d2ccbc6c64d7e3c4898920be6688876db1465527 Simple Todo List · Lemon-soju/JavaScript_Todo_list@d2ccbc6 Permalink This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Showing 1 changed file with 3 additions and 9 deletions. +3 −9 main.js Ther.. 2022. 3. 16.
부트스트랩을 이용한 사이트 만들기 부트스트랩 사이트에 들어가서 파일을 다운로드 받고 압축을 풀면 css와 js 파일을 찾아서 사용하면 된다. 부트스트랩 4.0 버전에서는 플렉스 박스를 이용하여 그리드 레이아웃을 만들 수 있습니다. 자세한 사용법은 사이트에 나와있습니다. 코드 설명 Fastest way to present your design Symu is an easy to use tool for web designers. With the help of our system you can present your projects in a browser for free. It is all very easy! Drop your project anywhere Symu will prepare a mockup of your website for yo.. 2021. 11. 9.
플렉스 박스 사이트 만들기 이번 게시물에서는 캐러셀과 플렉스 박스를 이용하여 간단한 사이트를 구현하겠습니다. 결과물은 아래와 같습니다. 전체 코드는 밑으로 내려가면 볼 수 있습니다. 코드를 하나씩 살펴보겠습니다. index.html 처음으로 코딩이란 왜 코딩 교육인가 교육 프로그램 MENU 메뉴를 구성하는 부분이다. 캐러셀 부분이다. 나중에 자바스크립트를 통해 위 이미지 세 개를 캐러셀로 만들어준다. 왜 코딩 교육인가 코딩교육은 앞으로 미래 사회를 살아가는데 있어서 IT 분야에서 일하는 사람들 뿐만 아니라 일반인에게도 꼭 필요한 공부입니다.프로그램을 다룰 수 있는 코딩 언어를 알고 있다면 평소 자신이 생각했던 프로그램을 스스로 개발해서 실생활에 활용할 수 있습니다. 플렉스로 구성한다. style.css에서 column을 3개로 나.. 2021. 11. 9.
구글 웹 폰트 구글 웹 폰트를 사용하는 방법에 대해서 알아보겠습니다. 구글 웹 폰트를 검색하면 사이트에 들어가서 원하는 폰트를 클릭하고 link 부분을 복사해서 아래와 같이 코드에 삽입해서 사용할 수 있습니다. doctype html> 구글 웹 폰트 h1 { font-size:3em; font-family: 'Bree Serif', serif; } p { font-size:1.5em; font-family: 'Nanum Pen Script', cursive; } Web Fonts 웹 폰트를 테스트하고 있습니다. 예시로 링크를 구글 웹 폰트 사이트에서 복사하여 코드에 붙여넣은 뒤 h1은 Bree Serif 폰트를 p는 Nanum Pen Script 폰트를 적용하였습니다. 결과는 아래와 같습니다. 2021. 11. 8.

티스토리툴바