코드잇26 3년째 코드잇으로 온라인 코딩 강의 듣는 중(솔직 후기) 내가 코드잇을 알게 된 건 인스타그램의 코딩동댕 유치원 챌린지에서였다. 귀여운 코드잇 캐릭터 굿즈가 너무 마음에 들었던 나는 홀린 듯 신청을 했고, 챌린지 달성을 위해 열심히 강의를 들었다. 그런데 강의를 듣다 보니 내가 아직까지 듣던 타업체의 강의들과는 많이 달랐다. 이거 쉽고 재밌잖아?나의 직업은 프로덕트 UX/UI 디자이너인데, 직업적 이해를 높이고, 개발자와의 소통을 위해 꾸준히 코딩 강의를 들으려고 노력하고 있었다. 그런데 코딩 강의는 조금 듣다가 갑자기 난이도가 어려워진다던지 아니면 1강부터 너무 심각할정도로(!) 재미가 없어서 번번히 실패를 하고 있었다. 그렇게 나의 끈기와 적성을 탓할 때쯤에 코드잇 강의를 접했는데, 아니 웬걸, 설명도 너무 쉽고 무엇보다 강의가 재미있었다. 특히 다른 업체.. 2024. 6. 5. vs code 에서 html 한 번에 입력하기 - html 필수코드 자동완성 오늘 코드잇 강의를 듣다가 (나에게는) 대단한 꿀팁 하나를 알게되어 블로그에도 공유하려고 한다. html 파일의 구조를 보면 ,, , 등의 태그를 순서대로 쓰는데, 이런 필수 코드들을 한 번에 자동으로 입력할 수 있는 방법이다. html 필수 코드 한 번에 입력하기 먼저 vs code를 실행하고 새로운 html 파일을 만든다. 그 다음 느낌표(!)를 쓰면 아래에 자동 완성 창이 뜬다. 그 상태에서 그대로 엔터(enter) 키를 누른다. 그러면 오오오오오!!! 자동으로 코드들이 입력된다. 다시 한 번 검토해서 본인의 사이트 상황에 맞게 바꾸어 주어야 하는 부분도 있지만, 필수 코드들을 한 번에 입력할 수 있다니 나같은 코린이들에게는 정말 반가운 꿀팁이다. 그리고 깨알 자랑! 강의를 열심히 들어서 오늘 드디.. 2023. 7. 25. 정규 표현식 - 플래그란? 몇가지 플래그 옵션 소개 정규표현식을 사용할 때, 플래그 옵션 설정에 따라서 갖는 결과값이 완전히 달라진다. 때문에 플래그 옵션 종류를 잘 기억해두었다가 원하는 상황에 맞게 쓰는 것이 중요하다. 플래그 정의 플래그는 정규 표현식에 적용되는 설정을 조정해주는 역할을 한다. 특정 의미를 가진 알파벳을 플래그 사용 위치에 적어주면 그 옵션에 맞는 결과값이 보여진다. 플래그 옵션 종류 g 문자열에서 일치하는 모든 부분을 찾고 싶을 때 사용하는 플래그 옵션이다. g 옵션 없이 사용하면 일치하는 패턴 하나를 찾은 뒤, 정규표현식이 바로 종료된다. i 정규표현식은 기본적으로 대소문자를 구분하는데, 플래그 옵션 i를 사용하면 대소문자 구분 없이 알파벳만 일치하면 선택해준다. m 줄 바꿈이 된 부분도 문장의 경계로 인식해 주는 플래그 옵션이다... 2023. 7. 7. 정규 표현식 - 이스케이핑 이번 포스팅에서는 이스케이핑에 대해서 알아보자! 정규 표현식에서 이스케이핑 문자(\)를 추가하면, 메타 문자들을 일반 문자로 사용할 수 있다. 마침표(.)를 선택하고 싶어서 위와 같이 .을 찍으면 메타 문자인 Dot(.)으로 인식하며 모든 문자를 선택하지만, 앞에 이스케이핑 문자를 추가하면 의도한대로 마침표(.)만 제대로 출력된다. 슬래시(/)의 경우 정규 표현식의 시작과 끝을 나타내는 구분 문자로 사용되는데, 마찬가지로 이스케이핑을 하여 슬래시를 선택할 수 있다. 백슬래시(\)도 동일하다. 백슬래시를 두 번 연속으로 입력하면 된다. 2023. 7. 4. CLI 전용 에디터 - Vim 사용 방법과 단축키 안내 GUI 환경에서는 파일 종류에 따라 Microsoft Word, VS code, PyCharm, 메모장 등 다양한 툴을 사용해서 파일 내용을 작성할 수 있다. 그런데 CLI 환경에서는 전용 텍스트 에디터를 사용한다. 그 중에서 가장 보편적인 것으로 Vim 이라는 에디터가 있다. Vim의 장점은 엄청 많은 기능과 단축키가 있다는 점이고, 단점은 모든 걸 마우스가 아닌 키보드로 해결해야 한다는 점이다. 나는 오래 전부터 Vim 에디터에 호기심을 가지고 있었기 때문에... 이번 강의 주제가 Vim 이라고 해서 기대를 많이 했다. (감동중) 그럼 이제부터 Vim을 사용하는 방법과 단축키에 대해서 정리해보도록 하겠다. Vim 실행하기 가장 먼저 해야 할 것은 당연히 Vim 실행하기 이다. 터미널을 열고, vim .. 2023. 5. 20. 디렉토리와 파일 생성하기 - mkdir, touch 터미널에서 파일과 디렉토리를 살펴볼 때에 주로 사용하는 커맨드에 대해서 알아보았다. 이번 포스팅에서는 디렉토리, 파일을 직접 생성하는 방법에 대해서 소개하려고 한다. 디렉토리 생성할 때 mkdir 디렉토리를 생성하기 위해서는 mkdir 이라는 커맨드를 사용하고, argument로 새로 만들 디렉토리명(경로 포함)을 주면 된다. 예제를 통해서 알아보자. 현재 coding_study 디렉토리 안에는 setting, study, text 세개의 디렉토리가 들어있다. 만약 여기에 login 이라는 디렉토리를 추가하고 싶다면 mkdir login 이라는 커맨드를 입력하고 실행하면 된다. 다시 ls 커맨드를 사용하여 내용물을 출력해 보았다. login 디렉토리가 잘 만들어진 것을 확인할 수 있었다. mkdir 뒤에.. 2023. 5. 19. 다른 코드 불러올 때 사용하는 <link>, <script> 태그 코드잇 학습일기 챌린지가 끝났다. 동기부여도 되고 나름 재미있다고 생각했는데, 새로운 공지가 올라오지 않은 것을 보니 5월에는 챌린지를 진행하지 않는 것 같다. 그래도 뭐, 그거랑은 상관없이 앞으로도 계속 블로그에 공부한 내용을 정리해서 올릴 예정이다. 오늘은 다른 코드를 불러올 때 사용하는 링크(link) 태그와 스크립트(script) 태그에 대해서 소개하려고 한다. 외부에서 파일을 불러올 때는 태그는 외부에서 파일을 불러올 때 사용하는 태그이며, 구글 폰트를 적용할 때에도 link 태그를 사용한다. 파비콘을 지정할 때에도 link 태그를 사용한다. favicon.ico 라는 파일을 서버에 업로드 한 후에 해당 경로를 지정해주면 된다. rel 속성에는 icon 이라고 쓴다. html에서 자바스크립트를 .. 2023. 5. 2. 코드잇 학습일기 Day17. 폼 태그 속성, 인풋 태그 종류와 속성 어제는 폼(form) 태그의 구성과 인풋, 라벨, 버튼을 만드는 코드를 공부했다. 오늘은 어제에 이어 폼 태그의 속성, 인풋의 종류 등에 대해서 알아볼 예정이다. 폼 태그의 속성 폼 태그는 action 속성과 method 속성 - 두 가지 속성을 가지고 있다. action 속성 폼에 내용을 입력하고 버튼을 누르면 기본적으로 페이지를 이동한다. 만약 현재 페이지의 주소가 heinafantasy.com 이라고 가정하고, 아이디에 heina, 비밀번호에 1234를 적었다고 하면, 버튼을 눌렀을 때 아래와 같은 주소로 이동한다. http://heinafantasy.com/?id=heina&password=1234 주소를 자세히 들여다 보면, 물음표 이후로 폼에 입력한 값이 들어있다. 이런 것을 쿼리 문자열(Qu.. 2023. 4. 25. 코드잇 학습일기 Day.16 폼(Form) - 인풋(Input), 라벨(Label), 버튼(Button) 오늘의 코드잇 학습일기 시작~ 폼 태그에 관련된 강의였는데, 우리가 흔히 볼 수 있는 로그인, 회원가입 등 페이지와 관련이 많은 내용이었다. 폼(Form) 웹사이트에서 내용을 적는 부분을 폼(Form)이라고 한다. 폼의 구조를 살펴보자면, 가장 먼저 내용을 입력하는 칸을 인풋(Input)이라고 부르며, 각 인풋 옆에 있는 이름을 라벨(Label)이라고 부른다. 그리고 버튼(Button)은 누르면 입력한 데이터를 전송 or 저장하는 역할을 한다. 클래스101의 로그인 화면을 예제로 확인해보도록 하자. 폼(Form)을 만드는 방법 먼저 폼을 만들려면 태그로 감싸 주어야 한다. 그 안에 태그를 넣는다. 미리보기를 실행해 보면 사용자가 내용을 입력할 수 있는 칸이 하나 생긴 것을 확인할 수 있을 것이다. 참고로.. 2023. 4. 24. 코드잇 학습일기 Day15. 아이프레임(iframe) 원래 코딩강의는 되도록 평일에 듣고, 주말에는 휴식에만 집중하는 편인데... 이번 주에는 정신이 없어서 학습일기를 한개밖에 쓰지 못했다. 학습일기 챌린지가 주 2회인데, 주말에 1개를 쓰지 않으면 4월 챌린지를 실패하는 상황이라서, 주말이지만 코딩강의를 듣기로 했다. 아이프레임(iframe) 유튜브에서 공유하기(동영상 퍼가기) 기능을 이용할 때 iframe 으로 시작하는 태그를 확인할 수 있다. 아이프레임은 inline frame 이라는 의미이다. 간단하게 설명하자면 html 문서 안에서 또 다른 html 문서를 보여주는 역할을 한다. 개발자 도구를 열어서 보면 태그 안에는 , , 태그가 모두 들어있는 것을 확인할 수 있다. 이것을 응용하여, 만약 어떤 html 화면에서 다른 html 화면을 불러오고 싶.. 2023. 4. 22. 이전 1 2 3 다음
