공부 기록일지📚

vercel에 넥스트 프로젝트를 배포하면서 환경 변수를 따로 넣어주지 않아 배포실패로 골머리를 썪다가 제대로 정리해야겠다는 생각이 들었습니다. 우선 우리가 통상적으로 react로 프로젝트를 만들 때에도 .env에 환경변수를 넣어서 관리했던 것을 기억할 것이다. 환경 변수란? environment variable 일반적으로 우리는 코드 베이스는 하나만 관리하고, 개발, 테스트 운영등 여러 환경에 어플리케이션을 배포한다. 어느 환경에 배포하느냐에 따라서 다르게 설정되어야 하는 값들은 보통 운영 체제 수준에서 환경 변수를 통해 관리하게 된다. 대표적으로 DB 설정을 들 수 있는데, 운영 환경에서는 데이터 센터나 클라우드 인프라 상의 상용DB를 사용하고, 개발 환경에서는 개발자의 PC상 로컬 DB를 사용하는 경..

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..