TIL

Git flow는 Git을 이용한 소프트웨어 개발 방법론 중 하나로, 브랜치를 이용하여 개발 과정을 관리하는 방법이다. 이 방법은 브랜치의 종류와 그 흐름을 미리 정의하여 사용함으로써, 개발 과정에서 발생하는 문제를 최소화하고 효율적인 협업을 유연하게 하는 방법론이다.

대부분의 자료는 불로 변환했을 때 true로 변환된다. 다만 0, NaN, '...' 혹은 "..."(빈 문자열), null, undefined라는 5개의 자료형은 false로 변환된다.이 5가지는 꼭 외워서 기억하자!String() 함수를 사용하지 않고도 다른 자료형

조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이라고 할 수 있다. 조건문 중에서 가장 기본이 되는 실행문은 if문이다. 자바스크립트는 조건문빼면 시체인거 같다 ㅎㅎ 그만큼 너무나 많이 쓰인다능 😵‍💫자바스크립트에서

순서가 왜 저렇게 나오는지는 잘 모르겠지만. 오랜만에 swicth문을 사용해서 띠를 출력해보는 연습문제를 풀어보았다. 다른 반복문이나 조건문을 많이 사용해보았는데 유독 switch문은 안쓰게 되는것 같다. switch 조건문은 특정 값의 조건을 비교할 때 사용한다고 한

indexOf 메소드를 사용하여 원하는 요소의 인덱스 값을 알아내고, 반복문을 돌리면서 splice 메소드로 해당 자리의 요소를 제거하면 된다.indexOf() 메서드는 값을 기반으로 요소를 제거할 때 배열 내부에서 특정 값의 위치를 찾아준다. 하지만 배열 내부에 요소

반복문하면 뭐다? 바로 피라미드 별찍기이다. 대학교 전공과목때 시험문제로 나왔던 기억이 있다. 그때 참 어려웠는데,, 지금도 어렵다^^ 중첩 반복문을 이용해서 별을 찍어야 하는데, 피라미드 형태로도 만들고, 삼각형으로도 만들어보고, 거꾸로도 만들어보았다. (별 하나로

함수는 코드의 집합니다. 함수의 자료형은 function이며,익명 함수, 선언적 함수가 있다. 함수에 관련된 예제를 몇가지 풀면서 함수와 더 친해지게 되었다.

기본 자료형과 연결된 객체에서 자주 사용하는 것에는 Number객체, String 객체, JSON 객체, Math 객체가 있다. Number 객체 숫자 N번째 자릿수까지 출력하기: toFixed() 소수점 이하 몇 자리까지만 출력하고 싶을 때 사용한다. 소수점 아래

콜백함수 자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백함수라고 한다. 자바스크립트는 코드를 위에서 아래로 순차적으로 실행한다. 그러나 코드는 순차적으로 실행되지 않을 수도 있다. 이런걸 비동기 프로그래밍이

리액트를 다시 시작하려고 한다. 한때 기본 문법들을 찾아보며 강의를 열심히 듣고는 했는데 벌써 1년이 지나서 다 까먹어버렸다.다시 영차 영차 힘을 내보려 한다. 간단하게 자바스크립트 사전 문법을 찾아보고 정리해보는 시간을 가졌다.let과 const는 내가 요즘 잘 사용

JavaScript를 확장한 문법이다.기본적으로 React 요소를 만들 수 있게 해주는데, HTML에서 사용하는 문법과 흡사한 문법을 사용하기에 개발자들이 사용하기 편하다.어플리케이션을 여러가지 작은 요소로 나누어 관리할 수 있게 해준다. (보기 쉽게 코드를 분리한 뒤

오늘은 단위 변환기에 대한 코드를 작성해보았다.먼저 강의에서는 분 <-> 시로 바꿔주는 작업을 했고, 추가로 KM <-> Mile로 바꿔보는 작업을 각자 해보는걸로!나는 여기에 추가로 평수를 m2(제곱미터) 단위로 바꾸는 작업까지 넣어보았다.분 <->

props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방식(?)이다.props은 컴포넌트(component)에 보내지는 인자(argument)다.props에 function도 보낼 수 있음: 이벤트 리스너를 넣는 것과는 다른 개념임부모 컴포넌트

리액트는 state가 변경되면 새로운 정보를 자동적으로 컴포넌트를 refresh 해준다.때로는 불필요한 렌더링이 될때가 있다.그럴때 사용하는것이 useEffect다.두 개의 argument를 가지는 함수첫 번째 argument는 우리가 딱 한번만 실행하고 싶은 코드

useState(), useEffect(), props 등 간단한 리액트 이론 강의를 다 들었다.이제 예제를 만들어보면서 복습만이 답이다.. 하다보면 이해하지 못했던 것들을 언젠가는 당연하게 쓰고 있는 날이 오겠지..간단하게 To Do List를 만들어보았다.1\. i

오늘은 API를 가지고 와서 그 데이터를 화면에 뿌려주는 작업을 하는 강의를 들었다.회사에서도 API를 가지고 작업한 적이 있었는데 (최근엔 없고, 아주 오래전에..) 다 까먹고 있다가 강의를 들으면서 다시 개념을 공부해보았다.이 코드는 서버에서 데이터를 가지고 와서

react-router-dom을 사용해서 링크 이동에 대해서 강의를 들었다.useParams을 import한 것까지는 화면이 잘 로드돼서 데이터를 불러왔는데 useParams()을 호출하면 Uncaught Error: Invalid hook call이라는 에러를 뱉어냈

자바스크립트 공부하기도 바쁜데 타입스크립트까지 알아야 하는 괴로운 현실이지만 타입스크립트를 알게 되면 자바스크립트는 쳐다도 안본다는 선생님의 말씀에 .... 열심히 강의를 들으려고 한다.간단하게 말하자면 자바스크립트의 슈퍼셋(Superset)이며, 자바스크립트에 '타입

React 기초 강의를 듣고 최종 과제를 만들게 되었다.API를 받아 데이터를 넣는 작업이었는데, useEffect, fetch, Link, useParams를 다 활용하여 코드를 짜보는 연습을 했다.그 중에 좀 중요하다고 생각하는 것을 정리해보려고 한다.api주소는

배열: 자료형\[] 숫자: number 문자열: string 논리: boolean optional (?를 :앞에 붙이면 optional)요소를 읽기전용으로 만들어 들 수 있다.정해진 배열에 정해진 갯수의 요소와 순서의 맞는 타입의 값을 요구할때 유용하다.any는

Typescript에는 독특한 타입이 몇가지 있다.unknown타입은 모든 값을 나타낸다고 할 수 있다. 처음엔 아무 타입도 가지고 있지 않다가 한번 더 확인(?)하는 것으로, typeof로 확실하게 정해준 다음에 작성해야한다. any랑 비슷하다고 생각할 수 있지만,

오늘 공부한것 & 기억하고 싶은 내용 Call Signatures 함수가 어떻게 호출되는지 설명해준다. 객체가 함수처럼 호출될 때 사용할 매개변수(parameter)와 반환 타입(return type)을 정의한다. 이것은 객체의 프로퍼티로서 함수를 정의하는 것과 비슷

간략하게 제네릭도 배우고, 개념 정리를 한 다음에 무한 복습이 필요하다고 생각했다.타입스크립트는 자바스크립트에 타입을 지정한 것이기 때문에, 자바스크립트 함수를 만들어서 그 함수에 타입을 넣고 타입스크립트로 변경해보기로 했다.count(arr) : 배열을 매개변수로 받

오늘 공부한것 & 기억하고 싶은 내용 객체의 모양을 알려주는 방법 2가지 type 사용자가 원하는 모든 것이 될 수 있다. 다양한 목적으로 사용될 수 있음 string의 배열이 될 수도 있고, 객체가 될 수도 있다. interface 키워드에 비해 좀 더 활용할 수

Link를 사용하려면 Link를 Router 안에 넣어야 한다.Router 밖에서는 Link를 render 할 수 없기 때문이다.react-router-dom한테 말해줘야 함우리가 Root의 자식을 render하길 원한다고react router는 이 Outlet컴포넌트

너가 특정한 URL에 있는지의 여부를 알려준다.state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리다."global state"를 건드리지 않고 react 및 react native 애플리케이션에서 데

기본적으로 리액트는 컴포넌트 내부에서 상태를 관리하는 useState훅을 사용하는데, 컴포넌트 간에 상태를 공유할 때는 이 상태를 일일이 부모-자식 간으로 내려줄떄 props를 사용하는데, 이는 프로젝트가 커지면 굉장히 복잡해 질 수 있다.이러한 번거로움을 줄이기 위해

submit-data validation을 손쉽게 해주는 hook을 제공하는 라이브러리React Hook Form은 리액트에서 form으로 작업하기에 가장 좋은 방법이다. 만약 input이 하나 밖에 없다면 그리 필요하지 않을 수 있음.Hook form을 사용하지 않은

register의 옵션 객체에 들어가며, 값은 하나의 함수가 될 수도 있고, 함수들이 들어있는 객체가 될 수도있음required를 객체 안에 넣어줌으로써 html 개발자 도구에서 변경할 수 있는 걸 숨겨줌필수값에 값을 넣지 않으면 알아서 비어있는 입력창으로 커서를 옮겨

오늘 공부한것 & 기억하고 싶은 내용 Class 객체를 만드는 청사진, 붕어빵 틀로 비유하겠다. 실제 붕어빵이 아닌 붕어빵을 만들기 위한 설계도나 형태 클래스에서 사용할 수 있는 주요 메서드 종류로는 생성자, 일반 메서드, 정적 메서드, 접근자/설정자 메서드, 추상

라이브러리의 주도권은 사용자(코드 만드는 사람)에게 있음프로그램에서 라이브러리 내 코드를 사용하고, 사람이 폴더명, 파일명 다 자유롭게 사용 가능아키텍처와 스타일에 대한 결정권이 나에게 있음라이브러리 내 코드를 사용하여 앱 빌드프레임워크의 주도권은 프레임워크에게 있음

오늘 공부한것 & 기억하고 싶은 내용 리액트 마스터 강의까지 다 듣고 nextjs를 간단하게 공부해보려 한다. 리액트는 cra로 설치를 진행했다면 이번엔 수동으로 기본적인 것만 설치해보자. nextjs를 설치해보자 디렉토리 생성(mkdir learn-nextjs14

/not-found.tsx은 일치하지 않는 전역 URL을 처리한다.404 에러가 나는 페이지를 내 입맛에 맞게 바꿔줄 수가 있다.usePathname은 현재 URL의 pathname을 읽을 수 있게 해주는 클라이언트 컴포넌트 훅.const path = usePathna

nextJS는 layout 컴포넌트를 먼저 렌더링하고 이동하려는 페이지를 URL을 통해 인식하여 layout 컴포넌트 안에 해당 페이지를 렌더링하게 되는 방식을 가지고 있다.따라서 재사용성이 강한 헤더나 푸터는 layout 컴포넌트에 넣는 것이 효과적이다.모든 페이지에

원래 리액트에서는 useState, useEffect 등 훅을 사용해서 페이지를 만들고, api를 가져와 데이터 패칭할때도 꽤나 복잡했다. 하지만 Next.js 프레임워크는 다르다. 아주 간단하게 코드 만들기 가능!useState로 movies와 loading 상태를

오늘 공부한것 & 기억하고 싶은 내용 Dynamic Metadata 1. 정적인 메타데이터 정적으로 데이터를 받아온다면 고정으로 메타데이터를 설정해주면 된다. 하지만 동적으로 데이터를 받아오는 페이지에서는 그 페이지에 맞는 타이틀을 받아와야 한다. 2. 동적인 메타데이터 동적으로 데이터를 받아오는 페이지라면, 페이지에 맞는 제목이나 설명을 받아와야 한...

Tailwind를 사용하기에 앞서 vscode에 꼭 설치해야 하는 확장 프로그램이다.자동완성 기능을 제공하고, 사용할 색상 값이나 기존 css 코드를 알려줘서 보기가 편하다.class 중복이 있거나 오타가 있을때도 알려주기에 굉장히 유용하다.tailwind.config

Tailwind CSS는 모바일 우선이다.작성하는 css는 모두 소형 기기에 적용된다는 뜻이다. 그렇기 때문에 더 큰 화면에 적용시키는 modifier들이 존재한다. Tailwind Css는 모바일 디자인을 먼저 구현하고 그 뒤에 큰 화면으로 키워가는 것을 명심하자.다

오늘 공부한것 & 기억하고 싶은 내용 gradient: Search .bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); } .from-cy

오늘 공부한것 & 기억하고 싶은 내용 odd: 자식 요소 중 홀수번째에만 스타일 줄때 사용 odd:bg-gray-100 CSS에서 :nth-child(odd) 에 해당 even: 자식 요소 중 짝수번째에만 스타일 줄때 사용 even:bg-cyan-100 CSS에서

오늘 공부한것 & 기억하고 싶은 내용 TailWind는 기존의 css 프레임워크처럼 고정된 css파일을 사용하는 것이 아니라, 유틸리티 클래스 기반의 접근 방식을 사용하고, 다음과 같은 특징을 갖고 있다. (요청에 따라 생성되는 것임) 특징 미리 정의된 유틸리티 클래

Tailwind CSS 제작자가 손으로 만든 아름다운 SVG 아이콘 (무료 아이콘 라이브러리)순수 SVG 아이콘으로. Tailwind의 유틸리티 클래스와 쉽게 결합하여 커스터마이징 가능https://heroicons.com설치: npm install @hero

기존 next.js 버전에서는 API route를 만들어서 post, delete, get 등의 모든 요청을 보냈다.하지만 최신버전(14)에는 이 방법 뿐만 아니라 더 편한 방법이 도입되었다.어떨때는 GET 요청을 받을 것이고, 어떨 때는 POST 요청을 받을 것이다.

Next.js는 POST 요청 처리를 더 간단하게 만들어주는 Server Actions를 제공한다.Next.js 13 이상 버전에서 사용 가능 하다.이전에는 POST 요청을 처리하기 위해 route handler를 만들어야 했지만, 이제 "use server" 키워드

npm i zodserver action으로 보내는 데이터의 유효성 검사에 도움을 준다. 또한 데이터 변환(예: 기본값 추가, 형식 변환)을 할 수 있다.예를 들어 Username을 3자~10자로 설정하고 싶다면 Zod에게 데이터를 보내주면 Zod가 내부적으로 모든 i

Zod에는 몇 가지 문자열 관련 유효성 검사가 포함되어 있다.(https://zod.dev/?id=strings)문자열 스키마를 만들 때 몇 가지 오류 메시지를 지정할 수 있다.const name = z.string({required_error: "Name은

데이터베이스와 애플리케이션 사이에서 통역사 역할을 해주는 도구내가 사용하는 데이터베이스에 맞춰 필요한 파일이나 마이그레이션 파일을 자동으로 생성해주기 때문에 정말 유용함SQL을 몰라도 데이터베이스를 효율적으로 다룰 수 있게 도와줘서 개발 초보자에게도 유용함데이터베이스

문자열 유효성 검사 라이브러리coerce는 기본 값을 강제로 변환내장 생성자(String(input), Number(input), new Date(input) 등))를 사용하여 모든 입력을 강제함input의 값은 항상 string으로 오기 때문에 전화번호 같은건 꼭 n

오늘 공부한것 & 기억하고 싶은 내용 bcrypt 비밀번호를 해시할 때 사용하는 라이브러리 해시함수는 단방향 멱등성 함수 데이터베이스에 비밀번호를 그대로 저장하지 않는다.(해킹의 위험성) 정해진 입력에 따라 정해진 난수를 출력함 bcrypt하는 이유 보안상 데이터가

말 그대로 중간에서 동작하는 일종의 소트프웨어를 뜻한다. 어떤 것과 다른것 사이에서 실행되는 코드.미들웨어를 사용하면 request가 완료되기 전에 코드를 실행할 수 있다.이미지, CSS, JS, Favicon 요청 등 웹 사이트의 모든 단일 request 하나하나 마

오늘 공부한것 & 기억하고 싶은 내용 Image 컴포넌트 기본 jsx img가 지원하지 않는 여러가지 강력한기능을 지원한다. 로딩 전후로 컴포넌트 위치가 밀리는 content shift를 방지한다. 압축률이나, 화면 크기별 압축 옵션을 제공한다. 필수 prop으로

오늘 공부한것 & 기억하고 싶은 내용 .superRefine ctx.addIssue를 통해 원하는 만큼 이슈를 추가할 수 있다. 함수 실행 중에 ctx.addIssue가 호출되지 않으면 유효성 검사가 통과 fatal: true 설정 시, 그 다음 refine이 실행

오늘 공부한것 & 기억하고 싶은 내용 createObjectURL URL.createObjectURL은 브라우저에서 로컬 파일을 로드하여 미리보기를 제공하는 간단한 방법이다. 브라우저에서 로컬 파일을 간단히 로드 가능 이미지 파일을 업로드하기 전에 사용자에게

오늘 공부한것 & 기억하고 싶은 내용 typescript와 next.js를 접목시켜서 코드를 짜고 있는데, 가끔씩 느낌표가 나왔다. 내가 아는 느낌표는 부등호와 함께 앞에 사용하는 not의 의미밖에 몰랐는데, 드문드문 뒤에 느낌표가 찍히는 것이다. 저게 뭘까 저게 뭘