cometruedream의 등록된 링크

키자드에 등록된 총 252개의 포스트를 확인하실 수 있습니다.

Tistory

엔터티(Entity) 종류

SQLD 시험준비 2일차 엔터티(Entity) 종류 엔터티의 종류는 유형과 무형에 따른 종류, 엔터티가 발생하는 시점에 따른 종류로 나누어 진다 엔터티를 유형과 무형으로 분류하는 기준은 물리적 형태의 존재 여부이다 1. 유형과 무형에 따른 엔터티의 종류 유형 엔터티 업무에서 도출되며 지속적으로 사용되는 엔터티이다 개념 엔터티 유형엔터티는 물리적 형태이지만, 개념 엔터티는 물리적 형태가 없다 사건 엔터티 비즈니스 프로세스를 실행하면서 생성되는 엔터티 이다 2. 발생 시점에 따른 엔터티 종류 기본 엔터티 (basic) 키 엔터티 중심 엔터티 (Main) 기본엔터티와 행위 엔터티 중간에 있는것 행위 엔터티 (Actice) 2개 이상의 엔터티로부터 발생된다 3. 속성의 특징과 종류 1. 속정의 특징 = 속성은 ..

원문보기 내부링크
Tistory

SQL 정규화(Normalization) 와 반정규화(De-Normalizat)

SQLD Study 4일차 정규화란? 1. 정규화는 데이터의 일관성, 최소한의 데이터 중복, 최대한의 데이터 유연성을 위한 방법이며 데이터를 분해하는 과정이다 2. 정규화는 데이터 중복을 제거하고 데이터 모델의 독립성을 확보하기 위한 방법이다 3. 정규화된 모델은 테이블로 분해되고 , Join을 수행하며 하나의 합집합으로 만들수 있다 정규화 절차 (저는 시험문제로 제출될수 있는 BCNF 까지만 공부를 했습니다) 정규화 절차 설명 제1정규화 속성(Attribute)의 원자성을 확보한다 중복값을 제거한다 기본키를 설정한다 제2정규화 기본키의 2개 이상의 속성으로 이루어진 경우, 부분 함수 종속성을 제거 한다 제 3정규화 기본키를 제외한 칼럼 간에 종속성을 제거한다 즉 , 이행 함수 종속성을 제거한다 BCNF..

원문보기 내부링크
Tistory

Node.js JWT 기반으로 사용자 인증 알아보기

1. JWT(Json Web Token) 많은 웹 서비스들은 사용자 인증을 구현하기 위해서 쿠키와 세션을 이용해왔습니다. 그런데 쿠키와 세션에는 여러 문제(보안 등등)들이 있어서, 최근에는 OAuth와 JWT 같은 토큰 기반으로 사용자 인증 방식을 사용합니다. OAuth 에 대해서? OAuth는 쉽게 말해서 Facebook , Google 같이 다른 어플리케이션으로 사용자 인증을 인가한 것. JWT 에 대해서? JWT는 사용자 정보를 JSON객체에 담아 이를 암호화하고 해싱 작업을 거쳐 문자열 토큰을 생성하는 기술입니다. 클라이언트는 이 토큰을 HTTP Header에 추가하여 요청을 보냄으로써 사용자 인증을 얻게 됩니다. JWT는 서버에 저장되지 않기 떄문에 서버 부하를 일으키지 않으면 , 해싱작업을 통..

원문보기 내부링크
Tistory

req 객체와 res 객체 , res.send 와 res.json 대해서

node.js express 프레임워크를 사용하면 기본적인 res객체 , req객체 , express()함수에 대해서 헷갈리거나 어려움을 느낄때가 있습니다 그래서 Express 공식 홈페이지를 참고하여 정리를 해봤습니다. req 객체 req.body : POST 정보를 가집니다. 파싱을 위해서 body-parser와 같은 패키지가 필요합니다. req.query : GET정보를 가집니다. 즉 , URL로 전송된 쿼리 스트링 파라미터를 담고 있습니다. req.params : 내가 이름 붙인 라우트 파라미터 정보를 가집니다 req.headers : HTTP의 Header 정보를 가집니다 res 객체 res.send : 다양한 유형의 응답을 전송(클라한테 보낼때 사용) res.redirect : 브라우저 리다이..

원문보기 내부링크
Tistory

MySql 구조 분석

회사 DATABASE TABLE 패턴과 자주쓰는 컬럼들을 정리했습니다. 저희 회사는 MYSQL 사용합니다 자주 사용하는 Data Type Char (문자형 데이터 타입) 고정 길이 데이터 타입 255byte (255자 까지) 지정된 길이보다 짧은 데이터를 입력될시 나머지 공간을 공백으로 채워진다 Varchar (문자형 데이터 타입) 가변 길이 데이터 타입 지정된 길이 보다 짧은 데이터를 입력될시 빈 공백을 채우지 않는다 Text (문자형 데이터 타입) 문자열 데이터 타입으로 장문에 글을 넣어야될때 사용된다 Int 정수형 데이터 타입 3byte로 unsigned 사용시에 음수값을 저장하지않는다 또한 INTEGER 라고도 사용한다 CHAR 와 VARCHAR 차이? char 와 varchar 차이 char는 ..

원문보기 내부링크
Tistory

오늘은 디버깅 으로 문제 해결

Sequelize 기반으로한 프로젝트 이고 저는 백엔드에서 데이터를 가공해서 프론트에 뿌려 주는 작업을 하고 있었습니다 프론트에서 데이터를 잘 가지고 오는데 데이터가 UNDIFIND가 자꾸떠서 계속 해서 삽질중 이였지만ㅎㅎ 이럴때는 백엔드 데이터도 디버깅을 하는 방법을 배웠습니다 sequelize.query() 저런식으로 가공해서 console.log()를 찍어보면 이런식으로 찍힙니다 배열안에 배열로 묶여있는 현상입니다 저는 저것을 파악 못하고 계속 해서 다르게 데이터를 넘겨주고 있었습니다 저런식으로 데이터를 뿌릴려면 한번더 배열에 묶어 줘야지 원하는 값이 나왔습니다. 반대로 sequelize.query()에 replacements를 보내준다면 이렇게 배열안에 바로 값이 떨어져서 제가 원하는값을 가공할수..

원문보기 내부링크
Tistory

관계형 데이터베이스 집합연산과 관계연산 & SQL 종류

SQL개발자 study 10일차 회사는 다니면서 병행하느라고 공부를 제대로 하지 못하고 있네요 ㅠㅠㅠㅠ 그래도 오늘은 아침일찍 출근해서 30분정도 끄적여본 공부를 다시 복습합니다 관계형 데이터베이스의 특징은 릴레이션을 사용해서 집합 연산과 관계 연산을 할 수 있다. 집합 연산 집한 연산 설명 합집합(UNION) - 두 개의 릴레이션을 하나로 합하는 것이다 차집합(DIFFERENCE) 본래 릴레이션에는 존재하지만 다른 릴레이션에는 존재하지 않는 것을 조회한다 교집합(INTERSECTION) 두 개의 릴레이션 간에 공통된 것을 조회한다 곱집합(CARTESIAN PRODUCT) 각 릴레이션에 존재하는 모든 데이터를 조합하여 연산한다 관계 연산 관계 연산 설명 선택 연산 릴레이션에서 조건에 맞는 행 만을 조회한..

원문보기 내부링크
Tistory

[문제해결] You are using safe update mode

에러현상 mysql 워크벤치를 사용할때 저런 에러현상이 나올떄가 있습니다. 이러한 에러 현상을 리턴합니다 Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Editor and reconnect. 이러한 현상이유는 테이블에서 키값을 이용한 UPDATE나 DELETE만을 허용하도록 되어 있는데, 그렇지 않게 좀더 넓은 범위의 SQL을 적용하려고 할떄 WORKBENCH에서 경고를 주는것입니다 다수에 쿼리 사용할떄 저런 에러 현상이 발생 합..

원문보기 내부링크
Tistory

Node.js express-generator와 미들웨어 개념

Express는 Node.js에서 가장 대표적인 프레임워크 입니다 Express활용해서 다양한 npm을 사용할수 있고 개발생산성을 높일수 있습니다 그리고 그런 뼈대를 잡아서 더 편리하고 손쉽게 폴더와 파일을생성해주는 express-generator 모듈이 있습니다 이 모듈을 통해서 프로젝트를 진행할 수 있습니다. 1. 비주얼 스튜디어를 켜고 2. Express-generator 모듈 설치 Npm 설치를 해야됩니다 -g 옵션은 global을 의미하면 하나의 옵션입니다 global로 설치한 모듈은 커맨더 창 어디에서든 명령어를 사용할 수 있습니다 3. 프로젝트 폴더에 스켈레톤 어플리케이션을 생성합니다 저런 명령어를 치면 ejs 기반에 view템플릿으로 폴더가와 파일들이 생성됩니다!!!! 아주 편리하고 좋습니..

원문보기 내부링크
Tistory

Jquery 활용한 modal창 만들기

오랜만에 글을 올립니다!! 회사 업무로 바빠서ㅠㅠㅠ 오늘은 간단하면서도 활용도가 높은 jquery 활용해서 modal창을 만들어 보았습니다. See the Pen Untitled by 유국현 (@yoogukhyeon) on CodePen.

원문보기 내부링크
Tistory

오늘은 git branch 활용하기 입니다

프로젝트를 하게되면 필수적으로 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 ..

원문보기 내부링크
Tistory

Git Authentication Failed 사용자 인증

git remote을 해서 사용을 하다보면 사용자 인증 오류가 날때가 있습니다. 즉 이런문구 : remote:invalid username or password. fatal:Authentication failed for 사용자 인증에 대한 오류가 뜹니다. 다양한 오류증에 로그인 오류 일수도 있고 토큰 만료일수도 있습니다 즉 해결 방법은 리모트된것을 지워줍니다. git remote remove origin git remote add origin https://유저네임:비밀번호@github.com/깃주소 이런식으로 해결을 하고 작업을 하면 됩니다!

원문보기 내부링크
Tistory

객체 생성과 this 에 대해서 알아봐요!

객체는 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙치는 것입니다. 또한 이것을 지칭하는 this 예약어도 있습니다 자바스크립트에서 중요한 부분중 하나입니다! 객체는 { } 안에 key 와 value 이뤄지는 형식 입니다! student 객체 안에 sum 함수도 넣을수있습니다 이런식으로 객체를 쓸수 있지만 불편한 점이 많습니다. 이미 student 객체는 내부적으로 math , science 점수를 알고있습니다. 하지만 저값을 받기위해서 또 다시 언급을 해야되는 번거로움이 있습니다 여기서 this 사용해서 더 편하리하게 만들수 있습니다! this 약속된 키워드 의미 입니다 this가 속해있는 메소드가 속해있는 객체를 가르키도록 하는 특수한 약속입니다 this 사용한다면 변수에 이름에 바꼇을때도 결과 값..

원문보기 내부링크
Tistory

Haker News project part2

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..

원문보기 내부링크
Tistory

JavaScript Ajax 비동기 통신에 대해서 알아보자 part3!

이번엔 마지막 part3로 ajax 이용해서 서버에 데이터를 통신해서 받은 데이터값을 UI단에 출력해보겠습니다. 먼저 Html에 표시에줄 테그를 만듭니다! DOM 으로 movieList 값을 가져오고 tag 빈 문자열을 만듭니다! 그리고 tag안에 데이터 값을 출력해주는 겁니다! 그리고 마지막으로 innerHtml = tag 넣어주면 !!! api 호출을 해서 브라우저에 뿌려준 기본적인 ajax 비동기통시을 활용했습니다! 다음번에는 다른 형태에 api 가져와서 뿌려보겠습니다!

원문보기 내부링크
Tistory

Haker News Part 3 코드 리팩터리

이번 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이 들어가는 자리입니다 ..

원문보기 내부링크
Tistory

Haker News Part4 , 6 , 7

part 4 6 7은 코드 양이 별로 없어서 같이 업로드 하겠습니다! 일단 Element 요소로 UI를 만드는 것은 비효율적이기 떄문에 문자열을 통해서 UI를 구현하고 라우터만들어 페이지 이동을하고 메인에 paging 을 구현했습니다! 제 git에서 코드를 보실수 있습니다!!! https://github.com/yoogukhyeon/FrontendProject1/tree/code6 NewsList 빈 배열을 만들어서 push로 문자열을 구현했습니다! 그리고 라우터 부분에 hash를 통해서 페이지 이동을 구현했습니다! paging을 구현해보겠습니다 가장먼저 store에 currentPage 저장소를 만들어 줍니다 그리고 페이지 이동을 UI를 만들고 속성에 저장된페이지 이동 값을 넣습니다 결과물이 잘나오네요..

원문보기 내부링크
Tistory

Haker News Part 8

이번 part 빈 template에 ui를 구현 해보겠습니다. 그리고 replace 써서 값을 넣어줘서 ui를 구현하는 문법을 사용해보겠습니다 그리고 댓글 ui 를 구현하는 로직을 짜보겠습니다 여기서 재귀함수라는 기술을 사용 해보겠습니다 저의 git에서 코드를 확인하실수 있습니다! https://github.com/yoogukhyeon/FrontendProject1/tree/code7 그리고 replace('a' , 'b') a에 값을 b로 바꾼다 라는 뜻입니다!!!! 여기서 replace 에대해서 공부할수있는 좋은 예시 였습니다! 댓글 함수도 만들어 보겠습니다. 인자값으로 comments 주고 스스로 comments값을 불러온다해서 재귀함수라고 합니다 빈 배열을 만들어서 push로 댓글에 대한 값과 u..

원문보기 내부링크
Tistory

javascript join 메소드에 대해서 알아봐요

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

원문보기 내부링크
Tistory

Haker News part 마무리

오늘로서 Haker News Part API를 가져오고 UI를 구현하는 어플리케이션 마무리를 해봅니다 전체 코드는 저의 git에 있습니다! https://github.com/yoogukhyeon/FrontendProject1 GitHub - yoogukhyeon/FrontendProject1: FrontendProject1 개발의 기본 FrontendProject1 개발의 기본. Contribute to yoogukhyeon/FrontendProject1 development by creating an account on GitHub. github.com 저번에 말한 replace() 메소드를 활용해서 key value 값을 교체하는 javascript 메소드를 활용해봤습니다 댓글도 구현을했습니다! 이번..

원문보기 내부링크
Tistory

요즘 많이 쓰이는 gnb floating 을 만들어봐요

오랜만에 jquery 이용한 기능 구현을 해보네요!! 오늘은 일정 스크롤이 되면 gnb가 나타나는 코드를 짜보아요 여기서 써야되는 메소드는 offset 입니다 그리도 addClass and removeClass 기능 입니다! 그리고 scroll 이벤트 또한 ui구현할때 많이 쓰는 이벤트 입니다 click , mouseover , mouseout 등등처럼요 CodePen See the Pen gnbFloating by 유국현 (@yoogukhyeon) on CodePen. 한번씩 따라해주시면 더 도움이 되겠죠?ㅎㅎ 감사합니다!

원문보기 내부링크
Tistory

오늘은 bind 알아봐요!

함수안에 this라는 것을 정의할수 있고 this를 활용해서 bind를 써보겠습니다 먼저 함수안에 this를 담을 객체가 필요해서 먼저 객체를 생성하고 객체 안에 name에 값을 넣습니다 그리고 showIntorduce 함수를 만들어서 파라미터값에 here , home , phone 넣고 console.log() 안에 값들을 넣어보겠습니다! 그리고 함수.bind(생성한 객체를 넣습니다); bind 함수를 변수 값에 넣고 boundsay라는 그리고 거기에 인자값을 넘겨 주면 됩니다! call , apply 방식은 조금 다릅니다! 결과값이 잘나오네요!

원문보기 내부링크
Tistory

오늘은 Github에 저장소이름 바꿔봐요!

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

원문보기 내부링크
Tistory

Array splice() 함수에 대해서 알아봐요!

javascript 배열 객체에서 제공되는 함수인 splice() 함수를 이용하면 위치에 요소 추가 or 삭제를 유용하게 할수있습니다. 즉 Array.splice() 함수는 원하는 위치의 요소를 추가 or 삭제를 합니다! 문법또한 이해하기 쉽습니다! Array.splice(시작점 , 길이 , 배열추가 , 배열추가) 이런식인데 아마도 코드를 보시면 훨씬 이해하기가 쉬울꺼 같습니다! vs 코드를 켜주시고 배열 안에 값을들 넣어주시고 배열을 담고있는 m 안에 배열함수 splice()에 5번째에 길이는 0이고 추가1 추가2 를 추가해줘 이런 문법입니다! 역시 결과물은 잘나왔네요!!! 5번째 index가 5번 이니까요ㅎㅎ 다른 방식으로 해보죠 index 1번 뒤에 1뒤에추가 2뒤에추가 추가해줘 이런 문법입니다 결..

원문보기 내부링크
Tistory

오늘은 geolocation API 알아봐요

geolocation API는 사용자의 현재위치 정보를 가져올때 사용하는 javascript API 입니다 사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송됩니다! 저는 여기서 geolocationAPI에 메소드인 getCurrentPosition()을 써서 메소드의 반환값인 coords.latitude 와 coords.longitude를 활용해서 값을 가져와 볼께요! 각각에 메소드는 어떤건가요? getCurrentPosition() : 사용자의 현재 위치를 가져오는 겁니다 coords.latitude : 소수로 표현된 위도 값 coords.longitude : 소수로 표현된 경도 값 그럼 한번 코드를 작성해 보겠습니다! html 을 작성해주시고! DOM으로 값을 변수로 담고 f..

원문보기 내부링크
Tistory

javascript 활용해서 plus and minus 만들어봐요!

simple한 plus and minus 만들어 봐요 여기서 배울 javascript 문법은 Dom 과 innerText 그리고 parseInt 와 삼합연산자 입니다! Dom은 HTML 테그를 가져와서 활용할수있고 innerText는 텍스트 노드를 추가할수있습니다 parselnt 소수점을 없애고 정수로 바꾸는 함수 입니다 codePen See the Pen plusandminus by 유국현 (@yoogukhyeon) on CodePen.

원문보기 내부링크
Tistory

오늘은 자바스크립트에 문서 로딩 순서 제어하기

작업을 준비하다 보면 작업을 하다보면 Script위치를 어디에 놓는게 좋을까요? 제일 좋은 방법은 body 태그 최하단에 놓는것이 가장 좋습니다! 일단 브라우저의 동작 방식은 1. Html을 읽기 시작합니다 2. Html을 파싱합니다 3. DOM 트리를 생성합니다 4. DOM 트리 + CSS을 생성되고 로드가됩니다 여기서 우리가 스크립트를 중간이나 최상위에 놓는다면 Html 읽는 과정에서 중간에 스크립트를 만난다면 파싱을 하는데 지연이 될것이고 스크립트를 못읽는 현상이 발생할수도 있습니다 그래서 저희는 가장좋은 방법은 body 최하단에 script을 넣는것이 가장 좋습니다. 그럼 스크립트 로딩 순서를 제어해보죠 async 방식은 비동기 방식으로 html 중단되지 않고 진행이 됩니다 defer 문서가 다 ..

원문보기 내부링크
Tistory

OOP (object oriented programing )을 공부해요

OOP라 불리며 object oriented programing 객체지향 이라고 부릅니다! 객체 프로그래밍 방식 OOP는 객체들의 유기적인 관계를 통해서 프로세스가 진행이 됩니다. 즉, 어플리케이션을 구성하는 요소들을 객체로 바라보고, 객체들을 유기적으로 연결하여 프로그래밍 하는 것을 말합니다. OOP 장점은 코드 재사용이 높아지고 유지보수가 쉽고 크도가 간결해집니다! 단점은 처리 시간이 비교적 오래 걸리고 프로그램을 설계할때 많은 고민과 시간을 투자해야합니다 OOP의 특징 4가지 추상화 : 추상화는 목적과 관련이 없는 부분을 제거하여 필요한 부분만을 표현하기 위한 개념입니다 즉 인터페이스로 클래스들의 공통적인 특성들을 묶어 표현한것 캡슐화 : 실제로 구현 부분을 외부에 드러나지 않도록 하는것 , 변수와..

원문보기 내부링크
Tistory

오늘은 javascript에 데이터타입을 알아봐요!

javascript를 공부하다보면은 자료형에 대해서 알게되는데요 그래서 오늘은 javascript 자료형에 대해서 공부를해봐요! 데이터는 값과 값의 유형으로 구분되어져있습니다. 자료형이란 즉 값의 유형입니다 값이 가질수있는 여러가지 유형의 개념을 말합니다 javascript 2가지로 나눠질수있는데요 원시 타입(primitive type) 참조 타입(reference type) 이렇게 2가지로 나눠질수있습니다. 원시타입은 기본 자료형입니다 이렇게 준비를 해보시면 typeof() 함수는 javascript에 타입을 알수있는 함수입니다. 이렇게 각각에 타입을 말해주고 있습니다! 이번엔 참조 타입 참조 자료형입니다. 참조타입은 배열 , 객체 , 함수를 말하는데요 이것또한 typeof를 활용해서 타입을 알아낼수있..

원문보기 내부링크
Tistory

javascript 함수에 대해서 공부해요

javascript에서 함수는 정말 중요한 부분인데요. javascript는 함수가 값으로 될수있습니다 그래서 함수를 활용하는방법은 아는것은 정말 중요합니다. function 이라는 함수 키워드로 ()중괄호 {}호로 함수 키워드를 선언할수있습니다 그리고 함수는 함수 선언식, 함수 표현식으로 나눠질수 있습니다. 함수 선언식은 function printFunc(){ console.log('hello') } 함수 표현식은 const func = function printFunc(){ console.log('hello') } 이렇게 사용할수 있습니다 그럼 vs코드를 켜서 볼께요 이렇게 함수에 중괄호는 매개변수가 들어가는자리이고요 대괄호 안에는 함수에 작동하는 값들이 들어가는곳입니다! 저렇게 함수안에 값을 con..

원문보기 내부링크
Tistory

Git 에 대해

개발 & 프로젝트를 진행할때 이메일 메신저를 통해서 협업을 하는것은 상당히 힘들고 어려운 일입니다. 그러한 상황을 개선하고나 쓰는 관리시스템중하나인 GIT에 대해서 알아보겠습니다! Git - 버전 관리 시스템의 종류 * 버전관리 : 여러 파일을 하나의 버전으로 묶어 관리하는 것입니다 버전 관리 시스템의 종류 1. 클라이언트 - 서버 모델 - 하나의 중앙 서버로 여러 클라이언트들이 각자 필요한 데이터만 가져와서 작업을 하고, 다시 중앙 서버로 보내서 통합하는 방식 (CVS(Concurrent Versions System 동시버전관리) , SVN(SubVersion 형상관리)) 2. 분산 모델 - 하나의 중앙 서버가 존재하지만 여러 클라이언트들은 각자의 컴퓨터 저장소에 전세 사본을 가지고 작업하는 방식 Gi..

원문보기 내부링크
Tistory

캐시와 쿠키에 대해서 알아봐요!

제가 다니는회사에서 프론트단에서 관리하는 큰규모에 사이트가 있었습니다. 그 사이트를 유지보수를 하다보면 여러가지 이슈들이 있었지만 그중에서도 캐시(cache)문제 트래픽(traffic)문제가 있었다. 나도 이해를 잘못하고 기획팀 디자이팀에게도 설명할 정도에 수준이 안되어서 다같이 힘들었던 기억이 있습니다........그래서 cache & traffic 대해서 알아봅시다! 캐시 & 쿠키를 사용 하는 이유? 쿠키를 사용 하는 이유? 쿠키와 캐시를 사용하는 가장큰이유는 서버가 사용자에게 빠른 검색 결과와 정보를 제공하기 위함 입니다. 웹 사이트를 돌아다니다보면 아이디를 기억하고 있는 사이트 또는 전에 검색한 키워드 들이 저장되어 있는 경험을 해본신적이 있을겁니다. 그럴수 있었던 이유는 본의 즉 client 컴..

원문보기 내부링크
Tistory

전역객체 대해서 알아봐요

전역객체란? Window 객체는 식별자 Window를 통해서 얻을 수 있다. Window 최상위에 있고 DOM (Document Object Model)은 XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스다 BOM (Browser Object Model) BOM은 전역객체인 window의 프토퍼티와 메소드를 제어할 수 있다. 현재 브라우저에 정보를 가르쳐주는 객체이다 JAVASCRIPT 객체지향언어이자 Window 객체안에있는 객체이다. vs 켜서 이코드를 작성해보자 그리고 chrom 개발자 모드를 켜고 f12 하지만 window.a 해도 값은 1입니다 그이유는 위에 설명했듯이 window 최상위 객체이기때문에 window 생략을하고 a값을 호출할수있습니다! Reference https://w..

원문보기 내부링크
Tistory

Jquery 기본문법을 알아봐요!

현재 시점에서 가장 많은 사람들이 사용하는 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 버전 이것을..

원문보기 내부링크
Tistory

TypeScript

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

원문보기 내부링크
Tistory

오늘은 Tab-Menu 만들어 봐요!

항상 말하든 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..

원문보기 내부링크
Tistory

Modern JavaScript & TypeScript 개발환경

요즘 프론트엔드 개발환경은 굉장히 복잡하게 이루어져 있고 프론트엔드 개발환경은 제공되는 tool 과 tool 때문에 빠르게 변화합니다. 이러한 이유는 웹앱에 규모가 굉장히 커지고 있기 때문입니다. 또한 웹개발을 하면서 javascript 얼마나 큰 영향력을 가지고 있는지 알수있습니다. javascript 사용하는 개발자라면 ES6 표준 , ES5 , ES2020 등 단어들을 들어본적 있으실 겁니다 ES = ECMAScript 약자 입니다 ECMAScript 란? ECMAScript는 말 그대로 Ecma라는 기관이 만든 script 언어 이며, ECMA-262 표준를 따르고 있다. ECMAScript는 ECMA-262에 의해 표준화된 자바스크립트의 새로운 이름이다. 보편적으로 ES2015 이후로 대부분 개..

원문보기 내부링크
Tistory

Element Api 속성에 에대서 알아봐요!

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

원문보기 내부링크
Tistory

오늘은 go-Top 만들어봐요

요즘 웹사이트보시면 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..

원문보기 내부링크
Tistory

NODE 최상의 객체를 활용해봐요!

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

원문보기 내부링크
Tistory

오늘은 floating 만들어봐요!

사이트를 보시다보면 자주 볼수있는 floating 메뉴바죠ㅎㅎ 이것또한 jquery로 간단하게 만들수있습니다 scrollTop 기능만 잘 활용한다면 간단하고 쉬운코드로 만들수있습니다 Code Pen See the Pen floating by 유국현 (@yoogukhyeon) on CodePen. 이렇게 쉬운 코드롤 floating menu bar 완성입니다!

원문보기 내부링크
Tistory

오늘은 addEventListener 에 대해서 알아봐요!

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

원문보기 내부링크
Tistory

JavaScript Ajax 비동기 통신에 대해서 알아보자 part2!

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 ..

원문보기 내부링크
Tistory

Haker News project part 1

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..

원문보기 내부링크
Tistory

JavaScript 객체 , 배열 사용하기!

JavaScript 프로젝트를 진행하다보면 코드양이 많아지고 복잡해집니다! 그래서 코드의 복잡성을 단순하게 만드는 여러가지도구중 객체라는 도구를 활용해서 코드의 복잡성을 줄이는 기술입니다. 객체는 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것이라고 이해하시면 됩니다! 저는 node.js 기반으로 작업을해서 터미널에서 확인이 가능합니다! node.js 아니더라고 스크립트에서 브라우저 단에서 연습이 가능합니다! 배열에 형태 var 변수이름 = [' ',' ',' ']; 배열에 index 순서는 0 1 2 3 .... 이런식으로 읽습니다! 객체에 형태는 var 변수이름 = { key : value} 이번엔 객체를 수정하고 삭제 해보겠습니다 잘 수정되고 삭제 되었습니다!!! 출처 생활코딩

원문보기 내부링크
Tistory

JavaScript 객체 , 배열 반복문 활용!

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

원문보기 내부링크
Tistory

JavaScript Foreach 알아보자!

안녕하세요! 오늘은 Foreach 대해서 알아보겠습니다! ForEach 메서드는 무엇인가? forEach는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 값을 배열요소로 각각에 대해 값을 출력하는 형태입니다! forEach는 return 하는 값을 따로 모아서 어떤 처리를 하는 과정이 없기 때문에 변수에 할당하기 보다는 if , 반복문으로 바로 호출되는것이 일반적입니다!! 이해를 하기위해서 코드를 짜보았습니다! vs 켜주시고! 첫번쨰로 배열을 만들고 ForEach 메서드를 사용 해보겠습니다! 그리고 나서 결과를 보면!!! 하나더 추가한다면!! 결과를보면 이렇게 name 값만 가져올수 있습니다 ㅎㅎ 부족한 정보지만 감사합니다~^^

원문보기 내부링크
Tistory

오늘은 Filter 함수에 대해서 알아봐요!

filter 함수는 간다한게 요약하자면 조건에 맞는 요소들을 모아서 새로운 배열을 생성한다 라고 이해하시면 됩니다! 그럼 바로 예제로 들어가볼께요 vs를 켜고 그리고 나서 aaa배열에 12 이상에 숫자들을 출력해보자ㅎㅎ 번외로 요런 형태로도 출력이 가능해요!!!^^ 감사합니다!!ㅎ

원문보기 내부링크
Tistory

jQuery에 정의

제이쿼리(jQuery)란? 제이쿼리는 오픈 소스 기반에 자바스크립트 라이브러리로 자바스크립트를 더욱 쉽고 편리하게 이해하고 사용할수있게 해주는 라이브러리 입니다!! 코드 자체가 이해하기 쉽고 사용하기 편리하기 떄문에 짧고 단순한 코더로 웹 페이지에 다양한 효과를 적용시킬수 있습니다!! 사용하기 쉽기 떄문에 인기가 있는 라이브러리 중하나입니다! 제이쿼리 더알아보기! jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simp..

원문보기 내부링크
Tistory

Ajax 비동기 통신에 대해서 알아보자!

AJAX (Asynchronous Javascript and XML) 저도 이기술을 공부할떄 조금 힘들었지만 언제가는 공부를 해야되고 알아야되는 분야이므로 오늘은 AJAX(Asynchronous Javascript and XML) 에 대해서 알아봐요! AJAX (Asynchronous Javascript and XML) 비동기 통신 이므로 웹페이지의 이동없이 필요한 데이터만 전송하는 기술이다 일반적인 경우 데이터 처리는 요청 순서대로 하지만 AJAX경우 순차적그로 진행하지않는다 비동기 통신의 여러방법 1.XML HttpRequest 객체 2.fetch Api 3.Axios 라이브러리 4.제이쿼리 동기 vs 비동기 동기는 순서대로 실행한다는 의미인데 ex: 1 2 3 4 있다면 1 처리 하고 2 처리 하고..

원문보기 내부링크
Tistory

javascript map() 함수 알아보자

값이 여러개 있는 배열에서 모든 값을 꺼내는 방식은 다양하게 알려져 있습니다 대표적으로 for문,,,하지만 오늘은 map() 함수를 다뤄보도록 하겠습니다 vs코드를 여시고 let getStarted arr 배열에 값을 꺼내고 싶을때 for문이 가장먼저 생각이 나는데 한번 만들어보겠습니다. 이거는 가장많이 쓰니는 for문 이였습니다 map() 함수를 써볼께요 map() 함수란? 즉 map() 함수를 활용해서 인덱스 인자와 for문에 방식을 같이 활용해서 쓸수 있는 함수입니다. 바로 예제로 let's get started 그럼 결과값은? 마지막으로 map() 함수를 활용해서 여러개 배열문에 값들을 뽑아 볼께요 오늘은 map() 함수를 공부해보았습니다 감사합니다!

원문보기 내부링크
Tistory

Node.js 는 무엇인가?

요즘 개발에서 JavaScript 활용도가 높아지면서 Node.js를 활용하는곳이 점차 늘고 있습니다! 저또한 Node.js를 Study하는 중입니다!!ㅎ 그렇다면 Node.js란 무엇일까요???? 웹어플리케이션을 개발할때 JavaScript를 사용하게 되는데 모든 브라우저는 JavaScript 코드를 해석하기위해서 자바스크립트 엔진을 내장하고 있습니다!ㅎ 쉽게 설명하자면 - 백엔드 개발자가 사용하는 언어 - 서버에서 실행되는 자바스크립트 언어 (브라우저에서쓰는 자바스크립트 언어하고는 달라요!) - Google V8 JavaScript 엔진을 사용하여 코드를 실행하고 기본 모듈로 자바스크립트로 사용됩니다. - Node.js는 웹서버(Apache, IIS, Zeus ..)과 같은 소프트웨어가 필요없이 웹 ..

원문보기 내부링크
1 2 3