전체 글

[Javascript] 정규표현식 기초 - 정규표현식 패턴

정규표현식이란? 정규표현식이란 특정 패턴의 문자열을 찾기 위한 표현 방식으로, 잘 이용하면 Javascript를 이용한 검증 과정을 보다 간단하게 만들 수 있다. 가장 간단하게 접근할 수 있는 test 메소드를 이용한 정규표현식 검증부터 살펴보자. 정규표현식 만들기 정규표현식은 두 개의 슬래쉬( / ) 안에 입력한다. 휴대폰 번호를 검증하는 정규표현식 예시를 통해 기본 형태를 살펴보자. const re = /010-\d{3,4}-\d{4}/ // \d{3,4}는 3글자이거나 4글자인 숫자, \d{4}는 네글자인 숫자를 의미한다. re.test("010-9123-4567") // true 위의 정규 표현식은 대상 객체가 010-{3~4글자의 숫자}-{4글자의 숫자}로 이루어져있으면 true를 반환한다. 요..

[Javascript] Object.keys() / Object.values() / Object.entries() / Object.assign()

Object.keys() Object.keys()는 대상 객체의 key 값을 모아 배열로 반환한다. Object.values()는 대상 객체의 value 값을 모아 배열로 반환한다. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); // ["a", "b", "c"] Object.values() Object.values()는 대상 객체의 value 값을 모아 배열로 반환한다. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.values(object1)); // ["somestring", 42, false] Object..

[Expo] Expo go / The request timed out 에러 발생 시

Error 개요 Expo go를 실행했는데 다음과 같은 에러가 뜬다. 해결 Windows Defender 방화벽 설정에 들어가서 인바운드 규칙에 19000, 19001번 포트를 추가해준다. 접속 성공~ 😁👍

TIL - 2022.02.10 목요일

오늘 배운 것 - 오늘은 Midterm을 봤다. 8시간 안에 게시판 하나를 구현했다. (기능 구현을 할 줄 아는지 여부에 초점을 맞춘 시험이었기 때문에 css는 최소한으로만 함) 프로젝트 생성부터 시작하는 시험이다보니 레이아웃부터 다 만들어야했다. css grid를 시험해 볼 기회다 싶어서 냅다 썼다. 확실히 레이아웃 잡을 때에는 좋다. 코드 분량이 확 줄어들더라. // 각각 분리된 컴포넌트의 emotion을 모아놓은 것이라 컴포넌트 명이 겹칠 수 있음 // Next.js 기반으로 작업했다. // Container const Container = styled.div` display:grid; grid-template-columns: 280px 1fr; grid-template-rows: 120px 280..

TIL - 2022.02.09 수요일

오늘 배운 것 - 게시글 검색 기능을 구현했다! (lodash 디바운스 이용) - 클래스 컴포넌트랑 함수형 컴포넌트를 비교하는 포스팅을 작성하며 비로소 life cycle, state와 React hooks의 차이를 이해했다. 역시 시간이 조금 더 걸리더라도 내가 이해한 내용을 글로 적어보는 것이 공부에 도움이 (많이) 된다. - 로딩 페이지를 만들어서 영화 랭킹 페이지에 넣어줬다. 로딩 페이지도 아예 컴포넌트로 분리해서 보관해놓으면 편할 것 같다. - 오늘은 체력이 많이 부친다.. 👻 기능 구현을 우선해서 목표했던 최소 작업만 완료했다. 일찍 집에가서 쉬어야겠다. 체력 관리도 중요한 Task니까. 💪 앞으로 할 것 - 내일 중간 시험 잘 보기 - 리뷰 게시판 : 게시글 넘버링 넣어주기 / 이미지 입력 ..

[Javascript] Spread Operator - 스프레드 연산자, 전개 구문

Spread Operator란? 스프레드 연산자는 ES6에 추가된 문법으로 ... 와 같이 마침표 세 개로 표현한다. 스프레드 연산자를 사용하면 배열이나 문자열과 같이 반복 가능한 객체를 개별 요소로 분리할 수 있다. 스프레드 연산자, 전개 구문, 펼침 연산자 등등 여러가지 이름으로 불리며, MDN에는 전개 구문으로 번역되어 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax 전개 구문 - JavaScript | MDN 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으..

[React] 컴포넌트 생명주기 - Component Life Cycle (with useEffect)

컴포넌트 생명주기란? 컴포넌트가 브라우저에 나타나고, 업데이트 되고, 사라질 때 호출되는 메소드. 렌더링을 기준으로 특정 시점에 코드가 실행되도록 할 수 있다. 클래스형 컴포넌트로 선언시에만 사용 가능하며 함수형에서 생명주기를 사용하고 싶은 경우에는 훅(Hook)을 이용해 유사하게 구현해야 한다. 그리기 : render() 그리고 난 뒤 : componentDidMount() 그리고 난 뒤 업데이트 : componentDidUpdate() 그리고 난 뒤 사라짐 : componentWillUnmount() 생명주기는 이런 형태로 사용된다. (예시의 경우 Next.js 환경) import { Component, createRef } from "react"; import Router from "next/rou..

[React] 클래스형 컴포넌트 vs 함수형 컴포넌트

리액트의 컴포넌트 선언 방식 리액트에서 컴포넌트를 선언하는 방식에는 클래스형과 함수형 두 가지가 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 현재는 공식 문서에서 함수형 컴포넌트와 리액트 훅(hook)을 함께 사용할 것을 권장하고 있다. 하지만 아직 클래스형 컴포넌트를 사용하는 기업도 있을 수 있으니, 기본 형태와 두 가지 방식 간의 차이점은 알아둘 필요가 있다. (유지보수를 위해서도 필요함) 클래스형 컴포넌트란? import React, { Component } from "react"; // Next.js를 사용하는 경우 React는 import하지 않아도 된다. export default class ClassComponentPage extends Component { render() { re..

TIL - 2022.02.08 화요일

오늘 배운 것 1. Firebase - Firestore db 삭제 기능 구현 Firebase db 삭제 기능을 구현하기 위해 내게 필요한 것은 총 두가지였다. - 1. 해당 문서의 id를 뽑아오는 기능 - 2. 해당 id를 매개로 문서를 삭제하는 기능 Firebase 공식 문서 정말정말 불친절하다.. 그래도 여러 선지자들의 인도를 잘 짜맞춰서 기능 구현에 성공했다. 첫 번째, 해당 문서의 id를 뽑아온다. useEffect(() => { const fetchWishBoard = async () => { const wishBoard = collection(getFirestore(firebaseApp), "wishBoard"); const result = await getDocs(wishBoard); //..

TIL - 2022.02.07 월요일

오늘 배운 것 1. progreSQL 으로 API 만들기 실습 (typeorm 사용) typeorm을 이용해서 progreSQL API 만드는 실습을 했다. 지금까지 계속 써왔던 graphQL API를 직접 재현해보는 작업을 했다. 백엔드는 처음이라 그런지 코드를 치면서도 이게 뭔지 감이 안와서 힘들었다. 온통 어두운 골목에서 간신히 벽 더듬으며 걷는 느낌이라고 해야하나.. 하지만 이것도 익숙함의 문제이겠거니 싶다. 프론트엔드 코드야 접해온 기간이 길다보니 금방 적응했지만, 백엔드 코드는 낯설다보니 더 버겁게 느껴지는 듯. 많이 써봐야 익숙해지겠거니 생각하며 나름 열심히 뚜닥거려봤다. 그래도 오늘 CRUD API를 각각 1번 이상씩 구현하는 것에 성공했다. 작동하는 것도 확인했다. 소소한 성취. 2. d..