Just Do IT!

function Sum(num1, num2) { return num1+num2; } // num1, num2는 parameter Sum(5, 10); // 5, 10 은 argument Parameter = 매개변수 (변수) 함수를 정의할 때 사용하는 변수 메소드 선언의 변수 목록 인자를 받기 위한 매개채로써 선언된 변수라는 의미 함수 내부에 있는 인자로써 특정한 값이 정해져 있는 것이 아니라 함수가 호출하면서 건내준 argument 값이 변수(variable)에 담기게 된다 실제 매개 변수 (actual parameter) : 인자가 특정 변수의 값으로 넘겨지는 경우 이 특정 변수를 실제 매개 변수라 부른다 형식 매개 변수 (formal parameter) : 인자값을 변수로 넘겨줄 때 이를 형식 매개..

복학하면서 오랜만에 동아리에 들어갔다. 멋쟁이사자처럼 11기인데, 매주 팀별 스터디도 있고, 단체 스터디도 있다. 나는 프론트엔드 스터디에 참여하면서 오랜만에 html, css, javascript를 이용해서 계산기 만드는 걸 했다. 지금까지 내배캠하면서 react, typescript 위주로 공부하다 보니 바닐라 자바스크립트를 만져본 게 오래전 같았는데 덕분에 간만에 자바스크립트를 해서 나름 재밌었다. 확실히 공부를 안 하면 까먹게 되는 것 같다. (이제 면접 준비도 해야 하니까 간단하게 복습 겸 회고 겸...블로그 올리기...ㅋㅋ) HTML 너무 오랜만에 index.html 파일 안에서 작ㅇ버해서 그런지 태그를 까먹었다. ㅋㅋㅋㅋ 스터디 팀장이 올려준 예제대로 작업해야 해서 그대로 작업했는데, 진짜 ..

react hook form이란? React 내에서 form, 양식을 만들 때 사용하는라 이브러리다. 복잡한 폼을 만들 때 간결하고 쉬운 코드 작성에 도움이 된다. 기존 폼에서 입력해야 하는 번거롱룬 작업을 줄여주며, 타입스크립트로 작성된 라이브러리이기 때문에 타입스크립트와 잘 맞는다. 불필요한 렌더링을 최소화한다. 공식 문서 https://react-hook-form.com/ Home React hook for form validation without the hassle react-hook-form.com 설치하기 npm install react-hook-form react-hook-form 적용 전 import { useState } from "react"; const Login = () => { ..

firebase를 이용해서 로그인 기능을 구현하고 난 뒤 로그아웃 기능까지 구현 완료했다. 그리고 난 뒤에 currentUser가 있을 때는 로그아웃 버튼을, 없을 때는 로그인 버튼이 보이도록 삼항 연산자를 이용해 구현했는데, 새로고침하니까 로그인이 되었음에도 로그인 버튼이 웹페이지에 보였다. 그래서 로그인 버튼을 다시 눌렀더니, 로그인이 되어 있다는 의미로 로그아웃 버튼으로 다시 바뀌는 것이다. 이런 버그는 왜 생기는 걸까, 고민하다가 currentUser가 있다는 것보다 렌더링이 먼저 되서 그런거라는 생각이 들었다. 그래서 setTimeout() 함수를 이용해서 currentUser가 있는 지 확인하고 있다면 '로그아웃'을, 없다면 '로그인' 버튼이 나오도록 구현했다. 아래 코드가 해결한 코드의 일부..

header 컴포넌트에서 useNavigate()를 사용했는데 아래와 같은 에러가 발생했다. useNavigate() may be used only in the context of a component. 이런 오류였는데 뭔지 궁금해서 구글링 해보다가 해결 방법을 알게 되었다. useNavigate()는 Router 구성 요소의 컨텍스트에서만 사용할 수 있다는 점이다. 오류가 났던 원인은 거기에서 있었다. header가 모든 페이지에서 사용되기 때문에 App.tsx 파일에서 header를 추가했었다. // App.tsx import Router from "./shared/Router"; import Header from "./components/header/Header"; import Footer from..

class-validator란? typescirpt를 사용할 때 decorator를 이용하여 편하게 검증할 수 있는 라이브러리이다. 유효성 검사를 하거나 데이터가 제대로 온 것인지 검증해야 할 때 유용하게 사용할 수 있다. 검증하고 싶은 파라미터 위에 데코레이터를 사용하면 검증할 수 있다. 타입스크립트 데코레이터(decorator)의 개념 상에 빌드되며 새로운 작업 방식을 제공 클래스 내 데코레이터의 도움을 받아 검증(validation) 규칙(rule)을 추가하게 해준다 클래스를 인스턴스화할 때마다 실제로 우리가 설정한 규칙에 따라 검증할 수 있다 특정 속성들(properties)을 검증하고자 하는 모델 및 클래스에 추가해야 한다 class-valiator로부터 검증 방식(validate method)..

class-transformer란? 자바스크립트에는 두 가지 형태의 객체가 있다. literal objects : Obejct 클래스의 인스턴스 / { } 표기법을 통해 생성 class(constructor) objects : 생성자, 프로퍼티 및 메소드가 있는 크랠스의 인스턴스 class-transformer 는 자바스크립트의 literal object를 class object로 쉽게 변환해준다. 서버에서 데이터를 얻고 나서 간편한 방식으로 호출할 수 있고, 이 호출한 데이터를 자동 변환해준다. 공식 문서 : https://github.com/typestack/class-transformer GitHub - typestack/class-transformer: Decorator-based transfor..

lodash란? JavaScript의 라이브러리 중 하나이며, 전세계적으로 많이 사용되는 라이브러리 중 하나이다. 주로 array, collection, date 같은 데이터의 구조를 간편하게 함수형으로 다룰 수 있게 하기 위해서 탄생했다. 특히 frontend 환경에서 서버(DB)에서 받은 데이터를 정렬하고 사용할 때 많이 쓰인다. 밑줄 (_) 기호를 선언하여 사용된다. _.변수 이런 식으로 작성할 경우 lodash wrapper로 변수로 감싸게 되면서 해당 변수에 대한 chaining을 시작한다. 공식문서: https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);D..

Fullpage(One Page) Scroll 이란? fullpage, fullscreen 등등 다양한 이름이 많은데 fullpage.js 가 가장 유명하다. (이건 라이센스 사용하려면 돈내야함) 스크롤을 하면 페이지 단위로 화면이 스크롤 된다. 대표적으로 배달의 민족 사이트가 있다. https://www.baemin.com/ 대한민국 1등 배달앱, 배달의민족 배고픈데 뭘 먹을지 모르겠고, 하필 냉장고는 텅텅 비어 있고, 그렇다고 대충 먹고 싶지는 않은데, 뻔한 음식 말고 잘 먹고 싶다면? 배달의민족! www.baemin.com 스크롤을 내릴때마다 화면이 바뀌면서 다른 페이지가 나와서 직관적이고 깔끔해보여서 유료가 아닌 무료로 쓰는 방법을 찾다 보니 npm에서 react-fullpage 라는 라이브러리가..

Webpack이란? 파일을 묶는(bundle) 것을 도와주는 도구 bundling & building & orchestration (묶고 빌드하고 종합하는 도구) ⇒ 코드를 묶음으로써 Http 요청의 양을 줄이는 걸 도와준다 코드를 최적화하고 빌드 절차를 추가하고, 추가 빌드 툴을 제공한다 코드를 묶어서 import를 덜 할 수 있게 해준다 코드를 최적화하여 적은 코드를 싣게 하고 사용자들이 적은 코드를 다운로드 할 수 있게 해준다 원하면 개발 서버를 추가할 수 있다 공식 문서에 더 정확한 설명이 적혀있으니 공식 문서를 읽어보는 것이 더 좋다. https://webpack.js.org/ webpack webpack is a module bundler. Its main purpose is to bundle..