본문 바로가기

전체 글140

9. Git, CursorAI, Python flask Git이 무엇인지Git은 코드를 시간별로 저장하고 관리할 수 있게 해주는 프로그램"으로, 내 프로젝트의 모든 변화(수정/추가/삭제)를 기록해준다. 그래서 과거 코드로 되돌리거나, 다른 사람과 동시에 작업해도 충돌 없이 협업할 수 있다는 특징이 존재한다. GitHub가 무엇인지GitHub는 Git으로 만든 프로젝트를 웹에 올려서 다른 사람과 공유하고 협업할 수 있는 공간 및 서비스이다. GitHub 외에도 비슷한 사이트가 존재하는데, GitLab과 같은 기업용으로 자체 서버 설치가 가능한 사이트도 존재한다. 자주쓰는 Git 명령어git add변경할 파일을 저장할 준비를 함git add 파일명git add . # 모든 파일을 준비함 git commit실제로 저장소에 기록을 남김 : 스냅샷 .. 2025. 4. 7.
8. Next.js 저번 글에서 SPA 장점은 웹사이트를 앱처럼 개발한 것이니 아이콘 등을 전부 지원하니 한번 개발하면 끝, HTML 내용을 전체 불러오지 않으니 페이지 이동방식보다 데이터 소모가 적다고 했다 : 하지만, 가장 큰 단점은 검색엔진의 노출이 안되는데, 여기에 SSR이라는 해결방식이 존재한다고 했었다 여기서 SEO(Search Engine Optimization, 검색 엔진 추적)를 알아볼 필요가 있다 : 구글, 네이버 등 다양한 검색 엔진들이 있음 : 이 검색 엔진들은 봇이 존재해서, 매 시간마다 웹사이트 내용을 한 번씩 모두 읽어드린 다음에 그 검색 엔진을 만듦 : 그래서 어떤 키워드하고 매칭되는 게 있으면 해당 페이지 내용을 보여줌 : 그래서 이러한 구글 등이 우리의 웹사이트 내용을 잘 긁어가야 구글 검색.. 2025. 3. 29.
7. React 기초 SPA란 무엇인가?SPA(Single Page Application)란 HTML 페이지에서 동적으로 콘텐츠를 변경하여, 웹 애플리케이션이 앱처럼 동작하도록 하는 개발 방식이다. 먼저 SPA(Single Page Application)를 이해하고 넘어가야함 : 반응형을 저번에 이야기 많이 했음 : 스마트폰 때문에 나왔다고 할 수 있음 : 데이터가 깜빡하면서 바뀌지 않고 자연스럽게 바뀌었음 : 근데 페이지 전체를 로딩할 때, 이동할 때 잠깐 깜빡이는 것을 볼 수 있음 : 웹 개발자는 웹이 앱처럼 작동했으면 좋겠다고 생각함 : 방법? : 백 단의 AJAX 통신으로 데이터 받고 일부분만 바꿔치기 : 앱 같이 보임 : 이러한 일련의 과정을 구현하는 것이 SPA이며, 이 과정에 도움을 주는 Framework에는 .. 2025. 3. 20.
6. JavaScript 기초 (2) 비동기에 대해 배울 것 : 개발 공부 처음 할 때 듣는 언어 절차지향이라는 것이 있을 것 : 한줄한줄 차례대로 해석 : 근데, 게임을 예시로 들면 내가 움직일 때 다른 사람이 못 움직이지 않음 : 이러한 예시를 들었을 때, 소스가 2개 이상 실행될 때를 비동기라고 함 : 이렇게 비동기로 개발을 해야 하는 경우가 생김 : 타자 게임을 제작할 예정인데, 단어 일치 여부를 확인하는 match 소스와 counting 소스 두 가지가 진행될 예정임 h1은 텍스트를 크게 보여줌 : 아래는 초안 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0">.. 2025. 3. 9.
5. HTML/CSS 소스코드 만들어보기 지금까지 배운 기초 개념들을 실제로 사용해 보면서 다시 한번 스스로 이해하기 위해, 간단하게 오른쪽 google.com 페이지의 첫 화면을 카피해 보았다. 2025. 3. 4.
4. JavaScript 기초 (1) 이제 메뉴바 버튼을 누르면 메뉴1, 2, 3이 펼쳐지는 기능을 구현하자 : 메뉴와 아이콘을 안 보이게 먼저 설정할 것 : display none 근데 이 기능 html으로 구현이 될까? : 안됨 : JavaScript 사용 : JS는 근본적으로 DOM을 '조작'하고 싶어 함 : HTML 소스에 있는 태그에 접근해서 어떤 태그 추가, 없애줘라 등 조작을 하는 것 : 즉, JS는 태그를 바꿔 치는 등 여러 동작이 가능하다 JS를 사용하기 위해서는 html 아래 쪽에 태그를 추가 : 여기 안에는 JS 문법만 작성 가능 메뉴바 클릭을 반복할 때마다 active가 생기고, 사라지고가 반복됨 : JS가 DOM 조작함 이제 그러면 id가 menus, icons이면서 class가 active면 display를 fl.. 2025. 2. 27.
3. CSS 기초 html 꾸미기 : CSS 사용 : 어떻게? : CSS 파일 생성해서 불러오기 or head 태그 안에 style 태그를 만들어서 CSS 문법 입력하기CSS 선택자 이해다양한 html 소스가 있을 것인데 특정 부분만을 바꾸고 싶을 때, 어디 부분을 선택할지에 대한 정의하는 것 선택자란? : 다양한 html 소스가 있을 것인데 특정 부분만을 바꾸고 싶을 때, 어디 부분을 선택할지에 대한 정의하는 것 : p 태그를 꾸미고 싶다면 p 적는 식으로이건 p 태그가 모두 red 색상으로 바뀜 : 근데 특정 p 태그만 바꾸고 싶으면 어떻게? : p 태그에 'id'라는 속성값 부여 : id가 thisis인 태그만 바꾸고 싶다 : thisis는 그냥 지은 id이며, 이걸 제대로 쓰려면 #thisis 사용 : id 'th.. 2025. 2. 24.
2. html 기초 , , 를 보면 꺽쇠 안에 단어가 들어가 있는 것을 볼 수 있다 : 꺽쇠 하나를 '태그' 또는 '요소(element)'라고 부른다 : 이 각각의 태그들은 명확한 기능을 갖고 있음이런 식으로 태그마다 고유의 기능이 있음을 이해 : 근데, input 태그 안에 보면 하늘색으로 type이 있음 : 이러한 것을 '속성값' 또는 'attribute'라고 이야기함 : 즉, input이 태그고, type이 input 태그의 속성값이다 라고 이해 : 해당 코드는 텍스트 박스를 만듦 위는 button 태그를 사용해서 버튼을 만든 예시인데, button 태그는 input 태그와 다르게 이라는 것이 뒤에 또 적혀있음 : 이건 닫는 태그이며 '/'를 붙이는 건데, 무슨 차이? : html 태그는 크게 두가지 종류가 있음 :.. 2025. 2. 23.
1. 기초 중요 키워드 웹브라우저가 무엇인가? 웹은 흔히 얘기하는 인터넷 웹 사이트를 의미하며, 이 웹 사이트를 볼 때 사용하는 크롬, 사파리 등의 소프트웨어를 웹 브라우저라고 한다. 웹이란 : 흔히 얘기하는 인터넷 웹 사이트 : 이 웹 사이트를 볼 때 사용하는 소프트웨어를 웹브라우저(크롬, 사파리 등) : 앞으로 크롬을 기준으로 개발할 예정 : 웹 사이트에서 데이터(텍스트, 링크) 등을 만들 때 사용하는 언어를 HTML이라 함. 초창기 웹브라우저를 만든 netscape라는 회사는 단순한 데이터를 보여주기만 하였는데, 가만히 있는 데이터가 아닌 레이아웃을 바꾸는 등의 부가적 기능을 만들고자 함 : HTML로만은 구현할 수 없어서 또 다른 언어인 JavaScript를 만듦. HTML으로 만든 버튼, 이미지 등을 색깔, 모서리 등.. 2025. 2. 20.
41. 클라우드 보안 기초 (2) : 특징, 관련 법령 기존 온프레미스 환경 대비 차이점 및 비교  온프레미스(On-Premise) 환경 온프레미스는 기업이나 조직이 자체적으로 IT 인프라를 구축하고 운영하는 방식이다. 서버, 네트워크 장비, 스토리지 등 모든 장비를 소유하고, 자체 데이터센터에서 관리한다. 특징 완전한 제어권 : 모든 하드웨어와 소프트웨어가 기업 내부에 있기 때문에 보안과 데이터 관리에 대한 통제력이 높다. 높은 초기 비용 : 서버와 장비 구매, 데이터센터 구축, 유지보수 비용이 높다. 유지보수 부담 : IT 전문 인력을 통해 하드웨어 유지보수, 소프트웨어 업데이트, 백업 등을 수행해야 한다. 확장성의 제한 : 자원이 고정되어 있어 갑작스러운 요구 증가에 대응하기 어렵다. //41주차 메모장 클라우드 환경 클라우드는 IT 자원을 필요에.. 2025. 2. 11.
40. 클라우드 보안 기초 (1) : 개념 및 입문, 종류 클라우드의 경우 불과 3, 4년 전만 하더라도 그렇게까지 각광을 받지 않았다.하지만 갑작스럽게 클라우드 관련 직무, 회사, 자격증 시험이 많이 활성화가 되었고,  신설 회사들은 클라우드 쪽으로 환경들을 대부분 구축을 하고 있는 상황이기에 우리가 확실하게 짚고 넘어가야할 영역이라고 볼 수 있다.     클라우드 컴퓨팅  배경 초기에는 기업이나 개인이 데이터를 저장하고 프로그램을 실행하기 위해 온프레미스 서버를 구축해야 했다. 즉, 회사에서 직원들의 이메일을 관리하거나 파일을 저장하려면 큰 서버를 구매하고, 전문 IT 직원이 이를 관리해야한다.  하지만 해당 방식은 아래와 같은 여러 문제가 존재한다. 비용 부담 : 서버 구매, 전기료, IT 인력 고용 등으로 초기 비용이 매우 높다. 유연성 부족 : 더 많은.. 2025. 1. 26.
39. 웹 모의해킹 실습 (6) : XSS(Stored), XSS(Reflected) XSS(Stored, 저장형 XSS)  개념 공격자가 악성 스크립트를 웹 애플리케이션의 서버에 영구적으로 저장하고, 이를 다른 사용자가 웹 페이지를 방문할 때마다 실행되도록 하는 일반적인 형태의 XSS 유형이다. 주로 게시판, 댓글, 프로필 정보 등 사용자 생성 콘텐츠를 저장하는 기능에서 발생한다. 즉, 악성 스크립트가 서버에 저장된 후, 해당 데이터를 불러오는 모든 사용자의 브라우저에서 악성 스크립트가 실행되는 지속적인 공격 유형이다.  열람하는 사용자들은 쿠키를 탈취당하거나 다른 사이트로 리디렉션 되는 등의 공격을 받는다. 실습(Low Level)Stored XSS 실습 페이지의 구성을 살펴보면, 방명록에 이름과 메시지를 남기는 형태이다. 만약 이 메시지를 남길 때, HTML 검증이 이루어지지 않는다.. 2024. 12. 26.

티스토리툴바