공부 기록일지📚

CSS 전처리기가 태어난 배경 CSS의 불필요한 선택자의 과용과 연산 기능 한계, 구문의 부재 등의 고질적인 문제를 개선하기 위해 CSS 전처리기가 등작했습니다. 어찌됐든 웹 표준은 CSS만 이해할 수 있기 때문입니다. CSS Preprocessor(전처리기) 란? Sass(SCSS), Less, Stylus 를 들어보셨나요. 위 종류들은 CSS 전(예비)처리기 입니다. CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 CSS로 동작하지만 우리는 CSS의 불편함을 확장 기능으로 상쇄할 수 있습니다. (Sass는 CSS의 확장이라고 생각하면 됩니다.) 어떻게 사용할까? 전처리기로 직접 웹에서 동작시킬 수는 없습니다. 우선 전처리기로 코드를 작성합니다. 전처리기는 CSS문법과 굉장히 유사 선택자의 중첩(n..

리액트에서는 이벤트를 어떻게 처리할까요? -> 합성이벤트 객체로 래핑해서 사용합니다. 📌이벤트 핸들링에 관련된 자세한 내용은 리액트 데브 문서를 읽어보는 것을 추천합니다. 🔺우선 리액트의 컴포넌트에는 이벤트 설정을 할 수 없습니다. DOM요소(div, form, button 등..)에만 이벤트 설정이 가능하죠. React 합성 이벤트(Synthetic Event) 브라우저마다 이벤트 이름부터 시작하여 이벤트가 처리되는 방식이 다릅니다. 이를 동일하게 처리하기 위해 React는 Synthetic 이벤트로 브라우저마다 다른 native 이벤트를 묶어서 처리하는데 이를 통해 크로스 브라우징 문제를 해결하였죠. (리액트 합성 이벤트는 래퍼 이벤트 객체라고 생각하면 됩니다.) 자세한 내용은 최근에 개편된 리액트 ..

우선 버블링이란 한 요소에서 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 것입니다. 가장 최상단의 조상요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이벤트 버블링이란 간단히 말하면 이벤트가 제일 깊은 요소에서 시작해 부모 요소로 거슬러 올라가며 이벤트를 전파하는 것입니다. 그 모습이 물속 거품과 닮았기 때문에 버블링이라 합니다. 최근에 이 버블링이 적용되는 이벤트가 있고 아닌 이벤트가 있다는 것을 알게되어 정리하게 됐습니다. 알아보니, 거의 모든 이벤트는 버블링이 된다고 나와있습니다. 예를 들어 focus 이벤트는 버블링이 되지 않습니다. 🤍하단에 버블링이 발생하지 않는 이벤트들을 적어두었습니다. event.target..

웹은 안전한 통신을 위해 정보를 암호화한다. 암호화란 일반적인 평문을 알아볼 수 없도록 암호화하여 암호문으로 만드는 과정이다. 개인 정보가 담긴 평문을 암호화하고, 이렇게 만들어진 암호문을 상대방에게 전달하면, 상대방은 이를 다시 복호화하여 원래의 평문으로 열람할 수 있다. 이와 같은 과정을 웹 브라우저와 웹 서버에 사용하는 대표적인 기술이 바로 HTTPS(Hypertext Transfer Protocol Secure)이다. 인터넷 컨텐츠를 전달하는 TCP 프로토콜의 일종인 HTTP에 S(Secure) 기능을 추가한 것이다. HTTPS의 원천 기술로는 SSL 과 TLS 전송 기술이 있다. SSL(Secure Socket Layer) // 통상적으로 SSL 인증서라고 부르며 TLS도 포함 TLS(Trans..

Hyper Text Transfer Protocol 의 약자로, 인터넷에서 데이터를 주고받는 통신규약(프로토콜)이다. 이렇게 규칙을 정해두었기 때문에, 모든 프로그램이 서로 정보를 교환할 수 있게 된 것이다. 웹 개발자라면 HTTP 지식이 필수조건이다. FE개발자의 역할 중 하나가 서버로 데이터를 전송하는 것이기 때문에 HTTP를 모른다면 역할을 다하고 있다고 말할 수 없다. 데이터를 주고 받을 때 흔히 발생하는 CORS, CORB(?) 같은 에러들은 HTTP만 잘 알아도 쉽게 해결이 가능하다. (실제로 http 지식이 전무할 때, api호출을 하면서 엄청난 오류를 겪었고 해결하는데도 시간이 걸렸다.) 서버의 역할이 요청에 대한 응답을 보내준다는 것을 기억하자. HTTP/1.1을 기준으로 설명 요청과 응..

FC를 쓰지 말아야 하는 이유 children을 암시적으로 가지고 있다. (원치않는 에러를 발생시킬 수 있음) 제네릭을 지원하지 않는다. 네임 스페이스 패턴을 이용할 때 더 불편하다 FC를 이용하면 코드가 더 길어진다. defaultProps와 정상적으로 동작하지 않는다. 결국 리액트 18 이상에서 없어졌다. 🤔 index.d.ts문서를 봐도 deprecated라고 명시되어 있다. 이 부분에 대해서 언급하기 이전에 함수 선언식과 함수 표현식(+화살표 함수) 복습 Function Declarations(함수 선언식) vs Function Expressions(함수 표현식) 우리가 기본적으로 함수를 작성할 때 사용하던 문법은 함수 선언식이다. function 키워드가 맨 앞에있는 친구 함수 표현식도 func..

i18n이란 internationalization(국제화) 라는 단어를 축약한 것이다. i부터 n까지 18개의 문자수를 축약해서 i18n으로 나타낸다. 국제화는 다양한 언어 및 지역에 적용할 수 있도록 프로그램을 설계하는 프로세스이다. 이상적으로는 국제화는 설계의 기본 단계 중 하나이다. 현지화, 국제적인 배포에 대한 장벽을 제거하는 방식으로 설계 및 개발 Unicode 사용 필요에 따라 적절하게 레거시한 문자 인코딩을 처리 문자열 연결에 신경쓰는 것 유저 인터페이스의 문자열 값에 의존하지 않는 것 현지화가 이루어질 때까지 사용할 수 없는 기능을 지원 양방향 텍스트를 지원 언어를 식별하기 위해 DTD(document type definition)에 마크업을 추가 세로 텍스트나 기타 라틴어 이외의 인쇄 기..

이 포스팅은 Learn with Eunjae 님의 시나브로 자바스크립트 강의를 기반으로 정리된 내용입니다. 로컬에 있는 내 html 파일을 localhost를 통해서 확인하게 되는데, nestify나 vercel(호스팅 플랫폼)을 통해 폴더 자체를 배포할 수 있다. vercel의 경우는 내 깃허브 리포를 연동하여 바로 배포할 수 있기 때문에 아주 간단하게 배포할 수 있다. vercel에서 배포를 할 때, 어떤 프레임워크를 사용할 지 결정하고 빌드 커맨드(빌드 명령어)와 output 디렉토리(어떤 폴더에 결과물을 둘 지)등을 직접 설정해 줄 수 있다. 번들러는 다양한 종류들이 있는데 Parcel("the zero configuration build tool for the web" -공식 홈페이지) Vite..