jcon의 등록된 링크
jcon로 등록된 티스토리 포스트 수는 124건입니다.
포트폴리오 사이트 만들기 - 4. 배포 세팅 [내부링크]
배포는 프로젝트를 시작할 때 제일 먼저 하는 것을 선호하지만 zeit now를 이용하여 할 예정이어서 레이아웃을 짠 후에 정리했습니다 https://zeit.co/ 우측 상단에 log in을 통해 github 계정으로 로그인 합니다...
포트폴리오 사이트 만들기 - 3. 레이아웃 생성 [내부링크]
레이아웃을 먼저 짠 후 세부 컴포넌트를 작성할 예정입니다 대략적인 틀만 잡기 위해 간략하게 header, content, footer로 나누어서 레이아웃을 생성합니다 layout폴더를 생성하고 Layout컴포넌트를 생성합니다 //..
포트폴리오 사이트 만들기 - 2. styled-component 세팅 [내부링크]
styled-component 세팅 또한 next.js에서 예시를 제공합니다 https://github.com/zeit/next.js/tree/canary/examples/with-styled-components 추가적으로 styled-component와 babel plug을 설치합니다 npm i style..
포트폴리오 사이트 만들기 - 1. redux redux-thunk 세팅 [내부링크]
개인 프로젝트로 포트폴리오 사이트 제작을 정리하려 합니다 기술 스택은 react, redux, next.js, styled-component를 사용하고 배포는 zeit의 now를 사용할 계획입니다 초기 세팅은 아래 포스트로 대체합니다 htt..
Redux에서 정의되지 않은 state를 추가 할 수 있을까 [내부링크]
기존 리액트 코드에서 state 객체 안에 input의 값을 추가 할 때 onChange를 통해 값이 생성되면 state안에 키값과 밸류값을 넣도록 만들어 두었었다. // ex const inputHandler = e => { const { name, value } =..
apache에서 react-router-dom 설정 [내부링크]
기존 php 서비스 위에 react를 사용하여 페이지를 만들어야 하는 프로젝트가 생겼다. react-router-dom을 사용하여 react페이지를 만들었는데 qa서버(테스트 서버)에서 history.back 또는 url로 직접 접근하면 404..
문자 인코딩 차이점 ( EUC-KR, UTF-8) [내부링크]
한글을 표현 할 수 있는 문자 인코딩 방식 중 많이 쓰는 것은 EUC-KR와 UTF-8가 있습니다. 두 인코딩은 완성형 방식과 조합형 방식이라는 차이가 있습니다 EUC-KR - ex) 안 녕 하 세 요 UTF-8 - ex) ㅇ ㅏ ㄴ ㄴ..
일기 어플 추천 (YOUKAMI) [내부링크]
추천할 어플은 YOUKAMI라는 어플입니다 매우 직관적인 디자인과 일기쓰기(+)버튼을 누르면 육하원칙이 나옵니다. 육하원칙에 작성된 것은 태그로 보여집니다. 꼭 육하원칙에 맞출 필요없이 원하는 태그가 있다면..
Next js 튜토리얼 8편 : 배포 [내부링크]
목차 Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리..
Next js 튜토리얼 7편 : 컴포넌트 스타일링 [내부링크]
목차 Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리..
개발자 국비 교육 vs 유료 학원 (부트 캠프) [내부링크]
개발자라는 직업이 관심을 많이 받게 되고 개발자로 전직 하려는 분들이 많아지면서 국비 교육을 들을지 유료 학원을 갈지 고민하시는 분들이 많이 보여서 포스팅을 하려고 합니다 개발자로 진로를 결정하고 국비..
ubuntu에서 mysql root 계정이 접속이 안될 때 [내부링크]
우분투에 mysql-server와 mysql workbench를 설치한 후 sudo 권한을 사용하지 않고 mysql로 접속을 하려고 할 시에 ERROR 1698 (28000): Access denied for user 'root'@'localhost' 이런 에러 메세지가 나왔다...
Next js 튜토리얼 6편 : 데이터 가져오기 [내부링크]
목록 Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리..
Next js 튜토리얼 5편 : 동적 라우팅 [내부링크]
목차 Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 - 현재 글 Next..
Next js 튜토리얼 4편 : 동적 페이지 [내부링크]
목차 Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 - 현재 글 Next js 튜토리얼 5편 : 동적 라우팅 Next..
Next js 튜토리얼 3편 : 공통 컴포넌트 사용 [내부링크]
목차 Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 - 현재 글 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next..
Next js 튜토리얼 2편 : 페이지 이동 [내부링크]
목차 Next js 튜토리얼 1편: 시작하기 Next js 튜토리얼 2편 : 페이지 이동 - 현재 글 Next js 튜토리얼 3편 : 공통 컴포넌트 사용 Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next..
Next js 튜토리얼 1편: 시작하기 [내부링크]
처음으로 next js를 사용하여 자사 홈페이지를 리뉴얼 하는 프로젝트를 진행했습니다. 어떻게 학습하며 프로젝트를 진행했는지 정리하려 합니다. 가장 우선적으로 한 일은 next js docs에서 제공하는 튜토리얼을..
react ie 11 적용하기 ( feat.polyfill ) [내부링크]
자사 홈페이지를 nextjs로 제작을 했다. 프로토 타입이 나온 후에 테스트를 하던 중 ie에서 작동이 안되는 이슈가 있었다. (개발자의 적 ie..) ie의 개발자 도구를 열어서 확인을 해본 결과 ie에서 지원하지 않는..
react get browser size [내부링크]
react는 직접적으로 dom을 조작하는 것을 지양한다. 태생 자체가 virtual dom을 사용하여 효율적인 렌더링을 하기 위해 만들어 졌기 때문이다. 하지만 dom을 조작해야하는 상황이 있다. 브라우저의 width나 height..
next js scroll [내부링크]
import Router from 'next/router'; const goToRecruit = () => { Router.push('/with/recruit').then(() => window.scrollTo(0, 0)); }; <Button name='탑승하기' onClick={goToRecruit}></Button> nextjs의 경우..
하위 태그에 클릭 이벤트 해제 - currentTarget [내부링크]
html에 onClick으로 이벤트를 걸었을 때 e.target을 쓰면 하위 태그까지 모든 이벤트가 걸린다. 그에 따라 클릭 이벤트를 건 태그에만 이벤트를 적용하고 싶을 때에는 currentTarget 함수를 사용한다. 예시 const..
next js에 css 적용 (bootstrap, styled-component) [내부링크]
next js 프레임 워크는 서버사이드와 클라이언트 사이드 렌더링이 이루어져 기존의 react에서 처럼 css를 import하는 방법으로는 css를 적용 시킬 수 없다. 그에 따라 styled-component와 bootstrap을 적용 시키기..
vscode setting [내부링크]
vscode에서 사용하는 개인 설정 파일입니다. vscode는 ctrl + , 를 통해 설정을 바꾸거나 json파을을 통해 설정을 변경 할 수 있습니다. 통일된 개발 환경을 위해 json파일을 사용하는 것을 선호합니다. json파일..
head 설정 [내부링크]
html은 head 태그안에 title과 meta 태그 등을 설정함으로써 페이지의 정보를 제공한다. next.js에서는 next/head 컴포넌트를 이용해 설정 할 수 있다. import Head from "next/head"; export default ({ children..
next js 배포 [내부링크]
공식문서에 보면 next js를 배포할 대 zeit이나 now를 사용하면 간편하게 할 수 있다고 나와있지만, 기존 서비스에 아파치가 이미 띄워져 있어 다른 방법을 찾아야 했다. next js의 서버를 실행 시키면 localhost:..
아파치 virtual host 세팅 [내부링크]
ec2에서 아파치를 설치 후 virtual hosting을 세팅하는 방법. cd /etc/apache2/sites-available vi 해당폴더안에 있는 conf파일 이름 #버츄얼 호스팅을 통해 proxy설정을 해야 할 때 #노드 등 띄워야 할 때 <Virtu..
무료로 포트폴리오/프로젝트 서버에 올리는 방법 [내부링크]
개발자들은 aws 등을 사용하여 개인 서버를 올리는 분들이 많지만 사용법이 쉽지만은 않기 때문에 웹퍼블리셔 분들이나 디자이너 분들은 자신의 포트폴리오를 서버에 올리기 힘들어 합니다. 그런 분들을 위해 무료..
좋은 개발자가 되기 위해 [내부링크]
프로젝트 후에 할 일 이번 프로젝트를 진행하면서 무엇을 배웠는가 이번 프로젝트에서 내가 한 실수들은 무엇이었는가 내가 이 프로젝트를 처음부터 다시 만든다면 ? 어떠한 라이브러리를 도입할 것이다 구조를 다..
viewport 속성 [내부링크]
모바일 기기에서 input 선택시 확대 될 때 모바일 기기에서 웹페이지를 이용할 때 input 태그를 클릭하면 확대가 되는 효과가 있습니다. 이 확대되는 효과를 없애고 포커스만 가도록 하는 방법은 viewport 메타 태..
페이스북 공유 페이지 만들기 [내부링크]
<!-- Facebook meta tags --> <meta property="og:type" content="article" /> <meta property="og:title" content="장철희 resume" /> <meta property="og:url" content="http://intro.jcon.tk/responsive/index...
로그인 회원가입 input 영어만 입력 [내부링크]
정규식 사용하여 영문과 숫자가 아닐 경우 입력되지 않게 한다 <input type="text" onkeydown="onlyAlphabet(this)" /> <script> function onlyAlphabet(ele) { ele.value = ele.value.replace(/[^\\!-z]/gi,"");..
리눅스 ubuntu 명령어 [내부링크]
sudo chown -R user.user 파일이름 chown 명령으로 파일의 사용자와 그룹을 동시에 변경한다. -R 을 붙이면 하위 모든 폴더 파일의 소유자를 변경한다 nodemon kill 방법 - ec2에서 nodemon / node를 킨 후 끄지..
vscode 특정 확장자를 원하는 확장자로 취급 하는 방법 [내부링크]
"files.associations": { "*.tpl": "html", "*.master": "html" }
js is everywhere 제로초님 발표를 보고 나서 [내부링크]
제로초님이 js conf에서 발표한 내용을 유튜브로 방송을 하셔서 보고 정리해 보았다. 취업 후에 php를 사용해야 해서 퇴근 후에도 2-3시간 공부를 하고 있는데 적응이 되면 바로 프로젝트를 시작해야 겠다. 아마..
HTML 문서의 정보 [내부링크]
DOCTYPE(DTD, 버전 지정) DOCTYPE은 마크업 언어에서 문서 형식을 정의합니다. 이는 웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려줍니다. (HTML은 크게 1,..
React, webpack 및 Babel 7을 처음부터 설정하는 방법 (2019) [내부링크]
웹팩에 대해 이해하기 위해 CRA를 사용하지 않고 설정을 해보았습니다 https://www.valentinog.com/blog/babel 을 의역한 글입니다. 오류가 있으면 알려주세요 React, webpack 및 Babel 설정 방법 : 목차 다음 내..
VS Code 자주쓰는 단축 [내부링크]
win 단축키 설명 ctrl + F 문자 찾기 ctrl + H 선택한 문자를 다른 문자로 변경 tap 들여쓰기 shift + tab 내여쓰기 ctrl + \ 화면 분할 ctrl + W 분할 된 창 닫기 ctrl + alt + or 분할 된 창으로 이동 shi..
ec2에서 css를 수정하고 강력 새로고침까지 하였으나 css가 적용되지 않는 문제 [내부링크]
ec2에서 css를 수정하고 강력 새로고침까지 하였으나 css가 적용되지 않는 문제가 있었다. 아파치의 css reload 설정을 통해서도 해결이 가능할 거 같지만 아파치 설정에 대한 정보를 찾기 전에 아래의 해결법을..
vscode를 사용하여 ec2 리모트 [내부링크]
vscode를 사용하여 ec2 리모트 extention 다운로드 : remote development ec2 pem키 또는 비밀번호 설정 f1 누른 후 opne config 둘 중 아무거나 Host vscode에서 사용 할 이름 HostName ec2호스트주소 User ec2유..
aws ec2와 rds를 띠운 후 오류 정리 [내부링크]
개인서버로 사용할 ec2와 rds를 띠웠습니다 생성 방법에 대해서는 추후 시간이 있을 때 자세하게 작성하겠습니다 이번 글에는 생성하면서 마주친 오류들을 정리하겠습니다 개인의 경험을 토대로 잊어버리지 않게..
css 공부 노트 [내부링크]
inline 속성과 block속성 - inline 속성 : 안에 있는 값만큼만 공간을 차지, inline속성을 height값을 가지지 않는다 - block 속성 : 한줄을 만큼의 공간을 차지 display: inline - 해당하는 엘리멘트를 inline 속..
자바스크립트로 팝업창 구현 [내부링크]
쿠키 설정을 쉽게 하기 위해 npm라이브러리 js-cookie를 사용했다. 대략적인 flow는 아래와 같다 1. index.html에 접속하면 pop up창이 뜬다. 2-1. pop up 창에서 인풋 박스에 체크를 하면 popupCheck라는 키값과..
VS Code 확장 기능(Extensions) [내부링크]
Korean Language Pack for Visual Studio Code 한글화 확장 기능 Prettier 가장 대중적으로 쓰이는 코드 포멧터 기본 설정 방법 : 컨트롤 + , 를 누른 후 formatOnSave검색 후 체크 설정이 완료 되면 저장 시 마다..
개발 에디터 종류 [내부링크]
Sublime Text https://www.sublimetext.com/ 상대적으로 가볍고 성능 저하가 적은 편이라고 합니다. 무료 Atom https://atom.io/ 깃헙(GitHub)에서 만든 텍스트 에디터입니다. 확장 기능도 충분하고 외국에선 인기..
웹표준과 웹 접근성 [내부링크]
웹 표준이란? 웹에서 사용되는 표준 기술이나 규칙을 의미하며, W3C의 권고안 에서 나온 기술들이 여기에 해당합니다 이 표준 기술들을 기준으로 웹 브라우저들(크롬, IE, 사파리 등)이 만들어지는데, 브라우저를..
REST API란? [내부링크]
REST 정리 : REST란? 저번 글에서는 REST에 대해 정리를 해보았습니다 그럼 REST API는 무엇일까요? REST API는 REST 아키텍쳐 스타일을 따르는 API 하지만 오늘날 REST API라고 하는 API들의 대부분이 REST 아키..
코드스테이츠를 수료하고 나서 [내부링크]
3개월 간의 이머시브 코스를 마치고 나서 코드스테이츠에서 무엇을 배웠는지 정리하기 위해 블로깅을 하려고 한다. 우선 코드스테이츠에서 강조하는 것은 자기주도적 학습과 커뮤니케이션 스킬이다. 어떤 개념을..
클라이언트와 서버의 쿠키 주고 받기 [내부링크]
클라이언트에서 요청을 보냈을 때 서버에서 쿠키를 만들어 클라이언트로 respone을 했을 때 클라이언트의 쿠키 스토리지에 쿠키가 저장이 안되는 문제가 있었다. 신기한것은 포스트맨으로 확인 했을 때에는 정상적..
REST란? [내부링크]
많이 듣고 많이 사용하는 개념이지만 알 것 같으면서도 모르겠는 REST에 대해 찾아 보던 중 정말 잘 설명한 영상이 있어 정리를 했습니다 REST란 REpresentational State Transfer의 약자인데 해석해 보면 대표적..
빠르게 훑어보는 웹 개발 트렌트 [내부링크]
빠르게 훑어보는 웹 개발 트렌트 를 정리해보았습니다. 웹 개발 트렌트 1. 서버 중심으로 개발 2. 클라이언트 중심으로 개발 3. 고도화 1. 서버 중심으로 개발 - 서버랑 클라이언트랑 통신을 하지 않고 이미 만들..
나는 왜 개발을 시작 했나 [내부링크]
20대 초반 초등학교 때 요리사를 꿈꾸었던 적이 있었고 중학교를 다니면서 게임에 재미를 붙여 컴퓨터에 대한 관심도 있었다. 중학교 삼학년이 되면서 고등학교를 선택을 해야 하는 상황이 되었을 때 정보고를 갈..
git flow [내부링크]
key benefits parallel development 병렬적으로 개발이 가능하다 collaboration 동료가 하던 작업을 손쉽게 이어 받을 수 있다 release staging area 배포되기전에 테스트하는 곳 support for emergency fixes hot..
git rebase / squash [내부링크]
git rebase - git rebase --interactive HEAD~3 3개의 최신 커밋을 수정 할 수있다 순서를 변경 할 수도 있고, 커밋을 합칠 수도 있다( squash, edit) - squash 에디트 창에서 위의 커밋과 합칠 때 사용하는 명령..
git reset [내부링크]
git reset 파일이름 - 현재 스테이징 에어리어에 올라가 있는 파일을 다시 내림 git reset HEAD^ / git reset HEAD~1 - 현재 HEAD위치에서 HEAD를 전으로 되돌림 - 내 로컬/혼자하는 프로젝트에서만 사용하는 것을..
git commit [내부링크]
git commit git commit - 명령어 입력시 스테이징 에어리어에 있는 파일에 대한 커밋 에디트 창이 나옴 - 커밋 메시지를 입력하고 :wq(vim 명령어 / w: 저장 q: 에디터 끄기)를 통해 저장 git commit -m '커밋 메..
gitignore / git rm / git add [내부링크]
gitignore os files application files - .vscode/setting.js 등 - node_modules aws pem key 등 github에 올리지 않아도 되는/ 올리면 안되는 파일을 정해 줄 수 있다. gitignore 초기 설정을 해주는 사이트 http..
git intro keyword [내부링크]
git init - git을 시작하는 명령어 - git을 설치 후 cli로 git버전 관리할 폴더로 가서 git init 명령어 입력 git status - 이전 커밋과 비교해 변경된 파일을 보여주는 명령어 git add - 변경된 파일을 스테이징..
component lifecycle [내부링크]
1. componentWillMount - 랜더링이 되기 전에 실행 - 컴포넌트가 DOM이 만들어지기 전에 실행 - v16.3 이후부터는 deprecated되었으며 UNSAFE_componentWillMount로 사용가능 2.componentDidMount - 랜더링이 된..
cookie 사용하기 [내부링크]
//쿠키에 저장할 데이터 categoryId = req.body.categoryId; //cookie의 첫번째는 쿠키에 저장되는 키값 //두번째는 밸류값 res .cookie('categoryId', categoryId) .send(); req.cookies.categoryId 쿠키는 헤더..
crypto 적용하여 패스워드 암호화 [내부링크]
crypto 라이브러리 설치 createHmac 첫번째 인자에 sha선택 / 두번째 인자에 saltkey 입력 saltkey란 패스워드에 합쳐져서 암호화를 하는 문자를 말함 saltkey를 넣는 이유는 0000 등 많이 쓰는 비밀번호는 sha를..
aws rds mysql 접속 하기 [내부링크]
mysql -u 유저이름 --host rds엔드포인트 -P포트번호 -p 패스워드 입력창이 나온 후 패스워드를 입력하면 접속됨
aws ssh 접속 방법 [내부링크]
우분투 환경에서 터미널로 접속 하는 방법 ssh -i `.pem비밀번호파일경로` ubuntu@`rc2퍼블릭dns주소`
cors 설정 [내부링크]
npm install express npm install cors const app = express(); const cors = require('cors'); app.use(cors()); express 에서 cors를 설정 할 때 실행만 시키면 모든 아이피의 접속을 허가한다 cors를 설정 할..
sequelize를 사용하여 ec2 - rds 연동하기 [내부링크]
sequelize 사용하여 연동 https://github.com/jch1223/im11-2019-03-shortly-express/blob/reference/server/app.js 불러오는 중입니다... 레퍼런스 코드 참고 https://www.youtube.com/watch?v=vMXnXXfFm-I 시퀄..
JSON 이란 [내부링크]
JavaScript Object Notation의 약자 자바스크립트에서 객체를 만들 때 사용하는 표현식을 의미 일종의 데이터 표준 JSON.parse() 문법에 맞는 문자열을 object로 바꾸어 주는 메소드 JSON.stringify() 객체를 JSON..
javascript 상속 (prototype / class) [내부링크]
1. prototype //생성자를 정의한다. var Human = function(name) { this.name =name; } //생성자의 prototype에 sleep이라는 함수를 할당한다. Human.prototype.sleep = function( ) { }; var steve = new Human('..
complexity [내부링크]
complexity(복잡도)는 가장 높은 경우로 결정한다 CONSTANT / O(1) : n이 증가 되어도 시간은 항상 똑같다. ex) 인덱스로 접근해서 처리할 경우 LOGARITHMIC / O(log n) : 결과를 처리하면서 시간이 줄어든다 ex)..
쿠키(Cookie)와 세션(session)의 차이 [내부링크]
쿠키와 세션을 사용하는 이유 HTTP 프로토콜은 2가지의 특징을 가지고 있다 1. 비연결지향(Connectionless) 클라이언트가 request를 서버에 보내면, 서버는 요청에 맞는 response를 보내고 접속을 끊는다. (HTTP1...
es6문법 비구조화 할당 [내부링크]
var array = [1, 2, 3] var a = array[0]; var b = array[2]; var [c, , , d] = [1, 2, 1, 3] console.log(c) // 1 console.log(d) // 3 es5에서는 배열의 인덱스를 지정해서 대입을 해야 값을 넣을 수 있지만 비..
es6 문법 const let var [내부링크]
1. let , const , var - let과 const는 es6에 등장하는 변수 선언 방식이다 - 자바스크립트의 var는 함수 레벨 스코프 방식이어서 유연하게 사용할 수 있지만 스코프가 넓기 때문에 어디에서 어떻게 사용이 됐는지..
Virtual DOM [내부링크]
VirtualDOM에 대해서 알아보기 전에 브라우저가 어떻게 작동하는지 먼저 알아 봅시다 쉽게 생각하면 html과 css를 합치고 화면에 나올 수 있게 배치한 후 출력한다 DOM Tree 생성 브라우저가 HTML을 전달 받으면,..
node debugger [내부링크]
scripts의 start 부분에 --inspect 삽입 -> npm start 입력시 해당 명령어 실행 구글 크롬에서 녹색아이콘을 클릭하면 콘솔을 통해 console.log와 크롬의 개발자 도구를 사용하여 디버깅이 가능해짐 포스트 맨도..
Javascript Event loop [내부링크]
자바스크립트는 싱글 쓰레드를 기반으로 한다 따라서 원래라면 하나의 일을 처리한 후 다음 일을 처리할 수 있다 하지만 브라우저가 제공하는 WebAPI를 통해 자바스크립크에 효과적으로 스레드를 지원한다 console..
react props, state Bloging [내부링크]
1. props function Welcome(props) { return <h1>Hello {props.name}</h1>; } props : props를 받는다 props.name : 받은 props의 name(키값)의 value값을 넣음 const element = <Welcome name="Sara" />; name="S..
GET / POST 의 차이 [내부링크]
HTTP - 웹상에서 클라이언트와 서버 간에 요청/응답으로 데이터를 주고 받을 수 있는 프로토콜(규약, 약속) - 클라이언트가 HTTP 프로토콜을 통해 서버에 요청을 보내면 서버는 요청에 맞는 응답을 클라이언트에..
JS prototype /create [내부링크]
quiz1 1 2 3 4 var obj1 = { x: 10 }; var obj2 = Object.create(obj1); //obj1을 상속 받음, x값이 prototype에 위치 var result = obj2.x; // proro에 위치한 x값 10을 가져옴 cs quiz2 1 2 3 4 5 6 var obj1 =..
자료구조 tree, graph, hash table, binary search tree [내부링크]
1. graph - 노드들이 선으로 연결되어 삼각형의 형태를 띄고 있는 자료구조 - tree 구조와는 다르게 노드가 하나 이상의 in-degree, out-degree를 가질 수 있다. - directed graph : deree가 방향성을 가지고 있..
자료구조 stack, queue, linked list [내부링크]
1. stack - FILO(first in last out), LIFO(last in first out) - psedo code : 필요한 매소드 자료를 넣는 매소드 ->넣은 순서대로 쌓일 것 넣은 자료를 뒤에서 부터 빼는 매소드 2. queue - FIFO(first in fi..
VScode에서 리눅스 Bash 연동 하기 [내부링크]
참고 사이트 : https://daverupert.com/2018/04/developing-on-windows-with-wsl-and-visual-studio-code/ 1. file - preferences -settings에서 사진과 같이 검색 후 경로 변경 2. ctrl + ` 로 터미널 창을 연..
Linting & Testing / Jest, ESlint 설치 [내부링크]
code quality란? 1. 코드가 해야 할 일을합니다. 2. 코드에 결함이나 문제점이 없어야 합니다 3. 코드가 읽기 쉽고, 유지와 확장성이 좋아야 합니다. code quality를 향상 시키기 위해선? 1. Test - 1번과 2번을..
pair git push/pull [내부링크]
1. github repo를 각각 fork하고 clone 한다 git clone/push 방법 2. pair의 github를 remote한다 명령어 : git remote add pair https://상대방 clone 주소 3. 작업이 완료 되면 내 repo에 commit 후 push 한다..
DOM [내부링크]
* nodeName - 노드가 요소 노드 인 경우 nodeName 특성은 태그 이름을 리턴합니다. - 노드가 속성 노드 인 경우, nodeName 특성은 속성의 이름을 리턴합니다. - 다른 노드 유형의 경우 nodeName 등록 정보는 다른..
Debug [내부링크]
1.크롬 개발자 도구에서 sources 탭에서 확인할 소스파일을 연다 2. 라인넘버를 누르면 breakpoint를 잡을수 있다 3. breakpont를 잡으면 breakpoint 안 scope의 변수들에 접근 할 수 있다 4. 오른쪽 아래 scope에..
arr 메소드 [내부링크]
Array.isArray(obj) - 배열인지 아닌지 확인후 true/false 리턴 arr.forEach(callback function) //for문과 비슷 arr.forEach(function callback(currentValue[, index[, array]]) - 배열 요소마다 한번씩 주어진..
string / number 메소드 [내부링크]
str.split(seperator) - seperator 기준으로 문자열을 쪼개서 배열에 넣어줌 str.substring(start, (end)) - start 부터 end 까지 문자열을 자름 - 순서가 바뀌어도 동일한게 실행됨 - 음수가 들어갈 경우 0번 인..
배열 자료구조 메소드 [내부링크]
push() - 배열 끝에 값이 추가 됨 pop() - 배열의 마지막 값이 제거 됨 unshift() - 배열의 첫번째에 값 추가 shift() - 배열의 첫번째 값이 제거 됨
변수의 값 복사 / 참조 [내부링크]
var a = 1; var b = a; a 변수를 1로 선언한 후 b 변수에 a의 값을 넣는다 a = 3; 그 후 a의 값을 3으로 바꾸었을 때 결과 값은? a = 3 b = 1 선언했을 경우에는 대입한 변수를 바꾸어도 바뀌지 않는다. var a = [..
git clone, push [내부링크]
window 사용시 gitbash 설치 explorer . : 디렉토리 탐색기 열기 . 대신 파일 이름을 넣으면 파일이 인터넷 창으로 열림 code . : 비쥬얼스튜디오로 열기 repository branch clone commit : 커밋시 꼭 변경사항 입..
터미널 명령어 [내부링크]
cd 경로 이동 cd .. 상위 폴더로 ls 해당 경로 내에 파일/폴더 리스트 pwd : 현재 경로 출력 touch text.txt : 텍스트 파일 생성 tap key : 명령어, 파일/폴더 이름을 자동완성 해줌 mkdir 폴더이름 : 폴더 생성 r..
trusy / falsy [내부링크]
참고 링크 https://www.sitepoint.com/javascript-truthy-falsy/ 다음 값은 항상 falsy입니다 . false 0 (제로) '' 또는 "" (빈 문자열) null undefined NaN (예 :의 결과 1/0 ) 다른 모든 것은 trusy 입니다. 그..
개발 커뮤니티 [내부링크]
오키 : https://okky.kr/ php스쿨 : https://www.phpschool.com/ 데브피아 : http://www.devpia.com/ 맥부기 : https://cafe.naver.com/mcbugi 안드로이드펍 : https://www.androidpub.com/ KLDP : https://kldp.o..
공부 사이트 [내부링크]
생활코딩 https://opentutorials.org/course/1 인프런 https://www.inflearn.com/ 노마드코더 https://academy.nomadcoders.co/ 유데미 http://udemy.bloter.net/ 프로그래머스 https://programmers.co.kr/learn/
톰캣(tomcat) 설치 [내부링크]
톰캣 9.0 다운로드 링크 1. 다운로드 받을 버전 선택 후 zip 파일 다운로드 2. 압축 풀고 자신의 dev 폴더에 옮기기 3. 서버 탭이 안보이면 window - show view - servers 클릭 4. 하단의 서버 클릭 후 apache..
자바 jdk 다운로드 [내부링크]
자바 SE 다운로드 링크 http://www.oracle.com/technetwork/java/javase/downloads/index.html 1. 오라클 홈페이지 - products - java - java se 2. 밑에 다운로드 클릭 3. 최신버전은 안정화가 되어 있지 않기..
함수명 지어주는 사이트 [내부링크]
https://curioustore.com/#!/
아파치(bitnami) [내부링크]
bitnami wamp stack 다운로드 https://bitnami.com/stack/wamp 1. 다운로드 하기 2. 설치 화면 - 경로 폴더 , mysql 비밀번호는 기억 해두자 3. 아파치 키기 - manage servers 탭 클릭 후 아파치 스타트 4. index..
아파치 설치 하기 [내부링크]
bitnami wamp stack 다운로드 https://bitnami.com/stack/wamp 1. 다운로드 하기 2. 설치 화면 - 경로 폴더 , mysql 비밀번호는 기억 해두자 3. 아파치 키기 - manage servers 탭 클릭 후 아파치 스타트 4. i..
도메인 갖기 [내부링크]
https://www.freenom.com/ 1. 사이트 밑에 Register a New Domain 클릭 2. 갖고 싶은 도메인 이름 입력 3. Get it now 클릭하면 Selected로 바뀌고 위에 Checkout 클릭 4. 설정 - 깃허브 페이지 - custom domai..
깃허브 기초(왕초보용) [내부링크]
1. 프로젝트 폴더 만들기 - New repositoty 클릭 - Reposotory name : 이름 정하기 - 두번째 체크 박스 체크하기 - create repository 2. 코드 업로드 하기 3. 웹 페이지에서 접속하기 - Settings 클릭 - Git..
블록체인 공부 사이트 [내부링크]
1. 이더리움 DApp에 대해 잘 설명해 놓은 블로그 https://medium.com/@weekly.teckle 2. 게임을 하면서 배우는 사이트 https://cryptozombies.io/ko/
unsplash 랜덤 이미지 [내부링크]
랜덤 사진을 보여주는 사이트 https://source.unsplash.com/ 무료 이미지 사이트 https://thenounproject.com/ https://unsplash.com/
유튜브 동영상/구글지도 가져오기 [내부링크]
1. 공유 버튼 클릭 2.퍼가기 클릭 3. 소스 복사해서 넣기 1. 구글 맵스에서 검색 / 또는 우클릭 - 이곳이 궁금한가요? 2. HTML복사 클릭
html 태그 문법 [내부링크]
도움되는 사이트 https://www.w3schools.com/ 1. 강조하기 - <strong> 굵은 글씨 </strong> - <u> 밑줄 </u> 2. 머릿말 - <h1></h1> ~ <h6></h6> 숫자가 커질수록 글씨는 작아짐 3. <br> vs <p> - <br> 태그는..
오픈소스 유틸리티 [내부링크]
1. 반디집 - 압축 해제 프로그램 - https://www.bandisoft.com/bandizip/ 2. 노트패드++ - 메모장 상위 호환 - https://notepad-plus.ko.softonic.com/ 3. PDF뷰어 - https://get.adobe.com/kr/reader/ 4. 크롬 -..
버추얼박스에 win10 / 우분투(리눅스) 설치하기 [내부링크]
1. 기본 설정 왼쪽 상단 파일 - 환경설정 일반 탭 - 기본 머신 폴더 지정 버추얼 머신 구동할 드라이브 입렵 탭 - 호스트키 조합 버추얼머신과 호스트를 바꿔주는 단축키 설정 지우개 버튼을 누르면 원하는 키..
아톰 시작하기 [내부링크]
아톰 설치 방법 http://jcon.tistory.com/19?category=736902 1. 프로젝트 폴더 생성 - file - add project folder - 프로젝트를 저장할 폴더를 생성하고 아톰에 등록 2. new file - 파일이름 1.html - 내용적기..
Git init [내부링크]
pwd 현재 자신의 위치 C:/DEV/gitfth 폴더로 이동 git init 현재 디렉토리에서 작업을 진행한다 ls -al로 디렉토리 목록을 보면 .git디렉토리가 생성된걸 확인 할 수 있다 버전 관리 파일들이 저장되는 곳이므로..
Git 설치하기 [내부링크]
Window에 설치 1. 공식 배포판 설치 2. GitHub Desktop 설치 - 이 인스톨러는 CLI와 GUI를 모두 설치해준다. 설치하면 Git을 Powershell에서 사용할 수 있다. 인증정보(Credential) 캐싱과 CRLF 설정까지 잘 된다...
할 일 관리 어플 / todo 리스트 어플 [내부링크]
todo 리스트 / 위시 리스트 / 할 일 관리 어플 첫번재 Do! 디자인이 깔끔하고 마음에 들지만 그룹을 2개까지밖에 지원하지 않습니다 3개이상 만드려면 유료로 가능합니다 개인적으로 폴더가 많이 필요하여 사용하..
우분투(리눅스) iso 다운로드 [내부링크]
1. 우분투 다운로드 Ubuntu Server는 용량은 작지만 커맨드만 지원하므로 Ubuntu Desktop을 다운로드 받습니다 우분투 다운로드 링크 https://www.ubuntu.com/download 다운로드 클릭 밑에 표시한 부분 클릭 이런..
win10 iso 다운로드 [내부링크]
1. win10 다운로드 win10 iso 다운로드 https://www.microsoft.com/ko-kr/software-download/windows10 다운로드 받은 파일 실행 (마이크로소프트는 다운로드 툴로 파일을 다운받음) 시간이 조금 걸림 버추얼..
버추얼박스 다운로드 방법 [내부링크]
1. 버추얼 박스 홈페이지 다운로드 버추얼 박스 다운로드 링크 https://www.virtualbox.org/wiki/Downloads 2. platform packages와 Extensin Pack 다운로드 platform packages는 사용할 OS 파일 다운로드 3. pla..
비전공자 Q&A [내부링크]
1. 공부해야 할 과목은? - 부담은 가지지 말고 실무에 익숙해 지기 - 자료구조, 데이터베이스, 넷토킹, OS 등 1년에 하나씩 정해서 공부하기 2. 따면 좋은 자격증은? - 정보처리기사 (SI가 좋아함) 3. 취업 후 방..
취업 준비 방법 [내부링크]
1. 취업 준비 1) 이력서가 중요 - 취업시 하루 30분씩 보기 - 깔끔한 이력서는 컴퓨터 활용 능력 - 자기소개서는 이력서가 아니다 - 지원 분야 별로 다양한 버전의 이력서 준비 앱, 웹 등 - 이력서는 최대한 빨리..
IT국비 과정 선택 기준 [내부링크]
1. 개발자가 나의 적성에 맞을까? 1) 단기과정 한번 들어보기 - 국비지원으로 공부를 시작하면 6개월을 빡세게 달려가야하는데 무작정 등록을 하게 되면 중간에 포기할시 시간이 너무 아깝다. 따라서, 조금의 돈은..
네이버 블로그
티스토리
커뮤니티