꿈많은 DEVELOPER

🤷‍♂️ 리액트와 타입스크립트 조합React와 Typescript는 강력한 조합으로 코드 베이스를 더욱 안전하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.하지만 입문자 분들께서는 React hook에 Typescript를 정의하는 게 불편하고 까다로울 수도 있습니다. 이 글을 통해서 useState, useEffect, useContext, useRef 그리고 Custom Hook에서 Typescript를 정의하는 방법을 자세히 알아보겠습니다. React Hook 사용개념보다는 TypeScript를 정의하고 사용하는 방법에 대해서 자세히 다루고 있습니다.  "> HTML 삽입미리보기할 수 없는 소스 2024.07.31 - [React] - 리액트 useLayoutEffect 개념 및 사용법 리액트 ..

🤷‍♂️ 타입스크립트란?요즘 타입스크립트(typescript)는 국룰처럼 프런트엔드, 백엔드에서 많이 사용되는 오픈소스 프로그래밍 언어입니다.저 또한 타입스크립트 활용하며 더욱 안전하고 좋은코드를 만들기 위해서 노력합니다.본론으로 가서 타입스크립트는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로 자바스크립트 슈퍼셋으로 즉 자바스크립트의 상위 확장자로 자바스크립트 엔진을 활용하며 변수의 타입을 정의하고 프로그래밍하면 자바스크립트로 컴파일되어 실행할 수 있습니다. "> HTML 삽입미리보기할 수 없는 소스 [TypeScript] 타입스크립트 타입정의 공부하기https://cometruedream.tistory.com/125 [TypeScript] 타입스크립트 타입정의🤳 TypeScript 기본 ..

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 배열 join() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/254 [자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개념 및 사용법🤷‍♂️ 본론에 앞서배열은 javascript에서 가장 중요한 데이터 자료구조 중 하나입니다.배열에 내장함수를 활용하는 것은 javascript에서 중요한 부분 중 하나이며 join() 배열 메서드는 배열을 합cometruedream.tistory.com  배열 map(), forEach() 인기있는 메서드 사용법에 대해 알아보기https://cometruedream.tistory.com/253 [자바스크립트] 배열(array)을 처리하는 인기있는 ..

🤷‍♂️ 본론에 앞서자바스크립트는 현재 웹/앱 개발 트렌드에서 필수적으로 사용되는 프로그래밍 언어입니다. 여러 아이템을 저장하는데 사용되는 배열과 이를 파싱하며 새로운 데이터를 생성하고 조작하는데 필요한 자바스크립트 내장함수인 map(), forEach()라는 두 가지 인기 있는 배열 메소드에 대해 알고 계실 겁니다. 이 두 배열 메소드는 배열에 루프를 처리하는 기능이 비슷하지만 중요한 차이점이 있습니다. 이 차이점을 공부하여 배열 메소드를 더 효율적으로 활용할 수 있도록 알아보겠습니다.  " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ 배열(array)이란?배열은 여러 개의 아이템을 순서대로 저장, 추가, 삭제할 수 있는 자료구조입니다. 배열은 각 요소에 인덱스..

🤷‍♂️ 자바스크립트 내장 함수란?자바스크립트를 효율적으로 활용하려면 내장 함수를 잘 사용해야 합니다.내장 함수는 자바스크립트에서 미리 선언된 함수로, 호출만으로 사용할 수 있습니다.자바스크립트 언어를 사용한다면 기본적으로 제공하는 함수들을 활용해서 다양한 작업을 쉽고 효율적인 코드로 사용할 수있게 도와줍니다. javascript map() 함수 알아보자!https://cometruedream.tistory.com/7 javascript map() 함수 알아보자값이 여러개 있는 배열에서 모든 값을 꺼내는 방식은 다양하게 알려져 있습니다 대표적으로 for문,,,하지만 오늘은 map() 함수를 다뤄보도록 하겠습니다  vs코드를 여시고 let getStartedarr 배열에cometruedream.tisto..

51일차 첫번째 문제 문제: 숫자 문자열과 영단어 난이도: 중 풀이 과정: 매개 변수 s 문자열 length만큼 for문을 순회하고 변수 2개들 만들고 순회하는 원소 값이 숫자면 정규식 조건에 걸려 result 에 값을 할당하고 숫자가 아니고 문자열이면 currentNumber에 문자를 할당해서 numberMap에 문자열에 프로퍼티가 할당 되면 프로퍼티에 값을 할당하고 currnentNumber 값을 초기화 해준다. 참고사항: 문자열도 길이가 있어서 for문 순회가 가능하다. hasOwnProperty는 객체에 특정 값이 있는지 블리언 값으로 반환한다. https://school.programmers.co.kr/learn/courses/30/lessons/81301 프로그래머스 코드 중심의 개발자 채용...

50일차 첫번째 문제 문제: 제일 작은수 제거하기 난이도: 하 풀이 과정: 매개변수 arr를 Math.min 스프레드 구문으로 배열에 최소값을 찾아서 상수에 담고 매개변수 arr filter 메소드를 활용해서 최소값에 상수와 다른것들만 걸러내서 상수에 담는다. 배열에 값이 1개거나 이하라면 [-1]반환하고 아니면 filter로 걸러낸 배열에 값을 return 참고사항: Math.min() 최소값을 찾을수 있고 스프레드 구문으로 배열에 최소값을 찾는다. Math.max() 최대값을 찾을수 있다. filter 함수는 배열에 순회해서 값들을 필터할 수 있다. 삼항연산자 true = ? false = : https://school.programmers.co.kr/learn/courses/30/lessons/12..

49일차 첫번째 문제 문제: 직사각형 별찍기 난이도: 하 풀이 과정: row 3줄이며 a N개수 만큼 * 채워져야해서 repeat 함수로 문자열을 개수만큼 돌려서 셋팅하고 b개수만큼 for 문을 순회하며 값을 출력한다. 참고사항: repeat 함수는 문자열은 개수만큼 반복한다. 이 문제 로직은 게시판에서 별표 평점을 내는 기능이나 이런곳에서 활용할수 있는 로직으로 문제를 풀었다. https://school.programmers.co.kr/learn/courses/30/lessons/12969 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

47일차 첫번째 문제 문제: 부족한 금액 계산하기 난이도: 중하 풀이 과정: 매개변수 price, money, count 자연수로 넘어오고 count만큼 for문을 순회하고 result 변수에 price N배의 값을 축적한다. money 값이 result 값에 같거나 이상이면 반환할 값이 없기 때문에 0 아니라면 result값과 money값을 빼줘서 return한다. 참고사항: 삼항연산자는 조건 연산자로 가독성과 쉽게 조건문을 표현할 수 있다. https://school.programmers.co.kr/learn/courses/30/lessons/82612 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을..

47일차 첫번째 문제 문제: 없는 숫자 더하기 난이도: 중하 풀이 과정: 매개변수로 넘어오는 배열에 원소는 0~9 중 일부가 있어서 0~9 숫자가 담긴 배열을 하나 만들고 for문으로 순회하면서 매개변수 배열에 특정 숫자가 없으면 그 숫자를 result에 더해서 return 값을 반환 참고사항: let 블록스코프이며 재할당이 가능하다. includes 메소드는 특정 문자열을 찾는데 사용하면 특정문자열이 있으면 true 없으면 false 반환한다 https://school.programmers.co.kr/learn/courses/30/lessons/86051 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을..

36일차 첫번째 문제 문제: 대소문자 바꿔서 출력 난이도: 하 풀이 과정: str 문자열 값을 split 함수로 배열로 만들고 map돌려서 javascript 알파벳 소대문자 메소드를 활용해서 값을 반환하고 join 함수로 문자열 반환 참고사항: javascript 알파벳 소대문자 메소드로 toUpperCase() (대문자) 와 toLowerCase() (소문자) 사용한다. https://school.programmers.co.kr/learn/courses/30/lessons/181949?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programme..

35일차 첫번째 문제 문제: OX퀴즈 난이도: 하 풀이 과정: 매개변수 quiz에 원소들을 for문을 돌려 순회하고 원소에 값들을 split하고 구조분해할당으로 if 조건문으로 값을 할당. 참고사항: 배열, 객체에 값들을 분해해서 값을 할당받을수 있는 표현식. https://school.programmers.co.kr/learn/courses/30/lessons/120907 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

31일차 첫번째 문제 문제: 등수 매기기 난이도: 하 풀이 과정: 매개변수로 넘어오는 2차원배열 score에 map 함수로 평균 점수 값을 구하고 sort 함수로 내림차순 정렬을 한다. 정렬하지 않은 배열을 평균값을 구해서 하나더 만들고 map을 돌려서 내림차순으로 정렬된 배열에 indexOf +1 을 해서 값을 반환 참고사항: indexOf 문자열에 위치 값을 반환해주고 아니면 -1 반환 자바스크립트 사칙 연산 순위: * / + - 이고 ( ) 우선 순위로 계산 https://school.programmers.co.kr/learn/courses/30/lessons/120882?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤..

30일차 첫번째 문제 문제: 컨트롤 제트 난이도: 하 풀이 과정: 매개변수 s를 split 함수로 공백 으로 짤라주고 값을 정의해줄상수 result = 0 으로 for문을 순회하면서 Z가 아니숫자 들을 더하고 Z에 원소를 순회할때 이전 원소를 빼주는 if 조선문으로 풀이 참고사항: split 공백기준으로 짤름 https://school.programmers.co.kr/learn/courses/30/lessons/120853?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

29일차 첫번째 문제 문제: 문자열 밀기 난이도: 하 풀이 과정: 첫번째 풀이 과정에서 while 문을 사용했다 하지만 다른 코드를 찾아보고 공부를 하면서 더 간단하고 쉽게 풀수 있는 indexOf 방식이 있어서 indexOf를 활용해서 결과값 추출 첫번째 풀이과정. 참고사항: indexOf 함수는 알고리즘문제 에서 자주사용되서 숙지를 하면 좋다. indexOf는 문자열을 찾을때 많이 사용된다. 문자열을 찾으면 문자열 index 위치를 반환하고 없으면 -1을 반환한다. https://school.programmers.co.kr/learn/courses/30/lessons/120921 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기..

26일차 첫번째 문제 문제: 진료 순서 정하기 난이도: 하중 풀이 과정: 매개변수에 값을 sort로 내림차순으로 정렬을한 배열을 하나 복사하고 원본 배열에 map을 순회하면서 복사한 배열에 indexOf 메소드로 index를 찾아서 반환하고 배열은 0부터 시작하기 때문에 +1을 해준다. 참고사항: slice 는 얇은 복사로 원본에 배열을 건드리지 않고 얕은 복사본으로 새로운 배열 객체를 반환. indexOf 배열에 값이 몇번째 index 인지 찾아준다 그래서 내림차순으로 0, 1, 2 이런식으로 index를 찾아서 반환한다. https://school.programmers.co.kr/learn/courses/30/lessons/120835 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭...

25일차 첫번째 문제 문제: 잘라서 배열 저장하기 난이도: 하중 풀이 과정: 매개변수 my_str index만큼 for문을 순회하고 for문의 증감을 n 개수 만큼으로 할당하고 slice로 각각의 문자를 잘라준다. ex 1번순회: 0, 6, 2번순회: 6, 12, 3번순회: 12, 18 참고사항: slice 는 얇은 복사로 원본에 배열을 건드리지 않고 얕은 복사본으로 새로운 배열 객체를 반환. https://school.programmers.co.kr/learn/courses/30/lessons/120913 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

16일차 첫번째 문제 문제: 배열 회전 시키기 난이도: 하 풀이 과정: 오른쪽으로 회전 시킬시에 javascript pop 함수로 뒤에 값을 빼서 unshift 함수로 pop으로 뺀 값을 맨 앞에 할당 왼쪽으로 회전시킬시 역으로 shift 함수로 앞에 값을 빼서 push 함수로 맨 뒤로 값을 할당. 참고사항: javascript 배열 함수 pop, unshift, shift, push 개념 필요 https://school.programmers.co.kr/learn/courses/30/lessons/120844 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

15일차 첫번째 문제 문제: 가위 바위 보 난이도: 하 풀이 과정: javascript 내장함수 split 활용해서 배열로 만들어 주고 map 활용해서 배열을 순회해서 가위 바위 보에 이기는 값들을 조건문으로 할당하고 join으로 배열을 문자열로 푼다. 참고사항: split 개념, map 개념, if문 개념. split 말고도 [...rsp] 스프레드 연산자 혹은 Array.from() 활용해서 문자열을 배열로 만들수 있다. https://school.programmers.co.kr/learn/courses/30/lessons/120839 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. ..

14일차 첫번째 문제 문제: 배열의 유사도 난이도: 하 풀이 과정: javascript 내장함수 filter를 활용하고 includes 메소드를 활용해서 배열에 원소값을 찾아서 풀음 참고사항: filter 개념 알고리즘 문제풀이에 자주사용. includes: javascript 메소드로 배열에 특정값을 판별하는데 사용한다 반환값으로 특정값이 있으면 true 없으면 false를 반환. https://school.programmers.co.kr/learn/courses/30/lessons/120903 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

13일차 첫번째 문제 문제: 특정 문자열 지우기 난이도: 하 풀이 과정: 다양한 방법으로 특정 문자열을 찾을 수 있다. split 함수로 letter 매개변수 값을 짤라서 join 으로 문자열로 반환 하는 방법도 있었고 replaceAll 활용해서 특정 문자열을 제거할 수 있다. 정규식 공부할겸 정규식을 활용해서 풀음 참고사항: new RegExp 인스턴스를 사용 https://school.programmers.co.kr/learn/courses/30/lessons/120826 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

12일차 첫번째 문제 문제: 문자열 뒤집기 난이도: 하 풀이 과정: 문자열을 javascript 내장함수 split 문자열을 배열로 만들고 reverse 순서를 뒤집고 join 배열을 문자열로 합쳐준다. 참고사항: split, reverse, join 함수 개념필요 https://school.programmers.co.kr/learn/courses/30/lessons/120822 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

11일차 첫번째 문제 문제: 배열 두배 만들기 난이도: 하 풀이 과정: 배열에 map으로 순회를 돌면서 값을 구함 참고사항: map 개념, map 순회를 돌면서 연산값도 구하지만 데이터를 추출하는데 많이 사용된다. https://school.programmers.co.kr/learn/courses/30/lessons/120809 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

8일차 첫번째 문제 문제: 중복된 숫자 개수 난이도: 하 풀이 과정: filter 함수를 활용해서 중복된 숫자의 개수를 찾을 수 있다. 참고사항: filter 개념 필요 코딩테스트 연습 - 중복된 숫자 개수 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

javascript 활용해서 carousel 구현 했다. 웹페이지에서 자주 볼수있는 swiper를 라이브러리가 아닌 javascript로 구현했다. 커스터마이징으로 기능 & 코드를 개선한다면 실무에서도 적용이 가능할꺼 같다. Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript/blob/main/carousel.html GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. 가장 기본적인 HTML, CSS 구축..

javascript 활용해서 FAQ(자주 묻는 질문) 을 구현했다. 많은 웹사이트에서 활용되며 유기적으로 사이트로 유입시키고, 트랙픽 증가을 시키고자할 때 많이 사용된다. ex: 강의에 자주묻는 질문들을 정리, 비즈니스 정보를 쉽게 제공 등등... Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. 질문 dom을 찾는다. 2. 찾아온 dom을 순회해서 각..

카운트다운 시계를 javascript 메소드를 활용해서 구현했다. 새로운 제품이 출시되거나 이벤트 상품이 출시되면 할인 or 각종 카운트다운 이벤트가 종료될때 사용될 수 있는 기능이다. 비즈니스에서 유용하게 사용될 수 있는 기능이다. ex: 할인 기간동안은 구매 가능 기간 종료우 구매 불가능 등등... Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. ..

랜덤으로 배열에 데이터를 변경시켜 데이터를 변경하는 경우에 Math.random() & Math.floor 사용해서 구현했다. 이 기능뿐만 아니라 가격, 숫자등등 다양하게 값을 구하는데 활용성이 좋은 함수다. Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. quotes 배열에 데이터를 만들어준다. 2. quoteFun 함수를 선언한다. 3. 보여줄 t..

다양한 사이트에서 버튼을 클릭하면 텍스트를 복사해서 copy할 수 있는 기능을 사용한다. 복사기능을 구현하는데는 execCommand API를 사용하거나 clipboard API를 사용하는 두 가지 방법이 있다.* clipboard API 최신 스펙으로 지원하지 않는 브라우저가 많습니다.  저는 execCommand API를 활용해서 클릭시 복사기능을 구현했다.  Github Source ☝ 구현 소스를 보실수 있습니다.https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascriptContribute to yoogukhyeon/vanilla_javascript development by creating an ..

웹사이트에 사용자가 어디위치 콘텐츠를 보고있는지 사용자 편의를 높여줄 수있는 scroll 이벤트를 다루는 방법입니다. github에서 Sourse 입니다! https://github.com/yoogukhyeon/vanilla_javascript javascript 사용해서 scroll일 경우 각 Element 요소에 active 사용방법 입니다. See the Pen Scroll Active by 유국현 (@yoogukhyeon) on CodePen. 웹브라우저에서 현재 화면의 스크롤 정보를 알아야 할 경우에 사용하는 속성 * 브라우저간 호환성을 위해서는 window.scrollY 대신 window.pageYOffset을 사용하세요. HTML 요소에 높이나 너비를 구해야할 경우 많이 쓰이는 속성 offs..