FE

Living standard는 직역하면 '살아있는 표준'이다. 간단하게 설명하면 HTML 문법 등을 규정한 표준이라고 생각하면 된다. 문법 HTML 요소는 HTML 태그와 속성으로 구성됨 보통 여는 태그와 닫는 태그 한쌍으로 구성됨 일부 요소는 여는 태그로만 구성됨

ol : ordered list 순서가 있는 목록!ul : unordered list 순서가 없는 목록li : 각 항목들을 나열하는 태그 list item\*\*주의 : <li> 요소는 <ol> 혹은 <ul> 요소 안에서만 사용되어야 하며, <ol

출처 : WENIV DB출처 : 제주코딩베이스캠프실제 사용자에게 보여지는 문서의 컨텐츠를 나타내는 요소 독립적으로 구분하거나 재사용할 수 있는 구획 (어떤페이지에 붙여도 독립적으로 사용 가능할 때 사용!!)일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용하는

유노코딩 인프런 강의 정리 입문자를 위한 반응형 웹 기초 강의https://www.inflearn.com/course/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-%EC%9E%85%EB%AC%B8/dashboard반응형 웹 : 기기나 브

width, height div : 블록레벨 요소 width, heigh를 지정해주지 않으면 default값인 auto로 들어가서 크기가 없음! width:auto !== 100% % vs auto 💡 오른쪽 공간은? >div가 사용가능한 공간 활용가능한 공간

css 적용전 😥 왜 ... min-heigth : 100vh 주면 중앙정렬되는것이지 .........???높이를 안줬었으니까, 콘텐츠 크기만큼만 높이가 잡히는데높이에 100vh를 주면, 높이가 100vh로 되어있으니 그 안에서 중앙정렬이 되게 함!!🥺 근데.. 1

# 💡 구현 전 생각해보기 1️⃣ card 5개, container1개 필요하지않을까? -> 🙆🏻‍♀️ 2️⃣ 'click'시 class 생성해서 css 변경하면되지않을까? 🙆🏻‍♀️ 처음 생각하지 못한 부분 3️⃣ class 생성 후 기존의 active였던

💡 구현 전 생각해보기1️⃣ 1,2,3,4를 나타낼 원 div로 만들기, Prev, Next버튼 만들기2️⃣ ::active로 ---그어주기3️⃣ Prev 클릭시 이전단계로, Next 클릭시 다음단계로

배경이미지 Url을 svg패턴으로 가져올 수 있다! 색상, 투명도 변경가능!유용하게 쓰일 것 같다!https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intentw

무한스크롤이면 dom을 조작하겠고, 스크롤이 가장 마지막을 가르켰을때, 증가?시키게 하면 되지않을까? 뭘 증가시키지?? 구체적으로 뭘?!https://loading.io/https://unsplash.com/documentation🤔 오늘의 궁금점한

🫢 구현 전 생각 API를 이용하는것같은데... 감이오지않는다...! 미디어 스트림을 선택하고 비디오 요소로 전달한 다음 재생하기 selectMediaStream()버튼 클릭이벤트PIP는 라이브러리를 이용해야하나? 라는 생각을 했는데, 내장함수로 구현 가능한점이 새

강의에서는 웹페이지 한페이지를 만들었지만, 정말로 필요한 토글을 이용한 다크모드 기능구현만 해보았다!DarkMode의 핵심인 toggle-switch부분과 main내용 부분으로 나누어 작성하였다.블로그에 게시는 안되었지만, 이미지를 가져올 때 또한 다크모드를 고려줄수

tailwind template, AOS Library 사용법

뮤직플레이어! 재생바와, 전으로 후로 어떻게 구현하지 ??https://www.w3schools.com/tags/ref_av_dom.aspHTML 요소로만 !

왼쪽 상단 nav 클릭시 -> 클래스 추가 및 삭제 -> hide showcontainer 와 nav 로 구성,container에 배경색을 하얀색으로 해주고, body 배경색을 회색으로 해놓음 container에 show-nav시 회전효과를 줘서 가려진 nav바를 보여

문제발생 : blur(70px)시 여백 하얗게 보임blur(70px)시 여백 하얗게 보이는 걸 해결!로딩 화면에서 유용하게 사용될것같다.데이터가 받아와지는 속도와는 어떻게 매칭하지? 이것이 관건일것같다!

div처음 js 하기전 css하기위해이렇게, 화면에 먼저 그려놓고 css 작업후 지우기!먼저 키보드 이벤트 값이 콘솔에 어떻게 찍히는지 확인하기key, code, keyCode 값 확인 후 innerHTML 입력완전쉽다! 어떤 프로젝트에서든 잘 사용될 것같다. 역시 모

toggle 버튼 가져오기Nodelist 를 통해서 Loop 생성 (forEach)click이벤트 생성Toggle the active class on the parent node(.parentNode& classList.toggle())FAQ 작성 뿐만아니라, 토글은

에러발생해결https://ksbgenius.github.io/nodejs/2020/12/13/npm-global-install-solution-permission-denied.htmlnpm init -ynpm i typescript -D : 개발용으로 사용하는

Type System 타입시스템이란? 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 컴파일러가 자동으로 타입을 추론하는 시스템 >TypeScript의 타입시스템이란? 타입을 명시적으로 지정할 수 있다. 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러

TypeScript Compiler

Interfaces

Classes

Generics

couner클래스들을 querySelectorAll로 가져오기1번의 가져온 counters들을 forEach해서 각각 innerText 넣어주기updateCounter() 함수 생성3-1. update해주는 target을 잡아주기3-2. counter.innerText

변하지 않는 기술네트워크, 운영체제, 컴퓨터시스템, 논리학, 대수학느리게 변하는 기술프로그래밍 언어, 프로그래밍 패러다임, 자료구조, 보안, 알고리즘빠르게 변하는 기술프레임워크, 라이브러리, UI, UX, 디자인패턴4가지 프로그래밍 역량 일관성, 유연성, 확장성, 독립

동기비동기관련해서 항상 헷갈렸다.이번에 공부하며 제대로 면접에 답할 수 있도록 준비해본다.그러나! 자바스크립트는 멀티 쓰레드가 불가능한 싱글쓰레드방식만 가능함!!실행순서 : console.log("코드끝") ->taskB -> taskC -> taskA변수나 상수 등

npx create-react-app dailydiary 생성필요없는 기본설정파일 삭제 (✔ 삭제)src폴더 내 DiaryEditor.js컴포넌트 생성 후 App.js 에 연결!DiaryEditor.js컴포넌트 -> 작성자 input, 내용 content, 감정점수

어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정리액트는 단일페이지 SPA방식을 따르면서, CSR방식으로 렌더링한다!https://reactrouter.com/$ npm install react-router-dom@6<Home/>과 같

1. 초기셋팅 2. Assignment 1 - Login ✅ 로그인 컴포넌트를 개발합니다. (최소화 - input 2개, button 1개) 약간의 랜더링 최적화를 고려해주세요. (Hint: Ref 사용) ✅ 로그인 시(ID, PW 입력 후 버튼 클릭) useRef

오늘의 일기장 기능 구현사항 1. 한 줄 입력 처리하기 2. 여러 줄 입력 처리하기 3. 선택박스 입력 처리하기 4. 사용자 입력 데이터 핸들링 하기 5. 일기 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus하기 6. 배열

작고 React스러운: 빠르고 유연한 공유되는 상태데이터 흐름 그래프: 파생 데이터와 비동기 쿼리는 순수 함수와 효율적인 구독으로 관리됨교차하는 앱 관찰: 코드 분할을 손상시키지 않고 앱 전체의 모든 상태 변경을 관찰하여 지속성, 라우팅, 시간 이동 디버깅 또는 실행

리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었다."업데이트를 어떻게 해야 할 지"-> 고민 X -

리액트는 워낙 공식문서가 잘 되었다는 말을 많이들어서, 공부를 제대로 심도깊게 한다면 공식문서를 파해쳐봐야한다! 라는 이야기를 들었다.요즘 프로젝트를 하면서, 점점 더 기초에대한 부족함을 많이 느껴 기초를 쌓고자 시작한 스터디이다!3주간 공식문서를 다 끝장내기가 목표이

생각을 공유하며 프로그래밍을 같이 하는것2명 이상의 사람이 한 키보드, 한 모니터를 가지고 한가지 주제에 대해 같이 개발해나가는 방법네비게이터와 드라이버가 있어서 코드 작성하는 분과 방향을 잡아주는 분이 있는 방식으로 압니당!전체 지도를 보며 목적지에 다다르는 길을 안

React.Component를 확장하는 동일한 이름의 ES6 class를 생성한다.render()라고 불리는 빈 메서드를 추가한다.함수의 내용을 render() 메서드 안으로 옮긴다.render() 내용 안에 있는 props를 this.props로 변경한다.남아있는 빈

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작한다. HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신

시작하기 버튼 클릭!내 애플리케이션에서 + 애플리케이션 추가하기 클릭!앱이름과 사업자명을 입력해주고, 저장!그 후 생성된 것을 클릭해보면!위와 같이 앱키가 생성된다!이후, 왼쪽 NavBar에 카카오 로그인을 클릭!활성화 상태 ON 클릭!OpenID Connect 활성화

나가기 버튼을 클릭시 모달창 열려야함, 그렇다면 저 화면에서 모달창을 열리고 닫히게 해주면 되겠지!먼저, 모달을 구성하는 모달 컴포넌트!크게 보자면,<ModalWrap/> ,<ModalBackGround/>, <ModalContainer/>, 로 구성되

탭 클릭시, 다른 컴포넌트 렌더링 해주는 형태!먼저, 탭이 그려지는 제일 위 컴포넌트에서 tab의 상태를 관리해준다.두개의 탭 밖에 없기에, 탭의 타입을 먼저 지정해주고, clickTab 이라는 함수로 클릭시, tab의 상태를 변경해준다.여기서 localstorage로

onToggle() 로 열었다 닫았다, onOptionClicked()로 value 값 저장!이 부분을 나타내는 박스!드롭다운을 해주는 부분을 scroll을 준다!isOpen 일 때에만 보이는 컴포넌트!