세리프 따라잡기

🗣️ cors에 대해 알기 전에, sop에 대해SOP(same origin policy)란, 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식을 말한다. 출처(origin)가 뭐야?URL의 protocol, host, port를 통해 같은 출처(same origin)인지, 다른 출처(cross origin)인지를 판단할 수 있다.→ protocol, host, port가 다 같아야지 같은 출처, 하나라도 다르다면 다른 출처가 된다. - 故인터넷 익스플로러는?>> 포트로 출처를 판단하지 않아서, 포트가 달라도 같은 출처라고 했답니다~  짤막 문제:  http://localhost와 동일 출처인 url로 옳은 것은? (복수 정답)1. https://localhost2. http://localhost:..

웹 브라우저가 하는 일🗣️ html, css, js를 통해 웹을 그려줌웹 브라우저의 구조user interface: 주소 표시줄, 이전/다음/새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스.rendering engine: html, css를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진browser engine: 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진networking: 각종 네트워크 요청을 수행하는 네트워킹 파트ui backend: 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 ui 백엔드 파트data persistence: localstorage나 cookie와 같이 보조 기억장치에 데이터를 저장하는 파트javascript interpreter:..

normalize.css / reset.css 이게 뭐임? 브라우저마다 기본적으로 제공하는 element의 style을 통일시키기 위해 사용하는 css를 말하는데, 대표적으로 normalize, reset 이 두 가지가 있다. 국내에서는 대부분 reset.css를 사용하며, 대표적으로 Naver와 Daum이 사용 해외에서는 효율성을 중시하기 때문에, 반대로 normalize.css를 더 사용한다고 함 그래서 둘은 왜 사용? 브라우저에서 가장 먼저 적용되는 스타일은 user-agent stylesheet, 즉 해당 브라우저에서 제공하는 기본 스타일. 그렇기 때문에 브라우저마다 속성들이 다 다름 (똑같은 태그여도 chrome, safari, edge 등 다 기본 스타일이 다름) 근데 다 다르면 만지기가 힘들..

git cherry-pick이란 뭐야? - git을 이용해 코드 관리를 하다보면 커밋을 다른 브랜치에 잘못 하거나, 요구사항이 바뀌어 필요 없는 커밋이 생기거나, 코드 의존성(dependency) 때문에 다른 사람의 커밋 중 일부를 가져와야 하는 경우가 종종 생기는데, 이때 사용하는 명령어가 cherry-pick → 통상 현업에서 체리픽이 사용되는 경우는 다른 브랜치에 있는 커밋(들)을 현재 작업하는 브랜치에 적용하고 싶을 때 사용 (이때, 커밋은 복사되는 느낌이지만 히스토리 측면으로는 새로운 커밋이 늘어나는 것이기 때문에, 항상 권장되는 방법은 아님) 사용법 지금 내가 X 브랜치라고 할 때, 브랜치 Y의 커밋 중 76ae30ef와 a0ee451c 를 골라, 내 브랜치에 적용하고자 한다면, 1. 이렇게..

이미지는 굉장히 무거움 즉, 이미지 크기 및 로딩을 개선하면 말 그대로 웹 성능이 높아짐 - lighthouse로 로딩 성능 및 렌더링 성능을 체크해 볼 수 있음 [다만 네트워크 등의 다른 문제로 점수가 다르게 나올 때가 있다~] webp는 생소한 사람들이 많을 것 같은데, 사진처럼 구글이 출시한 jpg보다 압축률이 더 좋은 이미지 파일 형식 그럼 webp를 쓰는 게 제일 좋겠네? 싶지만~ 문제는 webp를 모든 브라우저에서 지원해주지 않는다. 즉, webp가 생소한 이유는 모든 브라우저에서 지원해주지 않는 파일 형식을 웹 사이트를 구축할 때 덜 고려하기 때문 [당연하다] 그래서, 이미지를 필요한 만큼만 쓰는 게 중요한데 실제로 많이 쓰이는 유용한 3가지로 함축하면 sprite, cdn, lazy-loa..

오늘 내가 맡은 파트는 프로토타입에 대한 것!! 프로토타입을 간단하게 설명해보자~~😎 프로토타입이란? javascript에서 기본 데이터 타입을 제외한 모든 것은 객체인데, 이 객체가 만들어지는 원리는 자신을 만드는 데 사용된 원형의 프로토타입 객체를 이용한다.. 라고 하는데, 쉽게 말하자면 모든 객체는 자신의 부모 객체와 연결되어 있고, 이 프로토타입을 이용해 객체지향의 상속처럼 속성을 사용할 수 있게 해준다는 말이다. 더~~ 쉽게 말하면 프로포타입 == 유전자라고 생각하면 쉽다! 코드로 말하면 다음과 같다. function 부모(){ this.home = 'seoul'; } 부모.prototype.name = 'lee'; let 자식= new 부모(); 부모가 자식에게 집을 물려줌. 그래서 사진처럼 ..

문득 잠도 안 오고, 정글사관학교의 기숙사에 대해 말해보고자 한다😋 일단 나는 봄~여름에 있던 사람이었으니, 그 기준으로만 말하겠다! 일단 필수품이라고 생각하는 것을 나열하면, (or 가서 사야 될 것들) - 와이파이 = 본인 폰이 무제한이라 핫스팟 빵빵하면 상관 없지만, 그런 거 아니라면 공유기 준비하자 ㅎㅎ.. 사실 그렇게 기숙사에서 공부할 일은 없지만, 간혹 필요할 때나 기숙사에서 폰 조금 만지면 데이터 순삭이다!! - 멀티탭 = 침대 가까이에 콘센트가 없습니다. 가져가면 유용합니다~ - 수건 = 제공 안 합니다! 꼭 가져가세요~ - 세안도구(샴푸, 린스 등등 포함) = 제공x 가져가기! - 드라이기 = 은근 안 가지고 온 사람들이 많았던 필수품... 꼭 챙겨가서 머리 말립시다 ㅎㅎ (+자매품으로 ..

infcon에서 핸즈온 세션 신청해서 들었습니다~ 바벨이란: 트랜스파일러(통역사) 컴포넌트: 일관적인 ui 보여줄 수 있고 다른 사람들이 만든 컴포넌트를 쉽게 가져다 쓸 수 있다. (ex. ant design) emotion, styled-component, tail-winds '요즘 css이렇게 한다~' emotion library참고 styled-component 젤 많이 사용한다고 합니다 좀 더 공부해야 할 부분 (느낀 것) 상태 끌어올리기 +나에게 하는 memo 자세한 강의 내용들은 구글 공유 문서함에 있다!

props를 줄 수도 있고, (properties) 안 줄 수도 있는데, 안 주면서 사용하는 방법은 → ({ 해당 프로퍼티 이름 }) 이렇게 사용하는 거임..!! // es6 방법 코드로 표현하자면: // 기본 방식 (props) const Btn = (props) => { return( {props.text} ) } //------------------------------------- // shortcut 방식 ({ text }) const Btn = ({ text }) => { return ( {text} ) } const App = ()=>{ return ( ) }

- Render는 html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력 해 줍니다 위 작업을 Rendering이라고 합니다 useeffect와 usestate 차이? - usestate: 함수형 컴포넌트에서도 상태(state) 관리를 할 수 있게 해 주는 Hook 입니다. - useEffect: useEffect는 컴포넌트의 상태값 변화에 따라 컴포넌트 내부에서 변경이 이루어져야 되는것들을 처리할 수 있다. ** useeffect 정확히 어떤 상황에서 사용하는지? mount update unmount 될 때의 상황을 관리하고 싶을 때 사용하는 게 useeffect useeffect가 인자를 받는 종류는 2가진데 1. callback만 받는 것과 == 컴포넌트가 맨 처음 화면에 렌더링될 때, 다시 ..