profile
빵굽는 프론트엔드 개발자
post-thumbnail

[Javascript Toy Project] Mini Game | 가위바위보 게임 만들기 토이프로젝트

바닐라 자바스크립트로 간단한 가위바위보 게임을 만들어보았습니다. 사용자가 가위, 바위, 보 중에 한 개를 선택하면 컴퓨터 측에서 랜덤으로 선택해, 그 결과를 출력해주는 방식입니다.

7일 전
·
4개의 댓글
post-thumbnail

[Javascript] Unary (+) Operator | 단항 연산자 (+)로 문자열을 숫자로 변환하는 법, 활용예시

자바스크립트에서 문자열을 숫자로 변환할 때 parseInt(), parseFloat(), Number() 등의 메서드를 사용하기도 하지만, 단항 연산자(+)를 사용하면 더욱 간단하고 가독성 좋게 변환할 수 있다.

2020년 11월 20일
·
3개의 댓글

[Web] Semantic Web / Semantic Tag 뜻

Semantic이란 의미론적이라는 뜻입니다. 웹의 각 요소가 어떤 역할을 하고 있는지 의미가 명확히 전달된다면 그것이 바로 Semantic Web이고, HTML의 태그의 명칭을 봤을 때 해당 태그가 어떤 의미를 가지는지 명확히 전달이 된다면 Semantic Tag입니다

2020년 11월 16일
·
0개의 댓글
post-thumbnail

[Javascript Toy Project] Expense Tracker | 가계부 앱 '작심소비' 토이프로젝트

수입과 지출을 관리할 수 있는 가계부 앱 '작심소비'를 기획해 보았습니다. 수입과 지출을 입력하면 내역을 한눈에 보고 거래 내역을 합산해 주는 기능을 가지고 있습니다.

2020년 11월 15일
·
12개의 댓글
post-thumbnail

[Javascript Toy Project] Random Meal Generator | 오늘뭐먹지? 토이프로젝트

오늘뭐먹지 서비스는 점심메뉴를 정해야 하는 모든 회사의 막내들을 위해 만들어졌습니다.

2020년 11월 13일
·
0개의 댓글
post-thumbnail

[Javascript] Showing Notification | 안내문구 나타났다가 사라지게 하기

게임이나 웹사이트에서 특정 행동을 했을 때 알림 문구 또는 경고 문구가 조그맣게 떴다가 사라지는 효과를 주고 싶을 때, setTimeout() 메서드로 해결할 수 있다.

2020년 11월 13일
·
0개의 댓글

[Javascript] Random Numbers | 원하는 범위의 랜덤 숫자 출력하는 방법, 배열 속 랜덤한 원소 출력하는 방법

프로그램을 짜다 보니 랜덤한 숫자나 문자를 출력해야 할 때가 생겼다. 이미 만들어 둔 문자 배열에서 랜덤한 문자를 가져와야 할 때도 있다. Math.random() 메서드를 이용해서 해결할 수 있다.

2020년 11월 11일
·
0개의 댓글
post-thumbnail

[Javascript]Closing modal on outside click | 모달창 외부 클릭해서 닫게 하는 방법

포트폴리오 사이트나 기업 웹사이트를 만들 때, 모달(modal)창의 닫기 버튼 말고도 모달창을 제외한 화면을 클릭해서 닫을 수 있도록 해야 사용자가 불편함 없이 사이트를 이용할 수 있다. 간단한 HTML 태그 구성과 자바스크립트 단 몇 줄이면 해결 가능하다.

2020년 11월 10일
·
0개의 댓글
post-thumbnail

[Javascript Toy Project] Exchange Rate App | 환율계산기 만들기 토이프로젝트

인터넷 강의를 따라 만든 환율 계산기의 자바스크립트 코드가 조금 가독성이 떨어져서, 재사용 및 확장에 용이한 방향으로 전반적인 코드를 개선하고 기능을 추가해보았습니다.

2020년 11월 10일
·
3개의 댓글
post-thumbnail

[Javascript] Fetch API, Async/Await 여러개 연결하기

Async/await 연습을 위해 내 아이피 주소로 국가코드(KR)를 받아와서, 그 국가코드를 이용하여 환율코드(KRW)를 받아 오고, 그 환율코드를 이용하여 환율(1,122.13원) 데이터를 받아 오는 코드를 짜 봤다. 각각 다른 API 주소에서 데이터를 가져온다.

2020년 11월 9일
·
0개의 댓글
post-thumbnail

[Javascript Toy Project] Movie Booking Page | 영화 예매 페이지 만들기 토이프로젝트

인터넷 강의를 보면서 영화관 자리 선택 페이지를 만들어보았습니다. 좌석을 선택하면 데이터가 저장되는 기능 위주로 초점이 맞추어진 강의였기 때문에 결과물이 마음에 차지 않아 몇 가지 기능을 추가하고 디자인을 개선했습니다.

2020년 11월 8일
·
0개의 댓글

[Javascript]Spread Operator | 스프레드 연산자 기본 문법 및 활용 방법

스프레드 연산자는 ES6에서 추가된, 배열을 합치고 분해하는 데 편리하게 사용할 수 있는 자바스크립트 문법이다.

2020년 11월 8일
·
0개의 댓글
post-thumbnail

[Javascript Toy Project] Register Page | 회원가입 페이지 만들기 토이프로젝트

반응형 회원가입 페이지를 구현해보았습니다. CSS에 뉴모피즘(Neumorphism) 디자인을 적용해 보았습니다. 폼이 전달되면 회원들의 데이터는 로컬스토리지에 보관됩니다.

2020년 11월 7일
·
0개의 댓글

[Javascript] How to make the first letter uppercased and the rest lowercased | 첫글자만 대문자로 만드는법

charAt()과 slice()를 적절히 활용한다.자바스크립트로 연습을 하다가 input값을 넣지 않고 제출을 눌렀을 때 해당 정보가 필요하다는 안내문구를 띄우는 코드를 작성하게 됐다.

2020년 11월 7일
·
0개의 댓글
post-thumbnail

[Javascript] querySelector('#id') vs getElementById('id') 차이점

가장 큰 차이점은 getElementById()는 말 그대로 id값으로만 엘리먼트를 선택할 수 있고, querySelector()는 class, id, 그리고 각 선택자들의 상대적인 위치의 태그를 선택해야 할 경우에도 활용할 수 있다.

2020년 11월 7일
·
5개의 댓글
post-thumbnail

[HTML/CSS Toy Project]YouTube Clone | 유튜브 클론코딩 + 직접 리디자인한 동영상서비스 UI 클론코딩

올해 코딩 재입문 후 처음 진행한 개인 미니 프로젝트다. 유튜브 클론코딩 강좌를 듣고 작업한 결과물이 맘에 안 들어서, 직접 나만의 동영상서비스를 디자인해서 코딩해 보았다.

2020년 11월 6일
·
2개의 댓글
post-thumbnail

[Javascript Toy Project] Notes App 노트앱 만들기 토이프로젝트

노트앱을 소개합니다. 노트 리스트를 보여주는 메인 페이지와, 개별 노트를 수정하는 페이지로 구성된 간단한 앱입니다. 아이폰 기본 노트 앱의 color theme을 참고하였습니다.

2020년 11월 6일
·
4개의 댓글
post-thumbnail

[Javascript Toy Project] Hangman Game | 행맨 미니게임 만들기 토이프로젝트

Javascript Class, Fetch API, async/await, DOM 등을 활용한 행맨 미니게임입니다.

2020년 11월 6일
·
0개의 댓글

[Javascript]window.addEventListener 'keypress', 'keydown' 무슨 차이인가요

결론: 기능에 차이는 없는데 전자는 오래된 property라 권장하지 않고, 최근엔 후자를 더 많이 쓴다.

2020년 11월 6일
·
0개의 댓글

[Javascript]Understanding Async/Await pattern | Async/Await 패턴 쓰는 이유

먼저 아무것도 리턴하지 않는 단순한 함수 processData()를 만들어보자. 결과가 undefined로 나온다.The async function always, always return a promise, that promise is resolved with the

2020년 11월 5일
·
0개의 댓글