얼음저장소

스타일 선언 방식 인라인 방식 (너무 우선순위가 높아서 권장하지않음) 링크(병렬로 연결) : link css 내장 : \@import : 직렬로 연결, 링크방식의 css 파일 내에서 \@import url("주소"); 하는 것 ⇒ 직렬연결은 병렬에 비해 로딩이 오래걸린다 CSS 선택자 기본 ⇒ * : 전체 선택자, 모든 요소를 선택 ⇒ (태그) : 태그 선택자, 태그이름을 명시하면 선택(ex, div, li ...) ⇒ .(클래스) : 클래스 선택자, 클래스속성값 요소를 선택 ⇒ #(아이디) : 아이디 선택자, 아이디 속성값 요소를 선택 복합 ⇒ ABCXYZ : 일치 선택자, 선택자 ABC, XYZ 를 동시에 만족하는 요소 선택 (태그선택자를 먼저 써야 구분자로 구분가능) ⇒ ABC>XYZ : 자식 선택..

첫째주가 순식간에 지나갔습니다. 비교적 간단했던 첫번째 과제에 비해 두번째 과제가 공개되고 저는 너무 많은 양과 난이도에 크게 당황했었습니다. 목요일에 나오는 과제가 제출 기한이 왜 토요일 오후 5시까지인지 깨닫게 되는 과제 였습니다. 과제는 admin 페이지에서 상품을 등록하는 페이지를 구현하는 것이였습니다. 구현해야하는 기능 - 캘린더를 이용한 기간설정 - 체크박스를 이용한 카테고리 설정 - 태그 검색 기능 - 이미지 첨부 기능 - 상품 옵션 추가 ( + 기본옵션 추가 + 추가옵션 추가 ... ) - 상태 전역 관리 - 유효성 검사 아주 간단하게만 정리했을 때 이러한 기능들을 구현해야 했습니다. (자세히 적으면 너무 많은 구현목록들...) 이 중에서 제가 맡은 파트는 카테고리, 태그 검색, 유효성 검..

👉 원티드 프리온보딩 프론트엔드 코스 과정 시작! 원티드 프리온보딩 프론트엔드 코스 과정 중 첫 과제가 진행되었습니다. 4명의 인원으로 구성된 팀에서 2명씩 짝을 이뤄 스타일과 기능이 조금씩 다른 환율 계산기 1, 2를 구현하는 것입니다. 제가 맡았던 계산기는 베이스가 되는 통화는 select 로 고르고 바꿀 통화는 tab을 만들어 클릭하면 해당 통화로 환율이 계산되어 나오는 계산기였습니다. 👉 구현해야 하는 부분 - 숫자가 1000 이상 입력되었을 때에는 "1,000"으로 입력값을 바꿉니다. - 결과값은 세 자리마다 콤마(,)가 찍혀야 하고 소수점은 2자리까지 보여줍니다. (1,000 이라도 1,000.00 으로 표기) - select 에서 통화를 선택하면 해당 통화는 아래 탭 목록에서 사라지고 탭 목..

보호되어 있는 글입니다.

일반함수의 형태 const normal = function () { console.log('hello world'); } 화살표함수의 형태 const arrow = () => console.log('hello world'); 일반 함수와 화살표 함수의 차이 1.형태가 다르다. 보이는 것과 같이 화살표 함수는 =>와 같은 화살표가 붙어 함수를 시작한다. 또한 화살표 함수는 return 값이 한줄로 표현이 되는 경우에는 중괄호 {} 를 제외하고 작성이 가능하다. const returnArr = () => [1, 2, 3]; const returnObj = () => ({name: 'som'}); // 객체를 리턴할 경우에는 소괄호로 감싼다. 2.this 의 정의가 다르다. 일반(normal)함수의 경우에는 ..

자바스크립트에서는 typeof 를 사용하면 타입을 알 수 있지만 몇몇의 경우에는 Object라고만 나오고 정확한 데이터 타입이 무엇인지 알기 어렵다. console.log(typeof 'hello world!'); // string console.log(typeof 123); // number console.log(typeof true); // boolean console.log(typeof undefined); // undefined console.log(typeof null); // object console.log(typeof {}); // object console.log(typeof []); // object 조금 더 정확한 타입을 알고싶다면 typeof 대신에 다른 함수를 따로 ..

socket.IO 란? Socket.IO는 웹소켓 프로토콜을 지원하는 실시간 웹 애플리케이션(채팅, 메세지, 등)을 위한 JavaScript 라이브러리이다. 웹 클라이언트와 서버간에 실시간 양방향 통신이 가능하다. 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js 용 서버 측 라이브러리의 두 부분으로 구성된다. (위키백과) socket.io는 웹소켓을 이용하여 비동기 이벤트 방식으로 클라이언트에 실시간으로 데이터를 전송한다. 사전에 참고할 사이트 https://socket.io/get-started/chat 이 사이트에 나온 튜토리얼대로 따라 기본적인 socket.IO의 틀을 만들어 놓자. 다 따라하고 난 뒤에는 위와 같은 파일들이 생성되고, 각각의 코드들은 이렇게 작성되어 있어야 한다. 1..

SemVer Sementic Versioning 버전마다 의미를 부여하여 나타내는 약속된 규칙같은 것. Major.Minor.Patch E.g 12.14.1 1. Major.Minor.Patch 기존 버전과 호환되지 않는 새로운 버전 2. Major.Minor.Patch 기존 버전과 호횐되는 새로운 기능이 추가된 버전 3. Major.Minor.Patch 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전 4. ^Major. Minor.Patch (캐럿기호가 붙어있는 것) Major 버전 안에서 가장 최신 버전으로 업데이트 가능함을 의미 package.json 에서 확인해보기 npm info 모듈 위 명령어를 통하여 해당 모듈의 정보를 알 수 있다. npm update 모듈 해당 모듈을 최신 버전으로 ..

3. index.html 만들기 vscode 내에서 느낌표(!)를 입력하면 자동으로 연결되는 스니펫을 이용한다. 를 에 추가한다. 4. main.js 만들기 console.log('hello world'); 테스트용 콘솔로그를 작성한다. 5. package.json 내의 scripts 수정하기 기존에 작성되어있는 명령어는 사용하지 않으니 삭제해도 된다. 그리고 아래와 같이 추가한다 "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, parcel parcel 자체는 일반 터미널에서 입력하면 명령어를 찾을 수 없다. 하지만 이렇게 스크립트 내에 작성하면 설치된 모듈에서 찾아 이 프로젝트에서만 실행되는 명령..

👉npm NPM(Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리하는 툴 npm 모듈/패키지 설치 npm install XXX 위와 같은 명령어로 설치 가능하다. 👉npm 시작하기 1. npm init -y package.json 파일이 만들어진다. 1-1. package.json { "name": "npm_test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", } name : 프..