flutter가 json 파일에 접근할 권한이 없어서 오류가 발생한다

$ ls -l /Users/-/.dart-tool/dart-flutter-telemetry-session.json
# -rw-r--r--  1 root  staff  57  2  2 00:16 /Users/NAME/.dart-tool/dart-flutter-telemetry-session.json

소유자 변경

sudo chown NAME:staff /Users/semi/.dart-tool/dart-flutter-telemetry-session.json

$ flutter doctor
# Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.27.3, on macOS 15.2 24C101 darwin-arm64, locale
    ko-KR)
    ✗ Downloaded executables cannot execute on host.
      See https://github.com/flutter/flutter/issues/6207 for more information.
      Flutter requires the Rosetta translation environment on ARM Macs. Try
      running:
        sudo softwareupdate --install-rosetta --agree-to-license

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor
      --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 16.2)
    ✗ Unable to get list of installed Simulator runtimes.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.3)
[✓] VS Code (version 1.96.0)
[✓] Connected device (3 available)
[✓] Network resources

다음 세 가지 오류가 발생했다. 1)

# [!] Flutter (Channel stable, 3.27.3, on macOS 15.2 24C101 darwin-arm64, locale
    ko-KR)
    ✗ Downloaded executables cannot execute on host.

Downloaded executables cannot execute on host. m2 arm이라서 일부 flutter 실행파일이 정상적으로 실행되지 않아 발생한 것 같다. Rosetta(x86 프로그램을 실행할 수 있도록 돕는 번역 프로그램)을 설치하여 해결한다. $ sudo softwareupdate --install-rosetta --agree-to-licens

2)

# [!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    ! Some Android licenses not accepted. 

Android 라이선스 미승인이 원인이다. $ flutter doctor --android-licenses 실행 후 모두 y를 입력

3)

# [!] Xcode - develop for iOS and macOS (Xcode 16.2)
    ✗ Unable to get list of installed Simulator runtimes. 

Xcode에서 최신 버전이 아니거나 iOS 시뮬레이터 관련 패키지 미설치가 원인이다. $ xcodebuild -downloadPlatform iOS

$ ruby --version
# ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin24]

최신 버전 ruby 설치 :

$ brew install ruby

환경 변수에 추가 :

sudo nano ~/.zshrc

다음과 같이 작성 export PATH="/opt/homebrew/opt/ruby/bin:$PATH"

설정 적용 :

$ source ~/.zshrc

설정 확인 :

$ which ruby
# /opt/homebrew/opt/ruby/bin/ruby
$ ruby --version
# ruby 3.3.6 (2024-11-05 revision 75015d4c1f) [arm64-darwin24]

case 'ielist':
        return (
          <Animated.View
            style={[{ flex: 1 },{ transform: [{ translateY }] }]}
            {...panResponderList.panHandlers}
            >


            <View>
            <Text style={ {color:'black', padding : 20}} > ↑ </Text>
            </View>
            <IEList />


          </Animated.View>
        );

ielist 스크롤, 드래그 가능

<View style={{ flex: 1 }} {...panResponderList.panHandlers}>

            <View>
            <Text style={ {color:'black', padding : 20}} > ↑ </Text>
            </View>
            <IEList />

          </View>

시스템 호출과 라이브러리 함수는 man으로 구별

man(Manual) : 페이지의 섹션 번호

리눅스에서 사용하는 명령 : 섹션 1 시스템 호출 : 섹션 2 라이브러리 함수 : 섹션 3

$ man -s 2 uname

일급 함수(일급 객체)는 변수처럼 다룰 수 있음

const print = function() {
    console.log('일급 함수 예제')
}
print();
const printAgain=print;
printAgain();

![](https://velog.velcdn.com/images/ssem-i/post/c42ce329-8b3a-4e03-b5bf-7ff5a25b171c/image.png)


>```
function plus(a,b){
    return a+b;
}
// 함수를  parameter로 받는 함수
function calculate(a, b, func){
    return func(a,b)
}
console.log(calculate(10,20,plus));

함수의 프로퍼티 caller - 호출 함수 length - 인자 개수 name prototype - 프로토타입 객체의 참조 apply()/call() 함수 실행: this 값과 함수 인자 이용 bind(): 객체에 함수를 바인드

Callback function

callback : 함수를 전달해서 상황에 따라 적절한 함수를 호출하도록 하는 것

예

• addEventListner()에 전달되는 함수 (이벤트 처리기)
• 타이머 함수에 전달되는 함수: setInterval(f(), tm); setTimeout(f(), tm);

const sum = (a, b) => a + b;
const printResult = (result) => {
console.log(`결과는 ${result} 입니다.`);
};
const calculationAndPrint = (calculationResult, callback) => {
callback(calculationResult);
};
calculationAndPrint(sum(10, 20), printResult);

![](https://velog.velcdn.com/images/ssem-i/post/7022fd10-a139-433c-abc0-b0b0d1b8248e/image.png)

함수 리턴

const returnFunction = () => (a, b) => a + b; const plus = returnFunction(); console.log(plus(10, 20));

인자를 받지않고 호출됨 인자 2개를 받아 합을 리턴하는 함수를 리턴

고차 함수 higher-order function

함수를 인자로 받거나 함수를 반환하는 함수 예: Array.map() 메소드 - 배열 내 모든 요소를 인자로 제공받는 callback 함수를 호출하여 새로운 배열을 만듬

커링 curring

인자를 여러 개 받는 함수를 분리하여 인자가 하나인 함수의 체인(중첩 함수)으로 만드는 방법 함수의 전달인자 몇 개를 미리 채워 더 간단한 함수를 만드는 방법 함수를 재사용하는데 유용하게 쓰일 수 있는 기법 매개 변수가 항상 비슷할 때 유용 외부 함수 인자는 변하지 않는 것 내부 함수 인자는 변하는 것

2개 이상의 화살표로 함수를 정의하는 것 화살표 개수만큼 인자(파라미터)를 전달해야 함 화살표 개수보다 적은 개수의 인자를 전달 받으면 함수를 리턴

const coffeeMachine = liquid => espresso => `${espresso}+${liquid}`;
const americanoMachine = coffeeMachine('water');
const latteMachine = coffeeMachine('milk');
const americano = americanoMachine('americano : coffee bean');
const latte = latteMachine('latte : coffee bean');
console.log(americano);
console.log(latte);

폼 양식

웹 페이지에서 사용자가 입력을 받는 다양한 형태의 폼 양식 로그인, 등록, 검색, 예약, 쇼핑 등 데이터를 넣을 수 있는 입력 필드를 가진 웹 페이지

폼 요소

폼을 만드는 다양한 태그 : *input, textarea, select *

폼 태그

클라이언트가 웹 브라우저에서 데이터를 입력하고 웹 서버에 전달하기 위해 사용하는 태그 input. textarea. select 등의 폼 요소를 이용

• 형식

  <form name=“폼의 이름 지정” action=“웹 서버 응용 프로그램의 url” method=“get | post” >
  여러 개의 폼 요소 작성 …
  </form>

  
  

• 속성

1. name : 폼의 이름 지정

2. action - 폼 데이터를 처리할 웹 서버 응용 프로그램의 이름 URL. 주소.

submit 속성의 버튼이 눌리면 브라우저는 action에 지정된 웹 서버 응용프로그램 실행 요청 웹 서버 응용프로그램은 Java, JSP, PHP 등의 언어로 작성 action은 문법상 생략 가능하나 실행하려면 들어가야 한다

3. method - 폼 데이터를 웹 서버로 전송하는 형식
   • GET : URL에 데이터를 붙여서 전송, 보안에 취약 >> 검색
   • POST : 내부에 숨겨서 보내서 외부에서 볼 수 없음
     

form 태그의 action과 a의 href 차이점

form

http://localhost:8080/search.html?query=입력한검색어

페이지를 요청 + 데이터 전송 ( Ajax 사용 시 페이지 이동 없이 데이터 처리 가능 )

href

<a href="search.html">이동</a>

http://localhost:8080/search.html

페이지만 요청

1. input 태그

텍스트 입력 창 만든다 클라이언트가 웹 서버에 웹 페이지를 요청하면서 사용자가 입력한 데이터를 같이 보냄

• 형식

  <input type="속성?" name=“폼 요소 이름” maxlength=“문자 개수”
  size=“문자 개수” value=“초기 텍스트”>

  
  

• 속성

1. type - 입력 요소의 종류 결정
   종류

   • text : 한 줄 짜리 입력 창
   • password : 암호 입력 창. 사용자 입력 문자를 '*'와 같은 다른 문자로 출력

2. name - 폼 요소 이름, name 속성은 서버로 전달되는 이름 서버에서는 name 속성을 변수 이름처럼 생각해서 값을 참조 임의로 작성 가능

3. maxlength - 폼 요소에 입력할 수 있는 문자의 최대 개수

4. size - 입력 창의 크기, 단위는 문자 개수, 안 넣으면 브라우저별로 다를 수 있음(20)

5. value - 폼 요소의 입력 창에 표시되는 초기 텍스트

   
   

1-2. input - 선택형 입력 태그

1) 라디오 버튼

<input type= “radio” > 여러 항목 중 하나를 선택 name 속성 값이 같은 라디오버튼들이 하나의 그룹 형성한다

2) 체크박스

<input type= "checkbox“ >

• 형식

  <input type=“checkbox 또는 radio” name=“폼 요소 이름” value=“초기 텍스트” checked >

• 속성

• type* – checkbox | radio

• name* - 폼 요소 이름

• value* - 폼 요소가 선택된 상태일 때, 웹 서버에 전송되는 값

• checked* - 이 속성이 있으면, 초기에 선택된 상태로 출력

  
  

2. 콤보박스 <select>

• 여러 개의 항목이 나타나는 콤보 박스를 만들 때 사용
• <select> 태그 안에서 <option> 태그로 선택할 값들을 지정
• <option> 태그 안에 ‘selected’를 선언하면 해당 항목을 기본값으로 지정
  

▼ select 태그와 option 태그 속성

  Home > Language <hr>
  <form action="form_select2.html" method="get">
    <fieldset style="width:150px">
      <legend>언어 선택</legend>
      <p>
        <select name="language">
          <option value="choice">=== 선택 ===</option>
          <option value="korean">한국어</option>
          <option value="english">영어</option>
          <option value="chinese">중국어</option>
          <option value="japanese">일본어</option>
          <option value="spanish">스페인어</option>
        </select>
      </p>
      <br><br>
      <input type="submit" value="제출">
      <input type="reset" value="초기화">
    </fieldset>
  </form>

폼 요소 그룹화

<select name="...">

3. textarea 태그

<textarea cols="너비값" cols="높이값"></textarea>

1. <table> … </table> : 표 전체

   <table border=“1”> border 속성은 1픽셀 크기의 테두리를 표시함

2. <caption> … </caption> : 표의 제목

3. : <tr> … </tr> : 표는 여러 행으로 구성, 한 행은 여러 열로 구성

4. <th> … </th> : 제목 정보를 가진 열

5. <td> … </td> : 데이터 정보를 가진 열

테이블 셀 합치기

rowspan : 상하로 합침 colspan : 좌우로 합침

<td rowsapn="2">...</td> <td colspan="4">...</td>

gif 무손실 압축, 256가지 제한된 색상 사용 애니메이션 지원 jpg 손실 압축으로 이미지의 압축 효율이 좋음 사진 이미지를 저장하는데 주로 사용 png 원본 손실이 없는 무손실 압축으로 트루 컬러(24비트), 투명 이미지 지원 jpg에 비해 압축 효율이 좋지 않음 일반적으로 웹에서 가장 많이 사용

• 형식

<img src=“이미지 파일의 경로" width=“이미지 폭” height=“이미지 높이”
title =“이미지 설명” >

• 속성
• src* - 삽입하는 이미지 파일의 경로를 지정하는 필수 속성
• width* - 이미지의 가로 크기로, 생략 시 원본 이미지의 크기로 삽입됨, 단위는 픽셀수
• height* - 이미지의 높이로, 생략하면 원본 이미지의 크기로 삽입됨, 단위는 픽셀수
• title* - 이미지에 마우스 포인터를 갖다 대었을 때 표시할 설명
• alt* : 이미지가 없거나 손상 등 출력할 수 없는 경우 출력할 문자열. 필수 속성

  

URl

웹 문서에 사용하는 파일의 위치를 나타냄

• 절대 경로 http://로 시작 인터넷 상에 하나 뿐인 고유한 경로

• 상대 경로 현재 폴더 위치를 기준으로 대상 파일이나 폴더의 위치를 지정 서버의 폴더 구조나 도메인 변경 및 웹 페이지 제작, 수정에 편리 주로 사용

  
  

2. 오디오 파일 재생

▼ HTML5에서 재생 가능한 오디오 타입

<audio> 태그

• 형식

  <audio src=“오디오 파일 경로" controls autoplay loop>
  이 태그를 지원하지 않는 브라우저가 출력하는 메시지
  </audio > 

• 속성
• src* - 삽입하는 오디오 파일의 경로를 지정
• controls* - 이 속성이 설정되면 재생, 재생시간, 중단, 음소거 등 제어 버튼 출력
• autoplay* - 이 속성이 설정되면 오디오 로딩 즉시 재생 최신 브라우저의 경우 보안 상의 이유로 자동 재생이 안될 수 있음
• loop* - 이 속성이 설정되면 반복 재생
  

<source> 태그

브라우저 마다 지원하는 오디오 파일의 종류가 다르므로 <audio>태그를 사용할 때 <source> 태그를 사용함

• 형식

  <audio controls autoplay loop>
  <source src=“오디오 파일명(.mp3)” type=“비디오 마임 타입(audio/mpeg)”>
  <source src=“오디오 파일명(.wav)” type=“비디오 마임 타입(audio/wav)”>
  <source src=“오디오 파일명(.ogg)” type=“비디오 마임 타입(audio/ogg)”>
  </audio > 

  
  

3. 비디오 파일 재생

▼ HTML5에서 재생 가능한 비디오 타입 하나의 비디오를 여러 타입으로 만들어 두면 브라우저가 재생 가능한 타입을 선택함

<video> 태그

• 형식 <video src=“비디오 파일 경로” width=“동영상의 너비” height=“비디오 재생 영역의 높이” controls autoplay muted loop> 이 태그를 지원하지 않는 브라우저가 출력하는 메시지
• 속성
• src* - 삽입하는 비디오 파일의 경로를 지정
• width, height* - 생략되면 비디오의 원본 크기로 설정
• controls* - 이 속성이 설정되면 재생, 재생시간, 중단, 음소거 등 제어 버튼 출력
• autoplay* - 이 속성이 설정되면 비디오 로딩 즉시 재생
• muted* - 오디오를 끌 때 사용
• loop* - 이 속성이 설정되면 반복 재생
  

<source> 태그와 사용

<video width=“동영상의 너비” height=“동영상의 높이” controls autoplay loop>
<source src=“비디오 파일명(.mp4)” type=“비디오 마임 타입(video/mp4)”>
<source src=“비디오 파일명(.webm)” type=“비디오 마임 타입(video/webm)”>
<source src=“비디오 파일명(.ogg)” type=“비디오 마임 타입(video/ogg)”>
</video > 

4. 하이퍼링크 태그

같은 웹 사이트의 다른 HTML 페이지 연결 다른 웹 사이트의 HTML 페이지 모두 연결 가능

• 형식

  <a href=“url” target=“윈도우 이름”> 텍스트 혹은 이미지 </a>

• 속성
• href* : 이동할 HTML 페이지의 주소(url)
• target* : 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정
  target = “_blank” : 새로운 탭 또는 새로운 창에서 링크 열기 target = “_self” : 현재 탭 또는 현재 창에서 링크 열기(기본값)

*1. 비표준 기술의 혼재, 웹 브라우저의 비 호환성 *

2. 인터넷 기기의 다양화

3. 새로운 범용 웹 표준의 필요성

HTML5 표준과 의의

• HTML5 표준 제정 W3C와 하이퍼텍스트 워킹 그룹
• 표준에 담긴 내용
  • HTML5, CSS3, JavaScript로 분리 개발
    • HTML 태그에서 문서 모양과 관련된 태그, 속성 폐기
    • 웹 페이지의 플랫폼이나 장치 의존성 제거
    • 문서 작성의 개념을 넘어 웹 애플리케이션
    • 작성을 지원하는 JavaScript API 표준화

HTML5 이전과 도입 후 비교

HTML5의 기능

웹 문서 작성을 위한 HTML 태그 셋 웹 애플리케이션 작성을 위한 API

• 웹 폼
• 오디오, 비디오
• 캔버스
• SVG
• 웹 스토리지
• 웹 SQL 데이터베이스
• 인덱스 데이터베이스
• 파일 입출력
• 위치 정보
• 웹 워커
• 웹 소켓
• 오프라인 웹 애플리케이션
  

HTML5 문서 편집

• 텍스트 편집기 메모장, 한글 워드 Atom, Eclipse, Sublime Text, VS code, NotePad++ HTML, CSS3, JavaScript 파일 모두 UTF-8

• WYSIWYG(what you see is what you get) 편집기 Adobe의 Dreamweaver, CotteeCup, FCKeditor HTML5 태그 정보 제공 출력되는 모습 보면서 작성 가능 간단한 오류 확인

웹 페이지

웹 브라우저에서 보는 각각의 화면

웹 페이지 구성과 기능

HTML

CSS

JavaScript

웹의 기본 목적

다른 여러 컴퓨터에서 문서를 공유하거나 읽기 상웹 문서 : 웹에서 다루는 문서

웹의 구성

웹 페이지의 주소, URL

HTTP 세션

모든 컴퓨터가 IP 주소를 부여 받고 이 주소로 서로 연결하는 통신의 기본 체계로 웹의 개념이 나오기 전부터 만들어진 컴퓨터 연결 네트워크

인터넷을 활용하는 응용 서비스 사례

웹

인터넷을 활용하는 응용 서비스 웹 브라우저를 통해 글자, 이미지, 동영상, 음성 등의 데이터를 사용자에게 제공하거나, 사용자와 컴퓨터 또는 사용자 상호 간에 소통하게 해주는 서비스

웹 서버

인터넷과 같은 네트워크를 통해 클라이언트가 요청하는 서비스를 제공하는 컴퓨터

클라이언트

원격의 웹 서버에 서비스를 요청하는 컴퓨터 또는 컴퓨터 사용자

서버와 클라이언트

1. 클라이언트가 웹 페이지의 주소(URL, uniform resource locator 입력
2. 서버는 요청 받은 데이터를 클라이언트의 컴퓨터에 전송
3. 클라이언트의 웹 브라우저는 서버가 전송한 데이터를 해석하여 화면에 표시
   ### 웹 브라우저 웹 서버에 접속해서 웹 페이지, 이미지, 동영상, 음악 등의 데이터를 다운받아 보여주는 소프트웨어 #### 웹 브라우저 종류 

userList.forEach(function(user){ console.log(user); }); console.log('---'); userList.forEach(user => console.log(user));