초보개발자 개발일지

113일차(1)/CSS(12) : 3차원 컨텐츠 만들기(5) *지난 예제 코드리뷰 - container 는 전체 브라우저 폭의 80%로 설정해 둠. - wrapper의 크기는 이 container의 영향을 받는다. - 웹페이지가 resize 되었을때 이 함수를 호출하도록 함! - resize될 때마다 이 곳으로 실행 순서가 들어온다. - 페이지 로딩시점에 init() 으로 한 번 배치하고, resize될 때마다 다시 배치하는 구조이다. - init 안에서는 z축 평행이동값(tz)를 얻어내서 평행이동에 활용하고, angle값은 페이지 로딩시점에 얻어온 값을 활용한다. - rY값(회전량)을 변화시키고 함수를 호출해서 회전시킨다. - 브라우저에서 돌려보면서 검사창에서 변화하는 rotateY 값을 확인할 수 있..

112일차(1)/CSS(11) : 3차원 컨텐츠 만들기(4) - 3d공간을 정의하고, 그 안에 들어 있는 div들을 큐브 형태로 배치함 - 특정 UI를 페이지 로딩 시점에 3차원 transform을 이용해서 3차원적으로 배치해둔 다음, 특정 시점에 부모 요소를 3차원 transform 시키면 배치시켜둔 대로 움직인다. - 마우스를 올렸을 때(특정 시점) 부모 div가 통째로 움직이도록 할 수 있다. - 부모 div에 마우스 hover되었을 때 애니메이션이 적용되도록 한 상태! - 원래는 겹쳐져 있었는데, 200px만큼 z축 방향으로 밀어버린 것이다. - 2번째 div도 90도를 돌리고 200px 을 밀어버린 상태. - 이렇게 겹쳐있던 div를 회전, 평행 이동시켜 정육면체 모양을 만들 수 있다. - 처음..

111일차(1)/CSS(10) : 3차원 컨텐츠 만들기(3) - 3d transform을 하려면 먼저 3차원 공간을 정의해야 한다. - 그러고 나서 이 안에서 3차원 transform을 만든다. - perspective (물체와 관찰자와의 거리), perspective-origin (관찰자의 위치 설정) 설정을 한다. - 어떤 물건을 어디에서 바라보느냐에 따라 관점은 달라질 수 있다. - 이 3차원 공간 안에서 3d transform을 하겠다고 선언하면 된다. - 선언하는 방법은 transform-style 과 transform-origin 을 설정하면 된다. - 이 파란 박스가 3차원 공간이다. 이 안에서 어떤 아이템을 3차원 transform하겠다! - 지정한 개체를 rotateX(45deg) 한 상..

110일차(1)/CSS(9) : 3차원 컨텐츠 만들기(2) - Transform : 개체를 변화시키는 것 (회전, 크기 조절, 비틀기 등...) - Transition : 변화시킬 때 중간 변환과정을 보여주는 것 (애니메이션) - border 속성을 경계선의 굵기(px), 스타일(실선), 색상 지정 등을 따로따로 쓸 수 있는 것처럼, linear도 하나하나씩 따로 작성할 수 있다. - property : 트랜지션을 적용할 수 있는 모든 요소에다가 적용하라는 뜻! - duration : 변환 과정을 얼마 동안 보여줄 것인가(초 단위) - timing function : 변환할 때 중간 과정을 보여주기(보여주는 방식) - ease-in-out : 처음에도 천천히 나중에도 천천히 움직이며 변화함 - 웹에서 숨..

109일차(2)/CSS(8) : 3차원 컨텐츠 만들기(1) - 화면 UI를 만들 때 3D 컨텐츠를 추가하고 싶다면? - 구글에 css 3d transform 검색 *참고 사이트: https://3dtransforms.desandro.com/cube - 3차원 6면체의 형태 - div 요소 6개를 3차원으로 배치해서 이런 입체형 육면체를 만들 수 있다. javascript, css를 결합해서! - 이런 carrousel 도 만들 수 있다 - css3의 transition, transform, 3d transform을 익히면 3차원 컨텐츠를 만들 수 있다. - VS code의 경로를 설정하고 사용할 이미지가 들어있는 폴더를 넣어둠 Step01_Transition.html transition 테스트 - 마우스..

109일차(1)/Android App(73) : 모바일 갤러리 기능 구현(7) - 이전 게시물 참고 2023.03.08 - [국비교육] - 102일차(1)/Android App(67) : 모바일 갤러리 기능 구현(1) - 유틸리티를 사용해 한 작업의 에러 처리 - 유틸리티를 만들어서 쉽게 Http 요청을 보내고 코드를 축약함 - HttpUtil 안에서 UrlConnection객체를 요청해서 요청에 반응해주고 있다. - 응답 코드는 200번이면 정상, 300번대는 리다이렉트 요청, 코드가 400번대이면 요청을 잘못한 것이고, 500번대는 서버 오류이다 - 200번 이외에는 의도적으로 예외를 발생시키고, 메시지를 담아서 응답해주었다. - 모든 종류의 Exception을 아래 catch 블록에서 잡아주고 있다..

108일차(1)/Android App(72) : 모바일 갤러리 기능 구현(6) - 유틸리티로 이미지를 찍어서 원격지 서버에 업로드한다. - 이 유틸리티는 java 코드이므로, 안드로이드 말고도 다른 이클립스 등에서도 사용할 수 있다. - MyHttpUtil의 이 메소드를 사용해서 디바이스 안의 특정파일을 서버에 업로드! - 추가로 업로드할 파일 객체의 참조값을 넣어주면 된다. - 윈도우 안의 파일이라면 이런 경로를 넣어줄 것이고, 안드로이드의 폴더 경로를 전달해주면 업로드 해준다. - 첫 화면은 GalleryListActivity, 사진찍기 클릭시 MainActivity 활성화 - 사진을 찍으면 이 파일 객체를 사용해서 사진을 저장해준다. - onActivityResult에서 이미지를 이미지뷰에 출력해주..

107일차(1)/Android App(71) : 모바일 갤러리 기능 구현(5) - 이전 게시물 참조 2023.03.11 - [국비교육] - 105일차(1)/Android App(70) : 모바일 갤러리 기능 구현(4) - 유틸리티 안에서 알아서 GET방식, POST방식 요청을 해줄 수 있도록 만드는 중! - 쿠키가 이미 존재한다면 수정을 하고, 존재하지 않는다면 새로운 쿠키를 저장 - map을 MyHttpUtil에 전달하면 로그인처리를 실행해주는 구조로 만들었다. - 성공이면 id라는 키값으로 로그인된 아이디를 얻어낼 수 있다. - Spring Boot에서 원격지 서버의 이 메소드에 알아서 요청을 해주는 유틸리티를 만든 것이다. - 현재 로그인했지만 sessionId가 저장되지 않아 계속 로그인 화면이 ..

105일차(1)/Android App(70) : 모바일 갤러리 기능 구현(4) 2023.03.09 - [국비교육] - 104일차(1)/Android App(69) : 모바일 갤러리 기능 구현(3) - Http 요청을 할 유틸리티 생성 - 생성자에서 Context를 받아준다. Activity나 Service를 받아서 사용하면 된다! - 안드로이드 운영체제에는 SQLiteDB가 기본적으로 만들어져 들어있다. - 저 "CookieDB.sqlite" 가 하나의 계정이라고 생각하면 된다. 이 안에 파일, 테이블 등이 들어있다. - 이 계정의 데이터를 SQLiteDB에서 해석하여 사용하는 것! - 이 안에서 진행되는 비동기작업에 대한 리스너 인터페이스를 만들어주었다. - 각각 성공했을 때, 실패했을 때 호출되는 메..

104일차(1)/Android App(69) : 모바일 갤러리 기능 구현(3) - 클릭시 동작할 리스너를 등록했다. - 람다식으로 작성한 것. 리스너에 override할 메소드가 하나인 경우에만 사용할 수 있다! - 람다식으로 쓰면 (parent, view, position, id) 형태로 인자의 타입을 생략하여 쓸 수 있다. - 원래대로 쓰면 이런 구조가 된다. - 익명의 이너클래스를 이용해 인터페이스를 구현한 것 - parent, view, position, id 4개의 인자가 전달되는 메소드가 오직 한개일 때에만! 사용할 수 있다. - 리스트의 특정 아이템을 클릭하면 이 메소드 안으로 실행 순서가 들어온다. - putExtra로 dto를 담아서 intent와 함께 전달한다. - Serializabl..