슬기로운스터디

현재 가장 많이 사용되어지고있는 <span style="background:gray;color:- 버전관리도구(코드 뿐 아니라 코드 변경 내역까지 모두 가져올 수 있기에 버전관리도구라 불린다.) 로컬저장소와 원격저장소로 나뉜다Git 기반 웹서비스는 github,g

⌛️ 5월 10 ~ 5월 12일 한주의 스터디가 마무리 되었다.이전부터 공부를 조금씩 하고 있었지만 혼자 하는 공부이기에 의지도 약해지고 공부 권태기도 온 찰나 좋은 기회가 생겨 스터디를 하게 되었다.초반 한달은 이미 기존에 공부를 해뒀던 내용들을 다시 복습하며 배워나

📗개인적으로 코드 구현중 처음 활용해봤던 함수Date, Number, Array 에서 사용가능ES6에서 새로 추가된 문법으로 문자열 등 유사배열객체나 이터러블한 객체를 배열로 만들어주는 메서드HTMLCollection으로 만든 유사배열을 forEach 사용하기 위해

배열의 요소를 하나하나 꺼내는것반복 변수에 인덱스가 들어간다.hasOwnProperty코드를 추가해서 사용해야 안정적이다.(hasOwnProperty메소드는 객체가 특정 프로퍼티를 가지고 있는지 판단한다. true/false)반복 변수에 요소가 들어간다.특정횟수만큼 반

반복되는 코드는 한번만 정의해놓고 필요할때마다 호출할 수 있어 반복 작업을 피할 수 있다.긴 프로그램을 기능별로 나눠 작성하면 모듈화로 전체 코드의 가독성이 좋아진다.기능별(함수별)로 수정이 가능하므로 유지보수에 좋다.함수를 호출할때 괄호안에 적는것을 매개변수라 한다.

📗 개인적으로 업무하면서 다시 생각해된 부분작업을 하다보니 Ajax나 비동기 방식을 이용해 동적으로 요소가 생성될경우 미리 만들어 두었던 스크립트 코드들이 안먹는 경우가 생긴다. 이경우 Javascript나 Jquery로 동적으로 생성된 코드에 이벤트 바인딩 하는 방

속성과 메소드 사용가능해짐Number.IsNaN() 숫자인지 확인Number.IsFinite() 무한인지 확인값을 표현할때는 문자열, 숫자, 불 자료형으로만 사용할 수 있다.(함수형 불가능)문자열은 반드시 큰 따옴표로 만들어여한다.key에도 따옴표를 붙여야한다.📌 J

📗 이번주 스터디에서 사용해봤던 메소드배열을 정렬하기 위한 함수문자열 내 마음대로 정렬하기풀이 : 오름차순, 내림차순 정렬이니 sort()사용해서 주어진 정수를 넣고 비교한 후 동일한 글자라면 조건문을 추가로 작성하여 오름차순, 내림차순 정리하고 동일한 글자가 없을경

하샤드 수풀이 : x를 나눠서 더해야하기 때문에 문자열로 만든뒤 split으로 배열로 만들어준뒤 다시 숫자로 만들어준다. 그리고 reduce를 사용해 나눠진 수를 더해서 삼항연산자를 사용해서 x가 더한 숫자로 나누어질때 값이 나오게끔한다.자연수 뒤집어 배열로 만들기풀이

단하나의 index.js만 가지고 있다.서버로부터 단 한개의 파일만 받고 동적으로 불러오기 때문에 SEO에 약하다.깜빡임이 없기에 자연스러운 UX구현가능(컴포넌트 단위로 변경사항을 반영하기에 깜빡임이 없다.)node.js를 설치할때 자동으로 생성된다.Node Packa

렌더링 될때마다 특정한 작업을 수행해야할때 설정하는 훅컴포넌트가 화면에 보여졌을때컴포넌트가 화면에서 사라졌을때DOM요소에 접근할 수 있도록 도와주는 Hook이다.컴포넌트가 계속해서 렌더링이 되어도 Unmount전까지 값을 유지한다.📌 1. state는 리렌더링이 꼭

Redux Toolkit 리덕스를 더 편하게 쓰기위한 기능들을 흡수해서 만든 패키지이다. > 이전 주차(숙련)에서 배웠던 createStore 대신 configureStore를 사용하여 가독성과 간결성을 높임.

1.input 컴포넌트 만들기useState로 관리할게 많기에 하나의 useState에 객체형식으로 값을 넣어주고 구조분해할당으로 값을 꺼내쓸 수 있도록 한다.하나의 onChange이벤트를 만들어 여러개 동시에 컨트롤 가능하게 e.target값을 구조분해할당으로 쓸 수

React Component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 리액트 Hook이다.소플의 처음만난 리액트useEffect는 이전에 소플책을 읽으면서 자세하게 정리해놓은게 있어서 이번에 다시 복습을 하면서 어려운점은 없었던거 같다.강의를 들었을때 u

properties의 줄임말로 값을 컴포넌트에 넘겨줘야할때 사용한다.props는 객체 형태로 전달된다.props가 여러개의 경우 비구조화할당으로 전달한다.props가 바뀌면 컴포넌트안에 있는 것들이 전부 리렌더링 되는데 props가 변경되지 않은 값을 리렌더링되지 않게

오늘 공부한것 & 기억하고 싶은 내용 useState useState를 사용하여 시간변환 코드를 작성했다. 배운점 & 느낀점 amount라는 state하나로 minutes에서 hours로 hours에서 minutes으로 시간 변환을 쉽게 할 수 있는게 리액트의 장점

Javascript에 XML을 추가하여 확장한 문법이다.JSX는 React element를 생성한다. (React element는 DOM element와 달리 일반 객체이다)단독 태그일경우에도 태그를 닫아줘야한다.(<img/>, <input/>)렌더링 될 R

동기/비동기 동기 : 작업이 순차적으로 실행(현재 작업이 완료될때까지 다음 작업 시작 안함) 비동기 : 작업이 완료될때까지 기다리지 않고, 다음 작업을 즉시 실행 undefined, null, undeclared | undefined | 선언된 변수에 값이 할당되지

오늘 공부한것 & 기억하고 싶은 내용 이벤트위임 이벤트 리스너를 자식 요소가 아닌 부모 요소에 등록한다. DOM요소가 동적으로 추가 되거나 변경되는 경우에 유용 자식에서 부모방향으로 전파되는 버블링을 이용함 메모리 사용량과 성능 측면에서 효율적 스코프 변수와 함수의

Javascript Javascript는 객체 지향적이며 비동기 프로그래밍을 지원한다. 동적 타입 언어로서 클라이언트 및 서버 사이드에 사용된다. Attribute 와 Property 차이 Attribute HTML 요소의 특성의 정의 속성은 문자열로 저장되며, 대소

오늘 공부한것 & 기억하고 싶은 내용 Tanstack Query란 React Query가 Tanstack Query로 이름이 변경된것 데이터 요청 및 캐싱을 관리하기 위한 라이브러리로 API호출, 데이터 캐싱, 상태 관리등의 작업을 담당한다. 핵심 기능으로 HTTP의

객체 내부에 있는 속성을 꺼내 변수로 할당복사한 배열이 독립적으로 작동하는것(기존의 배열에 영향을 주지 않는 새로운 배열 반환)2개 이상의 배열을 붙일때도 사용함문서 객체를 모두 읽고 나서 실행하는 이벤트문제점 1\. body가 생성되기 이전인 head에서 innerH

async/await정리페이지를 새로고침 하지 않고 url에 따른 컴포넌트 렌더링을 보여주기 위해 사용한다.async/await 를 직접사용해보면서 .then을 안쓰고 await로 바꿔쓰는게 코드가 간결해지는것을 배웠다. react-router를 사용해보면서 기존 HT

주간회고 1주차 핵심 3줄 요약 헷갈렸던부분들 완벽하게 이해한거 같아 좋다. 집중력 부족으로 공부하는게 힘들지만 꾸준히 노력해봐야지 이번 주 목표 (완료 시 체크) [✅] 주간회의 참여 칭찬하고 싶은 점 고치거나 버려야 할 점 일일 스프린트 이번 주 배운 내용 새

javascript의 문제점을 보완해주기위해 만들어졌다.타입 안정성 때문에 코드에 버그, 런타임 에러가 줄어드록 생산성이 높아진다.코드가 실행되기 전 에러를 알려준다.변수 타입을 정해줘야한다.코드가 실행되고 보여지는 에러를 런타임 에러라고 한다.Typescript는 찍

페이지의 이동을 구현시켜주는 라이브러리App.js에 페이지 이동할 Route들을 일괄 작성한다.API 패치하기가공된 데이터를 가지고 코드 작성useParams를 써보면서 URL에 있는 파라미터에 대한 접근이 쉽다는걸 배웠다.react-router-dom을 사용하면서 버

타입스크립트에서 타입을 지정해줄때는 :strong, :\[], :{}콜론을 찍은 다음 적어준다.타입지정시 객체안의 프로퍼티를 무조건적인 선택이 아닌 필요에 따른 선택을 하게 해주려면 프로퍼티 타입 지정시 ?을 작성해주면 된다.똑같은 타입을 여러개의 변수또는 함수에 지정

함수 위에 마우스 커서 올렸을때 파라미터와 리턴값의 타입을 정보함수가 여러개의 call signiture를 가지고 있을때 문제가 발생한다.Polymorphism이란 다형성으로 여러타입을 받아들임으로서 여러 형태를 가진다제네릭은 선언 시점이 아니라 생성 시점에 타입을 명

Typescript가 객체지향 코드를 안전하고 더 좋게 만들도록 도와준다.추상 클래스는 다른 클래스가 상속 받을 수 있는 클래스다.직접 새로운 인스턴스를 만들 수 없다.(오직 다른곳에서 상속 받을 수 만 있는 클래스이다)추상 메소드는 추상 클래스를 상속받는 모든것들이

오늘 공부한것 & 기억할 내용 🚨codeChallenge에서 요구한건 여러개의 callsigniture만들기였다. 하지만 지문을 잘못이해하고 여러개 이부분에 꽂혀서 한번에 만들어주지~! 하면서 미래를 보지 못한채 class로 만들어버리는 이슈 발생 class cl

class를 사용하여 단어장을 만들었다.class를 사용하여 여러 함수 메소드를 만들어서 사용하니 되게 편했다.오랜만에 여러 계산식을 만들다보니 머리가 지끈 거렸지만 다시금 개발의 뇌로 돌아가는거 같아서 다양한 계산식을 연습해봐야겠다.

주간회고 1주차 핵심 요약 generic알겠는데 잘 모르겠다(어색한 친구사이) 강의 예습을 더 많이 해야겠다 정리한 블로그 작성하고 닫고 끝냈는데 한번 더 읽어봐야겠다 이번 주 목표 (완료 시 체크) ✅ 꾸준히 강의를 듣자 ✅ 강의듣고 운동가기 칭찬하고 싶은 점 탈

Styled-component 다른 스타일 컴포넌트를 사용하고 싶을때는 styled()를 사용해준다. 스타일은 쓰고 싶은데 속성 변경을 해주고 싶을때 as를 사용한다. HTML태그 속성을 style에 적을 수 있다. animation을 만들고 싶을때 하위요소에

오늘 공부한것 & 기억할 내용 BrowserRouter / Routes BrowserRouter : 이동하는 페이지들을 생성할때 감싸주는 역할 Routes : v5에선 swith를 사용하였지만 v6에선 Routes를 사용한다. createBrowserRouter B

1.Router.tsx 코드 작성2.data만들어서 Author페이지 작성Link안에 state로 데이터를 보내준다.3.Author.tsx에서 만든 data를 받아서 코드 작성useLocation을 사용하여 data를 받아온다.router를 직접 사용하여 childre

createGlobalStyled reset style을 사용하고 싶을때 사용한다. as -router v6부턴 type지정 제네릭 지원 하지 않기에 as로 작성해준다. useLocation Link사용시 데이터를 넘기고 싶을때 사용 Link크가 클릭될때 데이터가

Recoil (Global State) 어디에서든 접근 가능한 state 여러단계의 props를 거치지 않고 바로 value를 얻을 수 있다.

Recoil과 Form을 이용한 리스트만들기1.atom.ts2.CreateTodo.tsxTodo.tsxTodoList.tsxrecoil의 selector기능이 내가 원하는 data들 값만 정리해서 사용하기 좋았고, Form을 사용하니 useForm하나만 선언해서 여러

FramerMotion 일반적인 HTML태그에 모션을 적용하려면 `` 형식으로 사용해야한다. styled-component로 만든 태그는 const Box = styled(motion.div) 이렇게 사용 variants 객체로 만들어 애니메이션 사용 가능 useM

Recoil과 FramerMotion을 활용하여 Timer를 만들었다.조건 - Round가 4회가 되면 1Goal이 되어야한다.atom.tsTimer.tsxrecoil을 사용하여 Timer시간을 관리하는게 어떻게 해야할지 감이 잡히지 않아서 우선 한 파일에 다 만들어

api에서 받아온 데이터를 뿌리면서 데이터에 맞게 이미지도 노출시키기 위해 Util.ts에 유틸리티 함수를 만들어 사용하였다. > 유틸리티 함수(utility function) 란 특정 작업이나 기능을 수행하기 위해 설계된 작은 재사용 가능한 함수 🚨 의문 작업을

React-query,Router, FramerMotion을 사용하여 영화 사이트를 만들었다.Header.tsx안에 Home, Comming, Now 컴포넌트를 넣어 해당 페이지로 이동할때마다 Title아래에 Circle이 생기도록 작업하였다.이때 useMatch를 사

오늘 공부한것 & 기억할 내용 Next.js 리액트는 자바스크립트 라이브러리이고 Next.js는 프레임워크 코드 분할code splitting 서버 사이드 렌더링(SSR) 파일 기반 라우팅(react-router를 사용하지 않고 Next.js에서의 내비게이션은 page

server component에서 fetch를 하게 되면 useEffect, useState, 로딩상태 구현등 불필요한 코드가 필요없다server component에서 NextJS가 fetch한것을 기억한다(처음 fetch만 api에 요청을 하는것)server comp

NextJs를 이용해 Best Seller Books페이지를 만들었다.타입선언을 했는데 Vercel에 배포를 하면서 문제가 발생했다.비동기 작업을 처리할때는 Promise에 담아 타입을 지정해줘야한다.Promise< Type >은 비동기 함수가 특정 타입의 값을

Tailwind css

NextJs에서 로그인등 API에 CRUD를 보내야할경우 사용한다route.ts 파일은 HTTP요청을 받아 Json으로 반환해주거나, 사용자를 다른곳으로 이동시킨다. (UI렌더X)API route를 만들지 않고 server component에서 사용input의 경우 n

Zod 유효성 검사를 하기 위해 도와주는 도구 parse error를 throw기에 parse를 사용하면 try/catch를 사용해야한다. safeParse error를 throw하지 않는다 그 대신 유효성 검사의 결과를 얻게 된다. error 각각의 input의

InputHTMLAttributes input을 컴포넌트로 만들어 여러개의 props를 필요로 할때 props를 일일이 적지 않고 사용할 수 있다.

Prisma Node.js 및 TypeScript 오픈 소스 데이터베이스 데이터베이스 작업 간소화 SQL 쿼리 대신 타입스크립트로 데이터베이스 작업 수행 복잡한 SQL 쿼리를 간단한 메서드로 대체 주요 기능 데이터베이스 스키마를 TypeScript/JavaScrip

db에서 유효성 검사를 하는 함수를 만들었기 때문에 formSchema에서 데이터를 검증할때 safeParse대신 safeParseAsync인 spa를 사용한다.npm i bcrypt를 사용해 비밀번호를 암호화 시킨다 bcrypt의 hash는 단방향이다 (비밀번호를 암

DB,Prisma,ServerAction을 가지고 db에 저장되어 있는 데이터를 뿌려주는 페이지를 만들었다.db에서 모든 데이터를 받아 뿌려준다.db에서 모든 데이터를 받되 skip으로 앞에 받은 데이터가 있으면 그 데이터를 스킵하고,take옵션으로 한개의 데이터만 받

form을 사용해 product이미지 업로드 만들기server action을 사용해 form에서 입력한 값을 가져온다.form validation성공시 db에 session id값 확인 후 product 생성간단한거 같지만 간단하지 않은 db와 세션을 사용하여 작업하는

db를 연결해 작업을 하다보면 비슷한 형식의 db연결을 반복적으로 사용할 일이 있는데 그때마다 db에 연결하여 불러오는것이 성능에 좋지 않기에 Next에서 제공하는 cache를 사용하여 불러온 db를 cache에 저장해놓고 그 캐시를 재사용한다.Next에서 제공하는 u