본문 바로가기

전체 글166

[TS] Generic & Types by Inference 제네릭(Generic)이란 타입에 변수를 제공하는 방법 타입을 마치 함수의 파라미터처럼 사용하는 것 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됨 타입에 상관없이 동작하기 때문에 제네릭이라고 함 // 제너릭 X function identity(arg: any): any { return arg; } // 제너릭 O function identity(arg: T): T { return arg; } T : 타입 변수 유저가 준 인수의 타입을 추론하여 나중에 사용할 수 있게 함 반환 타입으로 T를 다시 사용 타입 정보를 함수의 한쪽에서 다른 한쪽으로 운반할 수 있게 함 any vs. generic any : 실제로 함수가 반환될 때 타입에 대한 정보를 잃음. number 타입을 넘겨도.. 2023. 2. 10.

[HTML] input 자동완성 끄기 (autocomplete = 'off') input field에 자꾸 자동완성 창이 생기고 아무리 시크릿창으로 띄워도 없어지지 않았다. 사실 난 그냥 음~ 하고 넘어갔는데, 팀원 분이 없애달라고.. 하셔서... 찾아보았다. 생각보다 방법은 간단하다. 그냥 input 태그 안에 autocomplete을 off로 꺼주면 된다. 쏘 씸플. HTML attribute: autocomplete - HTML: HyperText Markup Language | MDN The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field valu.. 2023. 2. 1.

브라우저의 동작과정 출처 : https://yozm.wishket.com/magazine/detail/1338/ 2023. 1. 27.

[JS] 검색 기능 1. 검색에 걸릴 목록을 배열에 담는다. const colorList = [ '빨강', '주황', '노랑', '초록', '파랑' ]; 2. 검색창을 input 태그를 이용해 만들어준다. 이 때 검색창에 입력되는 글자를 받아야 하므로, onChange 이벤트로 받아준다. 입력된 값을 search 변수에 받아준다. const [search, setSearch] = useState(""); const onChange = (e) => { setSearch(e.target.value); }; 3. 미리 만들어둘 검색 목록 배열에서 찾는다. const filterList = colorList.filter((c) => { c = c.toString(); return c.replace(" ", "").includes(.. 2023. 1. 11.

배포 및 운영 비용 현재 진행 중인 프로젝트를 배포해야 하는데, 토이 프로젝트가 아니라 연구 과제 느낌..? 이다. 그렇기 때문에 서버비나 향후 유지보수 등까지 고려해야 한다. 또한 비개발자 분들도 함께 참여하고 있어 이에 대한 배경 지식이 부족하기 때문에 (물론 나도 부족하지만...) 나도 공부할 겸 정리를 해보았다. 나 또한 제대로 알아본 것은 처음이기 때문에 잘못된 내용이 있을 수도 있다. 내 블로그 읽는 사람 없을 것 같긴 하지만 혹시 잘못된 내용이 있으면 지적해주십사... 사이트 구조 먼저 우리 팀이 개발하고 있는 서비스는 쉽게 말하면 계산기 프로그램이다. 따라서 아래와 같은 구조로 이루어져있다고 생각했다. 트래픽 : 네트워크 장치에서 일정 시간 내에 흐르는 데이터의 양 서버 : 웹 요청 처리 DB : 회원 데이터.. 2023. 1. 10.

[React] MVC 아키텍처, 리액트의 특징 2023. 1. 5.

링크 공유 시 미리보기 썸네일 설정하기 (meta 태그) 프로젝트를 하던 중, SNS로 링크 공유 시 미리보기 화면을 꾸미고 싶다는 기획자의 의견을 받아 이를 반영하게 되었다. 넣을 수 있는 것들은 크게 4가지가 있다. 1. 썸네일 이미지 2. 썸네일 제목 3. 썸네일 설명 4. 썸네일 링크 이것들은 html 파일의 잘 적용되었는 지는 페이스북에서 제공하는 공유 디버거를 통해서 확인해볼 수 있다. 그런데 이걸 확인하려면 일단 배포를 해야 한다. (당연한 이야기... localhost:3000 이 될리가 없으니까) https://developers.facebook.com/tools/debug/ 공유 디버거 - Meta for Developers 공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 .. 2023. 1. 4.

[jQuery] jQuery 기초 인터넷에 기능 구현 방법 검색할 때마다 jQuery로 작성된 코드가 많아서 jQuery를 배워야 겠다고 생각만 하던 중, 인프런에서 신년맞이 이벤트로 무료 강의를 제공해서 호다닥 강의를 들었다. jQuery란 클라이언트 측 페이지 제작을 손쉽게 만들어주는 자바스크립트 라이브러리 크로스 브라우징 가능 자바스크립트보다 짧은 코드로 작성 가능 jQuery 사용 방법 다운 받기 CDN 방식 " target="_blank" rel="noopener">https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 파일 직접 다운 받아 연결 노드 찾기 var $변수 이름 = $('CSS 선택자') $( ) : 함수를 호출함. 선택자에 해당하는 노드를 찾아주는 .. 2023. 1. 4.

웹 서버 & WAS 웹 서버 하는 일 정적 컨텐츠 제공 : 웹 리소스를 클라이언트로 전달 또는 클라이언트로부터 콘텐츠를 받아 저장 및 처리 동적 컨텐츠 제공 요청이 들어오면 WAS에게 요청 물리적 형태 : 타워형, 랙 마운트형 서버 안의 OS : Linux, Windows Server, UNIX Linux : 기능 구현이 조금 어렵지만, 필요한 기능만을 추가하기 때문에 디스크 절약, 안정성 향상과 더불어 비용도 저렴하게 할 수 있음 Window Server : 많은 기능이 구현되어 있어서 필요한 기능을 비교적 간단하게 설정할 수 있지만, 유지보수를 포함해 비용이 어느정도 소요될 수 있음 웹 서버는 기능이 한정되고 최소한의 기능만 필요한 경우가 많기 때문에 간단한 기능과 비용이라는 관점에서 Linux를 선호하는 경우가 늘고 .. 2023. 1. 2.

이전 1 ··· 3 4 5 6 7 8 9 ··· 19 다음

티스토리툴바