뫙뭉

평소 어떤 사이트에 회원가입을 하려 할 때 우리는 유효성을 확인하는 문구를 자주 만나게 된다. 유효성 검사란 요구하는 조건을 만족하는지 확인하는 절차를 말한다.사진을 보면 아이디의 글자수, 특수문자의 사용 가능 여부, 비밀번호와 일치하는지의 여부, 이것들 외에도 사이트에서 받아야 하는 데이터의 형식들을 제한하곤 한다.그리고 통과하지 못한 데이터를 제출하면 오류가 발생함으로서 잘못된 데이터가 전달되지 않도록 막는 역할을 해준다.최근 간단한 회원가입 페이지를 만들어보면서 이런 유효성 검사에 대해 리마인드 할 기회가 있었는데 이런 것들을 공유해 볼까 한다. 정규표현식유효성 검사를 하는데에 있어 자주 쓰이는 것이 바로 이 정규표현식이다.그럼 정규표현식이란 뭘까?정규 표현식 또는 정규식은 특정한 규칙을 가진 문자..

오류 발생 이유 첫 프로젝트를 마치고 부푼 마음으로 README.md 파일을 업데이트 해야겠다고 마음먹고 깃허브 리퍼지토리에서 직접 수정을 진행하였다. 처음 수정해본 파일이기 때문에 역시나 문제가 발생하였다. 깃허브에서도 수정을 하고 local에서도 파일을 수정하니 나중에 커밋 시 충돌이 발생 한 것. 당황한 나머지 어정쩡하게 알고있던 GUI인 Sourcetree를 통해 이것저것 만지다가 merge를 성공했나 싶었더니 이상한 오류와 함께 커밋이 되지 않는 상태가 발생하였다. 뭣도 몰랐던 나는 branch 그래프만 보면 이게 왜 안되는 건가 도대체... 절망스럽기만 했으나 침착하게 detached head라는 오류 메시지를 구글링해 보았다. Detached HEAD 상태란? 출처: Dog발자 블로그 , h..

출처: 프로그래머스 강의, '코딩테스트 광탈 방지 A to Z Javascript ' 강의 내용 정리 및 공부 목적으로 게시하는 글임을 알립니다. 해시테이블 자료구조 오늘은 해시테이블 자료구조에 대해 알아보려고 한다. 해시테이블이란? 키와 값을 받아 키를 hashing하여 나온 index에 값을 저장하는 선형 자료구조이다. 키와 값 하면 떠오르는 Javascript 문법이 있을 것이다. 바로 객체, Object가 이에 해당한다. 추가로 이번 강의를 통해 알게 된 문법이 있는데 바로 Map 메소드이다. Map은 const sample = new Map()과 같이 선언하며 sample.set(key, value)로 키와 값을 설정할 수 있으며 sample.get(key)로 해당 키의 값을 불러올 수 있다. ..

State, 변수의 상태관리 리액트에서는 변화하는 값에 대해 클래스형 컴포넌트에서 state를 이용하여 값을 관리하였다. 함수형 컴포넌트에서는 원래 state를 관리할 수 없었기에 state를 사용할 경우 클래스형 컴포넌트를 선택적으로 사용하였는데 이러한 부분을 개선하기 위해 만들어진 기술이 Hooks. state뿐만 아니라 Life-Cycle-Method 의 사용에도 갖고 있었던 문제점을 리액트 16.8에서 Hooks라는 개념이 도입되면서 useState, useEffect 등으로 손쉽게 함수형 컴포넌트에서도 사용이 가능하게 되었다. state를 이용하는 경우는 매우 다양하다. 간단한 예로 로딩 스피너를 들 수 있는데, 듣기에는 아주 단순해 보이는 이런 경우에도 state로 관리할 수 있다. API 호..

큐에 대하여 알아보자 출처: 프로그래머스 강의, '코딩테스트 광탈 방지 A to Z Javascript' 큐란 먼저들어온 것이 먼저 나가는 것을 말한다. 쉬운 예를 들자면 영화관에 줄을 서면 먼저 슨 사람이 먼저 입장하고 줄에서 빠져나간다. 이러한 개념을 자바스크립트로 만들어 보자. class Node { constructor(value){ this.value = value; this.next = null; } } class Queue { constructor(){ this.head = null; this.tail = null; this.size = 0; } enqueue(newValue){ const newNode = new Node(newValue); if(this.head === null){ thi..

단 몇 줄의 코드로 색다른 효과를 낼 수 있다! 오늘도 코드가 원하는대로 짜지지 않아 김빠짐을 경험하여 유튜브와 코드팬속에서 헤엄치던 중...역시나 사이트에 재미를 선사하는 요소로 hover effect를 빼놓을 수 없지 않을까 라는 생각을 했다.그리고 조금은 색다른 효과를 내보는 것도 재밌겠다 싶어오늘은 단순히 색만 바뀌는 것이 아닌 빛번짐 효과로 좀 더 화하고 쨍한 느낌의 효과를 내는 법에 대해서 소개해보려한다. 굉장히 간단하니 겁내지 마시라!! 내가 직접 구현해 본 Hover effecthttps://codepen.io/swpark907/pen/qBVNqYg Light bleed hover effect(Pure CSS)Light bleed hover effect(Pure CSS)...codepen...

본격적인 리액트 사용이제 필요한 데이터를 받아오는 법은 알았겠다. 본격적으로 리액트라는 것에 대해서 적어보려 한다.리액트, React JS는 최근 많은 기업들이 사용하고 있는 자바스크립트의 대표적인 라이브러리이다.리액트는 페이스북에서 만든 Javascript 라이브러리이며 특징으로는 크게 2가지를 들 수 있다. 리액트의 특징1. SPA를 구현하는 데에 용이하다.2. 모듈형 개발을 기본으로 한다.3. 활성화 된 커뮤니티 여기서 SPA(Single Page Application)란 페이지를 이동할 때마다 서버에서 데이터를 새로 받아오는 것이 아니라 우선 Vitrual DOM을 생성 한 뒤 DOM과 비교해 변경되는 곳만 부분적으로 리랜더링을 하기 때문에 웹페이지의 사용성에 도움을 준다. 쉽게 말해 모바일 어플..

이전 포스트에서 열심히 '한글자씩 나타나는 애니메이션'에 대해 만들었다.그런데 문제가 하나 있다.해당 요소는 저~~~기 밑에 있는데 사이트가 렌더링이 되자마자 애니메이션이 발동된다면 여태 힘들게 애니메이션을 만든 의미가 없지 않은가!! 요소가 화면 안에 들어왔을 때 애니메이션이 발동되어야 된다 이말이다. 그래야 내가 열심히 만든 애니메이션을 자랑할 수가 있다. 그렇기 때문에 오늘은!! 요소가 화면에 보일 때 애니메이션이 작동하도록 하는 방법에 대해 블로깅하려 한다. 화면의 위치와 요소의 위치우선 화면의 상단의 위치를 알아야겠지. 이것은 간단하다.window.pageYoffset;window.scrollY;방법은 위의 두가지가 있는데 둘의 차이가 무엇이냐.window.scrollY 는 구형 브라우저에서 작..

웹사이트에 심심함을 덜어줄 무언가가 필요하다!! 얼마전에 포트폴리오를 재정비할 계획이 있었다.사실 신입 포트폴리오, 심지어 비전공자라 하면 쓸 말이 많지가 않더라. 나만 그런것인가...그렇다면 뭔가 심심하지 않은 애니메이션으로 시각적 즐거움을 채우면 좋지 않을까 라는 생각이 자연스럽게 들게된다.뭔가 샤랄라~ 하는 느낌으로 한글자씩 나타나는 애니메이션을 넣으면 좋겠다라는 생각에 일단 코드를 생각나는대로 끄적여 보았다. 참고로 이와 함께 샤랄라~~ 하는 느낌이 화면에 나타나는 순간에 발동되길 바란다면, 관련 글이 있으니 참고하면 좋을 것 같다. (물론 내가 작성한 글이다 ㅎㅎ)2022.01.24 - [개발자일기/Tutorial] - 화면에 나타나면 애니메이션이 작동되게 하라!(CSS, VanilaJS) 생각..

해당 자료는 다른 블로그, 유튜브에 더 자세히, 전문성 있게 설명한 글이 많습니다. 이 글은 제가 해당 개념에 대해 이해했던 흐름을 정리해 놓은 자료이니 참고해주세요. 서버와의 통신 앞의 글에서 오픈 API에 대해 간단히 소개해 보았다. 현재 개발되어있는 여러 기능들을 사용할 수 있게 공개해 놓은 오픈 API. 프론트엔드 개발을 하다 보면 API를 이용하게 되는 경우가 굉장히 많을 것이다. 그렇다면 실질적으로 이용하는 방법은 어떻게 될까? 그것에 대해 알아보기 전에 우선 통신의 종류에 관한 이야기부터 시작해보자. 동기와 비동기 통신 통신의 종류에는 두가지가 있다. 동기(Syncronous) 통신과 비동기(Asyncronous) 통신이 그것이다. 이름에서부터 알 수 있듯이 두 통신방식의 가장 큰 차이점은 ..