# front end
Vue.js
View ( HTML DOM) : 사용자에게 보이는 화면Model ( JS ) : 데이트를 담는 곳으로, 보통 서버에서 가져온 데이터를 JavaScript Object로 저장ViewModel : View와 Model의 중간 영역으로 DomListener와 DataBin
특정 단어 거르기
현업에서 업무를 진행하다가 고객사의 보안 조치 사항 요청이 왔다.내용은 공격자가 쉽게 추측하기 쉬운 단어(Admin, Master, Manager) 등 사용에 대한 조치이다.즉, 로그인을 할 때 id에 해당 단어들이 포함되면 안된다는 것이다.회원가입을 진행 할 때, 특

[Typescript] 서버에서 주는 데이터를 안전하게 받는법에 대한 고민 (런타임 타입 검증)
Front-end 개발에 있어서 API 통신은 거의 필수 요소라고 생각합니다. 초반엔 경험하지 못하더라도 어느정도 프로젝트를 진행하다보면 백엔드와 통신하는 경우는 무조건 발생하죠.
Ajax
AJAX (Asynchronous JavaScript And XML - 비동기 자바스크립트와 XML) 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것 (XML 뿐 아니라 JSON, HTML, 일반 텍스트 형식 등 다양한 포맷을 주고 받을 수 있다.
서버 사이드 렌더링 - vue.js
Nuxt를 사용한 서버 측 렌더링 단계 1단계 : 브라우저에서 서버로 브라우저가 초기 요청을 보내면 Node.js 내부 서버에 도달 Nuxt는 HTML을 생성하고 실행된 함수의 결과와 함께 브라우저로 다시 보냅니다 (예 : asyncData, nuxtSeverInit,
1주차 Front-E 스터디 TIL
230316 1주차 Front-E 스터디를 진행하였다.하고싶은 공부를 해서 설렜다. 좋으신 분들과 함께 스터디를 하게 되어 더욱 좋은것 같다.1주차로 가볍게 OT를 진행하고 자기소개시간을 가졌다. 많을 것을 얻어갈 수 있을 것 같고 나 자신도 그렇게 노력할 것이다. U
[Web] Web-project . 영화 사이트 만들기 -1 ( Navbar + Footer )
📌 반응형 + 이미지 삽입.navbar-toggler, .navbar-collapse, 및 .navbar-expand{-sm|-md|-lg|-xl|-xxl} 클래스를 사용하여 콘텐츠가 버튼 뒤쪽에서 접히는 시점을 결정합니다. 다른 유틸리티와 결합하여 특정 요소를 언

[PROJECT 2] 서울대병원 모바일앱 API 활용 대시보드
테이블 렌더링시 e.sort에러배열이 아닌 값에 대해 메서드를 호출 했기에 발생한 에러

Type Script 환경에서 AOS 사용하기
프로젝트 시에 매우 유용하게 사용하고 있는 라이브러리 'AOS'스크롤에 따른 애니메이션을 쉽게 구현할 수 있다.공식 GitHub를 따라서 AOS 라이브러리를 설치했다.AOS를 사용하기 위해서 위 코드를 입력했는데,aos server error referenceerror

[vite] vite환경에서 svgr 플러그인 환경 구성 + svg import 트러블 슈팅...
Vite로 환경구성을 해 프로젝트를 진행 중 svgr 플러그인이 잘 작동하지 않는 것을 확인했다... 왜 이러니... 정신 좀 차려봐 ㅜㅜ 이리 저리 경로도 옮겨보고 asset 파일이 잘못되었나 다시 다운로드 받아보기도 하고 삽질을 하다가 답을 찾지 못하고 검색을 했
Javascript 입문 - 006. 실습
console.log를 이용하여 'HelloWorld'를 출력해 보세요.변수 a를 선언하고 변수 a의 값을 2로 만들어 보세요.message를 console.log();를 이용해서 출력해 보세요.console.log안의 빈칸에 알맞는 값을 넣어서 변수 n의 자료형을 출

Javascript 입문 - 005. if , switch , while , for
본 강의는 Programmers의 Hello, JavaScript: 자바스크립트 입문 강의를 기반으로 작성되었으나, 작성자에 의견에 따라 일부 내용이 추가되거나 수정되어 작성된 포스트입니다조건문은 조건식( condition )이 참( true )일 경우 해당 코드 블록

클라이언트 단 에서 최근 검색어 저장하기!(+ expire date 지나면 자동 삭제)
프로젝트를 진행하면서 최근 검색어 최대 50개 7일 지나면 자동삭제 의 로직을 가진 최근 검색어 기능이 필요했다.

Javascript 입문 - 004. 비교/논리 연산자, 문자열 다루기, 배열과 주석
본 강의는 Programmers의 Hello, JavaScript: 자바스크립트 입문 강의를 기반으로 작성되었으나, 작성자에 의견에 따라 일부 내용이 추가되거나 수정되어 작성된 포스트입니다이전 시간에 산술 연산자를 학습했다. 오늘은 매우 자주 사용되는 비교 연산자와 논

💻 TIL 23.03.07
JS에서 모든 함수는 실행될 때마다 함수 내부에 this라는 객체가 추가되는데, 해당 함수 호출 방식에 따라 바인딩 되는 객체가 달라지는 특징이 있다.함수 호출메소드 호출생성자 함수 호출apply/call/bind 호출전역 객체는 모든 객체의 최상위 객체를 의미하며 브