꿈많은 DEVELOPER

🤷‍♂️ Proxy? 다른 서버에서 리소스를 찾는 클라이언트의 요청에 대한 중계자 역할을 하는 서버이다. 따라서 프록시 서버는 클라이언트와 클라이언트가 찾고 있는 데이터를 호스팅하는 실제 서버 사이에 위치한다. 클라이언트에게 프록시 서버는 실제 백엔드 서버로 나타나고, 백엔드 서버에는 프록시 서버가 클라이언트처럼 보인다. 프록시를 사용하는 이유는 단순히 보안때문만이 아니라 프록시 서버에 요청이 된 데이터들을 [캐시]를 이용해 저장해 둡니다. 캐시를 활용해서 요청시간을 절약 할 수 있습니다. 🤷‍♂️ Reverse Proxy? 하나 이상의 백엔드 서버 앞에 위치하여 각 요청에 사용할 백엔드 서버를 결정하는 것이다. Reverse Proxy 장점 동시성 : 다중 연결을 더 잘 처리할 수 있는 역방향 프록시를..

파일 시스템(File System) 리눅스 파일 시스템 리눅스 파일 시스템은 ext(extend) 2, ext 3, ext 4가 있으며, 현대 대부분의 리눅스는 ext4를 지원함. ext 4 파일 시스템 대용량의 파일을 저장, 관리할 수 있음. 큰 extend 단위로 파일 시스템을 할당하거나 삭제 가능 파일 시스템에 오류가 없는지 확인하는 fsck를 지원함 fsck기능 파일 시스템의 무결성을 검사하는 명령어 fsck는 기본적으로 자동으로 실행되고, 상황에따라서 직접 실행할 수도 있음. ext2 파일 시스템 단일 파일의 크기 : 최대 2GB 파일명 : 최대 256 B 최대 파일 시스템 크기 : 4 TB 디렉터리 당 저장 가능한 최대 파일 수 : 25,000개 ext3 파일 시스템 단일 파일의 크기 : 최대..

개발을 하다보면 ssh란 단어를 들어본적이 많을것입니다. ssh란 무엇인가? ssh란 Secure Shell의 줄임말로, 두 컴퓨터 간 통신을 할 수 있게 해주는 하나의 protocol 입니다. protocol이란 서로 다른 통신장비간 주고받는 통신 규약 입니다. ssh암호는 암호화가 되어 보안에 좋습니다. 그럼 git ssh 활용해봅시다. 터미널에 ssh 쳐보면 저런 옵션 창이 나옵니다. ssh-keygen 치시면 저기 경로에 2개의 파일이 생깁니다 간단하게 설명하자면 id_rsa는 private key 입니다 저의 로컬컴퓨터의 암호화 키 입니다. id_rsa.pub는 public key 서버에 저장되는 암호화 키 입니다. 생성을 하고난후에는 git 설정에서 ssh keys를 값을 넣어주면 됩니다. i..

git 프로젝트 진행중에 많은 branch가 존재할수있습니다. 특래서 특정 브랜치를 들고와서 clone 해야될 경우가 있습니다. 그런 상황에서 좋은 git 명령어 입니다. git clone -b (branch name) --git URL EX=) git clone -b master yoogukhyeon 위와 같이 명령어를 사용하시면 특정 branch를 clone 할수있습니다.

프로젝트를 하게되면 필수적으로 git활용하게 됩니다. 그리고 branch를 따서 작업을 할일도 생기는데요 여기서 git branch 활용하는 방법을 알아보겠습니다. branch 생성 git branch -b 브랜치이름 branch 확인 git branch branch 설정 git checkout -b 브랜치 이름 branch 푸쉬 git push origin 브랜치 이름 branch 당겨오기 git pull origin 브랜치 이름 branch 삭제 git branch -d 브랜치 이름 일단 git remote 이미 있다는 가정하해 진행을 해보도록 하겠습니다. 먼저 git branch 생성을 위해서는 git branch -b 브랜치이름 이렇게 명령어를 쓰면 git branch 가 생성이 됩니다. git ..

hasOwnProperty란? hasOwnProperty란 자바스크립트 객체의 네이티브 메소드 중 하나이다 hasOwnProperty 메소드를 쓰는 이유는 특정 Property를 가지고 있는지 없는지를 나타내서 블리언 값으로 반환하는것을 알기 위해서 사용합ㄴ디ㅏ. 즉 : hasOwnProperty() 메소드는 특정 프로퍼티가 해당 객체에 존재하는지를 검사합니다. Ex 조건문을 활용해봅니다! if(Obj.hasOwnProperty('1')) Obj에 1이 없기때문에 결과는 false로 뜹니다 if(Obj.hasOwnProperty('name')) 하면 Obj Property에는 name이 있기때문에 true를 반환 합니다! 저희 회사는 이 메소드를 활용해서 저 또한 공부를 해보았습니다! hasOwnProp..

오늘은 개발자의 필수인 git에 대해서 공부해요 말그대로 git은 소프트웨어 개발에서 소스 코드를 효과적으로 관리할 수 있도록 하는 무료 , 공개 소프트웨어로 많은 개발자들이 개발을 할때 사용 합니다 그래서 저또한 많이 공부 합니다! 오늘은 github에 만들 저장소에 이름을 바꾸고 티미널에 remote에 바뀐저장소 주소로 remote 해보겠습니다! 저기서 저장소에 이름을 바꾸면 새로운 url 주소를 복사합니다 그리고 cmd창을 틀고 터미널에 git remote set-url origin " 주소 " (쌍다운표안에) 치시고 git remote -v로 바뀐 원격 저장소를 확인 할수 있습니다! 이게 제가 바꾼 새로운 저장소에 remote 입니다! 위에 heroku는 따른 remote한 저장소입니다!

join() 메소드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다! 바로 예제로 확인해봐요! arr = [] 배열을 만들어주고 arr.join() 메서드로 배열에 index 합쳐춥니다! 추가적으로 배열.push() 맨뒤에 배열 추가입니다 배열.unshift() 앞에 맨앞에 배열추가합니다 join() 메소드를 알아봤습니다!

이번 part3는 코드 리팩터리를 했습니다.. 개발자의 숙명이죠...중복코드를 줄이는것이요..... 저도 한번 리팩터리 작업을 했습니다ㅎㅎ 여기서 중요한것은 함수에 인자를넣고 인자값을 바뀌면 값을 주는 그런 형태입니다!! 자 그럼 시작해보죠ㅎㅎ 제 git의 part3 코드입니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code3/part03_2%EA%B0%9C%ED%99%94%EB%A9%B4%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A6%AC ajax 중복 코드이기떄문에 함수로 묶어서 뿌려 주겠습니다! function getDate(인자){ ajax.open('get' , 인자값 , false) } 저자리는 url이 들어가는 자리입니다 ..

Haker News Api를 Ajax 비동기 통신을 이용해서 어플리케이션을 개발해 보겠습니다. part2를 작업하면서 substr() 메소드 replace() 메소드를 활용해 보았습니다. part2 소스코드는 제 git올려져 있습니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code2 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 development by creating an account on GitHub. github.com part2 작업은 hash값으로 a..

자바스크립트를 쓰다보면 객체 , 배열은 항상 필요한 존재죠! 그래서 반복문 또한 중요한 부분중 하나입니다! 오늘은 배열에 반복문과 객체에 반복문을 다뤄 보겠습니다! 지금 제가쓴 for문은 가장 기본적인 방식이고 배열 과 객체를 저런식으로 반복문을 활요해서 값을 뽑아올수 있습니다!!!!

Haker News Api를 Ajax 활용해서 어플리케이션을 개발해 보겠습니다! Haker News Project 기본적인 어플리케이션 개발을 위한 기본 연습입니다! part1 부터 단계별로 나아가며 마지막에 기본적인 typescript 활용해보겠습니다! 다같이 공부해봐요!! Part1 = 12줄 Ajax 코드 짜기 코드참고는 저의 git에 올려두었습니다 https://github.com/yoogukhyeon/FrontendProject1/tree/code1 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 developm..

part1에서 기본적인 Ajax 원리를 알아보았다면 오늘은 실제 Api를 활용해봐요! 외부데이터를 받아노는 fetch API를 활용해서 받오겠습니다! PART1 참고해주세요 ㅎ API를 깊에 정의하면 어렵지만 저는 API를 정의한다면 잘만들어진 API에 사용방법을 알려줄께 그방법대로 우리의 API를 잘활용해봐 이렇게 이해해를 합니다 그럼 실제 API를 활용해보겠습니다 사이트는 https://yts.mx/api API Documentation - YTS YIFY Official YTS YIFY API documentation. YTS offers free API - an easy way to access the YIFY movies details. yts.mx Eedpoint는 Api 접속하기위한 url ..

addEventListener는 event 방식으로 가장 권장되는 이벤트 핸들러 입니다 사용방식문법또한 어렵지 않습니다! 객체.addEventListener('이벤트 종류' , 함수) or 객체.addEventListener('이벤트 종류' , function(){ }) 이런한 형태로 사용을 합니다 바로 예제 들어가보죠 브라우저를 열고 확인을 하시면 잘나옵니다! 이번엔 조금더 다양하게 해보겠습니다 문법을 이해해보면 onclick 이벤트 실행 if(document.getElementById('prevent').checked) checked property가 체크가 되어있다면 return false 실행시키지 마 이런뜻입니다! 참고로 target="_blank" 새창을 열겠다라는 속성 입니다. 이거는 pro..

NODE 객체는 DOM(Document Object Model) 에서 가장 최상위에 있는 객체입니다. Node 객체는 모든 하위객체에 뿌리와 같은 존재입니다 Node객체에는 다양한 종류 들이 있는데 오늘은 Node를 추가 , 제거 , 변경하는 방법을 알아보겠습니다. 프론트 작업중 유용하게 활용할수 있는 기술 입니다 저또한 작업중 활용한 NODE API를 활용해서 작업을 했던 기억이 있습니다 먼저 Node 객체를 추가해보겠습니다. = createElement() 엘리먼트 노드를 추가하고 = createTextNode() 로 Text추가하고 appendChild & insertBefore 를 활용해서 생성하고 추가할수있습니다 = 추가를할때는 대표적으로 appendChild 활용해서 마지막자식으로 추가하는것이..

요즘 웹사이트보시면 go-top이라고 window 스크롤 내리면 나오고 클릭을 하면 최상단으로 올라가는 화살표를 보실수 있었죠? 이것또한 쉬운 jquery 코드로 만들수 있습니다. 다같이 해보죠! 시작하기전에 Jquery cdn 코드에디터에 삽입하겠습니다! https://developers.google.com/speed/libraries#jquery Hosted Libraries | Google Developers A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries. developers.google.com Code &n..

태그에 속성을 다룰수 있는 Element 속성에 대해서 알아봐요! Element 속성 값을 제어 하는 기능들은 다음과 같습니다! - getAttribute(' 속성 ') - setAttribute (' 속성 ' , ' value ') - hasAttribute (' 속성 ') - removeAttribute(' 속성 ') 이렇게 4가지 있습니다! 한번 코딩으로 더 알아가봐요ㅎㅎ vs 코드를 켜고 아 참고로 t.id , t.getAttribute 같은 의미 입니다 방식이 다를뿐ㅎㅎ a에 href 속성 값을 바꾸고 싶다면 setAttribute로 속성 , 값으로 주시면 속성값은 바뀝니다! a에 title 추가 하고싶을때도 똑같은 방식입니다. 지우고 싶다면 removeAttribute 속성으로 지울수 있고 h..

항상 말하든 Jquery는 javascript라이브러리 이자 보다 편하고 짧은 코드로 강력한 기능을 구현할수 있는 라이브러리 입니다. 저도 jquery 자주 활용을 합니다. 오늘은 간단하고 기본적인 Tabmenu를 만들어보아요. jquery 쓰기 위해서는 jquery script 삽입을 해줘야되는데 저는 jquery cdn 사용합니다 참조 사이트 입니다 https://developers.google.com/speed/libraries#jquery Hosted Libraries | Google Developers A stable, reliable, high-speed, globally available content distribution network for the most popular open-sou..

JavaScript & TypeScript Study 시작 최근에 IT기술이 빠르게 변하고 새로운 기술들도 많이 나오는거 같습니다. 그래서 기술에 변화의 3가지 유형에 대해서 공부를 해봤습니다 1. 변하지않는 기술 : 네트워크 , 운영체제 , 컴퓨터 시스템 2. 느리게 변하는 기술 : 프로그래밍 언어, 알고리즘, 보안, 프로그래밍 패러다임 3. 빠르게 변하는 기술 : 프레임워크, 라이브러리, 디자인패턴, UI UX 1번 기술과 2번기술은 3번기술에 비해 더많은 지식과 스터디 양이 필요하고 노력이 필요합니다. 3번기술에 노력과 지식이 필요없다는 말은 아니에^^ 3번기술은 우리가 많이 사용하는 프레임워크, 라이브러리이며 트렌드를 많이 타고 빠르게 변하는 기술이며 공부를 할때도 가장 접근해서 기술을 습득하기 ..

현재 시점에서 가장 많은 사람들이 사용하는 javascript 라이브러리 Jquery 입니다. javascript비해서 jqeury 쉬운코드로 강력한 기능을 만들수 있기 때문입니다. 그래서 유지보수나 가독성이 뛰어난 효과를 볼수있습니다. 기본적인 문법을 알아봐요! 저는 기본적으로 Jquery CDN 사용합니다! " target="_blank" rel="noopener">https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> 실무에서는 주로 Jquery 파일을 다운로드 받아서 프로젝트에 삽입해서 사용하는 경우가 많습니다. 이것을 다운받아서 사용하면 됩니다 Download the compressed, production jQuery 버전 이것을..