본문 바로가기

Til12

스쿼클 Squircle css 하는 법 - 트러블 슈팅 기록 디자이너들은 다 안다는 스쿼클 도형은 카카오톡 프로필에 쓰이고 있는 둥근 사각형 모형을 생각하면 된다. 이번에 회사 디자이너님이 웹 사이트에 적용하고 싶어 하셔서, 적용을 하는 과정에 엄청난 트러블 슈팅들이 생겨났고 자료도 많이 없어서 기록을 시작했다. 1️⃣ svg로 이미지를 다운하기 디자이너님이 만들어 놓은 피그마 도형을 클릭해서 먼저 svg로 Export를 한다. 이 이미지를 쓰는 것은 아니고 이미지 안에 있는 형태를 사용해야 하는 것이다. 👌 예를 들어, 50x50 사이즈의 스쿼클 svg를 다운했다고 한다면, 이런 svg 코드가 나온다. 이걸 이용을 해서 시작해야 한다. 2️⃣ 재사용을 해야 하기 때문에, 컴포넌트 하나 만들어 놓기 예를 들면, 이렇게 만들면 된다. 내가 만드는 웹 사이트의 프로필.. 2023. 3. 30.
TIL - html 명함 만들기 테이블 태그 html로 리액트만 썼다고 html 코드 쓰려고 하니까 살짝 흠칫했다. 역시 코드는 계속 써보고 써봐야 두려움 없이 나아갈 수 있는 것 같다 ㅠㅡㅠ 회사 메일에 명함을 서명 설정해야 하는 일이 있는데, 이번에 또 새로운 걸 배우게 되었다. 처음엔 디자이너님이 , , 태그 등을 사용해서 명함 서명 코드를 만들어주셨는데, 이메일이 구 기능을 가지고 있는 회사들의 경우 명함 css 가 깨질 수 있어, 테이블 태그를 사용하는 것이 좋다고 해 변경을 하게 되었다. 요즘 테이블 태그를 많이 안 쓴다는 블로그 글도 많던데, 모두가 신 기능을 사용하는 것은 아니니까 익혀두면 좋을 것 같았다! 참고로 카카오, 네이버 등도 서명 설명 html 바꿔보면 테이블 태그로 나온다 ㅎㅎ ✅ 오늘은 무엇을 느꼈는지? 1. 미리 코드.. 2022. 12. 2.
TIL - 2022.10.24 - 웹 프로토콜, AJAX, React를 왜 사용할까, 이벤트 버블링, 이벤트 버블링을 막는 방법, 이벤트 버블링 활용 방법, 이벤트 위임, 부모에서 자식으로 이벤트 상속하는 방법 ✅ 정리했었던 내용 복습 1️⃣ 웹 프로토콜이란? - 프로토콜이란, 데이터를 송수신하기 위한 규칙 - 서버와 클라이언트 모두 HTTP를 이용해 통신하기 때문에 HTTP에 대한 지식이 중요하다. - HTTP는 GET, POST, PUT ,HEAD 4가지 요청 형식이 있다. - GET은 문서를 요청하고 서버가 클라이언트에 상태 정보와 복제된 문서를 보냄으로써 응답한다. - POST는 데이터를 서버로 송신하고 서버는 해당 데이터를 특정 아이템에 덧붙인다. - PUT은 데이터를 서버로 송신하고 서버는 특정 아이템을 완전히 대체한다. - HEAD는 상태 정보를 요청한다. GET과 동일한 형태로 응답을 하지만 문서를 복제하지는 않는다. 2️⃣ AJAX란 무엇인가? - Asynchronous JavaScript An.. 2022. 10. 24.
TIL - 2022.10.23 - 서버 사이드 렌더링, MVC 패턴, 아토믹 디자인 패턴, HTTP/HTTPS 차이점 ✅ 정리했었던 내용 복습 1️⃣ 서버 사이드 렌더링 - 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법 - 검색 엔진 최적화와 빠른 페이지 렌더링에 효과적 - OG태그를 페이지별로 적용하기 위해서는 서버 사이드 렌더링이 효율적 - 서버에서 미리 그려서 브라우저로 보내기 때문에 페이지를 그리는 시간을 단축할 수 있다. - 클라이언트 사이드 렌더링 : 빈 HTML을 받아 브라우저에서 그리는 것 2️⃣ MVC 패턴 - MVC란, Model-View-Controller 의 약자로 애플리케이션을 세 가지 역할로 구분한 개발 방법론 - 사용자가 Controller를 조작하면, Model을 통해 데이터를 가져오고 그 데이터를 바탕으로 View를 통해 시각적 표현을 제어하여 사용자에게 전달.. 2022. 10. 24.
TIL - 2022.10.22 - TCP, UDP, URL 입력시 일어나는 일, Event loop, RESTful API, GET POST 차 ✅ 정리했었던 내용 복습 1️⃣ TCP, UDP 차이점 - 연결방식 : TCP는 연결형 서비스, UDP는 비연결형 서비스 - 패킷교환방식 : TCP는 가상회선 방식, UDP는 데이터그램 방식 - 전송 순서 : TCP는 전송 순서를 보장하지만, UDP는 바뀔수가 있다. - 속도 : TCP는 느리고 UDP는 빠르다. - 신뢰성 : TCP는 신뢰성이 높고 UDP는 신뢰성이 낮다. - 수신 여부 확인 : TCP는 수신 여부를 확인하고 UDP는 확인하지 않는다. - 통신 방식 : TCP는 1:1 통신 방식이지만, UDP는 1:1, 1:N, N:N 방식으로 통신한다. 🔷 UDP : IP를 사용하는 네트워크 내에서 컴퓨터들 간에 메시지를 교환할 때 제한된 서비스만을 제공하는 통신 프로토콜 2️⃣ 브라우저 주소창에 u.. 2022. 10. 22.
TIL - 2022.10.21 - Closure, 호이스팅, 프로세스 생성과정, HTTPS, TCP ✅ 정리했었던 내용 복습 1️⃣ Closure란? - 외부 함수에 접근할 수 있는 내부 함수 혹은 이러한 원리 - 자신을 포함하고 있는 외부 함수보다 내부 함수가 더 오래 유지가 될 경우, 외부 함수 밖에서 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저라고 부른다. - 자바스크립트에서는 함수를 리턴할 때 클로저를 형성하는데, 클로저가 형성될 당시의 함수와 함수가 선언될 때의 어휘적 환경의 조합(쉽게 말해, 당시의 관계되는 코드들)의 참조를 유지, 기억한다. 2️⃣ 자바스크립트의 호이스팅 - 코드가 실행되기 전의 변수 선언, 함수 선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상 - var 변수 선언, 함수 선언에서만 호이스팅이 일어나며 let, cons.. 2022. 10. 22.

티스토리툴바