FrontEnd 11

[Web] REST API란? REST API 구성/특징/규칙/RESTful/Http method

REST API REST(Representational State Transfer) API는 개발된 ‘프론트엔드에서 백엔드의 데이터를 가져올 때 가장 많이 사용되는 자원(Resource) 처리 방식 ‘ 입니다. REST API를 따르는 API가 세상에 많이 존재하기 때문에 몇 가지 규칙을 알고 있으면 다른 서비스의 API를 사용하는 것에 거부감을 느끼지 않을 것입니다. REST 구성 REST API는 다음의 구성으로 이루어져 있습니다. 자원(Resource) -URI 행위(Verb) - HTTP METHOD 표현(Representations) REST API는 URI로 자원(Resource)을 요청하여 특정 형태로 표현(Representations)한다는 것과 HTTP METHOD를 적극적으로 활용해 행..

FrontEnd/Web 2022.10.09

[Web] #6 CSS - user agent stylesheet, reset css

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. p, span 태그에 동일하게 display 속성에 block값을 주었을 때 결과에 차이가 있다. p는 위 아래로 margin이 있는데, span은 없다. 그 이유는 브라우저의 기본 스타일링 때문이다. 각 브라우저마다 태그에 대한 기본 스타일링(css 속성과 값)이 있다. 이것이 user agent stylesheet다. 개발자 도구에서 브라우저 태그에 대한 기본 스타일링을 확인할 수 있다. 위에 설정한 값을 보면 p 태그에는 user agent stylesheet가 있는데, span 태그에는 없는 것을 볼 수 있다..

FrontEnd/Web 2022.07.19

[Web] #5 CSS - 단위 px, em, rem, %, vh, vw

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. px 가장 흔히 쓴 단위다. 절대 단위라서 창의 크기를 변경해도 변하지 않는다. 하지만 요즘 반응형 웹페이지를 만드는 것이 중요하기 때문에 상대 단위를 잘 알고 사용해야 한다. 반응형 웹페이지란? 디바이스 별로 화면의 크기에 맞게 페이지의 레이아웃이나 크기가 변경되는 것을 의미한다. 웹브라우저의 창 크기를 늘이거나 줄이면, 페이지를 구성하는 요소들도 그에 맞게 늘어나고 줄어드는 웹페이지를 의미한다. em 부모 태그 기준 반응형일 때 부모 태그와 자식 태그 간의 크기 비율을 유지하면서 변화시키기 위한 것이다. rem ..

FrontEnd/Web 2022.07.19

[Web] #4 CSS - box model, box-sizing

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. 모든 html 요소는 box 모양으로 구성되어 있고, 이를 box model이라고 한다. box model은 html 요소를 margin, border, padding, content으로 구분한다. 앞선 포스팅에서 설정한 width, height값은 content 영역의 크기만을 설정한 것이었다. 어떤 영역의 크기를 설정한 것인지는 개발자 도구(단축키 F12)를 통해 확인할 수 있다. box model이 어떻게 동작하는지 알아야 html 요소들을 잘 표현할 수 있다. padding, border, margin은 상하..

FrontEnd/Web 2022.07.19

[Web] #3 CSS - block element, inline element, display 속성

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. html 태그들은 2가지 종류로 나눌 수 있다. 1. block element: 내용 크기에 상관없이 한 줄을 차지한다. p, div, ul, li, h1-h6 2. inline element: 내용 크기만큼 영역을 차지한다. span, a, img, button 태그가 block인지 inline인지 중요한 이유는 css로 크기를 조절할 때 차이가 있기 때문이다. css 기본 속성들 중 width, height 속성은 block element에만 적용되고 inline element에는 적용하지 못한다. 아무 변화가 ..

FrontEnd/Web 2022.07.18

[Web] #2 CSS - 선택자

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 학교 수업에서 웹에 대해 많이 학습했지만, 직접 웹 개발자로서 프로젝트에 참여하는 것은 처음입니다. 첫 프로젝트에 웹파트장으로 참여하게 되면서 배우고 느낀 점을 기록하려 합니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. 프로젝트에 웹파트로 참여하면서 느낀 점은 css코드 작성에 굉장히 많은 시간을 쓰고 골을 썩인다는 점이다. 또, css를 잘 못 다룬다는 점이다. 여러 페이지의 css를 좋은 코드로 적으려는 노력도 안 해봐서 그런 거라 생각한다. 개념만 알고 좋은 코드를 위해 머리를 쓰며 노력한 적이 없다. 그치만 분명히 css에도 체계가 있으며 좋은 코드..

FrontEnd/Web 2022.07.18

[Web] #1 HTML

해당 카테고리에는 웹에 대한 전반적인 내용을 정리하겠습니다. 학교 수업에서 웹에 대해 많이 학습했지만, 직접 웹 개발자로서 프로젝트에 참여하는 것은 처음입니다. 첫 프로젝트에 웹파트장으로 참여하게 되면서 배우고 느낀 점을 기록하려 합니다. 스스로 개발을 해봐야 비로소 알게 된다는 말이 뭔지 몸소 느끼고 있습니다. 아직 많이 부족하니 지적과 피드백은 언제나 환영입니다. html은 Hyper Text Markup Language의 약자이다. hypertext는 링크이고, mark를 태그라고 생각했을 때, markup은 plaintext 위에 태그로 의미를 부여한다는 것이다. 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저가 알 수 있게 하는 마크업 언어다. html은 태그..

FrontEnd/Web 2022.07.18

[Mobil Software - Android] #4 안드로이드 emulator 실행 오류 - Waiting for all target devices to come online

해당 카테고리에는 전공 과목 모바일 소프트웨어를 들으며 기록하고 싶은 내용을 기록하겠습니다. 앱을 처음 배워보는 학기이며 아직 무지하기에 지적과 피드백은 언제나 환영입니다. 평소와 같이 안드로이드 애뮬레이터를 실행시켰는데 계속 " Waiting for all target devices to come online" 가 뜨고 로딩이 계속됐다. 코드에 문제가 있나 했는데 그건 아니었다. 위 작업을 통해 해당 virtual machine의 데이터가 삭제된다. 이 작업을 통해 오류를 해결할 수 있다. 어떤 프로그램으로 어떤 코드를 작성하든 수많은 다양한 종류의 에러를 마주한다. 근본적인 이유가 뭔지 항상 의문이고 그에 따른 해결책은 매번 숙제다. 하나씩 정리하면서 해결하다 보면 언젠간 내 스스로 문제를 해결할 수..

FrontEnd/Android 2022.05.31