Frontend (94) 썸네일형 리스트형 Expo 500 에러, 설치된 패키지 간의 충돌이나 캐시 꼬임: expo%5CAppEntry.bundle:1 Failed to load resource: the server responded with a status of 500: 하루가 지나니 실행이 안되고화면이 하얗기만 하다.expo%5CAppEntry.bundle:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)Understand this error(index):1 Refused to execute script from 'http://localhost:8081/expo%5CAppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app' because its MIME type ('application/json') is not execu.. Swift Package Manager (SPM)란? : Package.swift Package.swift는 무슨 파일일까?Package.swift는 SPM의 설계도최근 Flutter 3.22버전부터 본격적으로 도입된 SPM의 공식지원에 따른 파일이다. Apple은 CocoaPods 보다 자체제작한 SPM을 표준으로 밀고있기때문에 Flutter도 언젠가 CocoaPods가 버려질 미래를 대비해 배선작업을 시작한 것. CocoaPods는 기존 Ruby 기반 도구로 수많은 오픈소스, 성숙한 생태계를 가졌으나 설정이 복잡하고 Ruby설치가 필요하거나 가끔 꼬이는 단점이 있지만 SPM인 미래표준 Apple공식 기본 도구는 Git기반으로 빠른 빌드 속도와 iPhon, iPad, Mac앱을 만들때 반드시 필요한 프로그램인 Apple 전용 IDE인 Xcode를 통합했다.허나 Flutter에서는 .. flutter_svg – PNG만 쓸 거면 필요한가? flutter_svg – PNG만 쓸 거면 필요한가? SVG = 벡터 이미지 (확대해도 깨지지 않음) PNG = 비트맵 이미지flutter_svg는 .svg 파일을 Flutter에서 그리기 위한 패키지Flutter 기본만으로 PNG는 Image.asset() 등으로 충분히 쓸 수 있다. .png만 쓸 거면 이 패키지는 필요 없다.그래서 PNG만 쓸 예정이면 의존성에서 제거해도 된다. UserAccountsDrawerHeader, Drawer에 사용자의 정보를 담는법 앞서 우리는 Drawer를 구현해봤다.https://standout.tistory.com/1616 Drawer 삽입하기(feat. endDrawer, automaticallyImplyLeading)DrawerFlutter에서 제공하는 위젯앱의 측면에서 슬라이딩으로 나타나는 네비게이션 메뉴 안에 메뉴리스트들은 ListView와 같은 스크롤가능한 리스트로 보통 구현된다. AppBar의 leading속성에 IconBustandout.tistory.com 예시코드를 살펴보자.UserAccountsDrawerHeader 설정으로 사용자 계정정보를 표시하는데 이때이름, 이메일 및 프로필 이미지를 표시하는데 유용함을 확인 할 수 있다.UserAccountsDrawerHeader( acc.. Drawer 삽입하기(feat. endDrawer, automaticallyImplyLeading) DrawerFlutter에서 제공하는 위젯앱의 측면에서 슬라이딩으로 나타나는 네비게이션 메뉴 안에 메뉴리스트들은 ListView와 같은 스크롤가능한 리스트로 보통 구현된다. AppBar의 leading속성에 IconButton를 추가해 Drawer를 열도록 보통 설정한다 endDrawer 속성을 사용하면 오른쪽으로 열리도록 지정 할 수 도 있다.class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Drawer Example'), .. leading과 actions leading과 actionsAppBar위젯에서 사용되는 속성애플리케이션의 상단바에 표시되는 요소를 배치하는데 사용됨 leading: 왼쪽, 뒤로가기 버튼 등 (A)actions: 오른쪽, 여러위젯을 지정하는 속성 (C, D) appBar: AppBar( title: Text('Flutter AppBar Example'), leading: IconButton( icon: Icon(Icons.menu), onPressed: () { // Menu button action print('Menu button pressed'); }, ), ac.. Flutter의 Widget: 위젯트리와 루트위젯, 구성위젯과 컨테이너 위젯 상태 Stateful 위젯과 비상태 Stateless 위젯 앞서 위젯에 대해 알아봤다.https://standout.tistory.com/1612 위젯 Widget 이란?위젯 Widget 이란?컴퓨팅 및 모바일 디바이스에서 사용되는 작은 애플리케이션 또는 인터페이스 요소모바일, 데스크톱, 웹, UI 유형의 위젯들이 있으며위젯은 실시간 정보, 사용자정의(사용자가standout.tistory.com 그렇다면 Flutter에서의 위젯은 무엇일까모든 기본단위 요소, 모든것위젯은 앱의 UI를 만드고 구성한다. 이 위젯은 한번 생성된 위젯은 변경되지않는다는 불변성의 특징을 가진다. 루트 위젯과 위젯트리MaterialApp , CupertinoApp...Flutter에서는 여러 위젯이 계층적으로 배치된 트리 구조로 구성되며트리의 최상위 에 있는 위젯을 루트 위젯이라 부른.. Flutter dart 수평/수직 구분선 - Divider VerticalDivider Divider 수평 구분선color 선 색상thickness 선 두께indent 선 왼쪽 끝에서 시작하는 간격, 기본값 0.0endIndent 선 오른쪽 끝에서 시작하는 간격, 기본값 0.0height 선 높이, 기본값 16.0Divider( color: Colors.blue, // 색상 변경 thickness: 2.0, // 두께 변경 indent: 20.0, // 왼쪽 여백 endIndent: 20.0, // 오른쪽 여백 height: 30.0, // 높이 설정 ), VerticalDivider 수직 구분선, Row와 같은 수평방향 위젯에서 열 사이에 구분선을 추가.. Flutter dart CircleAvatar 원형을 생성하는 위젯 CircleAvatar 원형을 생성하는 위젯backgroundColor 배경색상backgroundImage 위젯의 배경이미지 (NetworkImage, AssetImage, FileImage)radius 반지름 기본값은 20.0CircleAvatar( backgroundColor: Colors.grey, backgroundImage: AssetImage('assets/profile.png'), radius: 40.0,)child 위젯안에 배치할 위젯 (텍스트, 아이콘..)CircleAvatar( backgroundColor: Colors.blue, child: Text( 'AB', style: TextStyle(color: Colors.white), ), radius: 30.0,).. Flutter dart 정렬하기 - MainAxisAlignment CrossAxisAlignment MainAxisAlignment 축에 따른 정렬 MainAxisAlignment.start 주축의 시작부분에 정렬 - row는 왼쪽, column는 위쪽 정렬Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Text('One'), Text('Two'), Text('Three'), ],) CrossAxisAlignment.start 교차축의 시작부분에 정렬 - row는 위쪽, column은 왼쪽 정렬Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container(color: Colors.red, width: 50, height: 100), Co.. Flutter dart 패딩 적용하기 - Padding EdgeInsets Padding 위젯 모든 방향에 동일한 패딩Padding( padding: EdgeInsets.all(16.0), // 모든 방향에 16픽셀의 패딩을 설정 child: Text('Hello, Flutter!'),) 수직과 수평에 다른 패딩Padding( padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), child: Text('Hello, Flutter!'),) 개별적 패딩Padding( padding: EdgeInsets.only(left: 15.0, top: 10.0, right: 5.0), child: Text('Hello, Flutter!'),) 개별적 메서드 패딩padding: EdgeInsets.fromLTRB(2.. Flutter Course for Absolute Beginners: Ticket app 만들어보기 - 1(feat.Flutter설치) 아래 강의를 토대로 작업했다.https://www.youtube.com/watch?v=DsTMhjaRQwshttps://standout.tistory.com/1558 Flutter와 DartFlutter와 Dart는 모두 Google에서 개발한 기술.Flutter는 멀티 플랫폼 UI 개발을 위한 프레임워크이고, Dart는 그것의 주 언어https://standout.tistory.com/111 프레임워크란?Framwork 'FRAME 프레임(틀, 규칙ostandout.tistory.com vscode 다운https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code .. Sass 기본사용법 SassSyntactioncally Awosome StyleSheetsCSS의 간결한 문법은 프로젝트 규모가 커지고 수정이 빈번히 발생하면 쉽게 지저분해지는 단점이 있다CSS의 한계와 단점을 보완하여 가독성 높고 재사용에 유리한 CSS의 확장.Sass는 변수사용, 조건문과 반복문, Import, Nesting, Mixin, Extend/Inheritance 도구를 제공한다. 브라우저는 Sass 문법을 알지못해 .scss파일을 css파일로 컴파일해야한다.시작하기전 Sass환경설치.npm install -g sasshttps://standout.tistory.com/49 cmd, CLI형태의 DOScmd 윈도우 명령어 처리기(Windows Command Processor) *CLI형태의 *DOS https.. 프린트 스타일을 지정하다, @page @media print 우선 최소한의 작업을 위해 bootstrap을 이용하기로 하자. https://standout.tistory.com/1074 개인 bootstrap stylesheet만들기 bootstrap을 통해 본인만의 stylesheet를 소유해보자. Bootstrap에 접속해 cdn 코드를 복붙한다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuil standout.tistory.com 우선 전체 코드를 첨부한다. Print Test This is a sample HTML content for testing pr.. create-react-app 프로젝트 생성하기 create-react-app 리액트 프로젝트 생성할때 필요한 설정과정을 생략하고 바로 간편하게 프로젝츠 작업환경을 구축해주는 도구 설정은 추후 변경이 가능하다. yarn create react-app yarn create react-app sanghee 브라우저가, 혹은 브라우저 선택 창이 열릴때까지 기다리기 성공메세지와 함께 브라우저를 선택하거나 url직접 입력 완료 yarn이란?: yarn 설치하기 Node.js를 설치할떄 패키지를 관리해주는 npm도구가 설치된다. 이때 npm대신 yarn이란 패키지 관리자 도구를 설치하여 사용해도되는데, yarn은 npm을 대체하는 도구로 보다 빠르며 기타 부가 기능을 제공한다. 설치 후 잘 설치되었는지 확인해보자. npm install --global yarn yarn --version 크로스브라우징: @supports, 속성지원여부에 따른 브라우저별 CSS 스타일 적용하기 크로스브라우징: @supports, 속성지원여부에 따른 브라우저별 CSS 스타일 적용하기 /* 만약 브라우저가 `display: grid` 속성을 지원한다면 이 스타일이 적용됩니다. */ @supports (display: grid) { .container { display: grid; grid-template-columns: 1fr 1fr; } } /* 만약 브라우저가 `display: grid` 속성을 지원하지 않는다면 이 스타일이 적용됩니다. */ @supports not (display: grid) { .container { float: left; width: 50%; } } 파라미터값에 따른 tab active 유지하기 우선 php로 파라미터 값에 따라 active 클래스가 추가되도록 html에 설정한다. 각 탭이 클릭될때마다 파라미터가 수정/추가되고 reload()되면 끝. //원하는 a 요소 모두 선택 const tabMenuLinks = document.querySelectorAll(".layout_tab ul li > a"); tabMenuLinks.forEach((link) => { link.addEventListener("click", function (event) { event.preventDefault(); // 링크의 기본 동작(페이지 이동) 방지 const linkHref = this.getAttribute("href"); // 클릭한 링크의 href 값을 가져옴 const currentURL = wi.. button 클릭시 페이지가 새로고침될때, preventDefault() button의 기본 동작인 폼 전송(form submission)으로 인해 발생할 수 있다. JavaScript에서 event.preventDefault()를 사용하하면 버튼의 기본동작을 막을 수 있다. event.preventDefault() checkbox value가 submit되지않을때 checkbox는 radio와 다르게 값을 hidden한 input으로 넘겨줘야한다는 사실을 놀랍게도 몇개월에 한번씩 계속 잊고 왜 안되는지 한참을 고민하다 떠올리곤 탄식하는 일이 반복되자.. 반성을 할겸 적어보기로 했다. hidden type input을 추가 onchange시 함수호출 웹 모바일 //checkbox가 선택되었을때 value을 변경한다. function ifCheckedTurnYorN(checkbox, hiddenInputName) { $("input[name='" + hiddenInputName + "']").val(checkbox.checked ? 'Y' : 'N'); } 완료. AJAX, include한 코드에 속성추가하기 아래와 같이 불러온 form에 속성을 추가해보자. $.get('action될 url', function(){ [ $(".contentsFormInclude").html($(data).find("form[name='contentsform']")); }).fail(function(xhr, status, error) { console.error("Error:", error); }); https://standout.tistory.com/797 .attr()로 추가후 원하는방향으로 function을 따로 작성한다, 아래 handleFormSubmit는 예시 $("form[name='contentsform']").attr("onsubmit", "return handleFormSubmit(this);"); funct.. AJAX, 특정영역만 불러오기 .contentsFormInclude안에 특정 파일을 include하되 모든코드말고 특정 영역만 불러와보자. include하는 파일안에 form태그의 name이 contentsform인 영역이 있다고 가정한다면 불러오는 코드 $(".contentsFormInclude").html($(data).find("form[name='contentsform']")); 예시코드 $.get('action될 url', function(){ [ $(".contentsFormInclude").html($(data).find("form[name='contentsform']")); }).fail(function(xhr, status, error) { console.error("Error:", error); }); AJAX, <script> 코드 추가하기 스크립트 추가 $("").text(`cid = 123;`).appendTo(document.head); 변수값으로 추가할경우 $("").text(`cid = ${noValue};`).appendTo(document.head); AJAX, style.css 추가하기 하나씩 추가하는 코드 $("head").append(''); 여러개일 경우 [ '', '' ].forEach(css => $("head").append(css)); 예시코드 $.get('action될 url', function(){ [ '', '' ].forEach(css => $("head").append(css)); }).fail(function(xhr, status, error) { console.error("Error:", error); }); https://standout.tistory.com/794 AJAX, script.js 추가하기 하나씩 추가하는 코드 $.getScript("script.js"); 여러개일 경우 [ '$.getScript("script1.js")', '$.getScript.. AJAX, script.js 추가하기 하나씩 추가하는 코드 $.getScript("script.js"); 여러개일 경우 [ '$.getScript("script1.js")', '$.getScript("script2.js")' ].forEach(script => $.getScript(script)); 예시코드 $.get('action될 url', function(){ [ '$.getScript("script.js")', '$.getScript("script.js")' ].forEach(script => $.getScript(script)); }).fail(function(xhr, status, error) { console.error("Error:", error); }); AJAX 메서드, 비동기적 서버통신 $.get fail $.get('action될 url', function(){ }).fail(function(xhr, status, error) { console.error("Error:", error); }); fail() AJAX 요청이 실패했을때 실행할 콜백 함수 xhr은 XMLHttpRequest 객체를 나타내며, status는 요청 상태 코드를, error는 에러 메시지를 포함한다. Attribute 속성 삭제하기 button의 onclick이라는 속성을 삭제해보자. button.removeAttribute("onclick"); class/id값 없는 button : 어떤버튼이 클릭되었는지, 버튼텍스트인식하기 아래와 같은 수정이란 텍스트를 가진 button을 인식해보기로 하자. 수정 document.querySelectorAll("button").forEach(button => { const buttonText = button.innerText.trim(); if (buttonText === '수정') {} }); <br>치기 귀찮을때, white-space 자동줄바꿈 총 두가지 방법이 있다. 두 코드의 차이가 있다면 pre-wrap은 공백을 인정하고 white-space: pre-wrap; pre-line은 연속된 공백이 있어도 하나로만 인식해 표현한다. white-space: pre-line; alert와 confirm의 차이, 예시코드 alert 통보식 안내창 alert("알림창으로 안내드릴게요!"); confirm 허락을 구하는 안내창 if (confirm("정말로 진행하시겠습니까?")) { console.log("진행합니다!"); } else { console.log("취소했습니다."); } 이전 1 2 3 4 다음
