3월, 2020의 게시물 표시

JAVA 형 변환(casting), 데이터타입 변환

이미지
JAVA 데이터 타입의 변환 (casting) 메모리에 저장하는 크기 byte < short < int < long < float < double java에서는 데이터 타입을 변환하는것을 casting이라고 한다. 데이터 타입 자동형변환은 upcasting, 데이터 타입 수동현변환은 downcasting 이라고 한다. 정수를 데이터로 가진 변수앞에 int가 아닌 double을 작성하면 에러가 발생해야한다. 하지만 에러가 발생하지않는다.  ex) double a = 1; 왜냐하면 변수명 앞에 double을 적으면 정수 1을 실수 1.0으로 반환하여 결과값을 리턴한다. 이럴경우 잃어버리는 값 즉 값의 손실이 발생하지 않는다. 이러한 현상을 자동 형변환 이라고 한다. 하지만 반대로 ex) int a = 1.1; 이렇게 실수데이터를 가진 변수앞에 정수형데이터타입을 적으면 에러가 발생한다. 앞선 예시에서의 정수의 경우 .0을 붙여줬기 때문에 값에 손실이 발생하지 않는다. 하지만 실수 데이터타입을 정수데이터타입으로 자동으로 변환하면 뒤에 소숫점 0.1의 손실이 발생하게 되므로 오류를 발생한다. 이런경우 명시적 형변환을 해주어야한다. 자바의 경우 변수에 값을 대입할때 오른쪽부터 계산하는데 1.1은 실수로 인식되며 이것을 정수형인 int형 데이터타입에 저장하고자 할 때 앞에 변환하고자하는 데이터 타입을 작성해주면 값의 손실이 발생하더라도 값을 저장할 수 있다. 즉 데이터 손실이 발생하면서 데이터의 타입을 변환하고자한다면 앞에 명시적으로 변환하고자하는 데이터타입을 작성해줘야한다. 괄호 ()안의 데이터타입으로 값을 반환하여 저장한다. 데이터의 손실이 발생하지 않을 경우 java가 자동형변환을 시켜주므로 데이터 앞에 명시적으로 데이터타입을 작성할 필요는 없다. 이렇게 명시적 형변환을 사용해야하는경우는 데이터의 크기가 큰것을 작은 공간에 저장

[JAVA] 연산자 우선순위

JAVA 연산자 우선순위 우선순위 연산자 결합방향 1 [ ] → () . 2 ++ ← -- +(양수) -(음수) ~ ! (type) new 3 * / % → 4 +(더하기) -(빼기) → +(문자 결합 연산자) 5 << → >> >>> 6 < <= → > >= instanceof 7 == → != 8 & → & 9 ^ → ^ 10 | → | 11 && → 12 || → 13 ? : ← 14 = ← java에서는 위에 표대로 연산자의 우선순위가 결정된다.  결합방향도 확인하기!!!

[CSS] 구글 폰트 사용하기(Google Font)

이미지
프로그래밍 공부를 하면서 제일 신경쓰였던 부분이 저작권에 관련된 것이다. 포트폴리오로 웹사이트를 만드려고 이미지를 하나 가져와서 사용하려고해도 저작권에 걸리는게 아닌가 걱정이되었다. 저작권에 문제가 있는지 없는지 확실히 알고싶지만 처음 보는 용어들과 기호들 그리고 복잡한 규정? 들이 나를 힘들게 했다. 폰트(font)도 이미지, 아이콘 등 과 마찬가지로 저작권이 있다. 하지만 이러한 저작권을 덜? 신경쓰고 사용할 수 있는 구글 폰트에대해서 알게 되었다. 구글 폰트   https://fonts.google.com/ 사용법은 간단하다. 위에 해당 사이트로 접속해서 원하는 폰트를 바로 검색하고 아래의 사진에서 드래그한 해당부분의 소스코드를 문서에 복사하고 복사한 소스 밑에 사용규칙대로 사용하면 된다. 그리고 검색할때 카테고리에 국가별 등의 설정을 통해 조금 더 구체적으로 검색도 할 수 있다. 하지만 여기서 주의할점이 있다. 바로 저작권. 구글 폰트는 대부분이 무료이지만 아닌것들도 있다고 한다. 라이센스는 원하는 폰트를 검색한 후 아래와 같이 License 목록을 눌러서 확인할 수 있다. 아파치 라이센스 오픈 라이센스 위에서 보이는것과 같이 두개의 라이센스를 확인 할 수 있다. 이외에도 다른 라이센스가 있을 수 있다. 아파치 라이센스 아파치 라이선스(Apache License) 아파치 소프트웨어 재단에서 자체적으로 만든 소프트웨어에 대한 라이선스 규정이다. 아파치 2.0 라이선스는 누구나 해당 소프트웨어에서 파생된 프로그램을 제작할 수 있으며 저작권을 양도, 전송할 수 있는 라이선스 규정을 의미한다.  아파치 라이선스에 따르면 누구든 자유롭게 아파치 소프트웨어를 다운 받아 부분 혹은 전체를 개인적 혹은 상업적 목적으로 이용할 수 있으며 재배포시에는 원본 소스 코드 또는 수정한 소스 코드를 반드시 포함시켜야 하는 것은 아니고 아파치 라이선스, 버전 2.0을 포함시켜야 하며  아파치 소프트웨어 재단에 개발된 소프트웨어라는 것을 명확하게 밝혀야 한다. 출처 : 위키백과 오

eclipse 자동완성 추천 미작동 오류 해결방법 (eclipse autocompletion)

eclipse 자동완성 추천 미작동 오류 해결방법 (eclipse autocompletion) Eclipse > Preferences > Java > Editor > Content Assist Auto Activation > Auto activation triggers for Java Enter all the characters you want to trigger autocomplete, such as the following: abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ._ 출처: stakoverflow vscode 사용할때 자동완성 추천이 잘 떴었는데 이클립스에는 이러한 기능이 없고 매번 ctrl + spacebar 를 눌러서 명령어들을 확인해야했다. 위 방법대로하면 한단어 한단어 입력시마다 명령어를 추천해준다.

[JAVA] 동작원리

JAVA 동작원리 1. Java Source code.java  👇🏼 (complie) javac 👇🏼  2. Java Application.class ( 바이트 코드(컴퓨터가 읽을 수 있는 코드) ) 👇🏼 (Run) java 👇🏼 3. Java Virtual Machine 👇🏼 (Run) 👇🏼 4. computer  1번은 .java확장자는 java 문법에 맞게 작성된 소스코드이다.  1번의 소스코드는 사람이 이해할 수 있고 사람이 작성한다. 하지만 기계는 직접 이해할 수 없다. 그러므로 기계가 이해할 수 있도록 변환해주어야하는데 그러한 과정을 complie(컴파일)이라고 한다. 이러한 compile(컴파일) 과정은 javac가 수행한다. 2번은 eclipse에서 소스코드를 작성하고 저장하면 자동으로 .class라는 확장자가 만들어지는데 eclipse가  자동으로 컴파일 과정을 대신해주어 생성되며 이 파일이 java application이다.  컴퓨터가 이해할 수 있는 바이트코드로 저장된 상태로 저장되면 .class확장자를 갖는다. 그리고나서 eclipse에서 run을 실행하면 3번 jdk(java development kit)을 설치하면서 같이 설치된 Java Virtual Machine에게 .class 확장자 파일을  읽어서 거기에 적혀있는데로 컴퓨터가 실행하도록 한다.

[Java] 데이터 타입

JAVA 데이터타입 정수 = 10진법    10, 20 ... = 8진법      011 => 9     sysout으로 011 찍으면 숫자 9 출력   ( 0~ 으로시작 ) = 16진법     0x10              sysout으로 찍으면 숫자 16 출력   ( 0x~~ 으로 시작 ) = 2진법      0b1010           sysout으로 찍으면 숫자 10 출력  ( 0b~~ 으로 시작 ) 정수 앞에 ~가 오는 경우에는 음수표현법 진법의 경우 결과값 앞에 표현법을 입력해주어야 제대로된 값을 출력한다. 실수 =저장크기 => 4byte   10.5f =저장크기 => 8byte   10.5 소수점 8자리까지 4바이트  소수점16자리까지 8바이트 1바이트 = 8비트 메모리를 적게 사용하려면 뒤에f를 작성 (대소문자 상관없음 f, F 둘다 사용가능) 문자 = ' ' => 한글자만 저장 문자열 = " " => 여러글자 저장 ASC (아스키코드) c언에서 사용 =====> 1byte Unicode 자바에서 사용 ====> 2byte UTF-8  ===> 1byte로 저장하던 글자들을 2byte로 저장하도록 변환 시켜준다. 기본 문법 대소문자 구분하기 => 라이브러리 ( 클래스는 대소문자, 메소드는 소문자, 상수는 모두 대문자) 변수 int kor=200; 상수 final int KOR=200; 상수의경우 타입앞에 final작성. 명령문이 끝나면 마지막에 ; (세미콜론) 반드시 작성 데이터의 크기 8 bit (비트) 1 byte 1024 byte (바이트) 1 kilobyte 1024 kilobyte (킬로바이트) 1 megabyte 1024 megabyte (메가바이트) 1 gigabyte 1024 gigabyte  (기가바이트) 1 terabyte 1024 terabyte (테라바이트) 1 petabyte 1024 petabyte (페타바이트) 1 exabyte 1024

img alt와 title 속성 역활

img alt와 title 속성 역할 간단히 설명하면 여러가지 기능들이 있지만 검색엔진최적화(SEO)를 하기 위해서 사용된다. img의 alt속성은 이미지의 대체문구 역할을 한다. alt는 alternative 대안의 약자이다. 일반적인 웹사이트라면 alt속성이 일반 사람들에게 어떤역할을 하는지 잘 드러나지 않는다.  하지만 이러한 alt 속성은 시각장애인이 음성기반의 소프트웨어로 웹서핑을 할 때 사용되며  웹사이트에 사용된 이미지가 어떤 컨텐츠인지 명시함으로서 스크린 리더가 해당 사진이 무엇인지 장애인에게 내용을 잘 전달해준다. 또한 검색엔진에 사용되어 검색결과를 조금 더 정확하게 도와주며, 사진이 로딩되지 못하고 오류가 발생한 경우 대체 텍스트를 사용자에게 보여준다. 가끔가다보면 사진이 로딩되지 못하고 엑스박스가 뜨는 경우를 볼 수 있다. 이경우 해당 엑스박스 위치에 있는 사진이 무엇인지 alt 속성에 적어두면 사진 로딩오류가 발생하거나 했을 경우 엑스박스 옆에 alt에 적어둔 내용이 표시된다. 또한 컴퓨터가 점점 똑똑해지고 있지만 사람이 올린 이미지 모두를 컴퓨터가 어떤 사진인지 인식하기 어려울 수 있다. 이때 컴퓨터는 alt에 적힌 텍스트를 확인하고 검색시 사용자에게 좀 더 정확한 사진과 자료를 제공하는데 도움을 준다. img의 title속성은 간단하게 말해 이미지의 제목이다.  title 속성을 작성한뒤 이미지에 마우스를 올리면 해당 이미지에 대한 정보가 나타나는것을 볼 수 있다. 즉 title속성의 가장 큰 목적은 웹페이지를 읽는 사람들에게 이미지에 대한 정보를 조금 더 제공하기 위함이다.  결론적으로 alt 속성과 title 속성은 검색엔진최적화(SEO)에 영향을 미치므로 잘 적어주면 검색엔진 최적화에 도움이 된다. 두가지 속성을 잘 적어주면 이를 통해 얻을 수 있는 효과는 1. 검색유입의 증가 2. 웹사이트에 대한 높은 품질의 검색

절대경로(Absolute path)와 상대경로(Relative path)

절대경로와 상대경로 절대경로 가장 위에서 부터 기준으로 출발하는 것이다. 절대경로의 경우 해당 파일까지 도달하기 위해서 거치게되는 폴더들의 경로를 명시적으로 나타내고 있는 것이다.  장점 은 폴더 구성을 눈으로 쉽게 볼 수 있는 반면, 단점 은 서버를 옮기거나 폴더 구성이 바뀔 경우 다시 일일히 재설정을 해줘야하는 번거로움이 있다. ex) http://naver.com/main/sub/abc.html 상대경로 지금 내 폴더를 기준으로 출발하는 것이다. 상대경로의 경우 해당 파일까지 도달하기 위해서 거치게되는 폴더들의 경로를 상대적으로 나타내고 있는 것이다. 간단히 말해서 상대경로란 현재 위치한 곳을 기준으로 해서 그곳의 위치(경로)를 말한다. /   ==>   하위폴더 지정 ./   ==>   현재폴더 지정(동일 폴더) ../   ==>   한 계층 위 폴더 지정 (추가적으로 ../../ 와 같이 작성하면 두단계 상위 디렉토리로 이동한다.) 장점 은 폴더 구성이 상대적으로 지정되어있어 서버를 옮긴다거나 폴더를 옮길때 폴더 별로 재설정이 필요없는 장점이 있는 반면, 단점 은 폴더의 구성을 눈으로 볼 수 없다는 점입니다. ex) ../../abc.html

[React] props.children

App.js import Wrapper from " ./Wrapper " ; import Hello from " ./Hello " ; function App () { return ( < Wrapper > < Hello ></ Hello > < Hello ></ Hello > </ Wrapper > ) ; } export default App ; Wrapper.js import React from " react " ; const Wrapper = ( { children } ) => { const style = { border : " 1px solid black " , padding : " 16px " , margin : " 5px " , } ; return < div style ={ style }> { children } </ div > ; } ; export default Wrapper ; Hello.js import React from " react " ; const Hello = () => { return < div > test </ div > ; } ; export default Hello ; 최상위 태그가 아닌 컴포넌트 사이에 컴포넌트를 작성하면 상위 컴포넌트에 감싸져있는 하위 컴포넌트들은 출력되지 않는다. 컴포넌트 사이에 작성된 컴포넌트를 출력하기 위해서는 props.children을 사용해야 한다. 감싸고 있는 상위 컴포넌트 즉, 부모 컴포넌트는 props.children 으로 컴포넌트 중간에 작성한 컴포넌트들을 받아 올 수 있다. 위 예시에서  Wrapper 컴포넌트가

구글 블로그 페이지 번호 (Blogger number navigation)

http://howsolutionz.blogspot.com/2014/11/how-to-add-numbered-page-navigation-for.html 위 블로그에가서 원하는 테마를 선택해서 복사하기 1. 설정메뉴 -> 테마 -> 맞춤설정 -> HTML 편집 2. CMD + F 눌러서 검색하기 아래 텍스트 ]]></b:skin> 3. 해당 부분위에 선택한 테마 붙여넣기 4. CMF + F 눌러서 검색하기  </body> 5. 아래 텍스트 </body> 태그 바로 위에 붙여넣기 (변수  perPage 등을 조절하여 원하는데로 커스텀 가능)  <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'>   /*<![CDATA[*/     var perPage=7;     var numPages=6;     var firstText ='First';     var lastText ='Last';     var prevText ='« Previous';     var nextText ='Next »';     var urlactivepage=location.href;     var home_page="/";   /*]]>*/ </script>   <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/> </b:if> </b:if> 참조 http://howsolutionz.blogspot.c

switch 문법 알아보기

이미지
switch문은 조건문 대신 사용할 수 있다. 위 사진이 switch문의 기본 형태이다. case는 조건문의 else if와 유사하며 해당 조건과 switch문으로 들어오는 값이 일치할 경우 해당 부분의 코드를 출력한다. 마지막에 작성한 default의 경우 else와 같은 방식으로 동작한다. case에 작성된 조건들과 일치하지 않을 경우 default에 작성된 값이 마지막에 무조건 출력된다. *주의할점 case별로 break가 작성되어있는데 작성하지 않을경우 조건이 만족하는 부분의 작성코드부터 그 이후에 작성된 모든 코드들이 출력된다. 그러므로 break를 꼭 작성할것!  break문을 작성하지 않은 경우 출력값: 

GET vs POST 방식 (비교 및 용도)

GET vs POST 방식 (비교 및 용도) GET 방식 - URL에 데이터를 담아 전송하므로 보안에 취약하다. - query string에 따른 다른 정보를 보여줄 수 있다.(다른사람과의 정보 공유가 가능) - URL의 규격에 따라 길이의 제한이 있어 긴 내용의 컨텐츠를 전송하기에 부적합하다. POST 방식 - URL에 데이터를 담아 전송하지 않기때문에 보안에 좋다.(완벽x) - 서버에 데이터를 같이 보낼 수 있다. ex) 로그인 인증 - 불필요한 정보가 노출되지않는다.  - GET 방식과 달리 용량이 큰 데이터를 전송하는데도 문제가 없다. - 사용자의 개인정보(노출되면 안되는 정보)와 큰 컨텐츠(줄거리 등등)을 전송하는데 적합하다. 주소에 한글이 들어갈 경우 encodeURIComponent 를 사용하고 그 내용을 서버에서 받아서 decodeURICompoent로 디코드 해서 사용한다. expressjs의 경우 기본적으로 GET방식을 지원하며 POST방식을 사용하고자 할 때는 미들웨어인 body-parser를 설치하여 사용해야 한다.

Homebrew(홈브류) 사용하기

Homebrew(홈브류) 사용하기 Homebrew 설치사이트 =>  https://brew.sh/ 홈페이지에 작성되어있는 명령어를 터미널에 입력하여 설치한다. Homebrew는 macOS용 패키지 관리자이다. 터미널(Terminal)에서 명령어를 작성하여 자신이 필요한 프로그램을 설치, 삭제, 업데이트를 손쉽게 관리할 수 있다.  Homebrew를 통해 "cask"라는 패키지를 설치하면 Safari, Chrome, Word 등과 같이 그래픽을 통해 작업하는 프로그램을 설치할 수 있게 해준다. 필요에 따라 설치하기! Homebrew를 사용하기 위한 명령어 정리 ( 터미널(Terminal)에 brew help 입력하면 명령어가 나온다) - brew ~ : 커맨드 라인 프로그램 (c, java, python 같은..) - brew cask ~ : GUI 프로그램 (Safari, Chrome, Word 같은..) brew update : 홈브류 최신버전으로 업데이트 ( 아직 설치하지않은 프로그램의 목록을 최신으로 업데이트 시켜준다. 프로그램 설치전에 필수적으로!? 해야지 최신버전의 프로그램을 받고자할때 문제가 없다.) brew upgrade [프로그램명]: 홈브류에 설치된 프로그램 최선버전으로 업데이트 brew search [프로그램명] : 홈브류를 통해 설치 가능한 프로그램 찾기 brew cask list : 홈브류에 설치된 그래픽을 통해 작업하는 프로그램 목록 (Safari, Chrom, Word와 같은 일반적인 앱) brew cask install [프로그램명] : 프로그램 설치 brew cask remove [프로그램명] : 홈브류에 설치된 프로그램 삭제 brew cleanup : 업데이트 후 필요없는 이전 버전의 패키지 삭제 brew update : 아직 설치하지않은 프로그램의 목록을 최신상으로 업데이트 시켜준다. 프로그램 설치전에 (필수적으로)하면 좋다.

URI 와 URL 차이

URI Uniform Resource Identifier. (자원의 식별자) resource의 식별자이다. 즉, 리소스의 식별은 리소스의 위치를 표시하거나 unique한 이름으로 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스다. URL Uniform Resource Locator. (자원의 위치) resource를 access할 수 있는 위치를 나타낸다. 리소스가 어디에 있는지 알려주는 웹 주소이다. 구성 방식 Protocol(necessary) + Domain Name(necessary) + Port + Path to the file + Parameters + Anchor 구성 방식 설명 Protocol은 네트워크 상에서 브라우저가 데이터를 주고 받기 위한 통신 규약이다. Domain Name은 request를 보내려는 웹서버를 나타낸다.  본래 IP 주소를 사용하였으나 컴퓨터가 아닌 사람이 숫자를 외우기에는 상당히 불편하였다.  그래서 Domain Name을 문자열로 정하고 이를 관련된 ip address로 바꿔주는 DNS가 등장하였다. Port는 웹서버에서 리소스를 얻기 위해 어떤 gate를 사용해야 하는지 명시한다. http는 표준 포트번호는 80번, https 표준 포트번호는 443번인데 웹서버가 프로토콜의 표준 포트번호를 사용한다면 URL에서 port를 작성하지 않아도 접근 가능하다. Path는 Web Server의 리소스 경로이다.  이전에는 실제로 웹서버 상의 파일의 경로를 URL의 Path로 나타냈지만 근래에 와서는 거의 web server에서 file이 위치하는 물리적 경로를 사용하지 않고 추상화된 경로를 사용한다. Anchor가 명시되면 페이지를 로드할 때 html document에서 해당 Anchor가 정의된 곳으로 이동한다. URI / URL 구분하기 ex) URI https://www.google.com/search?q=uri+url+%EC%B0%A8%EC%9D%B4  ex) URL https://www.google.com

디버깅(Debugging) 하는 방법 (VSCode, Chrome)

프로그래밍 공부를 하면서 종종 들어봤던 이야기 중 하나는 "프로그래밍에서 디버깅이 절반이다." 라는 말이었다. 매번 결과 값을 확인 할 때 console.log()를 작성하여 확인하거나, 크롬 개발자 도구에서 나오는 에러 코드를 확인하고 찾아서 해결했는데 디버깅을 배워두면 앞으로 에러를 해결하는데 도움이 될것같다는 생각이 들었고, 내가 작성한 코드가  어떤 순서로 동작하는지 확인하기도 좋다고 생각되어 이번 기회에 공부하게 되었다. 1. VSCode 홈페이지에서도 디버깅(Debugging) 관련한 참고 문서가 아주 잘 정리되어있다. https://code.visualstudio.com/docs/editor/debugging 2. 구글 Chrome Developer 홈페이지에 디버깅 관련해서 참고하기 좋은 문서가 있어서 아래의 링크를 참고했다. https://developer.chrome.com/docs/devtools/javascript/ https://developer.chrome.com/docs/devtools/javascript/breakpoints/ https://developer.chrome.com/docs/devtools/javascript/reference/

[JavaScript] try/catch/finally + throw (에러 핸들링)

이미지
일반적으로 에러가 발생하면 스크립트가 제대로 동작하지 못하게 된다. 이러한 에러를 사람이 완벽하게 예측하여 처리할 수 없기 때문에 try ~ catch 문법을 사용하면 예상치 못한 에러에대하여 대응을 할 수 있다. try ~ catch 문법은 try 와 catch 라는 필수적인 두개의 블록이 존재하며  상황에따라 추가하여 사용할 수 있는 finally 도 존재한다. try { // 수행할 코드 } catch ( error ) { // 에러 핸들링 } try 블럭 내부에 수행할 코드를 작성하고 해당코드가 정상적으로 실행되면 catch 블럭을 건너뛰고 다음 코드를 이어 실행한다. 반면에 try 블럭 내부에 수행할 코드에 에러가 발생하면 try 블럭 내부의 코드 실행이 중단되고 catch 블럭으로 에러에 대한 객체가 인자로 넘어가면서 catch 블럭안에서 에러를 처리할 수 있다. 매개변수 error로 전달되는 에러 객체에는 무슨 문제가 발생했는지에 대한 설명이 담겨있다. 인자로 전달된 error 객체에는 name, message, stack 프로퍼티가 존재한다. 각각의 프로퍼티를 알아보면 error.name : 에러 명칭 error.message : 에러에대한 상세 내용을 담고있는 메세지이다. error.stack : 에러가 발생한 순간의 스택 (디버깅시 사용) try ~ catch 문법은 런타임 환경에서 실행되며 런타임 환경에서 발생하는 Error를 런타임 에러(runtime error) 또는 예외(Exception)라고 부른다. 에러 던지기 throw try ~ catch를 사용하여 예외( Exception )를 잡아낼 수 있지만 에러 종류와 관계없이 동일한 방식으로 에러를 처리해 주기 때문에 디버깅을 어렵게 만든다. 그러므로 추가적인 자세한 정보를 담은 에러를 만들어야 한다, 사용방식은 아래와 같다. throw 'errrorrr' ; // 던지는 것에 타입 제한은 없으나 throw new Error ( 'throw erro