Under the Sign of Saturn

자주 마주치는 CORS 오류 프론트엔드 프로젝트를 할 때 자주 마주치는 오류 중 하나로 CORS가 있다. 토이 프로젝트를 할 때 API를 가져가 쓸 때도 빈번하게 발생했고, 현업에서 백엔드/프론트엔드 서버를 다르게 구축하고 개발할 때도 마찬가지이다. 토이 프로젝트를 할 때는 한 줄 코드를 넣어 프록시를 우회하도록 하며 API를 쓰거나(a), webpack 설정 파일에 개발 시에 사용할 수 있게 proxy 설정(b)을 해주곤 했다. 좀 더 큰 규모의 프로젝트를 진행하면서는 백엔드 개발자에게 CORS 해결을 위해 협조를 요청해서 해결했다. (사전 지식이 부족했을 때 프론트엔드 단에서 실수인가 싶어서 온갖 자료를 찾아보면서 방법을 강구해봤지만 AWS 서버 설정 페이지에서 단 한 번의 클릭으로 해결할 수 있는 ..

위처럼 텍스트의 path를 따서 애니메이션 효과를 주는 예제를 만들어봤다. 프로토타이핑 툴로 잘 사용하고 있는 figma로 기본이 되는 SVG를 만들고, 간단한 자바스크립트와 CSS로 애니메이션을 만들었다. SVG 태그 생성 figma로 아무 draft나 열어서 캔버스를 만든 다음, T 아이콘을 눌러 텍스트를 생성한다. figma에서 한글은 받침을 타이핑할 때 문제가 있어서, 한국어 텍스트로 SVG 소스를 준비해야 한다면, 포토샵 등 다른 도구를 사용하는 것이 낫다. 이렇게 아무 텍스트 박스가 생성되고, 현재는 Path를 따지 않았으므로 파란색 테투리가 텍스트 박스 전체에 걸쳐 있는 것을 볼 수 있다. 여기서 우클릭 -> outline stroke를 눌러주고, 이 상태에서 오른쪽의 Design 패널의 S..