전체 글
-
제로베이스 3개월차 회고제로베이스스쿨 20기 2023. 12. 31. 16:07
3개월차 좋았던 점 자바스크립트 관련 실습들을 하면서 토이 프로젝트로 여러 가지 기능등을 구현을 해봐서 너무 좋았습니다 강사님 따라서 만든 계산기, 미니게임, 벽돌 깨지 게임 등 여러 가지 만들어 보았습니다. 따라 치니깐 재미있기도 하고 내가 친 코드들이 구현 되는 것이 기분이 되게 신기하였습니다. 그리고 자료구조/알고리즘을 배우면서 혼 자 코등 테스트를 할 때와는 다르게 설명과 함께 들으니깐 이해가 훨 씬 편했습니다. 2개월차에 작성한 학습 계획표대로 공부하고 있는가 ? 2개월차 작성한 학습 계획표 대로 계획이 제대로 진행이 잘 안됬습니다. 미션과 코딩 테스트는 빼먹지 않고 진행을 모두 하였는데 강의는 생각보다 밀려서 주말에 많이 들었습니다. 자바스크립트 미션을 하면서 매우 어려워서 시간이 좀 많이 필..
-
자바스크립트 Carousel 구현하기Javascript 2023. 12. 31. 15:53
구현을 하기 전에 캐러셀이 무엇인지 알아보자 캐러셀(Carousel)이란 이미지나 카드와 같은 컨텐츠를 쉽게 탐색할 수 있도록 하는 UI 요소이다. 캐러셀 UI의 가장 큰 이점은 각각의 컨텐츠들이 한정된 공간에서도 각각 동일한 크기로 보여질 수 있다는 것이다 자바스크립트로 Carousel 슬라이더 구현하기 1. HTML과 CSS로 뼈대 만들기 1) 사용자가 보게 될 창문 역할을 하며 하나의 엘리먼트 외에는 보이지 않게 가려주는 window 2) 여러 엘리먼트를 내부에 담고 있을 container 3) 각각의 요소를 나타내는 cell 4) 사용자가 동작을 컨트롤 할 수 있게 API역할을 하는 previous 버튼과 next 버튼 변수 생성하고 dom 불러오기 // JS // DOm 불러오기 const CA..
-
팝업 WAI-ARIA 접근성Javascript 2023. 12. 31. 15:27
우선 팝업이랑 WAI-ARIA에 대해서 알아보자 팝업이란? 팝업은 웹 사이트에서 많이 사용되는 요소 중 하나로, 사용자에게 중요한 정보를 제공하거나 상호작용을 유도하기 위해 활용된다. 마우스로 옵션을 선택하거나 특수 기능 키를 누르면 갑자기 나타나는 창이 나타나는 방식이다. 일반적으로 팝업 창에는 명령 메뉴가 포함되어 있으며 명령 중 하나를 선택할 때까지만 화면에 남아 있는다. 그러나 접근성을 고려하지 않을 경우 스크린 리더 사용자나 시각적으로 장애가 있는 사용자는 팝업에 있는 정보를 제대로 파악하기 위해 명확한 설명이 필요할 수 있고, 팝업에 대한 컨트롤이 부족할 경우 상호작용하기 어려울수 있다. 그러므로 WAI-ARIA(Web Accessible Rich Internet Applications)를 활..
-
드래그 앤 드롭(Drag and Drop)Javascript 2023. 12. 31. 15:00
요소의 드래그 가능 여부 드래그 가능 여부는 HTML의 태그에 속성을 추가하여 드래그를 방지하는 방법과 CSS의 요소에 속성을 추가하여 드래그를 방지하는 방법이 있다. HTML의 태그에는 draggable이라는 전역 특성이 있다. 이 특성은 요소의 드래그 가능 여부를 나타내는 열거형 특성으로, 네이티브 브라우저 동작 방식과 HTML Drag and Drop API 모두 통제합니다draggable은 true와 false 두 값 중 하나를 가질 수 있다. CSS에서는 user-drag이라는 CSS 규칙을 사용하여 사용자가 마우스나 터치 입력을 사용하여 요소를 드래그하는 기능을 비활성화할 수 있다. // html의 태그에서 draggable을 true로 설정하는 방법 드래그 가능한 요소 드래그 불가능한 요소 ..
-
infinite Scroll 기법Javascript 2023. 12. 31. 14:22
무한 스크롤(infinite Scroll) 기법이란 무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식입니다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있습니다. 무한 스크롤(infinite Scroll) 장점 사용자 참여 및 콘텐츠 탐색이 쉽습니다. 무한 스크롤이 클릭하는 것보다 더 나은 사용자 경험을 제공합니다. 다음 콘텐츠를 보기 위한 추가 클릭이 필요없고 페이지 로드 시간이 짧습니다. 터치스크린(모바일)일때 더 유용하게 적용됩니다. 화면이 작을수록 스크롤은 길어지기에 모바일 환경에서 콘텐츠를 보여주기 직관적이고 사용하기 쉬운 형식 입니다. 무한 스크롤(infinite Scro..
-
RESTful APIJavascript 2023. 12. 31. 11:39
RESTful API란? HTTP와 URI 기반으로 자원에 접근할 수 있도록 제공하는 애플리케이션 개발 인터페이스이다. 기본적으로 개발자는 HTTP 메소드와 URI 만으로 인터넷에 자료를 CRUD 할 수 있다. REST API를 제공하는 웹 서비스를 RESTful 하다고 할 수 있다. RESTful은 REST를 REST답게 쓰기 위한 방법으로, 누군가가 공식적으로 발표한 것이 아니다3 특징 자원(Resource) : 모든 자원은 고유한 URI로 식별 행위(Verb) : HTTP Method(GET, POST, PUT, DELETE)를 이용해 자원에 대한 행위 정의 표현(Repressntations) : 클라이언트는 서버로부터 받은 자원을 표현을 통해 처리 자기 기술(Self-descriptiveness)..
-
HTTP와 HTTPS 차이점과 HTTPS 적용 방법CS 지식 2023. 12. 30. 23:49
HTTP와 HTTPS의 차이점 HTTP와 HTTPS 차이점을 알아보기 전에 우선 HTTP와 HTTPS가 무엇인지 알아보자. HTTP HTTP(HyperText Transfer Protocol)는 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜이다. 즉, 인터넷에서 하이퍼텍스트를 교환하기 위한 통신규약으로 80번 포트틀 사용하고 있는 상태를 가지고 있지 않는 Stateless 프로토콜이다. 또, 암호화가 되지 않는 평문 데이터를 전송하는 프로토콜이었기 때문에 HTTP로 비밀번호나 개인정보를 주고 받으면 제3자가 정보를 조회할 수 있다는 보안 부분의 취약점이 발생 할 수 있습니다. HTTP와 HTTPS의 차이점 HTTPS(HyperText Transfer Protocol Secure)는 HTTP..
-
[Zerobase] JavaScript 후기제로베이스스쿨 20기 2023. 12. 26. 22:36
1. JavaScript를 공부하면서 느낀점 JavaScript가 HTML,CSS 했을 때보다 너무 어렵다고 느꼈습니다. 확실히 난이도가 거의 상위권으로 가더라구요 2. JavaScript 공부하면서 어려웠던 개념과 이유 어려웠던 개념은 Class랑 함수 용어가 많이 어려웠습니다. 그 이유는 Class 강의는 많이 들었는데 강의에 대한 예시를 많이 해본적도 없고 JavaScript 용어가 어려운 용어가 생각보다 많더라구요 3. 제로베이스 온라인 강의 중 가장 도움이 되었던 강의와 이유 이론부터 실전까지 모든 것을 담을 자료구조/알고리즘 강의가 가장 도움이 됬습니다. 그 이유는 강의 수준이 딱 기본기를 위해서 알려주어서 배우기도 편하고 바로 응용을 할 수 있다는 생각이 들었어요 4. 나만의 공부팁 Java..