본문 바로가기

분류 전체보기

 (84)
분명 파일을 수정했는데 깃허브 연동 왜 안되나!! 깃허브...연동하려했는데 변동사항에 파일이 안 뜬다 ? (이걸로 뻘짓만 몇 시간..) 지정 폴더 외에 .git 폴더가 있는지 확인해봐야한다. .git은 최상위 폴더, 지정폴더에만 들어있어야 한다고 함.. 이걸 지우니까 변동사항에 똬랗 하고 뜸!!! 야호
깃허브 에디터 연동 방법 총정리 + 자주쓰는 명령어 깃허브는 쓰면 쓸수록 잘 모르겠는... 맘처럼 잘 되지 않는 녀석이다. 소스트리를 써보다가 에디터에 연동하는게 편할 거 같아서 (저장하고 바로바로 커밋할 수 있도록) 평소 쓰는 아톰과 VS CODE에 연동해서 쓰고 있다. 터미널도 에디터에 내장돼 있으므로 간편하다. (근데 어떤 개발자 분은 에디터에 깃헙 연동하면 오류가 종종 나서 이용하지 않는다고 하더라) git init //초기화 git config user.name '사용자명' git config user.email '깃허브 이메일' //깃허브에서 로그인할 때 쓰이는 이멜주소. git remote add origin '원격저장소 주소' //보낼 원격 주소 입력 git remote -v //이미 저장돼있다 어쩌구 그러면 이걸 쳐서 원격 주소 확인 여기..
헷갈리는 자바스크립트 메소드 indexOf() 개념 잡기 indexOf()는 array와 string 둘다 사용 가능한 메소드다. 찾고자 하는 값이 문자열 혹은 배열에서 몇번째에 오는지를 알려준다. 또 찾는 값이 문자열 혹은 배열에 있는지 없는지 확인하는 함수를 짤 때 많이 이용한다. 우선 기본적인 개념을 살펴보자. (배열로 보자) indexOf('찾고자 하는 값', '시작점(생략가능)') array = ['min', 'hope', 'jin', 'kok', 'hope']; array.indexOf('hope') // 1 array.indexOf('suga'); // -1 배열의 순서는 0부터 시작하므로 'hope'의 순서는 1번째다. 그리고 만일 ('hope'처럼) 배열에 동일한 값이 2개 이상있을 경우엔 무조건 제일 앞에 위치한 값을 반환한다. (검색의 기본..
프론트엔드 로드맵 33 - code Formatters : Prettier프리티어 Code Formatter 코드 포맷터는 에디터에서 보다 효율적이고 가독성 좋게 코드를 작성하기 위한 확장 extention 기능이다. 대표적인 formatter로 Eslint와 prettier가 있는데, 보통 두가지를 함께 사용한다. (기능이 비슷한 듯보이나 다르다) prettier는 들여쓰기를 맞춰주고, 세미콜론이나 콤마가 빠진 부분에 넣어줌. 그리고 '' 와 ""의 사용을 통일시켜준다. 여러명이서 협업을 해야하는데 코딩 스타일이 다를 경우 하나로 통일시켜주는데 도움이 된다. javascript(ecma2017 최신버전까지), JSX, angular, vue, typescript, css, HTML, JSON, GraphQL ,markdown, yaml 등을 지원하고 있다. Prettier는 작성자가..
프론트엔드 로드맵 32 - 모듈번들러 ParcelJS 앞서 설명한 Webpack과 Rollup 그리고 이번엔 Parcel이다. 프론트엔드 로드맵 31 - 모듈번들러 Rollupjs 웹팩과 마찬가지로 Rollup은 어플리케이션을 모듈화한 뒤 이 파일들을 번들하는(하나의 파일로 합쳐모으는) 모듈번들러다. 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라 bomango.tistory.com 프론트엔드 로드맵 30 - 모듈번들러 Web pack 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라우저에서 작동한다. 참고 사이트 : https://webpack.js.org/ https://ui.toast.com/fe-guide/ko_BUNDLER/ https://poie.. bomango.tis..
프론트엔드 로드맵 31 - 모듈번들러 Rollupjs 웹팩과 마찬가지로 Rollup은 어플리케이션을 모듈화한 뒤 이 파일들을 번들하는(하나의 파일로 합쳐모으는) 모듈번들러다. 프론트엔드 로드맵 30 - 모듈번들러 Web pack 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라우저에서 작동한다. 참고 사이트 : https://webpack.js.org/ https://ui.toast.com/fe-guide/ko_BUNDLER/ https://poie.. bomango.tistory.com (▲ 웹팩 설명 이전글 참고) 안정적이고 많은 이들이 선호하는 웹팩에 비하면 롤업은 아직 피래미 수준이지만, React를 비롯 Vue, Ember, Preact, D3등 많은 라이브러리에서 롤업을 사용하고 있다. 코드들을 쪼개거나 Co..
프론트엔드 로드맵 30 - 모듈번들러 Web pack 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라우저에서 작동한다. 참고 사이트 : https://webpack.js.org/ https://ui.toast.com/fe-guide/ko_BUNDLER/ https://poiemaweb.com/es6-babel-webpack-2
프론트엔드 로드맵 29 - npm script npm (Node Package Manager)은 Node.js 패키지들을 관리하는 도구다. 명령 프롬프트에 명령어를 입력해 설치 및 삭제 등 관리한다. 주로 쓰이는 명령어는 npm init, npm start, npm run, npm install 등이 있다. npm init : package.json 자동 작성 npm install -g (모듈명) : 패키지 설치 명령어 (-g : 글로벌 패키지) npm install --save (모듈명) : 해당 모듈을 설치함과 동시에 package.json dependencies에 자동으로 모듈 추가 npm update : 패키지 업데이트 npm dedupe : npm의 중복 패키지 정리. npm root : node_modules 위치 알려줌 npm outda..
2020년도 프론트엔드 로드맵 https://github.com/devJang/developer-roadmap/blob/master/pdf/frontend.pdf
정규표현식 RegExp 정규표현식Regular Expression은 문자열에서 사용되는 특정 문자들의 조합을 불러오기 위한 도구다. 자바스크립트에서 정규표현식은 객체다.(휴..) 정규표현식을 만드는 방법에는 두 가지가 있는데, 하나는 var reg = /ab/; 정규식 리터럴 (슬래쉬로 감싸는 패턴)과 var reg = new RegExp("ab"); RegExp 객체의 생성자 함수를 호출하는 방법이다. 정규식 리터럴 방식을 만들기 위해서는 여러가지 옵션을 숙지해야 한다.. (이거 다 외움..?) i : 대소문자 구분없이 불러온다. g : 모든 결과를 불러온다. ^ : 문자의 시작을 알린다. (단, 문자셋 [^abc] 첫글자로 쓰이면 '반대'의 의미를 가진다) 문자$ : 문자의 종료를 알린다. 문자* : 0회 이상 연속 반복되..

티스토리툴바