코딩강의9 vs code 에서 html 한 번에 입력하기 - html 필수코드 자동완성 오늘 코드잇 강의를 듣다가 (나에게는) 대단한 꿀팁 하나를 알게되어 블로그에도 공유하려고 한다. html 파일의 구조를 보면 ,, , 등의 태그를 순서대로 쓰는데, 이런 필수 코드들을 한 번에 자동으로 입력할 수 있는 방법이다. html 필수 코드 한 번에 입력하기 먼저 vs code를 실행하고 새로운 html 파일을 만든다. 그 다음 느낌표(!)를 쓰면 아래에 자동 완성 창이 뜬다. 그 상태에서 그대로 엔터(enter) 키를 누른다. 그러면 오오오오오!!! 자동으로 코드들이 입력된다. 다시 한 번 검토해서 본인의 사이트 상황에 맞게 바꾸어 주어야 하는 부분도 있지만, 필수 코드들을 한 번에 입력할 수 있다니 나같은 코린이들에게는 정말 반가운 꿀팁이다. 그리고 깨알 자랑! 강의를 열심히 들어서 오늘 드디.. 2023. 7. 25. 정규 표현식 - 플래그란? 몇가지 플래그 옵션 소개 정규표현식을 사용할 때, 플래그 옵션 설정에 따라서 갖는 결과값이 완전히 달라진다. 때문에 플래그 옵션 종류를 잘 기억해두었다가 원하는 상황에 맞게 쓰는 것이 중요하다. 플래그 정의 플래그는 정규 표현식에 적용되는 설정을 조정해주는 역할을 한다. 특정 의미를 가진 알파벳을 플래그 사용 위치에 적어주면 그 옵션에 맞는 결과값이 보여진다. 플래그 옵션 종류 g 문자열에서 일치하는 모든 부분을 찾고 싶을 때 사용하는 플래그 옵션이다. g 옵션 없이 사용하면 일치하는 패턴 하나를 찾은 뒤, 정규표현식이 바로 종료된다. i 정규표현식은 기본적으로 대소문자를 구분하는데, 플래그 옵션 i를 사용하면 대소문자 구분 없이 알파벳만 일치하면 선택해준다. m 줄 바꿈이 된 부분도 문장의 경계로 인식해 주는 플래그 옵션이다... 2023. 7. 7. 정규 표현식 - 하위 표현식 하위 표현식이란, 정규 표현식 안에서 특정 패턴을 나타내는 표현식을 하나로 묶어 처리하는 것을 말한다. 하위 표현식은 메타 문자 소괄호()로 나타내며, 아래와 같은 상황에 주로 사용한다. 가독성이 떨어질 때 정규 표현식을 사용할 때, 그 길이가 너무 길어지면 가독성이 떨어지게 된다. 이럴 때 하위 표현식인 소괄호로 묶어주면 표현식이 훨씬 한 눈에 들어와 이해하기 쉽다. 표현식을 반복해야 할 때 하위 표현식 뒤에 수량자를 붙이면, 소괄호 안에 있는 문자열을 반복할 수 있다. 정규 표현식을 훨씬 더 간결하게 표현할 수 있는 것이다. ex) 하위 표현식 ()를 사용하여 ip 주소를 간단하게 나타냄 논리 연산자 or을 사용할 때 문자들 사이에서 논리 연산자 or을 함께 사용할 수 있다. 참고로 or은 | 기호로.. 2023. 7. 6. 정규 표현식 - 수량자 수량자는 문자의 반복 횟수를 설정하는 문법으로, 반복하고 싶은 문자{수량자}의 형태로 사용한다. 반복하고 싶은 문자 부분에는 일반 문자, 집합, 문자 클래스, 메타 문자, 하위 표현식 등이 올 수 있다. 수량자 기본 표현 반복 횟수를 대괄호 안에 넣어서 {n}과 같은 형태로 사용하는 것이 기본이다. ex) 네 자리 숫자가 연속으로 오는 경우를 찾고 싶을 때 \d{4} 외에 아래와 같이 써도 동일한 결과를 얻을 수 있다. [0-9]{4} [0123456789]{4} \d\d\d\d [0-9][0-9][0-9][0-9] [0123456789][0123456789][0123456789][0123456789] 수량자 범위 지정 수량자를 {min,max} 형태로 사용하면 {최소값, 최대값} 사이의 경우를 찾는다... 2023. 7. 4. CLI 전용 에디터 - Vim 사용 방법과 단축키 안내 GUI 환경에서는 파일 종류에 따라 Microsoft Word, VS code, PyCharm, 메모장 등 다양한 툴을 사용해서 파일 내용을 작성할 수 있다. 그런데 CLI 환경에서는 전용 텍스트 에디터를 사용한다. 그 중에서 가장 보편적인 것으로 Vim 이라는 에디터가 있다. Vim의 장점은 엄청 많은 기능과 단축키가 있다는 점이고, 단점은 모든 걸 마우스가 아닌 키보드로 해결해야 한다는 점이다. 나는 오래 전부터 Vim 에디터에 호기심을 가지고 있었기 때문에... 이번 강의 주제가 Vim 이라고 해서 기대를 많이 했다. (감동중) 그럼 이제부터 Vim을 사용하는 방법과 단축키에 대해서 정리해보도록 하겠다. Vim 실행하기 가장 먼저 해야 할 것은 당연히 Vim 실행하기 이다. 터미널을 열고, vim .. 2023. 5. 20. 코드잇 학습일기 Day9. HTML 개념과 구조, 코멘트(주석) 작성 방법 오랜만에 다시 돌아온 코드잇 학습일기~! 2월에 학습일기 챌린지에 참여해서 50,000 네이버 포인트를 받았다. 챌린지가 끝날 줄 알고 있었는데 3월에도 동일한 조건으로 학습일기 챌린지를 진행한다는 사실을 얼마 전에 알았다. 으아, 진작 알았으면 또 참여 하는건데 아쉽...ㅠㅠ 그래서 4월에도 챌린지를 하지 않을까 하는 기대와 그것을 준비하는 워밍업으로 3월 마지막주에 학습일기를 하나 써보기로 했다. 오늘 공부한 내용은 프론트엔드 과정 중 하나인 HTML 핵심 개념 토픽이다. 기초적인 내용이라 부담없이 복습하는 기분으로 듣고, 또 모르는 내용이 나오면 블로그에도 정리해두려고 한다. HTML 의미 HTML은 Hypertext Markup Language의 약자이다. 첫번째 단어인 하이퍼텍스트(Hyperte.. 2023. 3. 27. 코드잇 학습일기 Day8. rejected 상태에서 실행하는 콜백, then 메소드 이해 코딩인강 코드잇의 챌린지 이벤트, 마지막 학습일기 포스팅이다. 회사를 다니며 학습일기를 써야한다는 게 부담스럽게 느껴질 때도 있었지만 그래도 덕분에 하루에 다섯개씩 강의를 들을 수 있었다. 왠지 마지막이라고 하니까 시원섭섭한 기분이 든다. 나중에 회사 업무에 여유가 생기면 꼭 이벤트가 아니더라도 셀프 챌린지를 해봐도 좋겠다는 생각이다. 오늘 공부한 내용은 rejected 상태에서 실행할 콜백을 지정하는 방법과 then 메소드에 관한 것이었다. 자바스크립트를 공부하는 분들을 위해 포스팅으로 정리해 보도록 하겠다. Promise 객체가 Rejected 상태일 때 실행하는 콜백 지정 Promise 객체가 갖는 상태값은 pending, fulfilled, rejected - 총 3개이다. 더 자세히 알고 싶다면.. 2023. 2. 22. 코드잇 학습일기 day5. 자바스크립트 Status Code와 Content-Type 헤더 지난 포스팅에서는 Request(요청)에 대해서 알아보았다. 이번 포스팅에서는 Response(응답)에 대해서 정리해보려고 한다. Response의 구조도 Head, Body로 이루어져있는데, Head에는 Response에 대한 부가 정보가 담겨 있고, Body에는 실제 데이터(주로 JSON 데이터)가 담겨 있다. Status Code란 무엇인가? 웹 브라우저의 개발자 도구 > Network 탭 > 특정 항목 선택 > General 부분에서 Status Code를 찾을 수 있다. Status Code는 우리말로 '상태 코드'라고 한다. 아래 이미지의 경우 Status Code: 200 이라고 되어있는데, 200은 정상 처리를 했다는 의미이다. 만약 정상 처리되지 못했다면 다른 숫자를 보게 된다. 대표적인.. 2023. 2. 13. 코드잇 학습일기 day4. 각각의 Request 보내는 방법 오늘은 출근길에 코드잇 강의를 7개 들었다. 그리고는 '이따가 출근해서 시간날 때 블로그에 학습일기 써야지' 하고 생각했는데, 이것저것 각종 업무들을 처리하다보니 퇴근시간이 10분밖에 남지 않았다. 오늘은 저녁에 일정이 있어서 퇴근시간을 꼭 지켜야 하는 상황... 그래서 각각의 Request 보내는 방법만 간략하게 정리하고, 추가로 알고있으면 좋은 개념들은 다음 포스팅에 다시 쓰는걸로...! GET Request 보내기 이제 GET Request 보내는 방법은 넘나 익숙해서 안보고도 쓸 수 있을 것 같다. fetch('url') .then((response) => response.text()) .then((result) => { console.log(result); }); POST Request 보내기 .. 2023. 2. 9. 이전 1 다음
