본문 바로가기

전체 글

 (68)
[Javascript] Intro "이것도 언어냐..", 제 친구가 현재 SAFFY라는 교육과정을 이수 중인데, 자바스크립트에 대해 배우면서 저한테 자주 투덜거릴 때 하는 말입니다(친구: JAVA개발자). 특히 자바랑 다르게, 자바스크립트가 동적 타입이 가능하다는 점이나, 함수 실행 부분에서 경악을 금치 못하더군요.... 그래서 한번 자바스크립트에 대해 깊게 제가 아는 것들과 글쓰며 배우는 것들을 한번 서술해보겠습니다. 자바스크립트가 얼마나 아름다운?언어인지 탐구해봅시다 :) (참고로 글의 순서는 그냥 생각 나는 topic대로 쓸거기에 난잡합니다만.. 글끼리 참조시켜놓겠습니다:)
[React] Pie Chart 만들기 이전에 css conic-gradient + property속성 조합을 통한 파이차트를 구현했었는데, 각 부분 섹션 경계선마다 aliasing이 일어난다길래, 이참에 svg로 새로 구현했습니다. 만들면서 호버 이펙트 같은 것도 알아서 넣어달라길래.. 호버 시, 각 섹션들이 얼만큼 차지하는지 비율을 보여주는 이펙트도 넣어봤습니다. Precondition 1. Data type PieChartData = { value : number, color : string } 호버 이펙트에 대해서 결정 권한을 완전히 저한테 맡기기도 했고, 호버 이펙트가 그냥 있었으면 좋겠다고만 이야기해서, 굳이 라벨에 대한 프로퍼티는 넘기지 않기로 했습니다. 데이터 인터페이스로서, 딱 위 정보만 받고, 나머지 필요한 값들에 대해선, ..
[React] Bar chart 만들기 프로젝트 진행하면서, 특히 Analytics 계열 웹사이트의 경우, 차트/그래프는 뗄레야 뗄 수 없다. 회사일 중 대표(친구라 반말체로 쓰겠습니다)가 반드시! 꼭! 저 디자인 그대로 만들어달라 하길래, 걸맞는 모듈 검색하다가 문득, 차라리 만드는것이 더 빠르겠다 싶어 만들어 보았습니다. Layout 1. 차트가 여러 곳에서 다양한 크기로 쓰일 수 있음 2. 치역의 단위는 %만 사용함 3. 정의역은 개수가 정해지지 않음 4. 반응형 이정도가 조건으로 주어져서, 그에 맞게 구상을 해보았습니다. 위에 못난 그림을 정리하면 아래와 같습니다. 1. Container로 전체적인 레이아웃 조정 2. Container하위 요소들은 모두 Container 기반 상대 크기 3. 정의역이 추가될 때마다, Container내..
SOP(동일 출처 정책) / CORS(교차 출처 리소스 공유) 첫 글인 만큼 무엇을 쓸까 고민하다가 제가 웹 공부하면서 처음으로 가장 큰 좌절을 준 CORS에 대해서 이야기 해 보자고 합니다. SOP 란? 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식. 여기서 출처(origin)란, 3가지 요소 (protocol , host , port)중 하나만 틀려도 다른 출처로 인식합니다. ex) http:www.naver.com/hello/nested/dir 1. https:www.naver.com/hello/nested/dir - ( X ) : protocol mismatch 2. http:m.naver.com/hello/nested/dir - ( X ) : host mismatch 3. http:www...

티스토리툴바