키티의 코딩공부

Vue 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 선언적 렌더링(Declarative Rendering): Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 수 있습니다. 반응성(Reactivity): Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행합니다. 반응형 데이터 (반응성) : 데이터가 바뀌면 화면도 바뀐다. 타이머함수 콜백을 작성할 때 화살표 함수를 사용해야한다. => 일반함수(function)를 사용하면 정상적으로 작동하지 않는다. => 일반함수에서의 this 는 함수가 '..

타입스크립트 2012년 마이크로소프트에서 발표하였다. 자바스크립트 기반의 정적 타입 문법을 추가한 프로그래밍 언어이다. 정적 타입의 컴파일 언어 자바스크립트(동적 타입) - 런타임에서 동작할 때 타입 오류 확인 타입스크립트(정적 타입) - 코드 작성 단계에서 타입 오류 확인 => ts를 js로 변환 후, 브라우저나 Node.js 환경에서 동작 시켜야함. 자바스크립트와 완벽 호환 대부분의 플러그인, 라이브러리, 프레임워크가 지원된다. 자바스크립트 문법은 당연하게 가지고 있고 추가적인 문법까지 사용가능하다. 타입 종류 - 문자, 숫자, 불린 타입 => string, number, boolean - 객체 타입 => {KEY : TYPE} = {KEY: VALUE} obj 변수는 할당연산자(=)로 {a:0} (..

SCSS - 재활용 @mixin : 재활용 할 코드를 정의하고 필요에 따라서 언제든지 활용 가능 => @mixin 믹스인이름 { 재활용할 스타일 } @include : mixin에 담긴 속성들을 사용할 때 씀 - 매개변수를 만들어 범용화해서 스타일을 재활용 / ($size: 기본값)을 지정해주어야 다른 값을 주었을 때 적용 가능 - if 조건문 삼항연산자 처럼 사용할 수도 있다. - 클래스 선택자, 가상요소선택자 - 중첩 => @mixin에 다른 @mixin을 @include를 사용해 가지고 올 수 있다. - 전개연산자(...)를 사용하여 가변인수 - 전개연산자(...)를 사용하여 리스트 형식 + 보간을 사용해서 확장할 수도 있다. - 키워드 인수 - 특정 스타일 블럭을 추가하여 @content를 통해 ..

CSS - 변수 --변수명: 값; 속성: var(--변수명); 변수를 선언할 때 특정한 선택자 내부에서 변수를 선언한다. 변수들은 선택자의 요소에 종속이 되고 요소의 후손으로 상속이 된다. root 라는 가상클래스선택자는 html 태그 선택자와 동일하고 html태그 내부의 모든 요소에서는 선언된 변수들을 모두 사용할 수 있다. 변수가 선언된 요소에 유효범위를 가진다. container안의 item에만 갈색이 적용된 것을 볼 수 있다. 변수의 재할당 변수의 초깃값 설정 => var(--color-success, orange); --color-success에 지정된 값이 없으면 두번째 인수에 들어있는 값을 사용하겠다는 의미 CSS - @supports 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 ..

Grid Items 1 9개의 cell을 가지는 grid container , grid는 행축, 열축을 기준으로 line을 가진다. 개발자 도구를 통해 grid를 클릭하면 line의 번호를 알 수 있다. grid-row(column)-start(end) : 각 행, 열 의 라인 번호중에 몇 번째 라인에서 시작할 것인지(끝낼 것인지)를 명시 grid-row-start : 2; grid-row-end: 4; grid-column-start : 2; grid-column-end : -1; (음수도 가능) => 아이템의 위치를 어디서 시작해서 어디서 끝낼것인지 정할 수 있다. grid-row(column)-start(end): span 2; 시작 라인을 기준으로 n개의 라인을 확장해서 아이템을 늘리겠다는 의미,..

Float - 수평 정렬 float을 사용하면 container가 정상적으로 작동하지 않는데 옵션(4)을 새로 하나 만들어서 float 해제(clear)를 해야한다. => 비효율적!!! 컨테이너 속성에 overflow 추가 => 넘침을 제어해주는 속성, float과 아무런 관계를 가지지 않는다. 가상요소선택자 after => html에 가상요소를 만들어서 css속성을 추가할 수 있다. clearfix요소의 가상요소 after는 내부의 가장 뒷쪽에 가상의 요소(형제)를 만들게된다. => 컨텐트는 없고, 블록요소로 만들어져서 오른쪽,왼쪽 모두 해제가 가능한 both를 추가함. => clearfix가 부여된 컨테이너에는 float을 사용하는 요소(item)만 들어있어야 한다. @ .container>.item..

무한 스크롤 UI 구현하기 무한 스크롤이란? 컨텐츠를 페이징 하는 기법 중 하나 아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식 인스타그램, 트위터, 페이스북 같은 sns에서 주로 사용 구현 방식 (2가지) window의 scroll 이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즈음에 다다랐는지 체크해서 처리하는 방식 intersection observer 방식 : 브라우저 뷰포트(Viewport)와 원하는 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 아닌지 구별하는 기능을 제공한다. (더 쉽게는 특정 요소가 사용자 화면에 보이는지 안보이는지 판단함) 상황에 따라 무한 스크롤 UI ..

Project Deploy 기본적으로 History API 기반의 SPA를 배포하려면 해당 서비스에서 404 에러에 대해 처리할 수 있는 옵션이 필요하다. 서버에서 직접 호스팅하기 : 가장 자유도가 높고, 난이도도 높다. ✅ 여러 클라우드 업체에서 제공하는서버에서 직접 호스팅 하는 방법 => 아마존 - EC2, 구글 - Google Compute Engine, Azure, naver cloud flatfome, cafe24, iwin, oracle cloud 등등 aws s3 + cloudfront users -> Amazon CloudFront -> Amazon S3 각각의 역할이 있음 S3는 파일만 저장하는 서비스(html, css, js 파일) github pages Firebase(google) ..

🎉 프로그래머스 데브코스에 합격하다. 2023년 8월 졸업을 앞둔 나는 소프트웨어 개발에 대해 관심이 많았고, 타 교육 기관을 통해 짧은 기간 동안 프론트엔드를 공부할 수 있는 기회를 갖게 되었다. 이때부터 프론트엔드에 대해 더 큰 관심이 생겼고 깊게 공부해보고 싶다는 생각이 들었다. 그렇게 현업에서 개발자로 활동하고 있는 강사분들과 탄탄한 커리큘럼을 가진 프로그래머스 데브코스에 이끌려 지원을 하게 되었고 지원서, 코테, 인터뷰 모두 많은 부족함이 있었지만 운좋게 합격을 하게 되었다. 😹 설레임 보다 걱정 데브코스를 시작하기 전 개발 공부를 깊게 해보지 않은 나는 걱정이 앞섰던 것 같다. 그래서 과정 시작 전 무엇을 하면 좋을지 생각하다가 프로그래머스 교육팀에 문의를 남겼다. '처음 지원하셨던 열정과 결..

To do App 만들기 기존 simple todo list 에서 업그레이드 된 TodoApp을 만들 것이다. users api를 통해 사용자 목록을 그리고, 클릭하면 해당 사용자의 todo 목록을 가져온다. 할 일을 추가하면 화면에 추가되고, API 호출을 통해 서버에도 추가된다. TODO를 추가하고 삭제하는 동안 낙관적 업데이트를 사용한다. 서버와 통신하는 동안 서버와 통신중임을 알리는 UI적 처리를 한다. TodoList 컴포넌트 구현 특정 유저의 todo list 불러오기 추가 및 삭제하기 클릭 시, 완료처리하거나 완료처리 취소하기