클론 코딩이 개발 실력을 키위기 위해 자주 활용되는 방법이지만, 지금 내 상황에서 정말 필요한지 고민이 많이 되었다. 그럼에도 불구하고 시멘틱한 코드를 작성을 연습하기 위해서는 클론 코딩만큼 효과적인 방법도 드물다고 생각한다.  이미 존재하는 홈페이지를 따라 만드는 것이기 때문에 UI 디자인에 대한 고민을 덜 수 있고, 코드 작성과 기술적인 구현에 집중할 수 있다. 이번 클론 코딩으로는 iPad 홈페이지를 선택했고, 제한 사항으로 React와 같은 라이브러리 없이 HTML, CSS, Vanilla JavaScript만 사용하려고 한다.  또 다른 장점으로는 시간이 오래 걸리지 않는다. 모바일까지 작업을 한다면 모르겠지만 굳이 모바일은 작업하지 않을 것이기 때문에 금방 작업이 끝났다.  position f..

HTML의 렌더링 과정에 대해서 지난번에 공부한 적이 있다. 간단하게는 다음과 같은 과정을 거치게 된다. 다운로드 : 화면을 그려주는데 필요한 리소스(html, css, js)를 다운로드 한다. HTML 준비 : 렌더링 되어야 할 HTML 요소로 DOM을 만들어 준다. CSS 준비 : css 코드를 가지고 와서 CSSOM을 만들어 준다. 두개 합치기 : 둘을 합쳐서 렌더링 트리를 생성한다. 위치 그리기 : 화면에 요소들이 어디 놓일 지 그려준다. 색칠하기 : 그려친 요소에 색을 칠해준다. 여기서 위치 그리기, Layout 단계가 다시 실행되면 색칠하기, Paint 단계도 다시 실행되는 Reflow는 성능 저하의 주요 원인이 된다.  메모이제이션을 통해 불필요한 기능 재실행을 줄이는 것 외에도, reflo..

API를 사용하다보면 CORS(Cross-Origin Resource Sharing) 오류를 자주 경험하게 된다. 예를 들어, OpenAPI와 같이 무료 API를 사용할 수 있다고 해서 요청을 보냈는데, CORS 정책으로 인해 막히는 경우가 발생할 수 있다. API 요청을 보냈지만 브라우저에서 CORS 오류로 차단되었다면, 'API를 사용할 수 있는 것인지 아닌지' 혼란스럽게 느껴질 수 있다. 무료 API라서 쉽게 사용할 수 있을 거라고 기대했는데, 서버측의 제한으로 인해 막히는 상황이 난감하기 때문이다.  그러나 결론적으로, 이러한 무료 API는 CORS 문제를 해결한 뒤 정상적으로 사용할 수 있다. 지금부터 CORS에 대해 알아보고, 어떻게 요청을 해야 CORS 문제를 우회할 수 있는지 살펴보자. S..

홈페이지에서 사용자가 로그인을 하고, 로그인 정보를 fetch 했을 때 브라우저에서 비밀번호를 fetch할 수 없어야 한다. 즉, 비밀번호를 알아내는 것이 불가능해야 한다.  DB에 있는 비밀번호를 알 수 있게 된다면, 해커가 DB를 해킹했을 때 민감한 정보에 접근이 가능하게 된다. 또한 다른 사이트에서도 동일한 아이디와 비밀번호를 사용하는 경우 문제가 더 심각해진다.  따라서 비밀번호나 계좌번호같은 민감한 정보를 백엔드에 저장할 때 그대로 저장하지 않는다. 양방향 암호화 양방향 암호화는 JWT같은 복호화가 되는 암호화를 말한다. 즉, 암호화와 복호화 모두 할 수 있는 암호화 방법이다. DB에 양방향 암호화 방식을 사용한다면 만약 데이터베이스가 털리게 된다면 홈페이지를 통해서 비밀번호를 추측할 수 있게 ..

첫 번째 로그인브라우저에서 email과 password를 가지고 로그인 요청을 백엔드로 보낸다면 백엔드는 해당 유저가 존재하는지 DB를 확인하고 있다면 session에 저장을 한다. session에 저장할 때 특정 id를 부여하는데, 브라우저에 response로 넘겨준다.  이렇게 보내진 id는 해당 유저가 누구인지 식별할 때 사용된다. 하지만 유저의 정보를 백엔드 서버에서 받기 때문에 한번에 여러명의 정보를 받으면 session의 한계가 존재하기 때문에 문제가 발생한다.  이것을 해결하기 위해서 백엔드 서버의 성능상 한계가 있기 때문에 scale-up을 통해 컴퓨터 성능을 올려주었다. scale-up→ 컴퓨터 성능(cpu, memory 등)을 올려주는 작업두 번째 로그인 백엔드 컴퓨터의 성능을 오려주었..

마우스로 눌렀을 때 3D 형식으로 문이 열리고 캐릭터가 화면에 나오는 애니메이션을 만들어보려고 한다. CSS만 활용해서 먼저 애니메이션을 구현하고 이후 사용자 이벤트와 함께 연동할 생각이다.  CSS 애니메이션애니메이션을 만든다고 바로 적용하는 것이 아닌 우선 레이아웃을 구성할 계획이다.  css 코드를 넣어주기 위해서 link 태그를 통해 파일을 연결해 주고 배경화면이 되는 stage div와 각각의 문을 나타내는 door div, 배경이 되는 back과 캐릭터, 열리는 문이 될 front..

개요.CSS의 역할 중 하나로 HTML 요소를 적절하게 배치하는 것이 있다. [ 요소를 배치 ] 하는 것을 레이아웃이라고 부르며 CSS의 레이아웃 시스템의 변화 역사가 있다. 과거에는 float를 사용해서 레이아웃을 구현하고 이후 flex 레이아웃이 등장하면서 점차 float를 사용하지 않게 되었다. 마지막으로 제일 나중에 grid가 등장하였으며, grid가 제일 마지막에 등장했다고 grid만 사용하는 것이 아닌 상황에 따라 flex와 grid를 혼용한다.  ※ flex와 grid는 상황에 따라 혼용해서 사용하는데 왜 float는 사용하지 않을까? 여러가지가 있겠지만 반응형 웹에 적합하지 않기 때문이다.  과거 PC를 통해서만 웹 사이트를 접근하는 상황에선 반응형이 중요하지 않았지만 최근에는 모바일, 테..

개요.카드를 웹사이트에서 구현한다고 했을 때 뒤집는 애니메이션이 필요한 경우가 있다. 그냥 앞뒤가 변화는 것보다 3D로 뒤집히는 것이 사용자가 봤을 때 자연스럽고 완성된 요소라고 생각할 수 있다. 뒤집는 것을 생각할 때 보통 해결 하는 방법은 transform의 rotate를 사용하는 것이다. 하지만 일반적으로 rotate를 사용해서 45도를 바꾸면 아래와 같이 나오게 된다. 그냥 네모 박스가 쪼그라든 것 같은 형식이다. 이 이유는 노란색 박스 즉, 카드를 포함하고 있는 부모 요소가 3차원 공간이어야 내부 요소도 3D로 동작한다.  3D 카드 뒤집기.  CARD  먼저 부모 요소와 자식 카드 박스를 만들어준다. 부모 박스가 위 이미지의 노란색 영역이고 카드는 붉은색 카드를 나타낸다...