TJL(Today Jinju Learned)

멋쟁이사자처럼 프론트엔드스쿨 6기 1일차 첫날이라 오티를 진행한 후 영상 강의를 시청했다. 멋쟁이사자처럼 대표이사 이두희가 html/css 강의를 해주셨다! 강의내용은 > 1. html/css배워야하는 이유 html 기초 작성 방법 css 사용법/기초 ... 강의를

오늘 수업은 슬비쌤이 강의를 진행해주셨다.저번 프론트엔드 스쿨 설명회 때 잠깐 봽고 오랜만에 보니 반가웠당🤭VS Code, nvm, Git 설치 및 오류 해결Git 최초 설정 및 VS Code 최초 설정Git - CLI로 컴퓨터와 의사소통하는 방법Git을 설치하고 나

강의 내용 >1. 웹표준과 웹접근성 git branch 생성 git merge ... 시멘틱 마크업에 대해 알아보고 정리하기 읽어보기 링크텍스트 git checkout -b [브랜치명] 만들자 마자 스위치

깃클론 후 git checkout -t origin/training 원격브래치 복제하기 원격저장소 바꾸기 복제 받은 곳별칭 바꾸기 오리진은 원본이름 업스트림은 바 꿀 이름 git remote rename origin upstream 선생님이 한 거 보고싶을때 h

정의형리스트하이퍼 링크인용문과 줄바꿈어휘 관련 요소텍스트레벨 요소address 요소픽쳐와 소스 요소비디오와 소스 요소아이프레임 요소이미지맵 요소테이블 관련 요소폼 관련 요소정해진 바는 없으나 사용자한테 이해가 어려울 수도 있으니 1대1로 사용테이블로 구성할 수 있지만

강의 내용 인터렉티브 요소 암묵적인 레이블링(implicit labeling)은 HTML 폼 요소를 레이블로 묶는 방법 중 하나입니다. 폼 요소에 대한 레이블을 명시적으로 정의하지 않고, 다른 방법을 사용하여 레이블과 폼 요소를 연결합니다. 이를 통해 웹 접근성을 향

강의 내용 > Web Cafe 만들면서 CSS 배우기 플로트를 사용할 때 생기는 문제점 해결 단축속성은 border 이외에도 background, padding, margin 등등.. 있다 마진은 박스가 움직이는게 아니라 빈공간만큼 박스가 늘어나는 것 인라인은 라인

바로 수식을 계산 할 수 있음 폰트사이즈 em 단위와 100분률 사이의 차이가 없지만 패딩 마진에서의 em 단위와 100분률 사이의 차이가 있다 간혹 글자크기보다 라인하이트 값을 작게 줘서 문제 발생 라인하이트 단위를 렘 단위로 했을때 폰트 사이즈가 상

시멘틱 태그에서 한게로 묶을때 자주 사용 랩퍼 그룹 컨테이너 검색창 마크업 border-radius로 곡선처리를 할 수 있음 currentColor - color 값이 없다면 상속 받은 컬러 적용

인라인-블록을 활용한 레이아웃 구현 화면크기에 따라 검색창이 늘어났다 줄어들었다를 구현하고 싶다 인풋창의 display를 확인해보니 인라인-블록이라서 인라인으로 배치 해봤다 를 가로로 배치하고 싶어서 display를 인라인으로 바꿔보았다 바꿨더니 원하는대로 됐지

node.js degit을 활용해서 원하는 폴더만 깃 레포에서 가져오는 법 📌 웹카페를 만들면서 배우는 CSS 🏷️transition을 활용하여 만든 메뉴 슬라이딩 애니메이션 트랜지션 선언하는 방법 🤔 문자를 옮겼을 때 스크롤바가 생기는 문제가 생긴다 ✅ `

📌 웹카페 만들면서 배우는 CSS multi column layout 컬럼 위드로 레이아웃을 쉽게 구성 뷰포트에 따라 변함 c-c는 단의 갯수를 고정 과제 리뷰 padding대신 line-height를 사용해서 글자가 가운데 배치되는 것처럼 꾸밀 수 있음 놓친

노랩일때 얼라인-컨텐츠로 정렬할 수 없음 flex 노랩일때와 정렬할 수 있응 거 알아보기 띄어쓰기와 띄어쓰기 없이 사용되는 CSS 선택자의 차이에 따라 선택되는 요소의 범위가 달라집니다. 이를 통해 선택자가 동작하는 범위를 이해할 수 있습니다. 띄어쓰기로 구분된 선

📌 웹카페를 만들면서 배우는 css flex를 이용하여 item을 양옆으로 정렬하는 법 >🧚🏼내 방식 텍스트가 넘치면 ...으로 표시 👩🏼‍🏫 강사님 방식 🧷data-tooltip 사용자 정의 속성 > data-tooltip을 사용하면 사용자 정의 속

packagr.json 파일이름이 같을 경우 오류발생 정확하게 명시해주면 됨 ![](https://velog.velcdn.com/images/pearlx_x/post/49aee2af-6c80-

@at-root

📖 린팅(Linting)은 코드를 분석하여 잠재적인 오류, 버그, 스타일 가이드 위반 등의 문제를 찾아내는 과정입니다.일반적으로 린트 도구(ex: ESLint, JSLint, Pylint)를 사용하여 소스 코드를 검사하며, 이러한 도구는 프로그래밍 언어에 특화된 규칙

어제 푼 코드를 나름 최적화..? 해봤다. 더 줄일 수 있을거 같은데 생각이 잘 안난다... 변수명 짓기 변수명은 누구라도 알아볼 수 있도록 정의한다. 줄임말은 되도록 사용하지 않는다. Execution Context 자바스크립트를 실행하면 자동으로 글로벌 실행

문은 값을 뱉지 않지만 식은값을 내뱉는다🤤 단락 평가OR||은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이런 프로세스를 단락 평가라고 한다. 단락 평가의 동작 방식은 두 번째 피연산자가 변수

📌nodeType text, comment, span 같은 것들을 노드라고 하는데 노드는 가장 작은 단위이다. 노드는 타입이 존재 하는데 그 타입은 다음과 같다. html태그를 엘리먼트라고 한다 > - ⭐ ELEMENTNODE (1): HTML 요소(태그)를 나타내

✅ 어떤게 더 좋다고 말할 수는 없지만 보통 함수 선언문을 사용하고 콜백함수를 만들 때는 함수 표현식 중 화살표 함수를 많이 사용한다.arguments는 JS 함수 내부에서 사용되는 특별한 객체이다. 이 객체에는 함수에 전달된 인수(argument)를 포함하고 있다.a

함수가 전역으로 선언되고 global excution context 내부의 binding object로 올라가면 function object가 생성된다 그 안에서, environment record -> this Binding -> literal로 올라간다 이렇게

this / prototype

📌class extents에 컨스트럭터를 바꾸지 않으면 super 없어도 되나요? 답변 : yes static 키워드가 붙은 메서드는 클래스 자체에 속하는 정적 메서드입니다. 정적 메서드는 인스턴스 객체에서 직접 호출할 수 없으며, 클래스명을 통해 호출해야 합니

arrayMethod Array.isArray 기존에 사용하던 typeof는 언어가 가지는 오류 때문에 널이나 배열의 타입을 알 수 없었다. 그래서 Array.isArray이 나왔는데 다음과 같이 사용하면 배열의 타입을 알아낼 수 있었다. 하지만 Null은 타입을 알

좋은 방법은 아님 가독성이 떨어지고 유지보수가 어려워짐제일 큰 이슈: 여러 개의 이벤트를 넣을 수 없고 단 하나의 이벤트만 들어감 하나의 함수만 실행할 수 있음onclick은 지양!! 속성으로 넣는 것은 실행 시켜줘야 하고 프로퍼티로 넣는건 실행 시키지 않아도 됨두 개

23.7.25 ajax 모든 웹은 다 동기적으로 작동한다. sync (동기) '직렬적'으로 작동하는 방식을 말한다. >ex) 우리가 무수히 쌓인 메일함에서 2페이지에 있는 메일들을 보고싶은 상황이다. header - 사용자 정보 - 메일목록 - footer로 구성되어

타입스크립트 는 자바스크립트를 포함하지만(전문용어로는 슈퍼셋, 합집합), 자바스크립트는 타입스크립트와 호환이 되지 않는다.그래서 타입스크립트 컴파일러를 사용해서 자바스크립트로 번역(=컴파일)해야 사용할 수 있다.ts-node 는 타입스크립트를 해석할 수 있는 node.

프로그래밍 패러다임 JS - Imperative React - Declarative 명령형 프로그래밍 (Imperative) 명령형 프로그래밍에서는 코드가 일련의 단계적인 명령으로 작성되며, 컴퓨터가 문제를 해결하기 위해 따라야 하는 정확한 작업 순서를 프로그래머가

mount 안에서 render()를 사용할 때 this를 써줘야 한다.스코프에 의해 그냥 사용할 수 있을 줄 알았는데 왜 그런지 궁금해졌다.render 함수가 객체 안에 있기 때문에 render는 인스턴스 메소드이다.인스턴스 메소드는 this를 써야지만 접근이 가능하

리액트 앨리먼트 같은 결과를 출력한다. JSX를 사용한 문법이 훨씬 더 간결하고 코드를 더 이해하기 쉽다. 리액트 앨리먼트 뜯어보기 리액트 앨리먼트는 리액트 애플리케이션에서 UI를 표현하는데 사용되는 객체 리액트 앨리먼트는 가상 DOM(Virtual DOM)의 구성

리버스 후 맵을 하면 될 줄 알았더니 이상한 결과가 나왔?다 리약트에서는 같은 원본을 파고ㅣ 하는 문법을 사용하면 문제가 발생한다. ![](https://velog.velcdn.c

서버와 통신해서 데이터를 가져오고 상태에 따라 화면에 렌더링되는 훅 생성AbortController 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다.AbortController와 그것의 signal은 웹 플랫폼에서 제공하는 기능으로, 네트워크 요청이나 다른