운동과 개발

1. HTTP와 HTTPS의 차이점 차이점 HTTP HTTPS 1. 보안 HTTP 메시지는 일반 텍스트이므로, 권한이 없는 당사자가 인터넷을 통해 쉽게 액세스하고 읽을 수 있다. 따라서 누군가가 네트워크 상에서 데이터를 가로채면 내용을 쉽게 확인할 수 있다. HTTPS는 보안 소켓 계층(SSL 또는 TLS)을 통해 데이터를 암호화하여 전송한다. 이는 데이터의 기밀성을 유지하고, 가로채기를 방지한다. 2. 인증서 인증서를 사용하지 않기 때문에, 서버의 신원을 확인할 수 없다. 따라서 공격자가 중간에 가로채서 가짜 서버로 위장하는 것을 막을 수 없다. 서버 인증서를 사용하여 서버의 신원을 확인한다. 서버 인증서는 신뢰할 수 있는 제3자 기관(CA, Certificate Authority)에 의해 발급되며, ..

0. 들어가며... CSS 의 Flexbox와 grid는 웹 페이지의 레이아웃을 만드는 데 사용할 수 있는 (예시로, float와 비교해서) 비교적 최신 기술이다. (flexbox는 2012년등장, 2017년 10월 17일 Microsoft Edge 브라우저는 CSS Grid 구현을 출시 했다.) flexbox와 grid의 사용법에 대해 자세히 정리된 글들은 이미 많이 있으므로 둘을 비교하며 어떤상황에서 어떤 기술을 사용할지에 대한 고민을 담은 글이고, 이에 대해서는 정답은 없다고 생각한다. 혹시나 flexbox와 grid에 대해 아직 잘 모르겠다면, 제대로 공부해보고 싶다면 아래 사이트(1분코딩) 에 들어가서 천천히 익혀보기를 추천한다. (내가 도움을 많이 받은 사이트이다.) https://studio..

1. 들어가기에 앞서... FOIT 와 FOUT 라는 용어에 대해 알아보자. FOIT (Flash of Invisible Text) 란? 브라우저가 웹페이지가 로드될 때, 웹 폰트가 아직 다운로드되지 않았기 때문에, 일시적으로 텍스트가 화면에 표시되지 않는 현상을 말한다. 특히 대체 폰트가 지정되지 않은 경우 브라우저가 폰트를 렌더링하기 위해 다운로드를 기다리는 동안 발생할 수 있다. FOUT(Flash of Unstyled Text)란? 웹 페이지에서 원하는 글꼴이 로드되기 전에 브라우저에서 기본 글꼴로 표시되는 현상을 의미한다. 이와 같은 폰트 이슈가 생기는 이유는 브라우저 동작에 있어서 폰트 리소스 요청의 경우에는 다른 리소스 요청보다 늦게 처리되기 때문이다. 따라서 웹 사이트를 구성하는 사이에 폰..

1. 크로스 브라우징이란 무엇인가? 2. 크로스 브라우징이란 개념이 생기게 된 이유는 무엇인가? 3. 크로스 브라우징은 어떻게 하는건데? 4.서비스 중에 발생할 수 있는 다양한 호환성에 대한 문제와 해결방법 5. Metatag의 다른 설정 방법 1. 크로스 브라우징이란 무엇인가? 웹 페이지가 웹 브라우저의 종류에 구애받지 않고 제작자의 의도에 맞게 보여지거나 동작할 수 있게 하는 작업이다. 쉽게 말해, 기기가 달라지더라도, 웹페이지가 일관된 서비스를 제공할 수 있도록 해 주는 작업이다. 2. 크로스 브라우징이란 개념이 생기게 된 이유는 무엇인가? 이유를 말하려면 웹브라우저에 대해 이야기할 필요가 있다. 웹 브라우저는 사용자들이 웹 콘텐츠를 이용할 수 있도록 편리한 인터페이스를 제공해주는 소프트웨어이다. ..

1. Web Standards (웹 표준) 은 어떤 필요성에 의해 등장 했을까? 1. 1990년대 초반, 인터넷이 상용화되기 시작하면서 웹 페이지가 등장 2. 당시에는 웹 페이지가 다양한 브라우저에서 동일하게 보이지 않았다. 몇 년전까지만해도 각각의 브라우저가 가지고 있는 장점 혹은 유리한 기능을 부각시키기 위해 경쟁을 목적으로 다른 브라우저와는 호환이 되지 않는 요소들을 사용하기도 했다. 이로인해 생겨난 문제점이 다른 브라우저까지 보여지는 화면이 다르다는 것 그 중에서도 각각의 의미에 맞는 요소의 무분별 이러한 문제는 웹 디자이너들과 개발자들이 웹 페이지를 만들 때 매우 어려움을 겪게 만들었다. 이런 문제점들 떄문에 1994년에 W3C(World Wide Web Consortium)이라는 공식 웹 표준..

1. HTML5 시멘틱 태그에 대하여 알아보자 1-0. HTML5란 무엇일까? HTML은 1993년 HTML 1.0이 팀 버너스리(Tim Berners-Lee)에 의해 고안되어 발표된 이후 해를 거듭하며 HTML은 발전에 발전을 거듭하였다. 그리고 1997년 HTML 3.2 및 HTML 4.0을 개발하면서 W3C에서 HTML의 버전을 관리하기 시작하였다.HTML5는 HTML 4.01과 XHTML 1.0, XHTML 1.1을 계승하는 차세대 웹 기술로 HTML 마크업이 1990년대 초 인터넷에 소개된 이래로 계속적으로 진화를 거듭해 왔다.기존에 존재하던 HTML의 한계를 극복하고, 기존 기술들의 설계를 개선하기 위해 W3C에서 HTML5라는 새로운 기술이 정의되었다.마이크로소프트, 모질라, 애플, 구..

내가 회사를 선택하는 기준 && 그리고 내가 가고싶은 회사 사수 존재여부 , 돈, 회사 서비스에 대한 나의 관심(자체 서비스 회사), 지역, 회사 분위기(수평구조), 이 중에서 가장 중요하게 생각하는것은 들어가고자 하는 회사의 서비스에 대한 나의 관심이다. 굳이 많은 직업중에, 비전공자로서 나를 개발의 세계로 이끈것, 개발자가 되기위해 많은 공부량이 필요하다는것을 알면서도 나를 개발의 세계로 이끈 것은, 만들고자 하는것을 컴퓨터 코딩을 통해 만들 수 있다는 것이다. 이게 나를 움직이게 만든 원동력이다. 프론트엔드 개발자로서, 관심있는 서비스, 제품에 대한 판매, 소개, 직접적인 서비스화면을 만들어 소비자와 소통하는것은 나에게 너무 매력적으로 느껴졌다. 사실 처음에는 내가 사용하는 앱 또는 웹의 회사, 스..

1. 기본 동작 원리 working Directory: 작업하는 파일이 있는 디렉토리 (PC) StageIng Area : Git에 등록할 (커밋) 파일들이 올라가는 영역 (PC) Local Repository : 로컬 Git 프로젝트의 메타데이터와 데이터 정보가 저장되는 영역 (PC) Remote Repository: Github 등의 서비스를 통한 온라인 상의 저장소 (온라인-server) (내 PC 내에서 일어나는일) working directory 에서 local repository로 바로 commit은 못한다. staging Area를 거쳐야 한다. Git에 올리고 싶은 파일들을 staging Area로 올리고, 그파일들을 대상으로 coomit을 통하여 ,local repository(로컬저장소..

[글을 들어가기에 앞서...] 나는 프론트엔드 개발자로 취업을 준비하는 몇개월 공부한 취업준비생이다. 우선 전체적 지식이 상당히 부족하다. 글에 잘못 알고있는 내용도 있을 것이다. '세상은 아는 만큼 보인다' 라는 말에 상당히 공감한다. 이러한 관점에서 공부를 하다보면 생각의 변화가 생길수도? 이 글을 접했다면, 이렇게 생각할 수도 있구나 정도로 가볍게 보자. 혹시,개발자 선배님들이라면 읽어볼만한 블로그도 댓글로 남겨주시면 감사하겠습니다. [서론] 개발자의 종류에는 어떤게 있나? 프론트엔드 개발자, 백엔드개발자, 웹 개발자, 모바일 애플리케이션 개발자 ,게임개발자, 데브옵스 개발자, 데이터 사이언티스트, 임베디드 개발자, 소프트웨어개발자,미들티어개발자 등등 많다. (각 개발자에 대해 궁금하다면 아래 re..

(한줄정리) 문자열을 배열로 만든다. 1. 사용법 split() split(separator) split(separator, limit) 1.1 매개변수 separator(optional) 선택 문자열을 잘라 줄 구분자 (문자열 또는 정규식을 받음) **정규식은 시간내서공부필요 빈 문자열일 경우 각각의 문자가 배열의 원소 하나씩으로 변환된다. limit (optional) 선택 최대 분할 갯수 ( 끊어진 문자열의 최대 개수를 나타내는 정수이다.) 이 매개변수가 전달하면 split()메서드는 주어진 separator이 등장할 때마다 문자열을 끊지만, 배열의 원소가 limit개가 되면 멈춘다. ( 남은 문자열은 새로운 배열에 포함되지 않는다.) 1-2. 반환값 주어진 문자열을 separator마다 끊은 부분..