🤍 화살표 함수 ES6에서 새로 추가되었다. 함수 표현식에 비해 짧은 문법을 가지고 있다. 사전적으로 this 값을 묶는다. 익명 함수로, 이름이 없는 함수, 즉시 실행이 필요할 경우 사용하는 함수이다. 일반함수, 화살표 함수의 비교 function fun() { // 일반함수 ... } const arrFun = () => { // 화살표 함수 ... }; 화살표 함수 사용 예시 var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium" ]; var a2 = a.map(function(s){ return s.length }); console.log(a2); // logs [8, 6, 7, 9] // 화살표 함수 사용 var a3 = a.map( s => s.le..
🤍 절대 경로 목적으로 하는 주소를 루트 디렉토리를 기준으로 해서 나타내는 방법. 루트 디렉토리 ( root directory ) 컴퓨터 파일 시스템에서 계층 구조의 첫 번째 또는 최상위 디렉토리. Q "광화문 어디에?" A "서울특별시 종로구 세종로 사직로 161" 어디에 있든지 한 방에 가는 고유한 경로 (주소) 이다. ( 이미 지정되어 있어 변경할 수 없는 경로 ) 페이지 안에 다른 서버에 있는 이미지나 페이지 등의 파일을 연결시킬 때 사용. 사이트바로가기 🤍 상대 경로 현재 표시되고 있는 페이지 주소 등 특정 디렉토리를 기준으로 링크 파일까지의 상대적인 위치 관계. 상대적으로 변경될 수 있는 경로. Q "(지금 광화문 역인데) 광화문 어디에?" A "여기(광화문 역)에서 직진하면 보이는 세종대왕 ..
본문바로가기 본문바로가기 한솔홈데크 대메뉴 시공사례 제품정보 고객센터 기업소개 지속가능경영 사업분야 관련서비스 매장찾기 제품찾기 카탈로그 SITEMAP ENGLISH 광고영역 이전 다음 시작 일시정지 한솔홈데코 비전 xxx 신상품 설명텍스트 설명텍스트 설명텍스트 가구소재에서 인테리어 자재까지 한솔홈데코 편리하고 행복한 공간을 만들어 갑니다. 제품정보 바닥재 벽면재 도어재 몰딩재 시트재 가구재 /* 제품 정보 */ /* 제품 정보 영역 크기 64*52*/ .product a { color: #001829; font-size: 15px; } .product a:hover { /*글자 아이콘에 커서 가까이 했을 때*/ color: #2d5b79; /*색 바뀌게*/ font-weight: bold; /*굵기 바..
🤍 TCP 3-way TCP는 장치들 사이에 논리적인 접속을 성립하기 위해 3-way Handshake를 사용한다. Note! ∎ TCP 신뢰성있는 통신 보장 (오류제어, 흐름제어 등) & 데이터 전송을 보장하는 연결성 프로토콜. 동기화 (SYN 패킷), 확인 (ACK 패킷)을 3번 진행하는 3-way handshaking 방식으로 상호연결을 설정. 전송단위는 Segment 라고 한다. TCP 3-way Handshake는 TCP/IP 프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정을 의미. 즉, 신뢰성을 보장하기 위해 사용. ✉ 3-way Handshake 역할 3-way Handhshake 세션을 수립하기 ..
🤍 HTTP HyperText Transfer Protocol. W3 상에서 정보를 주고받을 수 있는 프로토콜. W3 (World Wide Web, WWW, W3 ) 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간. 프로토콜 ( Protocol ) 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계. 주로 HTML 문서를 주고받는 데에 쓰임. 주로 TCP를 사용하고 HTTP/3 부터는 UDP 를 사용하며, 80번 포트를 사용한다. Note! ∎ TCP 신뢰성있는 통신 보장 (오류제어, 흐름제어 등) & 데이터 전송을 보장하는 연결성 프로토콜. 동기화 (SYN 패킷), 확인 (ACK 패킷)을 3번 진행하는 3-way handshaking 방식으로..
🤍 네트워크 네트워크가 생겨나게 된 계기 : 데이터를 주고받기 위해서이다. 자신의 컴퓨터에만 존재하던 데이트 -> 다른 컴퓨터와 교환해야하는 목적 -> 연결 = 네트워크 네트워크 잡합들 간의 연결 = 인터넷 네트워크를 통해 무엇을 하려고 하는가? : 내가 원하는 것을 상대방에게 "요청"하여 "응답"을 받는 것이다. ex) 같은 컴퓨터 안에서 다른 응용 프로그램과 통신하기, 같은 네트워크 안에 있는 컴퓨터의 응용 프로그램과 통신하기, 다른 네트워크에 있는 컴퓨터의 응용 프로그램과 통신하기 등 편지로 빗댄다면? 사람은 편지라는 데이터를 생성한다. 컴퓨터는 크롬과 같은 응용프로그램 (애플리케이션)이 데이터를 생성하는 주체이다. 사람은 안부를 묻기 위해 편지를 작성한다. 웹 브라우저(애플리케이션)는 화면에서 필..
아래 내용은 인프런_웹퍼블리셔가 알려주는 실무 웹사이트 따라만들기 Seanson1을 보고 작성하였습니다. 사용한 크롬 확장프로그램 1. Full Page Screen Capture ( GoFullPage ) 2. Image Downloader : 현재 웹 페이지에 마크업된 이미지 ( 슬라이스 )를 다 받는다. 사용한 Style sheet 언어 : HTML 5 + CSS3 🤍 포토샵 파일 없이 사이트 만들기 준비하기 바로 다운 받으면 엄청 많은 다운로드 창이 뜨고 일일이 사진을 다운로드 받아야 한다. 그러므로 구글 설정_다운로드 부분에서 기존 설정 Downloads 에서 원하는 폴더로 변경이 필요하다. 다운로드 받았으면 위치 변경을 다시 원래대로 복구해놓는다. 🤍 메인페이지 헤더영역 제작하기 HTML5 본..
🤍 소프트웨어 버전 관리 소프트웨어 공급기업의 경우, 필수 제품을 변경하지 않고 기능을 향상하거나 문제를 해결할 때 소프트웨어 버전을 사용한다. 시간이 지나면서 새로운 기능이 출시 -> 개발자는 버그를 수정, 업데이트, 새 버전 개발하면 소프트웨어 폭이 넓어진다. 따라서 소프트웨어 버전 관리 ( Software Versioning )은 제작 부분에서 필수적이다. 사용자는 소프트웨어 개발자가 소프트웨어를 최신 상태로 관리하기를 기대하고, 언제 어떤 업데이트가 출시되는지 체계적으로 이해할 수 있기를 바란다. -> 소프트웨어 공급기업의 버전 관리 중요성 공급기업은 소프트웨어 버전을 추적 관리 -> 필수 업데이트와 부차적인 업데이트 분리 -> 특정 기능을 강조 or 분류한다. 또한 고객이 사용하는 버전 정보를 ..
🤍 DSL ( 도메인 특화 언어 ) DSL ( Domain-Specific Languages ) 특정 도메인에 특화된 간단한 프로그래밍 언어. Java, C, Ruby 등의 범용 언어보다 덜 복잡하다. ∎ DSL 의 이점과 중요성 DSL 프로그램에서 추상성을 제거하고 효율적인 코드를 생성하므로 런타임 오버헤드 없이 도메인에 특화된 개념을 사용할 수 있다. 즉, 중요하지 않은 복잡한 요소에서 필수 항목만 분리하여 작성 코드가 구현 세부 정보로 복잡해지는 경우가 없다. 대상 플랫폼에서 자유로운 DSL 코드로 애플리케이션 로직을 표현할 수 있다. 버그는 줄고, 구조적 적합성이 향상되어 유지보수의 편의성이 높아지는 등 제작한 제품의 품질을 향상시킬 수 있다. 즉, 불필요한 자유도를 없채고, 코드 내 중복을 피하..
Java 빌드 자동화 도구가 어떻게 진화했는가? - 새로운 프로젝트를 시작하는 단계 - 어떤 프로그래밍 언어를 사용할까? 어떤 플랫폼에서 개발할까? 어떤 빌드도구를 사용할까? 어떤 버전관리 시스템을 사용할까? 어떤 빌드배포 시스템을 사용할까? 🤍 빌드도구란 무엇인가? 소스코드를 실행가능한 애프리케이션 생성물을 자동으로 만드는 프로그램. 빌드과정 : 소스코드를 컴파일하고, 연결, 패키징하여 실행가능한 형태로 가공 ∎ 빌드 ( Build ) 개념 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립 소프트웨어 가공물로 변환하는 과정 또는 그에 대한 결과물. 빌드과정은 보통 다른 프로그램을 제어하는 프로그램인 빌드 도구에 의해 관리된다. ∎ 빌드 자동화 ( Build automation ) 개념 빌드 자동화의 목..
📌 Conditional Rendering Conditional Rendering 조건에 따른 렌더링. ( 조건부 렌더링 ) : 어떠한 조건에 따라서 렌더링이 달라지는 것. 🤍 Inline Conditions In + line : 코드를 별도로 분리된 곳에 작성하지 않고, 해당 코드가 필요한 곳 안에 직접 집어넣는다는 뜻. Inline Conditions 조건문을 코드 안에 집어넣는 것. ∎ Inline If if문을 필요한 곳에 직접 집어넣어 사용하는 방법. if문과 동일한 효과를 내기 위해 && 연산자를 사용한다. && 연산자를 jsx 코드 안에서 중괄호를 사용하여 직접 집어넣는 방법이다. 예제 코드 ) function Mailbox(props){ const unreadMessages = props...
📌 이벤트 ( Event ) 특정 사건을 의미한다. ( 사용자가 버튼을 클릭하는 것도 하나의 이벤트 ) DOM의 Event Activate DOM에서는 클릭 이벤트를 처리할 함수를 onClick을 통해 전달한다. 리액트의 Event Activate 동일한 기능인 리액트 코드이다. 먼저 onClick에서 카멜표기법으로 쓰여 있다. DOM에서는 이벤트를 전달할 함수를 문자열로 전달하지만, 리액트는 함수 그대로 전달한다. 둘 사이에는 이벤트 이름의 표기법과 함수를 전달하는 방식의 차이가 있다. 🤍 Event Handler 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수가 있다. 이것을 Event Handler 라고 부른다. 이것은 이벤트가 발생하는 것을 계속 듣고 있다는 의미로 Event Listene..
