본문 바로가기

분류 전체보기

 (99)
패킷교환방식, TCP/IP, OSI 7계층, TCP/IP 4계층 + UDP 📌 패킷교환방식이란 패킷 교환(Packet switching)은 컴퓨터 네트워크와 통신의 방식 중 하나로 현재 가장 많은 사람들이 사용하는 통신 방식이다. 작은 블록의 패킷으로 데이터를 전송하며 데이터를 전송하는 동안만 네트워크 자원을 사용하도록 하는 방법을 말한다. 큰 소포 한덩어리 였던 데이터를 패킷이라는 작고 가벼운 단위로 쪼개서 전송할 수 있게 해주는데, 기존의 회선교환 방식에서의 단점이었던 즉시성을 개선할 수 있다. (한 서버와 통신중에도 다른 서버와 통신할 수 있음) 이렇게 나누어진 패킷들은 여러 통신 지점(Node)를 지나 목적지에 도착한다. 또한 각각의 패킷들은 빠르게 전달 할 수 있도록 다른 경로로 전달된다. 📪 IP 패킷으로 데이터 보내기 IP 패킷이란 IP 주소를 활용해서 패킷 통신단..
power 문제 뜯어보기 🔍 문제보기 문제: 두 수를 입력받아 거듭제곱을 리턴해야 합니다. 입력: 인자1 : base 인자2 : exponent number 타입의 자연수 (base >= 2) number 타입의 정수 (exponent >= 0) 출력: number 타입을 리턴해야 합니다. 실제 계산 결과를 94,906,249로 나눈 나머지를 리턴해야 합니다. 주의사항: Math.pow, 거듭제곱 연산자 사용은 금지됩니다. 시간복잡도 O(logN)을 만족해야 합니다. 나머지를 구하는 이유는 계산 결과가 컴퓨터로 나타낼 수 있는 수의 범위를 넘을 수 있기 때문입니다. 하지만 모든 연산이 끝난 뒤에 그 결과를 94,906,249로 나누려고 해서는 안 됩니다. 연산 중간에도 이 범위를 넘을 수 있기 때문에, 연산을 할 때마다 나머지를..
웹표준, Semantic HTML, 웹접근성 🤔웹표준이란 웹 표준이란 다양한 웹브라우저에서 동등하게 작동하게 하기 위한 권고사항이다. 이 '표준'이란 것은 w3(https://www.w3.org/)이란 기관에서 권고사항을 모아서 소개한다. 웹표준을 지키면 다양한 브라우저(사파리, 크롬, 파이어폭스, 엣지, 오페라)에서 동등하게 잘 작동하는 웹페이지를 만들 수 있다. 여기서 '동일'대신, '동등'을 사용한 이유는, 브라우저가 다르면, 완벽하게 동일하게 작동할 수는 없기 때문이다. 그래도 웹표준을 사용하면 동등한 수준의 필요 기능을 제공할 수 있어진다. 더불어, 이런 호환성 외에도 다양한 장점들이 있어 웹표준은 꼭 지키는 것이 좋다. 💡웹표준을 사용하면 유지 보수가 편해진다. (+코드 경량화, 트래픽 비용 감소) 웹 호환성을 확보할 수 있다. 검색 효..
meta 태그 캐시 초기화 - 카카오 공유 디버거 😫 meta태그 바꿨는데 왜 안바뀌는 건데 대체..! 예전에 카카오 공유화면 보면서 meta 태그를 설정하는데 캐시초기화가 안되는 바람에 여기저기 공유하고 용을 쓰면서 확인했던 기억이 있는데, 좋은 걸 알게되었다. "카카오 공유 디버거" 두둥! 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 🔥 걍 주소 넣고 버튼 누르면 끝 사용법이랄것도 없다..ㅎㅎ 이런식으로 공유할 url을 입력하고 캐시 초기화 버튼을 누르고, 다시 카톡으로 가서 링크를 공유하면, 바뀐 메타태그가 적용된 화면이 보인다. 디버그 를 눌러보면 meta 태그로 설정한 사항들을 표로 확인해 볼 수 있다. 완전 유용하다.
SEO를 위한 HTML 🤔 SEO란 SEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 검색 랭크 개선이라고도 한다. 🔥 SEO에 영향을 주는 HTML 태그들 대표적으로 과 가 있다. 종류 설명 예시 - 안에 들어감. -되도록 간결하게 써야 overflow elipsis되는 경우를 피할 수 있다. (30자 이내) -핵심 키워드가 꼭 들어가되, 반복되지 않도록! - 안에 들어감. -SEO를 위한 meta태그는 name 속성을 가짐 -공유를 위한 meta태그는 property 속성을 가짐 -공유를 위한 property 값에는 "og(open graph)"가 붙음 사진 = 에어비앤비 메타 태그 종류들, (이 외에도 많다) 📌 meta 태그 종류와 주의사항 종류 설명 및 주의사항 og:url 페이..
[React] useRef사용법, 언제 써야 할까? 🤔 useRef는 javaScript에서는 DOM을 선택해야 하는 상황에 getElementById나 querySelector와 같은 DOM Selector 함수를 사용해서 선택했다. 그런데 React에선 실질적으로 대부분 state를 이용해 자동으로 리랜더링 되기 때문에, 직접 DOM요소를 건드릴 일이 많이 없고, 리액트 자체에서도 DOM을 되도록 직접 조작하는 일은 없게하라 그런다. 그럼에도 불구하고, DOM을 직접 선택해야 하는 상황이 있다. 예를 들면 아래와 같은 상황들이다. useRef가 필요한 상황 예시 특정 엘리먼트의 크기 가져오기 스크롤바의 현 위치 가져오기 혹은 설정하기 🌟포커스 설정하기 🌟비디오 제어하기 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리 사용할..
[React] Styled Components 시작하기, styled-reset 추가 하기 🤔 Styled Component 왜 필요할까? CDD기반의 개발을 하기 위해선, CSS를 컴포넌트화 시킬 필요가 있다. (지금 이 문장이 이해가 가지 않는다면, 링크의 글을 먼저 읽는다) 리액트를 사용함으로써 우리는 기본적으로 html과 js 코드를 한방에 jsx로 묶을 수 있다. 그렇지만 css는 리액트 기본 기능으론 컴포넌트로 쪼개서 jsx 파일에 담을 수는 없다. 이것을 가능하게 해주는 Styled Component라는 귀한 분을 모셔와야 한다. 우리는 React와 Styled Component 이 빛과 같은 두분으로 뿔뿔이 흩어져 있던 html + css + js 코드를 js하나로(jsx도 사실 js코드이므로) 묶을 수 있게 된다. 1+1+1 = 1 이 되는 기적!! 🔥 Styled Compon..
CDD란? 🤔 CDD란 CDD란 Component Driven Development의 약어로서 컴포넌트 기반으로 프로덕트를 개발하는 것을 말한다. 컴포넌트란 반복적이고 독립적이어서 어디든 붙일 수 있는 코드 묶음을 말한다. 예를 들면, 우리가 호텔을 만들때, 호텔방마다 공통적으로 들어가는 챔대, 책상, 욕조 등은 모두 컴포넌트로 해둔다면, 매번 침대를 만들지 않고도 '침대' 컴포넌트를 복사해 원하는 곳에 끼워넣기만하면 되는 식이다. 🤔 CDD는 왜 필요한가 여기에 대해선 나의 웹에이전시의 퍼블리셔 시절 이야기를 한번 해보려고 한다. CDD가 꼭 필요한 순간을 너무 잘 대변하는 이야기 이기 때문이다. 성형외과 사이트를 제작하는데는 굉장히 많은 페이지가 필요하다. 사람들이 사이트에 들어와 어떤 수술이 가능한지 알아보..
isSubsetOf 문제풀이 문제: 두 개의 배열(base, sample)을 입력받아 sample이 base의 부분집합인지 여부를 리턴해야 합니다. 입력: 인자1 : base 인자1 : sample number 타입을 요소로 갖는 임의의 배열 base.length는 100 이하 number 타입을 요소로 갖는 임의의 배열 sample.length는 100 이하 출력: boolean 타입을 리턴해야 합니다. 주의사항: base, sample 내에 중복되는 요소는 없다고 가정합니다. 입출력 예시: let base = [1, 2, 3, 4, 5]; let sample = [1, 3]; let output = isSubsetOf(base, sample); console.log(output); // --> true sample = [6, 7..
bubbleSort 문제풀이 문제: 정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다. 버블 정렬(bubble sort)은 여러 정렬 알고리즘(삽입 정렬, 퀵 정렬, 병합 정렬, 기수 정렬 등) 중 가장 기본적인 알고리즘입니다. 버블 정렬 알고리즘은 아래와 같습니다. 첫 번째 요소가 두 번째 요소보다 크면, 두 요소의 위치를 바꿉니다. (swap) 두 번째 요소와 세 번째 요소보다 크면, 두 요소의 위치를 바꿉니다. (swap) 1, 2를 마지막까지 반복합니다. (마지막에서 두 번째 요소와 마지막 요소를 비교) 1~3의 과정을 한 번 거치게 되면, 가장 큰 요소가 배열의 마지막으로 밀려납니다. 1~3의 과정을 첫 요소부터 다시 반복합니다. 5를 통해 두 번째로 큰 요소가 배열의 마지막 바로 두 번째로 밀려납니..

티스토리툴바