하이고니의 개발 스토리

SOP(Same-Origin Policy)는 웹 보안에 관한 개념입니다. SOP란, 한 도메인에서 불러온 스크립트가 다른 도메인의 리소스에 접근하지 못하도록 제한하는 것입니다. SOP는 웹 취약점을 차단하고 보안을 강화하는 데 도움이 되며, 개인 정보 유출, 개인 정보 침해, 크로스 사이트 스크립팅 등의 공격에 대한 보호를 제공합니다. CORS(Cross-Origin Resource Sharing)은 웹 브라우저에서 다른 출처의 웹 자원에 접근하는 것을 허용하는 기술입니다. 웹 브라우저는 SOP에 의해 다른 출처의 웹 자원에는 접근할 수 없지만, CORS는 이러한 제약을 풀어줍니다. 서버에서 CORS를 허용하도록 설정하면, 웹 브라우저는 서버에서 제공하는 HTTP 헤더의 정보를 통해서 다른 출처에서 온 ..

작동 시간과 SEO. 이 두 가지에 대한, CSR과 SSR의 차이에 대해 말씀드리겠습니다. 클라이언트에서 렌더링을 하면 사용자와의 상호작용이 빠르게 수행됩니다. 하지만 그 빠른 수행을 위해 초기 화면 띄우는 데까지의 시간은 상대적으로 깁니다. 서버에서 렌더링을 하면 초기 화면을 띄우는 데까지의 시간이 짧고 보안성이 높지만, 매 요청마다 서버의 자원을 많이 사용하기 때문에 클라이언트에서의 작업이 느리게 수행될 수 있습니다. CSR 방식에서는 클라이언트가 JavaScript 코드를 실행하여 페이지를 렌더링합니다. 서치 엔진은 JavaScript 코드를 실행할 수 없기 때문에 페이지 컨텐츠가 제대로 검색되지 않을 수 있습니다. SSR 방식에서는 서버가 페이지를 렌더링해서 정적 페이지를 생성한 뒤에 클라이언트에..

순수함수란? - 순수 함수는 수학에서의 '함수'를 프로그래밍의 세계로 가져온 모델입니다. 프로그래밍의 세계에는 무언가를 저장, 변경, 호출할 수 있는 '상태'의 개념이 존재하지만 수학에서는 그런 개념이 없습니다. 그렇기 때문에 모든 함수는 무언가에 절대 영향을 받지 않고 독립적으로 존재합니다. 이런 수학의 함수를 프로그래밍으로 구현한 모델이 순수함수이므로, 이는 함수 외부의 상태에 영향을 받지 않아야 합니다. 상태라는 개념 자체가 없으니 상태를 변경한다는 개념도 당연히 없고, 이것을 불변성이라고 부릅니다. 하지만 프로그래밍에서 상태를 변경하지 않는다는 것은 굉장히 어려운 일입니다. 그래서 "변수에 값을 재할당하지 않는다"와 같은 몇 가지 규칙들을 정해놓고 프로그래밍을 하면서 불변성을 유지해야 합니다. 그..

Promise란? - 자바스크립트 비동기 처리에 사용되는 객체. 비동기 처리의 단점을 보완하여 동기적으로 처리할 수 있게 도와준다. *자바스크립트의 비동기 처리란? 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것. Promise가 필요한 이유 - 우리는 서버에서 받아온 데이터를 원하는 순서대로 처리하고 싶기 때문에 Promise의 장점 - Promise는 .then() .catch() 등 PromiseAPI를 사용할 수 있어서 코드의 양을 줄이고 가독성을 증가시킬 수 있다. Promise의 세 가지 상태 - pending: 대기 - 비동기 처리 로직이 아직 완료되지 않은 상태 - fulfilled: 이행 - 비동기 처리가 완료되어 프로미스 결과 값을 반환해준 상태 - rej..

요소는 목록 안의 아이템(항목)(list item)을 나타낸다. 따라서 반드시 목록을 나타내는 혹은 요소 안에 항목으로서 요소가 위치해야 하는 것이다. 출력이 안되는 것은 아니다. 하지만 항목들끼리의 유기성과 코드의 가독성을 위해서 ul 혹은 ol 로 묶여있어야 한다.

- 안에 를 넣는 이유 를 안에 넣는 것은 최적화된 웹사이트를 구출할 때 적절한 스펙이다. 페이지가 처음 로드되면, HTML과 CSS가 동시에 파싱되는데, HTML은 DOM(Document Object Model)을 만들고, CSS는 CSSOM (CSS Object Model) 을 만든다. 2가지 모두 웹 사이트에서 시각적인 부분을 만드는데 필요하므로, 빠른 first meaningful paint를 할 수 있게 해준다. (first meaningful paint은 사이트의 성능 지표중 하나) 문서 최하단에 stylescheet를 두는 것은 이에 반하는 행동이다. 또한, 점진적인 렌더링을 하는 경우 몇몇 브라우저는 스타일이 변경되면 페이지 요소를 다시 그리는 것을 막기위해 렌더링을 차단하는데, 문서 최하..