분류 전체보기

[Javascript] 이번에야말로 regex를 써보자

✨Regex란? Regular Expressions의 준말이다. 정규 표현식, 또는 정규식이라고도 하며 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 보통 회원가입 시에 아이디나 비밀번호, 이메일과 같은 정보를 유효성 검사할 때 많이 사용한다. 문자열로 고통받는 이들을 위한 구세주 같은 존재이다. 🔍정규표현식 알아보기 Groups and ranges | 또는 () 그룹 [] 문자셋, 괄호안의 어떤 문자든 [^] 부정 문자셋, 괄호안의 어떤 문가 아닐때 (?:) 찾지만 기억하지는 않음 Quantifiers ? 없거나 있거나 (zero or one) * 없거나 있거나 많거나 (zero or more) + 하나 또는 많이 (one or more) {n} n번 반복 {min,} 최소 {min,max} 최소,..

[TIL] 결국 쓰러졌습니다

🏃🏻‍♂️숙련 주차 시작 이번 주차 목표는 다음과 같다. 1. redux로 상태 관리하기 2. styled-components로 css-in-js 적용하기 3. react-router-dom으로 router 구현 저번 주차에 만들었던 투두 리스트에 추가 기능들을 구현하면 된다. 위 목표에 대한 추가 기능은 다음과 같다. 1. todos 데이터들은 redux를 이용해 전역 상태로 관리하기 2. css 파일들은 styled-components 라이브러리로 대체하기 3. 투두 디테일 페이지를 react-router-dom으로 구현하기 📮상태 관리 시작하기 시작하기 전에 좋은 자료들부터 공유해본다. [기억보다 기록을 기술 블로그] react-redux 사용법, redux, react, react16, state..

[React] gh-pages 배포하기

👀gh-pages란? github는 계정당 하나씩 배포용 도메인을 사용가능하도록 지원하고 있습니다. 이렇게 {username}.github.io의 형태의 도메인은 깃허브에서 지원해주는 도메인이라고 생각하면 됩니다. https://jojoldu.github.io/ 서버 백엔드 엔지니어 이력서 jojoldu.github.io 보통은 이걸 이용해서 개발블로그로 이용하시는 분들이 많고, 주어진 도메인 안에서 레포지토리별로 배포가 가능합니다. 프로젝트를 배포하게 되면 도메인은 이런 형태가 됩니다. {username}.github.io.{repo} 다만 정적 웹페이지만 배포할 수 있기 때문에 동적인 기능이 들어갔다면 배포가 제한적일 수 있습니다. 이제 프로젝트를 배포하러 가봅시다 📤github repo 만들고 업로..

[TIL] 하루가 너무 짧다구요

🥽리액트 입문 주차 시험 🔍시험 문제 살펴보기 1. 레이아웃과 기능은 화면에 보이는대로 2. App.jsx와 App.css 파일만 이용하기 3. 배포하기 레이아웃는 특별할 건 없으니 넘어가고 기능은 이번 주차 개인 과제로 나왔던 것 보다 기능이 훨씬 더 적었다. 할 일 추가하기 기능만 구현해주면 된다. 🎞배포하기 배포는 확인할 수만 있도록 하면 어떻게 배포하던 상관없다. 항해에서는 vercel을 이용하도록 하는 것 같았는데, 나는 vercel 들어가기도 귀찮고 gh-pages가 손에 익어서 gh-pages를 이용해서 배포했다. [React] gh-pages 배포하기 👀gh-pages란? github는 계정당 하나씩 배포용 도메인을 사용가능하도록 지원하고 있습니다. 이렇게 {username}.github...

PWA에 대한 짧은 글

PWA Progressive Web Application. 간단하게는 웹이지만 앱처럼 설치해서 앱과 유사한 사용자 경험을 제공하는 기술이다. MOZI 소프트웨어 마에스트로 최종 발표(22.11.26) velog.io MOZI | MOZI MOZI의 개발기록 mozi.vercel.app velog 트렌드에 올라와 있는 프로젝트 소개 글에서 PWA라는 키워드를 발견했다. 프로젝트가 퀄리티가 너무 우수해서 코드를 한번 쭉 읽어보고 싶어서 바로 스타달았다. 네이티브 플랫폼을 동시에 지원하는 것에 대한 고민이 항상 존재하는데 그것을 웹을 중심으로 문제해결하는 방법이라고 할 수 있다. 대표적으로는 트위터도 PWA를 적용한 사이트인데, 접속하면 설치하기 아이콘이 나오게 된다. 설치를 누르면 앱이 설치되며 실제로는 웹..

[TIL] 투두리스트 마무리

🔮투두리스트 마무리 Event handler naming 코드를 보는데 모두 다 제각각인 핸들러의 이름을 보고 갑자기 핸들러 이름짓는 표준 정도는 존재하지 않을까 찾아봤다. 이 정도만 알아둬도 충분할 것 같다. 1. props의 경우에는 onClick처럼 on*의 접두사를 지정한다. 2. function의 경우에는 on*을 handle*로 변경하여 handleClick과 같이 사용한다. [번역] React의 이벤트 핸들러 네이밍 (Event handler naming in react) 이 글은 Jake Trent의 Event handler naming in react를 번역한 내용입니다.Jake(원작자)의 허락을 받은 후 작성되었으며, 이 글의 모든 저작권은 Jake에게 있습니다. 이해의 편의상 의역이 ..

[TIL] 한번만 쓰고 버린다구요?

🔨투 두 리스트 제작하기 🖼Find CSS reference 버튼이나 인풋같은 컴포넌트를 styled-components를 이용해서 재사용가능하도록 공을 많이 들여서 설계했다. 그러기 위해서 일단 레퍼런스를 참고해서 최대한 깔끔하게 만들려고 했다. Input field explanation ... codepen.io Input Focus & Placeholder Effects with CSS3 Input Focus & Placeholder Effects with CSS3 Ported from http://goo.gl/vnCbPQ... codepen.io Top bar that hides and shows with scroll like android A web implementation of a top b..

[TIL] 졌잘싸

🤼‍♀️언어스터디 객체 챕터 객체란? 객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다. 자바스크립트에서는 이름과 값으로 구성된 속성을 가지는 기본 데이터 타입을 말한다. 자바스크립트에서의 객체는? typeof([]) > "object" typeof({}) > "object" // 함수는 객체의 특성을 가지고 있지만 typeof로는 function을 출력함. typeof(function(){}) 'function' 자바스크립트에서는 원시 값을 제외한 나머지 값(함수, 배열 정규표현식)은 모두 객체이다. 자바스크립트를 구성하는 거의 모든 것이 객체라고 생각하면 된다. 자바스크립트는 객체 기반의 프로그래밍 언어라고 할 수 있다. 객체 구조 살펴보기 var counter = { n..