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

[자바스크립트 알고리즘] 여러 개의 문자열 원소를 확인하고, 공통된 시작단어 반환하기

`Array.prototype.every()`는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하여 `true` 또는 `false`를 반환하는 메서드다.

약 14시간 전
·
0개의 댓글

[자바스크립트 알고리즘] 숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부 반환하기

숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요.num: 숫자return: true or false (뒤집은 모양이 num와 똑같은지 여부)예를 들어,num = 123return false => 뒤집은 모양이 321 이기 때문num

1일 전
·
0개의 댓글

[자바스크립트 알고리즘] 정수인 숫자를 인자로 받아, 숫자의 순서를 뒤집어서 return하기

reverse 함수에 정수인 숫자를 인자로 받습니다.그 숫자를 뒤집어서 return해주세요.x: 숫자return: 뒤집어진 숫자를 반환!예들 들어,x: 1234return: 4321x: -1234return: -4321x: 1230return: 321먼저 x의 부호는

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

[Javascript Project]인스타그램 클론코딩

인스타그램 메인페이지를 클론해보았습니다. 이전까지 만들어 온 바닐라 JS 기능 구현 방법이 많이 적용되었습니다. 이번 프로젝트는 사용자 경험을 고려한 세부적인 기획을 한다기보다는, 자바스크립트의 기본적인 메서드를 연습하는 것과 CSS을 탄탄한 구조로 짜는 것이 목표였습

4일 전
·
4개의 댓글

[자바스크립트 알고리즘] 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index 배열 리턴하기

twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면,더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요.nums: 숫자 배열target: 두 수를 더해서 나올 수 있는 합계return: 두 수의 index를 가진 숫자 배열예를 들어,nums

4일 전
·
0개의 댓글

[Javascript] innerHTML로 DOM 생성하기 예시 모음

바닐라 자바스크립트로 작은 웹앱을 만들어 보면서 innerHTML을 쓰는 경우가 많았다. 그런데 항상 다른 상황에서 다른 형태로 만들다 보니 그 때마다 다른 문제에 부딪쳤다. 지금까지 DOM 추가를 위해서 어떤 코드를 짰고, 각각 어떤 문제가 있었는지, 어떻게 해결했는

5일 전
·
0개의 댓글
post-thumbnail

[Javascript] 특정 숫자 범위에서 중복을 제외한 랜덤 숫자 뽑는 방법

사용자 정보를 담은 mock data를 만들고 화면에 랜덤으로 출력하는 코드를 짜게 되었다. 이전까지는 랜덤 데이터 또는 랜덤 숫자를 1개씩만 출력하면 되었기 때문에 하지 않아도 될 고민을 지금 하게 되었다. 랜덤 배열 중 여러 개를 뽑되, 그 여러 개에 중복되는 데이

5일 전
·
0개의 댓글
post-thumbnail

[Database] 스타벅스 DB 모델링 스터디

DB(Database)란 컴퓨터 시스템에 저장된 정보 또는 데이터의 집합을 의미한다. 일반적으로 프론트엔드 개발자는 DB를 설계할 일이 거의 없지만, 개발자라면 기본적으로 DBMS에 대한 지식을 갖추고 있어야 협업이 수월하다고 한다. 이번 세션에서는 데이터베이스가 무엇

5일 전
·
0개의 댓글
post-thumbnail

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

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

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

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

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

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

[CSS] Display 속성 - block, inline, inline-block 으로 요소 정렬하기, Float 속성으로 페이지 구조화하기

block, inline, inline-block의 개념을 명확히 짚고 넘어가고자 정리해보았습니다.

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

[CSS] Position: relative, absolute, fixed로 콘텐츠 정렬하는 법

position: relative; 는 '상대적인 위치'라는 의미를 가지고 있는데, 자기 자신의 원래 위치에서 이동하고 싶은 상하좌우 값을 설정하고 싶을 때 씁니다.

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

[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일
·
17개의 댓글
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개의 댓글