희락코딩

정규표현식 정규표현식은 개발하면서 자주 사용되는 것이 아니고 그냥 검색해서 사용하는 용도로 쓰입니다. 복잡한 기호와 가독성이 아주 불편해서 그냥 지나쳐야징~@~@ 하지만 우리는 정규 표현식을 왜? 사용하는지는 알아야 합니다! 이번 블로깅은 정규표현식에 대해 간단한 설명과 유용하게 쓰이는 정규표현식을 소개하고자 합니다!!! 정규표현식이란 ? 정규 표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 언어(패턴)입니다. 크게 문자검색(search), 문자 대체(replace), 문자 추출(extract) 을 수행합니다. 정규식 패턴은 가독성이 많이 떨어져 너무 어렵게 느껴지는 경향이 있습니다. 그래서 패턴을 이해하려는 것 보다 이미 제공 된 정규표현식을 가져다 쓰는 것을 권장합니다. 하지만 본인은 아주 세세..

개발 공부 22일차 (스코프, 클로저 복습) 오늘은 돔에 대해 학습하였다. 스코프, 클로저 급은 아니였지만 역시나 나에겐 고통스러운 개념들이 였다. 윽... 돔 공부한걸 정리를 해야되는데 오늘 따라 너무 힘들고 집중력 완전 저하인 상황이다... 뭔가 하나를 만 들고 나면 진이 빠진다.. 처음으로 일일 공부 목표를 미뤄서.. 내 자신과 한 약속을 못지켜 자책감이 든다 ㅠ 그래서 오늘은 학습한 내용 정리를 잠시 보류하고 학습할 예정이였던 고차함수 개념 강의를 듣고 자야 겠다 오늘은 쉬엄쉬엄 해야겠다... 멘탈 관리가 필요하다... 개발 공부 23일차 (유효성 검사 로그인 폼 구현) 오늘은 회원가입, 로그인 폼 양식을 html, css로 만들었고 js로 유효성 검사 함수를 만들어 구현하였다. 다른 플렛폼들의 ..

로그인 입력 폼 구현하기 이번 미니 프로잭트는 로그인 입력 폼 구현하기 이다!! 벌써 이런걸 만들어 보다니... 내 자신이 너무 기특하다.. ㅋㅋㅋ 하지만 결과물이 그렇게 이쁘지는 않다.. 그래도 한단계 한단계 성장하는 ? 느낌이 든다. ㅎ? 자꾸 무엇인가를 만드는 연습을 해야 될 것같다!!! 처음에만 고통스럽지 뭔가 하나 하나씩 만들어지고 가공되는 아름다운 모습들을 바라보면 이렇게 황홀할 수가 없다... 미니프로잭트 결과물 ▷ 사용 프로그램? - vscode ▷ 기술스택? - html, css, javascript ▷ 참고자료 - 웹 프로그래밍 튜토리얼, 코드스테이츠 강의 좋았던점!!! 이해하기 어려웠지만 하나씩 풀릴때 느껴지는 희열이 너무 좋았다 1. 이번 미니프로잭트로 인해 DOM에 대해 살짝? 익..

옛날에 라인 스토어에 취미생활로 이모티콘 디자인을 하여 판매 한적이 있다!!! 물론 망했땅.... ㅋㅋㅋ버리기가 아까워서 이 이모티콘 디자인으로 재활용 할 수 있는 프로잭트가 뭐 없을까? 많이 고민하였다 ㅠㅠ 너무 사랑스럽고 귀엽다... 그래서 이 이모티콘을 재활용 프로잭트에 활용 하였다!!!! 그결과는 ?? 미니프로잭트 결과물 재활용 프로잭트 ㅋㅋㅋㅋ 미니프로잭트 후기 ▷ 사용 프로그램 - 일러스트, 포토샵, vscode ▷ 기술스택? - html, css ▷ 참고자료 - heropy , 웹 프로그래밍 튜토리얼 등등 좋았던점! 우선 자바스크립트를 활용하지 않아도 충분히 css를 활용해서 애니메이션 효과를 통해 충분히 구현 할 수 있다. 하지만 너무 제한적이여서 꼭 자바스크립트와 연결해서 쓰는 방법을 알..

얕은 복사와 깊은복사 (Shallow copy, Deep copy) 이번 블로깅은 얕은복사와 깊은 복사에 대해 개념을 정리 하였습니다. 다소 너무 생소하고 어렵게 느껴지는 부분이 많았던 내용입니다. 하지만 이개념을 알아야 나중에 데이터를 다룰때 유용하게 쓰일 수 있기때문에 꼭 알아야할 개념중 하나입니다! 우선 이개념을 알기전에 객체는 참조자료형입니다! 어떤 하나의 변수가 객체를 담고 있고 그변수에 또 다른 변수를 할당을 하면 같은 주소를 바라보고 있어 객체의 데이터를 수정하면 똑같이 수정이 됩니다. 예시를 통해 알아 봅시다!! 1 2 3 4 5 6 7 8 9 10 11 12 // 참조자료형 객체 데이터 활용 const joy = { name : 'joycoding', age : 99, gender : '..

화살표 함수 화살표 함수는 코딩을 이제 막 시작한 사람들에게 매우 난해하고 어렵게 생각 할 수 있습니다. 저 또한 너무 어려웠습니다... 하지만 개념을 알고 조금만 익숙해지면 엄청 편리한 기능이라는 것을 알수 있습니다. 이번 블로깅은 화살표 함수에 겁이 많은 사람들을 위해 기본 개념을 정리해보도록 하겠습니다. 화살표 함수는 왜 사용하나요 ? 화살표함수는 일반함수와 달리 기본적인 로직을 축약형으로 나타낼수 있어 직관적입니다. 또한 간단한 코드라면 불필요한 코드를 줄여 가독성도 좋습니다. 일반함수와 화살표함수의 구조 차이는 ? 1 2 3 4 5 6 7 8 9 10 11 12 // 일반함수 const addNum = function (x) { return x + 5 } console.log(addNum(5))..

function mostFrequentCharacter(str) {} 문제 문자열을 입력받아 가장 많이 반복되는 문자를 리턴 ▶ 띄어쓰기 제외 ▶ 가장 많이 반복되는 문자가 다수일 경우, 가장 먼저 해당 횟수에 도달한 문자 리턴 ▶ 빈 문자열을 입력받은 경우, 빈문자열로 리턴 입출력예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 let output = mostFrequentCharacter('apples not oranges'); console.log(output); // --> 'p' output = mostFrequentCharacter('hello world'); console.log(output); // --> 'l' output = mostFrequentCharacter(' ')..

function countAllCharacters(str){} 문제 문자열을 입력받아 문자열을 구성하는 각 문자(letter)를 키로 갖는 객체를 리턴해야 합니다. 각 키의 값은 해당 문자가 문자열에서 등장하는 횟수를 의미하는 number 타입의 값이어야 합니다. ▶ 빈 문자열을 입력받은 경우, 빈 객체를 리턴해야됩니다. 입출력 예시 1 2 let output = countAllCharacters('apple'); console.log(output); // --> {a: 1, p: 2, l: 1, e:1} cs 수도코드 1. 저장할 빈 객체 변수를 선언한다. 2. 문자열의 요소를 반복해서 돌린다. 3. 선언한 오브잭트에 문자열 요소를 활용해서 키값을 만들어 주는 작업하기 4. 문자 추가 조건과 문자가 있..