반응형

 

 

 

파싱해온 문자열에 double형 값이 4개가 들어있는데

콤마로 이루어진 문자열에서 각각의 숫자를 꺼내보고 싶어 찾아본 방법

 

※콤마 뿐 아니라 공백, 특정 단어를 사용하여 파싱하는 방법도 함께 기록해봄

 

C# 문자열 파싱

 

과정

1. 특정 문자를 이용한 문자열 자르기

2. 배열에 잘라둔 문자열 넣기

3. 필요한 위치의 문자 형변환

 

 

 

 

아래 예시코드는 공백을 기준으로 숫자(처럼 보이지만 문자열임)를 잘라낼수있다

string textBuff = "-1.123    4.234  34.12  126.4  99      22";

double[] result = textBuff
    .Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries)
    .Select(s => double.Parse(s))
    .ToArray();

double x = result[0];
//    ...
double k = result[5];

 

람다 함수가 낯설다면 아래의 방법을 사용하자

 

근데 람다를 이용한 방법이 메모리 효율을 엄청 늘려준다고 하니

람다를 익혀서 위의 방식을 사용하는게 훨씬 이득일듯

 

string textBuff = "-1.123    4.234  34.12  126.4  99      22";

string[] result = textBuff.Split(new char[] { ' ' }, StringSplitOptions.RemoveEmptyEntries);

double x = double.Parse(result[0]);
//    ...
double k = double.Parse(result[5]);

 

 

만약 파싱하려는 문자열이 콤마 , (comma) 를 기준으로 나열되어 있다면

Split 함수의 ' ' 부분을 ','로 바꾸어 사용하면 된다

 

 

나의 경우는 마진 값을 string으로 받아져서 콤마를 기준으로 Top 값을 갖고오기 위해 문자열을 잘라보았다

Marin은 left, top, right, bottom 이므로

여기서 내가 추출해야할 Top은 2번째 값이라 MarginResult[1] 값을 형변환 해주면 끝

 

//Margin = (10,50,0,100)
string MarginStr = Margin.ToString();
string[] MarginResult = MarginStr.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);

 

 

문자열에서 가져온 숫자를 int형으로 바꾸어 사용하고 싶다면

//double x = double.Parse(result[0]);

int x = int.Parse(result[0]);

위의 형태로 선언하면 된다

 

 

 

 

참고 :

문자열 파싱

https://stackoverflow.com/questions/1406129/parse-multiple-doubles-from-string-in-c-sharp

 

Parse multiple doubles from string in C#

I have a string that contains a known number of double values. What's the cleanest way (via C#) to parse the string and plug the results into matching scalar variables. Basically, I want to do the

stackoverflow.com

 

들여쓰기(tab 키) 기준 파싱

https://stackoverflow.com/questions/12384905/string-split-function-in-c-sharp-tab-delimiter

 

string.Split function in c# tab delimiter

I have a function which reads a delimited file. The delimiter is passed to the function by string argument. The problem is, when I pass the "\t" delimiter, it ends up like "\\t" and therefore, Sp...

stackoverflow.com

 

 

반응형
반응형

 

 

 

새로 python 3.10을 설치하려다가 3.9.9를 설치해본 후기

 

목차

1. 파이썬 3.10 윈도우 설치

2. 파이썬 환경변수 세팅

3. 1의 설치가 제대로 되어있지 않은 경우, 다른 방법으로 설치

 

 

 

 

 

먼저 PC에 설치된 Python이 있는지 확인을 해봤다

python --version

보통 python --version을 입력하면 설치된 파이썬 버전이 출력되어야하는데

그냥 Python만 있어서 pip install 명령어를 사용해봤더니 설치가 안되어있다고 함

 

그래서 새롭게 설치를 해봤음

 

 

 

1. python 설치

 

구글에 python 검색 하면 나오는 사이트 ㄱㄱ

 

 

Download Python

The official home of the Python Programming Language

www.python.org

 

 

 

 

 

 

 

Disable path length limit 는 처음보는 문구라서 찾아봤더니

 

 

윈도우에서 Path의 길이 글자를 제한하는 기능이 있는데, 이 때 python 설치한 경로가 긴 경우

문제가 발생할 수 있어 python에서 자체적으로 이걸 막아주는 듯

 

3.6버전 이상부터 가능하다 함

 

 

 

 

2. Python 환경변수 설정

 

먼저 cmd를 열고 where python을 이용하여 python 위치를 찾는다

미리 복사해두면 다음 과정에 편리하니

마우스로 영역을 선택한 다음 ctrl+c ㄱㄱ

 

내 PC를 우클릭하여 속성을 누른 다음

 

나온 화면의 우측에서 고급 시스템 설정을 눌러준다

 

(※ 이 방식은 제어판에서도 접근이 가능함)

 

 

시스템 속성의 고급탭에서 아래에 있는 환경변수를 클릭한다

 

 

 

위쪽 창에 있는 사용자 변수 아래의 새로만들기를 클릭한다

 

우측의 새로만들기 또는 왼쪽 화면의 빈칸을 더블클릭하여 where로 얻은 파이썬의 설치경로를 입력해준다

아까 복사해둔 주소를 ctrl v 해주면 됨

 

C:\Users\UserName\AppData\Local\Microsoft\WindowsApps\python.exe

나의 경우 위의 주소로 나와서 뒤의 python.exe를 제외한 폴더 경로를 입력해주었다

 

C:\Users\UserName\AppData\Local\Microsoft\WindowsApps

이렇게

 

 

 

아래의 확인을 누르고

 

 

다시 확인을 눌러 환경변수 설정을 마친다

 

 

환경 변수 설정이 잘 되었는지 확인하기 위해서는

cmd에서 python을 실행해보는게 제일 편리하다

 

python 입력 후 위의 화면처럼 바뀐다면 환경변수 세팅이 완료된 것임

 

 

 

 

 

만약 위의 방식으로 파이썬 설치가 완료되지 않는 사람은 아래를 참고하자

 

3. 다른 방법으로 python 설치하기

 

 

윈도우 키를 누르고 Microsoft Store를 입력하여 Python 3.9를 찾아준다

 

 

받기, 설치를 눌러 다운로드 해주면 끝

 

환경변수는 위의 방법과 동일하다

 

python.org에서 받은 파일로 설치를 했는데 문제가 생겼는지 실행이 안돼서

나는 스토어에 들어가서 다운받았다

 

현재는 파이썬 작동이 잘 되니 큰 문제 없어 다행임

 

 

반응형
반응형

 

 

 

빌드 환경 : Visual Studio 2019

 

(끔찍)

 

 

WPF 예제를 돌려보려던 차에 발견한 오류

 

원문은 다음과 같다

 

현재 .NET SDK에서는 .NET 6.0을(를) 대상으로 하는 것을 지원하지 않습니다. .NET 5.0 이하를 대상으로 하거나 .NET 6.0을(를) 지원하는 .NET SDK 버전을 사용하세요.

 

이 문구를 조금 잘라서 구글링을 해보면

바로 마이크로소프트에서 해결하는 법을 안내해준다

 

MS에서 맞닥뜨린 문구의 기본형은 다음과 같다

NETSDK1045: 현재 .NET SDK는 대상으로 ‘최신 버전’을 지원하지 않습니다. ‘이전 버전’ 이하를 대상으로 하거나 ‘최신 버전’을 지원하는 .NET SDK 버전을 사용합니다.

 

= .net 버전차이로 인한 오류일 확률이 높다

 


이러한 문제를 해결하기 위해 찾아보아야 할 것

 

1. .net SDK 버전

- 프로젝트 파일(.csproj, .vbproj 또는 .fsproj)을 열고 대상 프레임워크를 확인

 

2. 미리보기가 사용되지 않음

- 도구 > 옵션 > 환경 > 미리보기 기능으로 이동 후 .NET Core SDK 미리보기 사용이 선택되어 있는지 확인

 

3. Visual Studio 버전

- .NET Core 3.0 이상은 Visual Studio 2019 버전이 필요하며

프로젝트 빌드를 위해서는 2019의 16.3 이상 버전이 필요하다

 

4. PATH 환경변수

 

5. MSBuildSDKPath 환경변수

 

6. global.json 파일

- 프로젝트 루트 폴더에 있는 global.json 파일에 지정된 SDK 버전이 있는지 확인 후,

필요한 .NET Core 버전을 설치한다

 

7. Directory.build.props 파일


 

 

 

나의 경우는 웬만하면 1번/6번 또는 3번에서 해결이 되긴 함

 

그렇기도하고 오류자체도 .net 버전에 관련된 것이어서 1번부터 시행해봄

 

 

.net SDK 버전 확인하기

 

프로젝트의 타겟 프레임워크 확인 시

<TargetFramework>netcoreapp3.0</TargetFramework>

위와 비슷한 형태로 찾을수있다

 

 

1번박스의 2번 박스를 우클릭하여 속성을 누른다

 

?

있어야할곳이 비어있다

 

 

그래서 6번의 global.json을 찾아봄

global.json은 WPF-Samples-main 폴더 아래에 바로 있다

 

 

{
  "sdk": {
    "version": "6.0.100-rc.1.21368.3",
    "rollForward": "latestFeature"
  },
  "altsdk": {
    "netcoreapp3.1": "3.1.300",
    "net6.0-windows": "6.0.100-rc.1.21368.3"
  }
}

 

파일을 열어보면 sdk 버전이 6.0 이상인것을 확인할수있다

= 즉 이 WPF sample 솔루션을 돌려보려면 .net 6.0 이상이 설치되어 있어야한다는것

 

 

 

 

 

[C#] .net sdk 설치 유무 및 버전 확인 하는법

기존 예제들을 빌드해볼때마다 가끔 만나는 오류 NETSDK1045: 현재 .NET SDK는 대상으로 ‘최신 버전’을 지원하지 않습니다. ‘이전 버전’ 이하를 대상으로 하거나 ‘최신 버전’을 지원하는 .NET SD

studyingpingu.tistory.com

 

닷넷 설치 유무나 런타임 버전확인은 위 포스팅 참고하거나

dotnet --list-sdks

위의 명령어를 CMD창에 입력해보면 되겠다

 

 

 

그렇게 찾아봤더니 내 PC에 6.0이 설치가 안되어있어 오류가 발생한것같았다

 

그래서 설치해본 .net 6.0

 

 

.net 버전들은 아래의 주소에서 내려받기가 가능하다

 

 

.NET Downloads (Linux, macOS, and Windows)

Official .NET downloads for Linux, macOS, and Windows. .NET is a free, cross-platform, open-source developer platform for building many different types of applications.

dotnet.microsoft.com

 

 

 

 

 

 

 

다운로드가 끝나고 난 뒤 프로젝트를 오픈하고 빌드해보면 굉장히 잘 돌아가는것을 알수있다

 

 

 

 

 

참고 :

 

 

https://docs.microsoft.com/ko-kr/dotnet/core/tools/sdk-errors/netsdk1045

 

NETSDK1045: 현재 .NET SDK는 대상으로 ‘최신 버전’을 지원하지 않습니다. - .NET CLI

빌드 도구가 요청된 .NET SDK 버전을 찾을 수 없을 때 발생하는 .NET SDK 오류 NETSDK1045에 관해 알아봅니다.

docs.microsoft.com

 

반응형
반응형

 

기존 예제들을 빌드해볼때마다 가끔 만나는 오류

 

NETSDK1045: 현재 .NET SDK는 대상으로 ‘최신 버전’을 지원하지 않습니다. ‘이전 버전’ 이하를 대상으로 하거나 ‘최신 버전’을 지원하는 .NET SDK 버전을 사용합니다.

 

 

위 오류를 해결하기 위해 .net sdk 버전이나 설치 유무를 확인할 수 있는 방법을 기록해봄

 

 

 

PC에 설치된 .net 버전을 확인하는 방법은 다음과 같다

dotnet --list-sdks

위의 명령어를 cmd에 입력해보면 됨

 

 

추가로 PC에 설치된 런타임을 조회하는 방법

dotnet --list-runtimes

 

 

 

 

SDK와 닷넷 런타임 버전을 포함하여 OS, 런타임식별자(RID) 등의 환경 정보를

한번에 확인하는 방법도 있다

 

dotnet --info

 

 

반응형
반응형

 

 


XML(Extensible Markup Language)
XML 구문은 매우 간단하고 구조적이어서 익히기 쉽고 사용하기 쉽다

간략 요약

 


XML 선언법


1. XML문서의 맨 앞에 선언해야된다
2. 맨 앞에 적은 <xml>태그를 XML 프롤로그라 하며, 이때 사용하는 xml 태그는 소문자로만 적는다

XML Prolog(프롤로그)
1. 버전을 명시한다
2. 문자 인코딩을 설정하며, 기본값은 UTF-8이다
3. 파싱할 외부 문서 여부를 설정할 수 있다

 


 

상세 내용


XML 문법


1. 모든 요소의 부모요소인 root element를 하나만 갖는다
2. 모든 xml 태그는 닫는 태그가 필요하다
3. 태그는 대소문자를 구별한다
4. 상위 단계의 태그보다 하위 단계의 태그가 먼저 닫힌다
5. 태그의 값은 따옴표(")로 감싸야 된다
6. html과 달리 띄어쓰기를 인식한다



XML 기초

XML 문서들은 모든 elements들의 부모 요소인 root element를 하나만 가져야 한다
모든 XML 태그들은 닫는 태그가 필요하다

태그들은 대소문자를 구별하며(case sensitive) 부모 태그는 자식태그보다 나중에 닫는다

예시)

<root>
  <child>
    <subchild>.....</subchild>
  </child>
</root>

<p><strong>이 구문은 오류를 발생합니다.</p></strong>
<p><strong>이 구문이 정확한 순서입니다.</strong></p>


※<p>가 부모태그라면 <strong>이 자식태그로, <strong>태그가 먼저 닫혀야된다


아래의 XML 구문에서 root element는 note 이다

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>



태그의 값은 따옴표로 감싸주어야한다

<student name=abc>   // 오류
<student name="abc"> // 정상



몇개의 문자열들은 xml 태그 내에서 사용할 때, 이스케이프가 필요하다

xml escape 기호 의미
&lt; < 보다 작다
&gt; > 보다 크다
&amp; & 그리고
&apos; ` '
&quot; " 따옴표


활용 예시

<message>salary &lt; 1000</message>
<!-- salary < 1000 -->



주석은 html 문서와 같이 <!-- -->를 사용한다

<!-- 올바른 주석 -->



주석 중간에 하이픈2개를 연달아 쓰면 안된다

<!-- 올바르지 않은 -- 주석 -->




XML 프롤로그

 


다음과 같은 표현을 XML prolog(프롤로그) 라고 한다

<?xml version="1.0" encoding="UTF-8"?>



XML1.0 버전에서의 XML prolog는 필수사항은 아니며, 만약 사용하고자 한다면 문서의 맨앞에 적어야 한다

XML prolog는 XML 선언, 처리 지시사항들, 주석과 문서 타입 정의에 관한 내용들이 포함된다

XML 1.1 버전은 XML 선언을 필수로 해줘야한다 선언이 없다면, 1.0버전으로 인식하게된다
XML문서의 시작부터 루트 노드이전까지의 모든 것이 XML의 prolog이다


XML 문서는 전세계언어를 포함하고 있어
노르웨이나 프랑스어의  øæå, êèé 와 같이 악센트 표기가 가능한 알파벳을 사용할 수 있다


아래의 XML 구문은 1.1버전이지만

<?xml version="1.1"?>
<greeting>Hello, world!</greeting>


아래의 버전은 XML 선언이 없으므로 XML 1.0버전이다

<greeting>Hello, world!</greeting>




예시와 설명을 곁들인 버전

다음은 PDS4 코어 네임스페이스를 참고한 샘플 프롤로그이다

<?xml version="1.0" encoding="UTF-8"?>
   <?xml-model href="http://pds.nasa.gov/pds4/pds/v1/PDS4_PDS_1201.sch" schematypens="http://purl.oclc.org/dsdl/schematron"?>
   <?xml-model href="http://pds.nasa.gov/pds4/disp/v1/PDS4_DISP_1100.sch" schematypens="http://purl.oclc.org/dsdl/schematron"?>
   <?xml-model href="http://pds.nasa.gov/pds4/sp/v1/PDS4_SP_1100.sch" schematypens="http://purl.oclc.org/dsdl/schematron"?>
   <?xml-model href="http://pds.nasa.gov/pds4/geom/v0/PDS4_GEOM_0520.sch" schematypens="http://purl.oclc.org/dsdl/schematron"?>
   <?xml-model href="http://pds.nasa.gov/pds4/sbn/v0/sbnDD_0100.sch" schematypens="http://purl.oclc.org/dsdl/schematron"?>
   <?xml-model href="http://pds.nasa.gov/pds4/mission/epoxi/v0/epoxiDD_0100.sch" schematypens="http://purl.oclc.org/dsdl/schematron"?>


첫번째 줄은 XML 선언으로 이용하려는 XML의 버전과 문자열 인코딩 방식을 보여준다
XML 선언은 XML 문서의 맨 앞줄에 적어야 하며, 프롤로그의 <xml> 태그는 소문자로 사용해야한다


추가로 XML 선언 시 standalone 을 추가할수있다

<?xml version="1.0" encoding="UTF-8" standalone="no"?>


standalone의 기본값은 no이며,
standalone은 외부 DTD(Document Type Definition)와 같이
외부 소스의 데이터에 의존하는 문서인지 XML 파서에게 알려주는 역할을 한다

yes인 경우, 문서를 파싱할 때 참조해야할 외부 소스가 있다는 것을 의미



마지막으로 XML 프롤로그 내, 따옴표 안에서의 공백은 피해야하며, 따옴표 바깥의 공백은 걱정하지 않아도 된다
※여기서의 공백은 스페이스 바를 사용한 한칸 띄워쓰기, tab을 이용한 들여쓰기,

그리고 \n을 이용한 줄바꿈을 의미한다

 


따라서 다음과 같은 xml은 올바른 사용 예시임

 <?xml 
      version="1.0"
      encoding="UTF-8"
      standalone="no"?>





참고 사이트

XML 구문 기초
https://www.w3schools.com/xml/xml_syntax.asp

http://www.tcpschool.com/xml/xml_basic_syntax

https://sbnwiki.astro.umd.edu/wiki/Anatomy_of_the_XML_Prolog


XML 특수문자 사용
https://docs.microsoft.com/ko-kr/dotnet/desktop/wpf/advanced/how-to-use-special-characters-in-xaml?view=netframeworkdesktop-4.8


XML 전반적인 설명
https://support.microsoft.com/ko-kr/office/%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-xml-%EC%84%A4%EB%AA%85-a87d234d-4c2e-4409-9cbc-45e4eb857d44


XML 선언 prolog 규칙 설명
https://stackoverflow.com/questions/7007427/does-a-valid-xml-file-require-an-xml-declaration


standalone 설명
https://stackoverflow.com/questions/5578645/what-does-the-standalone-directive-mean-in-xml

반응형
반응형

 

WPF TextBox에 TAB과 Enter를 이용한 편의기능 추가해보기

 


텍스트박스를 텍스트 에디터로 주로 사용할 때 필요한 기능

 

다이어리나 자기소개서처럼 많은 양의 입력을 전달받을 때에는
워드나 텍스트 파일에서 사용하는것처럼 TAB(탭)의 들여쓰기 기능
Enter(엔터)로 다음줄로 연결되게 하는 줄바꿈 기능이 있으면 사용이 편해진다


이러한 편의 기능들을 텍스트박스에다 추가해본걸 기록해봄


먼저, 엔터(Return)키를 눌러 현재 문장의 다음줄로 이동할수있는 줄바꿈 기능을 추가해본다

<Grid>
	<Grid.RowDefinitions>
		<RowDefinition></RowDefinition>
		<RowDefinition></RowDefinition>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
	</Grid.ColumnDefinitions>
        
	<TextBox Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Background="BlanchedAlmond" x:Name="textBox1"
	AcceptsReturn="True" AcceptsTab="True" ></TextBox>
</Grid>

바로 AcceptsReturn 값을 True로 지정해주는것

AcceptsReturn True를 지정해주지 않은 상태에서는 엔터를 마구 눌러도
텍스트박스에 새로운 줄로 이동하지 않는다 다만 옆으로 작성될 뿐이다



다음으로는 TAB 키를 누르면 Xaml의 다음 요소로 이동하는게 아니라
텍스트 입력창에서 들여쓰기가 가능해지게 하는 방법을 추가해본다

<TextBox Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Background="BlanchedAlmond" x:Name="textBox1"
AcceptsReturn="True" AcceptsTab="True" ></TextBox>

위의 내용 그대로에 AcceptsTab 를 True로 지정해주면 탭을 이용한 들여쓰기가 가능해진다

 

 

 

들여쓰기 추가한 내용

 

 

만약 키보드 입력 중간에 저장하는 단축키같이 Ctrl+S 두개 이상의 키보드 이벤트를 받을 필요가 있다면
아래의 글을 참고해보자

 

https://studyingpingu.tistory.com/61

 

[WPF] Xaml, 텍스트박스에 Ctrl+s 키보드 입력받아 저장 단축키 추가하는법

에디터로 사용하는 텍스트 박스에 입력을 하면서 저장하는 단축키를 추가해주고 싶어서 Ctrl키와 S를 눌렀을 때 저장해주는 특정 함수를 호출하는 이벤트를 추가해봄 2개 이상의 단축키 지정 과

studyingpingu.tistory.com

 

반응형
반응형

 

 

 

에디터로 사용하는 텍스트 박스에 입력을 하면서 저장하는 단축키를 추가해주고 싶어서

Ctrl키와 S를 눌렀을 때 저장해주는 특정 함수를 호출하는 이벤트를 추가해봄

 

2개 이상의 단축키 지정 과정

1. Xaml 컨트롤인 텍스트박스에 키다운/키업 이벤트를 추가해준다

2. CS코드에서 키다운/키업 함수에 키보드 입력을 받는 부분을 추가해준다

3. Ctrl+S를 동시에 눌렀을 때, 사용하고싶은 함수를 호출해준다

 



먼저 사용중인 Xaml의 텍스트 블럭에 키보드 이벤트를 추가해준다

나중에 줄바꿈이 되는 텍스트 박스 글쓰기 (AcceptsReturn="True")
<!--<TextBox x:Name="textBox" AcceptsReturn="True" KeyDown="textBox_KeyDown" />-->

xaml 코드

<TextBox x:Name="textBox" KeyDown="textBox_KeyDown" />



cs 코드
키보드 입력을 받을 때 필요한 using문과 키다운 이벤트를 추가해주었다

 

using System.Windows.Input;

private void textBox_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
	if (e.Key == Key.S && Keyboard.Modifiers == ModifierKeys.Control)
  {                
      //ctrl+s 를 눌렀을 때 호출할 함수명
  }
}

 

마찬가지로 한가지의 키보드 입력만 받고싶을 때는 아래와 같이 진행하면 된다

using System.Windows.Input;

private void textBox_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
	if (e.Key == Key.S)
  {                
      //S 를 눌렀을 때 호출할 함수명
  } else if (e.Key == Key.Enter)
  {
  	//텍스트 입력 후 엔터로 호출할 함수명
  }
  
}

위의 코드는 텍스트를 입력 후 엔터로 다음단계를 진행하고싶을 때 추가해준 방식이다

 

 

KeyDown 등의 키보드 이벤트에는 PreviewKeyDown과 그냥 KeyDown 2개의 키보드 이벤트가 있는데

두개의 차이는 이것을 작성하면서 찾아보았으므로 다음에 기록할 예정


위의 영역에서 Keyboard.Modifiers라는 부분을 궁금해서 찾아본 결과

모디파이어 키들은 Modifier keys (Ctrl, Alt and/or Shift) 각각 컨트롤, 알트, 시프트 키를 얘기한다고 한다





참고 : 

키보드 2개 입력 (ctrl + s)
https://stackoverflow.com/questions/26361441/how-do-i-detect-ctrl-s-in-a-window-in-c-my-eventargs-dont-have-e-modifiers


반응형
반응형

 

 

파일첨부를 하는데 파일선택과 선택된 파일없음이라는 문구가 너무 거슬려서

인풋 파일 태그 내용 변경해본 기록

 

 

단순하게 인풋 파일태그를 숨기고 다른 텍스트로 대체한 상태

<input type="file" id="imgUpload" onchange="previewFile()" style="display:none;"></input>
<label for="imgUpload">이미지 추가</label>

 

기존의 못생긴 파일 선택녀석을 이렇게 단순 라벨링을 할수있다

 

아래의 등록하기의 경우 내가 임의로 submit 기능의 버튼을 추가한것이니 걱정ㄴㄴ

 

 

라벨링에 css 커스터마이징을 추가한 다른 형태

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}
<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />

 

 

 

참고 : https://stackoverflow.com/questions/572768/styling-an-input-type-file-button

 

Styling an input type="file" button

How do you style an input type="file" button?

stackoverflow.com

 

반응형
반응형

 

 

 

카카오맵 API를 사용해서 웹이나 어플리케이션에 지도 서비스를 이용할 때 첫단계 과정을 기록해봄

 

 

 

 

카카오맵 API를 사용할 도메인 등을 추가해주어 지도 API에서 접근이 가능한 키 발급을 받으면 된다

 

그럼 안드로이드나 iOS, 웹에서 카카오맵을 사용할수있다

 

 

여기서 등록하면 된다

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

내 애플리케이션을 클릭한다

 

 

 

그럼 기존 등록이 된 경우, 등록된 리스트가 보이며

신규 유저의 경우 리스트에 아무런 앱이 없이 그냥 애플리케이션 추가만 보일듯

 

어쨌든 등록이 필요하니 애플리케이션 추가 ㄱㄱ

 

 

 

이미지 등록은 필수가 아닌것같지만

나는 기존 만들어둔 이미지가 있어서 그걸로 사용했음

 

 

저장을 하면, 요약정보탭으로 바로 이동하게 되는데

이때 네이티브 앱 키, REST API 키, JavaScript 키, Admin 키가 자동으로 부여된다

 

 

웹에서 지도를 사용할경우 자바스크립트 키 가 필요하니 어디서 얻어야하는지 잘 알아두자

 

 

왼쪽의 메뉴에서 플랫폼으로 이동하여 개발환경에 맞는 환경을 세팅해준다

 

 

나는 웹사이트에서 카카오지도를 사용할 것이므로 Web 플랫폼 등록을 하였다

안드로이드, iOS 어플에 지도를 적용하려면 각각 Android, iOS 플랫폼 등록으로 진행하면 되겠다

 

 

 

 

그러면 이렇게 사이트 도메인 입력창이 뜬다

 

도메인이 없는 경우, ip 주소만 입력해도 되고

도메인을 구입한 경우 도메인 주소를 입력하면 된다

 

i.e.) 네이버의 경우, www.naver.com을 입력해주면 된다

 

+만약 localhost에서 테스트를 진행할 경우, localhost에 대한 등록이 따로 필요하다

 

처음에 서버에 업로드 안하고 그냥 로컬에서 테스트를 해봤는데 지도가 뜨지않아서 당황했지만

localhost에 대한 추가를 해주었더니 오류가 해결되었다

 

주의하자

 

 

 

도메인 등록을 마치면

 

 

성공적으로 마쳤다는 기쁜 팝업창이 뜬다

 

 

반응형
반응형

 

 

데이터베이스 공부 겸 MySQL 쿼리문 공부겸 시작해본 SQL 고득점 키트

Level1은 간단하게 작성할 수 있어서 풀어본 문제들을 한꺼번에 올려본다

 

※공부용으로 정리하였으니 오타나 잘못된 사항이 있다면 알려주세요

 

 

1. 모든 레코드 조회하기 - 59034번

 

 

SELECT * from ANIMAL_INS
ORDER BY ANIMAL_ID;

 

모든 필드를 조회하여 SELECT * from 테이블 명을 사용하였고

ANIMAL_ID를 기준으로 조회되어야 하므로 ORDER BY ANIMAL_ID를 사용해주었다

(ORDER BY는 일반적으로 내림차순 조회이다)

 

 

 

2. 역순 정렬하기 - 59035번

 

SELECT NAME, datetime from ANIMAL_INS
order by ANIMAL_ID desc;

 

동물의 이름과 보호 시작을일 조회하므로

NAME 컬럼과 DATETIME 컬럼을 SELECT 해준다

역순으로 정렬은 ORDER BY를 사용하되, 뒤에 desc를 덧붙여준다

 

*영어 단어 ascend descend에서 유래되었다

 

 

3. 아픈 동물 찾기 - 59036번

 

SELECT ANIMAL_ID, NAME from ANIMAL_INS
WHERE INTAKE_CONDITION="Sick" order by ANIMAL_ID

테이블에서 해당하는 조건에 맞는 동물을 찾고, 아이디 순서대로 조회해야 하므로

WHERE절과 ORDER BY를 사용하였다

 

INTAKE_CONDITION 컬럼의 값이 Normal, Sick, Aged가 있는데

아픈 동물은 INTAKE_CONDITION 컬럼의 값이 Sick 이어야 하고,

 

결과를 동물 아이디ANIMAL_ID 순서대로 조회해야하므로

ORDER BY ANIMAL_ID를 사용하였다

 

 

4. 어린 동물 찾기 - 59037번

 

 

SELECT ANIMAL_ID, NAME from ANIMAL_INS
where not INTAKE_CONDITION = "Aged" order by ANIMAL_ID

위와 마찬가지로 어린 동물을 찾아야 하므로 WHERE 조건절을 사용하되, not을 덧붙여서

INTAKE_CONDITION 값이 Aged인 동물을 걸러내준다

 

마찬가지로 아이디 순으로 조회하므로 ORDER BY를 사용해준다

 

 

5. 동물의 아이디와 이름 - 59403번

 

 

SELECT ANIMAL_ID,NAME from ANIMAL_INS
order by ANIMAL_ID

위의 내용들과 겹쳐서 생략

 

 

6. 여러 기준으로 정렬하기 - 59404번

 

 

SELECT ANIMAL_ID, NAME, DATETIME FROM ANIMAL_INS
ORDER BY NAME, DATETIME desc

동물의 이름을 사전순으로 조회하되, 보호 시기가 늦은 동물부터 조회해야하므로

조회하는 조건을 이름에서 보호날짜인 DATETIME을 추가 입력해준다

 

이름은 사전순이므로 order by 디폴트값을 사용하고,

오름차순이어야 하는 datetime은 desc을 덧붙여준다

 

 

7. 상위 n개 레코드 - 59405번

 

 

 

SELECT NAME from ANIMAL_INS
order by DATETIME limit 1

 

출력 데이터의 개수 제한이 필요하므로 limit를 사용한다

가장 먼저 들어온 동물이 필요하므로

조회한 다음, 하나만 출력해야해서 limit 뒤의 제한 숫자는 1로 입력한다

 

 

 

 

 

 

참고 : 

https://programmers.co.kr/learn/courses/30/parts/17042

 

프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

 

 

반응형

+ Recent posts