다한의 웹 블로그

전체 글 (85)

프론트엔드와 백엔드 개발자의 역할

웹 개발 정보 다한(dahan) 2020. 6. 16. 09:57

웹 개발자는 크게 프론트엔드와 백엔드 개발자로 구분할 수 있습니다. 뜬금없이 왜 이런 소리를 하는지 궁금해하실 것입니다. 이렇게 구분하는 이유는 서로 같은 웹 개발자지만 하는 일이 달라서입니다. 어떤 일이 다르다면, 사용자에게 노출되는 여부에 따라 나뉘게 됩니다. 프론트엔드와 백엔드 개발자 프론트엔드 개발자는 클라이언트의 업무를 담당하게 되는데 사용자에게 직접적인 부분(홈페이지)이 보입니다. 레이아웃 설정부터 디자인, 사용자 인터페이스까지 담당하게 됩니다. 예를 들어 슬라이드형식으로 나오게 하거나 클릭하면 다른 페이지가 나온다거나 하는 등이 있습니다. 추천 글: 신입 프론트엔드가 알아야 할 역량 백엔드는 서버 부분을 담당하는데 프론트엔드에서 구현한 기능들을 관리하고 클라이언트로 결과를 넘겨주는 역할을 합..

리다이렉트 차단 "사이트 방문 후 다른 화면 나오지 않게 하는 방법"

웹 보안 정보 다한(dahan) 2020. 6. 15. 09:25

인터넷 신문, 웹사이트 방문 후 뒤로가기를 했을 때 다른 화면이 나오는 것을 확인한 적이 있나요? 필자는 이러한 경험을 여러 번 했었습니다. 특히 모바일로 인터넷 신문을 보고 뒤로가기를 누르면 다른 화면이 나오면서 광고가 뜨거나 다른 사이트로 이동하는 것을 확인했었습니다. 이러한 것을 리다이렉트라고 합니다. 리다이렉트는 한 페이지에 접속시 다른 페이지로 넘어가는 것을 말합니다. 만약 정상적인 페이지에 접속 후 뒤로가기나 다른 페이지로 이동하는 검색어 등의 행동을 했을 때 광고만 있는 페이지, 악성코드가 심어진 페이지로 이동하면 개인정보 유출, 개인 PC 악성코드 삽입 등 속수무책으로 당할 수 있습니다. 때문에 웹 브라우저를 통해 미리 차단하는 방법에 대해 알아보겠습니다. 크롬 chrome 브라우저 크롬에..

javascript로 이미지 업로드 및 미리보기 기능 구현하는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2020. 6. 14. 13:26

이번에 간단한 프로젝트를 기획하면서 사진 업로드와 미리보기 기능을 구현하게 되었다. 처음에는 쉬울거라고 생각했지만 막상 하려고 하니 계속 막혔다. 무엇보다 시간을 잡아먹었던건 사진 10장 초과시 업로드를 불가능하게 만드는 것을 구현하는 것이였다. 이 과정에서 IT커뮤니티 사이트 OKKY에 질문을 많이 했었다. 약 2일 동안 이것만 한거 같다. 이미지 업로드 HTML 사진업로드 input 태그에는 file형태와 image만 업로드할 수 있게 설정했다. 또한, 최대 10장까지 업로드할 수 있기 때문에 multiple 속성도 추가했다. 구현하고 싶은 것은 input 태그에 클릭해서 업로드하는 것이 아닌 button 태그를 클릭해서 업로드하고 싶었다. 왜냐하면 input 태그는 CSS 입히기가 쉽지 않기 때문이..

웹퍼블리셔 포트폴리오 준비하는 방법

웹 개발 정보 다한(dahan) 2020. 6. 1. 07:00

대부분 IT회사는 최대한 업무에 바로 투입할 수 있는 경력 있는 사람을 선호합니다. 잡코리아, 사람인과 같은 구직 사이트를 봐도 신입보다는 경력을 선호하는 것을 알 수 있습니다. 그렇다고 신입이 갈 곳이 없다는 것은 아닙니다. 실력을 검증할 수 있는 포트폴리오가 있으면 됩니다. 다만, 포트폴리오를 어떻게 만들었는지가 중요할 것입니다. 이 글에서 웹퍼블리셔 포트폴리오를 어떻게 준비해야 하는지 알아보겠습니다. 회사 업무 성격에 맞게 포트폴리오 준비 자신이 원하는 회사에 들어가기 위해서는 업종과 관련된 포트폴리오를 준비하는 것이 좋습니다. 웹 제작 회사라면 요금제, 포트폴리오, 설명 등의 정보가 들어간 내용을 준비하는 것입니다. 회사가 지금까지 했던 포트폴리오를 보고 비슷한 내용을 준비하는 것이 취업 성공률을..

안드로이드 배터리 절약을 위한 설정 5가지 팁

IT/모바일 다한(dahan) 2020. 5. 30. 09:12

우리는 일상생활의 많은 부분을 스마트폰에 의존하면서 살아가고 있습니다. 이에 따라 불필요한 어플 또는 설정을 통해 배터리가 빠르게 소모되는 모습을 종종 볼 수 있습니다. 이 글에서 안드로이드 배터리 절약을 위한 설정 팁에 대해 알아보겠습니다. 화면 위젯 제거 안드로이드 스마트폰은 디스플레이에 설치된 플 중에 위젯 기능을 지원합니다. 화면에 표시하는 것은 편리하지만, 배터리는 빠르게 소모됩니다. 날씨, 주식 어플 등과 같은 위젯은 인터넷에서 데이터를 가져오기 때문에 배터리가 빠르게 소모됩니다. 백그라운드 어플 끄기 대부분 어플을 실행한 상태에서 다른 어플을 실행하면 첫 번째로 실행한 어플은 백그라운드에서 계속 실행됩니다. 따라서 백그라운드에서도 어플을 끄는 것이 중요합니다. 위치 서비스, 블루투스, NFC..

CSS 가상 요소 before, after 의미

웹 언어 배우기/CSS 다한(dahan) 2020. 5. 29. 07:00

가상 요소 CSS에서 제공되는 가상 요소 중 before 요소와 after 요소를 사용하면 HTML에서 사용하지 않아도 페이지에 내용을 삽입할 수 있습니다. 흔히 사용하는 곳에는 메뉴에서 선을 표시하거나 생성된 콘텐츠가 요소 콘텐츠보다 앞에 혹은 뒤에 위치하기를 원할 때 사용합니다. 사용법 가상 요소를 사용하기 위해서는 필수로 있어야 하는 것이 content입니다. 이것은 문자열, 이미지, 카운터, 공백을 입력할 수 있지만, HTML 코드는 입력할 수 없습니다. 다음의 예를 살펴보겠습니다. See the Pen pseudo element, ::before, ::after by Cho-YoungHo (@choyoungho-web) on CodePen. 문자열의 경우 텍스트를 기준으로 앞에서 나타나게 하려면..

swiper 슬라이드 사용법

웹 개발 정보 다한(dahan) 2020. 5. 26. 07:00

swiper 사용법 웹 제작을 하게 되면 한번 쯤 만나는 것이 슬라이드를 만드는 것입니다. 직접 구현해서 만들수도 있지만 swiper api를 이용하면 조금 더 쉽게 만들 수 있습니다. 슬라이드와 관련된 다양한 예제도 있으니 참고하시면 좋겠습니다. CDN 불러오기 파일 만들기 swiper.css와 swiper.js 파일을 만들어 줍니다. 다른 이름으로 파일을 만들어도 상관없습니다. HTML 기본 레이아웃 Slide 1 Slide 2 Slide 3 원하는 예제 슬라이드 만들기 swiper demos에는 다양한 슬라이드가 있는데 원하는 것을 찾으면 'Source code' 탭에서 코드를 확인할 수 있습니다. 다음은 예제 슬라이드를 가져온 코드입니다. See the Pen How to Use Swiper by..

HTML nav 태그 사용법

웹 언어 배우기/HTML 다한(dahan) 2020. 5. 25. 07:00

nav 태그 현재 또는 다른 페이지로 이동하는 링크를 하나로 묶어 네비게이션 역할을 합니다. 대표적으로 메뉴, 목차 등에서 사용할 수 있습니다. 사용법 리스트1 리스트2 리스트3 예시 금융서비스 노후준비 및 재무상태 추천금융상품 고객이벤트 직접해보기 참고 사이트 nav 태그 설명 MDN

1
2
3
4
5
···
11

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바