전체 글26 HTML Forms 1. client-side form validation 이란? client-side form validation은 HTML form 요소와 관련하여, 데이터를 서버로 전송하기 전에 필요한 모든 form의 요소들이 적절한 형식으로 채워졌는지 확인하는 절차를 말합니다. 최초 유효성 체크 과정이자, 이를 통해 사용자가 부정확한 입력을 하면 바로 그것이 잘못됐음을 알려주어 다시 입력할 수 있는 기회를 줄 수 있기 때문에 client-side의 잘 설계된 유효성 검사는 사용자 경험을 증진시킬 수 있습니다. 서버로 데이터가 전송된 뒤 그것이 잘못됐음을 사용자가 받아보려면 데이터가 오고가는 동안 눈에 띄는 시간 간격이 존재할 수 있기 때문입니다. 하지만 이 과정은 악의적인 사용자가 우회하고자 한다면 쉽게 우회가 가능.. 2022. 12. 13. Semantic HTML 작성하기 1. Semantic(시맨틱) 이란? 시맨틱이란 단어의 뜻을 전반적으로 우리 말로 나타내자면 코드 조각에 내포된 의미라고 볼 수 있습니다. 예를 들어 Javascript의 경우, 특정 라인의 JS가 실행됐을 때 어떤 효과가 일어나는지의 의미합니다. 코드를 작성할 때 함수 이름 등을 Semantic을 고려해서 지으면 가독성이 좋고 코드를 이해하기가 훨씬 쉬워집니다. 예를 들어, '복숭아'라는 항목을 가진 HTML 요소를 생성하는 함수를 상상해봅시다. 단순히 build('Peach')라고 함수 이름을 지을 수 있을테지만 createLiWithContent(‘Peach') 라고 작성하면 동작 자체는 똑같을지 몰라도, 코드 실행 효과가 함수 이름에 그대로 나타나게 되어 훨씬 코드를 이해하기 쉽고 보기 좋을 것입.. 2022. 10. 31. HTML 기본 (下) 1. 태그의 경우 문서의 제목을 정의며 그렇기에 내용으로 텍스트만을 가질 수 있습니다. SEO에 굉장히 중요하기때문에 정확하고 의미있는 title을 부여하도록 해야합니다. 태그는 보통 character set이나 페이지 설명, 키워드, 문서의 저자, viewport 세팅을 위해 사용합니다. 브라우저가 내용을 어떻게 표시하고 리로드할지 알려주고 다른 웹서비스나 검색엔진에게 정보를 제공하는 역할입니다. HTML 작성시 뷰포트를 설정하여 모든 기기에서 웹사이트가 잘 보여지도록 해야합니다. 태그는 베이스 URL이나 페이지의 모든 상대 URL의 타겟을 설정합니다. 그렇기에 href속성이나 target속성 둘 중 하나 이상을 반드시 포함해야 하며, 한 문서엔 단 하나의 태그만 존재해야합니다. 2. 뷰포트(Viewp.. 2022. 10. 20. HTML 기본 (中) 1. 주석(Comment) 2022. 10. 19. HTML 기본 (上) 1. HTML이란? HTML이란 Hyper Text Markup Language의 줄임말로, 웹페이지를 만들기 위한 표준 마크업 언어입니다. 쉽게 말해 웹 페이지의 구조를 설명하기 위한 언어로, HTML 파일은 일련의 요소들(elements)로 구성되어 각 요소들은 브라우저가 어떻게 콘텐츠를 나타낼지 알려줍니다. 1989년에 Berners-Lee가 www를 발명한 후 1991년에 HTML을 발명, 2014년부터 HTML5가 W3C의 권장 표준이 되었습니다. HTML 문법은 시작태그 - 요소 내용 - 종료태그로 구성되며 중첩이 가능합니다. 아래는 HTML파일의 예시입니다. 첫 번째 제목 첫 번째 문단 은 해당 문서가 HTML5 문서임을 알려줍니다. 이 태그는 페이지의 최상단에 단 한번만 등장합니다. 태그는.. 2022. 10. 19. You Don't Know JS : 타입과 문법, 스코프와 클로저 카일 심슨 지음 | 컴퓨터/IT | 282페이지 | 2022.06.20 - 2022.08.04 [ 책을 읽게 된 동기 ] 대학에서 수업을 듣고 개발자로 취업하여 프론트엔드 개발을 하는 동안 Javascript는 구현을 위해서 원하는 정보만 찾아서 배우고 가져다 쓰기 바빴지 언어 그 자체에 대해서 깊숙이 알고자 한 적은 없는 것 같았다. 그래서 프론트엔드 개발자라면 가장 많이 쓰는 프로그래밍 언어인 Javascript에 대해 잘 알아야하지 않겠나 싶었고, 그런 기본기가 탄탄한 프론트엔드 개발자가 되고자 그동안 외면해온 Javascript라는 언어의 본질에 대해서 파헤쳐보고자 그 첫 발걸음으로 이 책을 읽게 되었다. [ 인상 깊은 구절 혹은 내용 ] 이 책에서 다루는 주된 내용은 Javascript의 타입과.. 2022. 9. 26. React v18.0 - 이전 버전과의 차이점 리액트 개발자들에게 올해 3월은 꽤나 큰 이벤트가 있었던 달이었습니다. 바로 리액트 18버전이 릴리즈되었기때문인데요. 그 이전 버전들의 릴리즈보다 이번 18버전의 릴리즈는 달라지는 점도 많고 앞으로의 리액트의 발전에 대해 기대를 더 가지게 되는 변경사항들이 특히 많았는데요. 어떤 부분들이 18버전에서 새롭게 등장하고 바뀌는지 한 번 간략하게나마 알아봅시다. 1. 리액트란? 먼저 리액트의 개념에 대해 잘 모르시는 분들을 위해 리액트에 대해서 간단히 소개해드리겠습니다. 네트워크와 브라우저, 웹 개발 기술이 발전하며 웹페이지들은 갈수록 복잡해지고 동적으로 변화하고 있습니다. 이 과정 속에서 수 많은 이벤트 핸들러와 DOM의 관계가 그 변화와 함께 더 복잡해졌습니다. 이를 해결하기 위해 Ember, Backbo.. 2022. 9. 22. Code Push를 이용한 React Native 인앱 업데이트 Part.2 Part.1에서는 코드푸시란 무엇이고 왜 사용하는지, 어떤 원리로 동작하는지 등에 대해서 알아보았습니다. Part.2에서는 본격적으로 코드푸시를 어떻게 사용할 수 있는지 그 방법에 대해서 다뤄보겠습니다. (Part.1 : https://dong-x2.tistory.com/9?category=1062440 ) Code Push를 이용한 React Native 인앱 업데이트 Part.1 회사에서 React Native로 개발을 하며 사소한 업데이트나 긴급한 hotfix의 경우 마켓 심사를 거치지 않고 바로 사용자에게 변경사항을 반영하고 싶다는 기획의 요청이 있어서 이에 대응하기 위해 Micr dong-x2.tistory.com 실제 운영중인 앱에 코드푸시 기능을 넣으면서 여러모로 헤맨 기억이 있는데 저처럼 .. 2022. 9. 22. Code Push를 이용한 React Native 인앱 업데이트 Part.1 회사에서 React Native로 개발을 하며 사소한 업데이트나 긴급한 hotfix의 경우 마켓 심사를 거치지 않고 바로 사용자에게 변경사항을 반영하고 싶다는 기획의 요청이 있어서 이에 대응하기 위해 Microsoft의 Visual Studio AppCenter에서 제공하는 기능중 하나인 Code Push를 이용해서 In-app 업데이트를 제공한 경험있는데요, 이를 바탕으로 이 Code Push란 무엇이고 어떻게 쓸 수 있는지에 대해 공유해보고자 합니다. 이 글인 Part.1에서는 SDK설정 등 Code Psuh를 사용하는 자세한 방법보다는 Code Push가 무엇이고 어떻게 동작하는지 등 개념적인 이야기를 먼저 하고 Part.2에서 그 자세한 방법에 대해 다뤄보겠습니다. 1. React Native 앱.. 2022. 9. 22. 호스팅(Hosting)이란? 1. 호스팅이란? 인터넷에서 사용자가 웹사이트에 접속하기 위해선 해당 웹사이트를 자신의 브라우저로 내려받을 수 있게 해줄 서버 컴퓨터가 존재해야하는데, 그러한 서버 컴퓨터를 개인이 갖고 있지 않아도 되도록 서버를 임대해주는 사업을 호스팅 서비스라고 합니다. 보통 웹사이트를 인터넷상에서 접근가능하도록 해주는 컴퓨터와 네트워크 인프라로 구성되어 있습니다. 호스팅은 고도로 보안적이고 특정한 목적으로 만들어진 거대 시설인 데이터 센터에 존재하는 서버 컴퓨터에 의해 동작됩니다. 데이터센터는 온도조절, 백업 시스템, 방화 장치, 수준 높은 보안과 함께 네트워크 자원과 파워풀한 전원 연결을 제공합니다. 이 덕분에 웹사이트가 항상 인터넷에서 서비스될 수 있는 것입니다. 호스팅 서비스 업체는 보통 이외에도 이메일 서비스.. 2022. 9. 21. 이전 1 2 3 다음
