IT/SeSAC 15

[새싹x코딩온] 웹 개발자 부트캠프 과정 10일차 정리 | Protocol, Web Server & WAS, URI & URL, Domain, DNS

오늘은 NCP(Naver Cloud Platform)을 통해 직접 서버를 만들고, 공인 IP를 받아 내가 만든 서버에 접속하는 것 까지 진행했다. 무료 크레딧 ₩100,000을 3개월 동안 제공해서 간단한 것은 추후 진행해보려 한다. 예전에 GCP(Google Cloud Platform)을 실습으로 사용한 것을 계기로 클라우드를 공부하고 싶어서 AWS를 간단하게 공부한 경험이 있어서 수업이 크게 어렵지는 않았다. 하지만 네트워크나 클라우드 용어가 친근하지는 않아서 이번 글은 용어와 그 개념에 대한 것을 중심으로 정리해보려 한다. 1. Protocol (프로토콜) Protocol은 결론적으로 규칙, 약속 등을 의미하는 용어이다. 현재 공용 언어가 영어인 것과 같다고 생각하면 된다. 무슨 말이냐면, 한국인과..

IT/SeSAC 2023.08.07

[새싹x코딩온] 웹 개발자 부트캠프 과정 8일차 정리 | jQuery(CDN, 기본 문법, 요소 다루기, 클래스 조작하기, Event)

8일차에는 서서히 쓰이지 않고 있는 jQuery에 대해서 살펴보았다. jQuery는 Javscript 문법을 더 짧지만 기능을 더 담아서 실행할 목적으로 만들어졌다. 확실히 문법이 많이 짧아지고 기능은 많아졌다고 볼 수 있지만, React, vue 등의 등장과 함께 jQuery의 문법이 기존 Javascript의 표준 문법으로 릴리즈 되는 등의 이유로 점점 사용되지 않고 있다고 한다. jQuery의 기본 문법과 중요한 부분에 대해서 알아볼 예정이다. 1. CDN (Content Delivery Network) CDN이라는 기술을 이용해 jQuery를 주로 이용할 수 있는데, 처음에 jQuery를 이용할 때는 '아, 그런가보다'하고 넘어가곤 했다. 하지만 이 CDN이 '콘텐츠 배송 네트워크'라는 뜻을 가지..

IT/SeSAC 2023.08.04

[새싹x코딩온] 웹 개발자 부트캠프 과정 7일차 정리 | 반응형 웹, MediaQuery, CSS 단위, CSS 변수

이번 시간에는 현대 웹 사이트라면 당연하게 고려해야할 반응형 웹과 css를 처음부터 만들 필요 없이 잘 만들어진 부트스트랩에 대해서 학습했다. 1. 반응형 웹 반응형 웹이란 간단하게 말하면 사용자의 디바이스를 고려해 제작한 웹이라고 생각하면 된다. 브라우저의 너비나 높이가 디바이스 혹은 사용자가 조정하면 변할 수 있는데, 이 너비와 높이에 따라 HTML요소들의 크기가 상황에 맞춰(디바이스의 크기) 반응한다는 뜻으로 기억했다. CSS를 %로 설정하면 일단, 기본적으로는 반응형 웹을 만들 수는 있지만, 제약이 너무 크다. 디바이스 별로 혹은 크기별로 요소를 지정하고 싶을 수도 있지 않은가? 그래서 MediaQuery라는 것을 이용해서 원하는 대로 반응형 웹을 제작할 수 있다. 2. MediaQuery 위에서..

IT/SeSAC 2023.08.03

[새싹x코딩온] 웹 개발자 부트캠프 과정 6일차 정리 ② | DOM 요소 다루기(태그 내용 변경, 속성 접근, CSS 지정하기, 요소 찾기/생성/추가/삭제)

저번 글에 이어서 이번에는 DOM요소를 다루는 방법에 대해서 작성해보려고 한다. [지난 글] 2023.07.31 - [IT/SeSAC] - [새싹x코딩온] 웹 개발자 부트캠프 과정 6일차 정리 ① | Javascript forEach(), pass by value/reference, Date객체, querySelector, 유사 배열, DOM 요소 다루기 DOM요소를 선택하거나 수정 및 삭제 하는 등의 직접적인 부분부터 CSS를 새롭게 적용해보는, 혹은 태그 내용을 수정해버리는 작업 등을 다뤄볼 예정이다. 1. 태그 내용 변경 태그의 내용을 변경해버리는 작업이다. 총 3가지 방법이 존재한다. innerHTML() innerText() textContent() 개인적으로는 여기서 innerHTML()은 추..

IT/SeSAC 2023.08.02

[새싹x코딩온] 웹 개발자 부트캠프 과정 6일차 정리 ① | Javascript forEach(), pass by value/reference, Date객체, querySelector, 유사 배열, DOM 요소 다루기

6일차에는 모르는 내용을 많이 배워서 그 만큼 정리해야할 내용도 많아, 글을 쪼개서 작성할 예정이다. 기본적으로 Javascript이며 HTML과 연동하여 HTML값을 가져오거나 요소 자체를 다루는 부분에 대해서 공부했다. 다음 글은 DOM 요소를 다루는 방법에 대해 적은 글이다. 2023.08.02 - [IT/SeSAC] - [새싹x코딩온] 웹 개발자 부트캠프 과정 6일차 정리 ② | DOM 요소 다루기(태그 내용 변경, 속성 접근, CSS 지정하기, 요소 찾기/생성/추가/삭제) 1. forEach() 기본적인 for문과 for ... in문, for ... of문은 알고 있었는데 forEach()문은 상대적으로 헷갈렸었다. 쓰는 법이 앞서 기술한 3가지와는 조금 달랐기 때문인데, 이 기회에 제대로 정..

IT/SeSAC 2023.07.31