fullfish의 개발자 도전기

오늘의 키포인트 CSS (중급) 와이어프레임(Wireframe) 목업(Mock-up) 나의 이해 와이어프레임(Wireframe) : html만들기전 설계하는거 목업(Mock-up) : html문서 내에 하드코딩하는 것 문법 및 중요 # : html의 id속성 부여 // id는 문서내 하나의 요소에만 부여 가능 ~~~~ . : html의 class속성 ~~~ 셀렉터 h1{} : 일반적인 셀렉터 *{} : 전체 셀렉터 section, h1{} : tag 셀렉터 #only{} : id 셀렉터 .only{} : class 셀렉터 --attribute 셀렉터-- a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } section[id^="sec..

오늘의 키포인트 객체 나의 이해 객체 : 배열처럼 대량의 데이터처리하는데 특정한 범위에 따라 할당할때 문법 및 중요 배열은 순서가 있고 객체는 순서가 없음 객체는 키와 값쌍으로 이루어짐 let user = { firstName: ‘choi’, lastName: ‘manseon’ } 객체의 값 사용 방법 2가지 있음 1번. Dot notation // 키값을 문자열로 생성 user.firstName; // ’choi’ 2번. Bracket notation user[‘firstName’]; // ‘choi’ dot nocation이 보기는 편하지만 키 값이 동적으로 변할땐 bracket notation이 좋음 delete : 앞에 delete 붙이면 삭제됨 ex) delete user.fristName //..

오늘의 키포인트 배열 나의 이해 배열 : 대량의 데이터를 처리 및 관리하기 위해 문법 및 중요 let arr = [1,2,3] // [] 안에 ,로 나눠서 배열 선언 요소(element) : 배열의 하나의 값 index : 배열의 순서 배열에 문자열을 넣을 수 있음 index를 벗어나면 undefined let numbers = [[13, 30], [73, 8], [44, 17]]; // 처럼 배열안에 배열도 가능 console.table() : 표 형식으로 보임 arr.length : 배열 길이 concat : array1.concat(array2) : array1+array2 // 두개의 배열을 합침 길이3과 2 면 5됨 Array.isArray() : 배열이면 true // typeof로 보면 ob..

오늘의 키포인트 GIT 나의 이해 git : 개발자의 코드를 효율적으로 관리하기 위해(소스 코드를 기록, 관리하고 추적하기 위해) 개발 된 분산형 버전 관리 시스템 github : git repository를 관리할 수 있는 클라우드 기반 서비스 문법 및 중요 commit : 백업 복사본(스냅샷)을 하나 하나 만들어주는 작업 repository : git으로 관리되는 폴더 // local repository는 나만의 remote repository는 공유 남들이 볼 수 있음 fork : remote repository를 내 원격 저장소로 가져오는거 clone : 내 원격저장소의것을 내 컴퓨터로 가져오는거 push : local repo에 기록해 놓은 commit을 remote repo로 업로드 하는거 p..

오늘의 키포인트 CLI nano npm Node.js nvm 나의 이해 CLI(Command-line interface) : cmd나 터미널같은거 열어서 명령어로 컴퓨터 제어 GUI(Graphical user interface) : 편리하게 아이콘같은거로 나타낸거 ex) 파일 이동을 드래그 앤 드롭으로 할 수 있음 nano : 텍스트 에디터의 종류 npm(Node Package Manager) : 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 일종의 앱스토어 같은 모듈 스토어 mac의 패키지 매니저가 brew이듯 node.js의 패키지 매니저 Node.js : 런타임 환경 nvm(Node Version Manager) : 버전 매니저. 다양한 node version을 쉽게 옮겨다닐 수 있게..

오늘의 키포인트 계산기를 만들자 --------------------- 시간내에 기본적인 계산기만 만들면 되며, 시간이 남는 다면 Advanced Challenges 그리고 더 시간이 남는다면 nightmare난이도를 풀면 되는데 Advanced까진 금방 풀었고 nightmare도 마지막 하나의 테스트 케이스만 빼고 풀었다 그 마지막 하나를 영영 통과 못하고 있다... 통과 못하고 있는 부분은 짧게 표현하자면 3+++2....5-1=4.5가 나오면 된다. 앞부분에 특이 케이스로 .이 여러개라도 1개와 마찬가지로 하기 +++이런식으로 나와도 +로 하기 3*3==== 하면 243이 나오기 이런 케이스를 하다보니 마지막 케이스와 충돌을 일으킨다 =를 처음 누를때와 그 이후로 나눠서 코딩을 했고 연산자 여러번 ..

오늘의 키포인트 css 나의 이해 HTML : 웹페이지 구조 담당 CSS : 시각적인 디자인 요소 담당 JS : 단순한 웹페이지를 상호작용 문법 및 중요 css를 불러 올떄 body 태그내부의 맨 마지막 줄, . 왜냐하면 구조를 다 잡고나서 기능을 붙여줘야하니까 (따로 검색) css기능 넣는 3가지 방법 1. css불러오기 2. html 같은 줄에서 선언하기 3. html 바로 다음줄에 style로 선언. 이것도 검색 색상// 속성 color color : #000000// 글자 색상 background-color #~~~~~~// 배경색상 border-color : #~~~~~~// 테두리 색상 폰트//속성 font font-style : 기울기 등 스타일// nomal : 기본, italic : 기울..

오늘의 키포인트 HTML. 참조하기 좋은곳 : https://yunbinni.tistory.com/63 나의 이해 HTML : 웹페이지 구조 담당 CSS : 시각적인 디자인 요소 담당 JS : 단순한 웹페이지를 상호작용 문법 및 중요 HTML은 tag들의 집합 tag는 로 묶인것 HTML의 속성(attribute)는 두가지로 구성되는데 속성의 이름과 속성의 값 ex) This is a paragraph. 에서 속성이름은 class, 콘텐츠는 This is a paragraph 구조 . : html의 버전을 선언 html5부터 이걸로 통일됨 : html 선언한국어 ----------------------------이렇게 두개는 맨위에 그리고 html안에 제목 //숫자가 커질 수 록 크기가 작아짐 진한글씨 ..

오늘의 키포인트 반복문 나의 이해 for문과 while문 두가지를 사용하여 반복되는 상황을 간단히 표현 문법 및 중요 for문 for(초기값 ; 조건 ; 증감){ } while문 while(조건){ } 일반적으로 for문은 반복횟수를 알때 while은 모를때 for문은 변수를 초기화 시키므로 이미 변수가 초기화됐다면 while을 쓰는게 직관적 무한루프식은 while(true)로 쉽게 가능 새로운 안것 `` 백틱은 줄바꿈에서도 사용가능 3항연산자 : 조건 ? 참일 경우 실행 : 거짓일 경우 실행 ex) c = a > b ? 1 : 0; a가 크면 c에 1 아니면 0 두 수의 대소가 출력에 영향을 끼칠때 나는 각각 if로 케이스를 나눴는데 만약 num1이 크다면 그대로 두고 num2가 크다면 두 수의 위치를..

오늘의 키포인트 문자열 나의 이해 문자열 : 타입 종류중 문자로 이루어 진것 ('', "", ``안에 들어가있음) 문법 및 중요 문자열을 ``로 묶으면 안에 ${변수}로 변수를 넣을 수 있다. str.length : 문자열 길이 str.indexOf ('str') : 해당하는 str가 처음나오는 위치, 없으면 -1 반환 str.lastIndexOf('str') : 해당하는 str이 뒤에서부터 처음 나오는 위치 (이 위치의 반환은 앞에서부터 정상적으로 0부터 시작) str.includes('str') : str이 있는지 Bollean값으로 반환 str.split('') : 괄호 안에 있는것을 기준으로 배열으로 나눠줌 str.join('') : 배열을 문자열로 변환 괄호안 생략하면 , str.slice(st..