내배캠 TIL

1일차에는 A-Z 웹개발 강의1주차 내용을 듣고배운 내용을 정리했다.우리가 보는 브라우저 주소를 통해 API로 요청을 보낸다.서버에서 받은 HTML 파일을 웹페이지에 그려준다.하지만 받은 파일을 일일히 새로고침 되면(ex. 티켓을 예매할 때 좌석이 실시간으로 매진될 때

2일차에는 웹개발 강의 2주차에서 배운 내용을 정리했다.프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어이다. 자바스크립트가 역사적으로 많이 사용돼 왔기 때문에 웹에 표준이 되었다.자바스크립트는 범용성이 넓기 때문에 서버도 개발할 수 있고, 안드로이드와 io

3일차에는 웹개발 강의 3주차에서 배운 내용을 정리했다.인터넷을 통해 데이터를 요청하고 받아오는 과정을 의미한다.Fetch에 기본 구조는 아래 코드와 같다.Fetch를 활용한 응용코드이다.script 태그안에 새로운 $(document).ready(function()

4일차에는 웹개발 강의 4주차에서 배운 내용을 정리했다.FrontEnd눈에 보이는 부분이며 클라이언트쪽을 다룬다.(Html, CSS, JavaScript)BackEnd눈에 보이지 않는 부분이며 서버쪽을 다룬다.(Server, API, DB)파이어베이스(Firebase)

5일차에는 웹개발 강의 5주차에서 배운 내용을 정리했다.배포는 소프트웨어 개발 과정에서 개발한 애플리케이션, 웹사이트, 서비스 등을 실제 사용자들에게 제공하는 과정을 말한다.즉, 배포는 만든 작업 물을 외부에 공개하는 일이며,링크가 생겨서 요청하면 결과를 볼 수 있는

6일차에는 자바스크립트 핸드북으로 파트 1을 공부한 내용을 정리했다.대표적인 이유로는 컴파일여부, 성능/안정성과 편의성에 Trade-off관계, 패러다임때문이다.프로그래밍 언어로 작성된 소스코드를 컴퓨터가 알아들을 수 있도록 번역해 주는 일이다.컴파일을 할때는 컴파일언

7일차에는 자바스크립트 핸드북 파트2에 배운 내용을 정리해봤다.if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행된다.불린형으로 변환숫자 0, 빈 문자열(""), null, undefined, NaN은 불린형으로 변환 시

8일차에는 자바스크립트 핸드북 파트3에서 배운내용을 정리했다.순서가 있는 컬렉션을 저장할때 쓰는 자료구조이다.배열을 만들때는 아래 문법처럼 대괄호나, 생성자함수(new)를 통해 선언한다.배열에 활용법은 다음과 같다.length는 배열의 크기를 나타내준다.배열에는 다양한

9일차에는 자바스크립트 핸드북 파트4 배운내용을 정리했다. 함수 선언(function declaration) 방식을 이용하면 함수를 만들 수 있습니다. 함수 내에서 선언한 변수인 지역 변수(local variable)는 함수 안에서만 접근할 수 있습니다 함수 내부

10일차에는 자바스크립트 핸드북 파트5,6에 배운내용을 정리했다. 객체 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 키로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있다. 객체는 자바스크립트 거의 모든 면에 녹아있는 개념이므로 자바스크립

오늘은 내배캠 본수업 1일차에서는 github를 다루는법을 배웠다.현재 토이프로젝트를 나가면서 같이 프로젝트를 올릴 협업도구가 필요했는데 github와 git을 배울 수 있어서 좋았다.일단 github를 쓰는 이유는 다음과 같다.코드를 안전하게 저장할 수 있다.개인 포

js 문법 1주차 강의를 듣고 배운 내용을 정리해봤다. Js의 역사 1995년 자바스크립트의 탄생 넷스케이프 커뮤니케이션 (LiveScipt -> JavaScript) 브라우저 동작 스크립트 언어 1999년 자바스크립트 표준화(ECMA-262) 완료 200

1주차때 배운내용을 활용해서 문제를 풀었다. filter 기능으로 p와 P, y와 Y를 찾아 변수에 담아주고 두개가 트루면 ture라는 불린값을 리턴해준다.대소문자를 구분하지 않고 toUpperCase() 메서드를 활용해서 더 간단하게 풀 수도 있다.문제는 두 배열을

오늘은 js강의 2주차 때 배운 내용을 정리했다.

js강의 3주차를 듣고 배운내용을 정리해봤다.자바스크립트에서 값의 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 구분된다. 기본형과 참조형의 구분 기준은 값의 저장 방식과, 불변성 여부다.기본형(Primitive type)

콜백함수란 다른 코드의 인자로 넘겨주는 함수를 말한다. 즉, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이므로 콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행한다.

node.js는 JavaScript에서 런타임 환경을 제공한다.브라우저용 JavaScript를 작성하는 수백만 명의 프론트엔드 개발자가 이제 완전히 다른 언어를 배울 필요 없이 클라이언트측 코드 외에 서버측 코드도 작성할 수 있다는 점에서 고유한 이점이 있으며,Node

아이디에 값을 입력하고, 비밀번호에 값을 입력하고 로그인 버튼을 누르면 alert로 고객이 입력한 값을 알려준다.EX) 고객님이 입력하신 아이디는 '입력 아이디'이며,비밀번호는 '입력 비밀번호' 입니다.다음 사항을 준수하며 만들어야 했다.1) id 필드와 비밀번호는 필

리액트 과제로 버튼을 클릭하면 배열 메서드가 동작하는 기능을 구현했다. 그 중에서 헷갈렸던 개념과 새롭게 배운 메서드에 대해 정리 하려한다.먼저 return에는 html태그를 입력해준다. useState는 꼭 react객체를 <span style="backgrou

대체로 데이터는 배열메서드를 이용해야 하기 때문에 배열안의 객체를 넣은 딕셔너리 자료형을 주로 쓴다.title이란 배열을 map 반복문을 써서 안에 데이터 값인 item을 출력하도록 해주었는데 objects are not valid as a react child (fo

불변성은 <span style="background-color:리액트에서는 기본적으로 useState를 통해 상태값을 변경해줘야 하기 때문에 값 자체가 불변성을 유지하고 있다.이에 따른 이점은 객체로 만든 원본데이터를 유지하며, 복사된 데이터를 쓰기 때문에 사이드

‘React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용한다.말 그대로 한개의 페이지로 이루어진 어플리케이션을 의미한다. 기존 MPA(Multi Page Application)과 반대되는 개념

리액트에서 css를 다루는 방법으로는 첫번째는 스타일 자체를 컴포넌트로 만들어서 css를 입혀주는 방법이다. css-in-js의 라이브러리로 패키지 관리자를 통해 스타일 컴포넌트를 깔아줘야 한다.위의 예시코드처럼 컴포넌트 자체에 이름으로 스타일을 적용시킬 수 있다. v

useState란 useContext

리액트 컴포넌트는 각각 Mount → Update → Unmount의 과정을 거치는데 생성되고 죽는 과정을 의미하기도 한다.리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체이며 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드들이

리액트로 모달창을 구현해봤다.

컨텍스트 API는 리액트에서 제공해주는 기본 Hook이다. 부모에게서 자식에게로만 data나, state를 넘겨주는 기존 방식에서 보완한 API이기 때문에 전역에서 데이터를 관리할 수 있게 해준다.createContext : context 생성Consumer : con

리덕스를 사용하면 State를 공유하고자 할때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 된다. 그리고 <span style="background-color:중앙 State관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 St

prettier는 코드 문법을 자동으로 정렬해주는 확장 프로그램을 말한다. 개발자들 사이에서 서로 코드를 쓰는 문법이나 변수 규칙이 다르기 때문에 일관성 있는 코드를 짜기 위해 만들어진 프로그램이다.prettier에는 두가지 설정법이 있다.1) vs코드에서 확장프로그램

\-KEEPfirebase에서 query를 통해 where절을 쓰는법을 익혀서 너무 좋았고,기능을 구현할 때 처음에 구상하던 대로 디자인이나 기능이 잘 나와서 좋았다.\-PROBLEM깃 브랜치 사용법이 서툴러서 충돌이 많이 났던게 힘들었다 ㅜㅜ\-TRYgit에 관련된

json-server 설치하기<spanjson-server: command not found자꾸 json-server를 찾을 수 없다해서 지우고 다시 깔아보고 다시했는데 yarn으로 설치할때는 잘 안됐는데..npm으로 전역으로 깔아주니까 잘 동작했다.너란 녀석..

index.js이 녀석에는 App.jsCRA로 리액트 프로젝트를 생성해줄 경우 기본적으로 pages: 기본적으로 페이지를 관리하게 되는 폴더이다.components:

Redux toolkit 이란? 툴킷은 말그대로 리덕스를 작성하여 전역 상태관리를 해줄 때, 리덕스를 좀 더 편리하게 쓰기 위해 제공해주는 도구모음이다. 툴킷을 이용하면 기존에 쓰던 action, state를 일일히 switch문에 등록해 쓰지 않아도 되고 slice라

보호해야 할 key값들이나 자주 사용하는 값들을 변수에 담아 쓸 수 있게 .env 파일에 등록해 관리할 수 있다..env .env.local .env.mode .env.mode.local.env나 .env.loc

react에서 컴포넌트란 하나의 블럭이자 페이지다. 나눌 수 있는 페이지들을 블럭으로 쪼개서 그 블럭들을 또 하나의 페이지로 만드는 거다.그렇다면 컴포넌트를 나누는 기준은 무엇일까...이건 사실 개개인 마다 기준이 다르고 기업마다 기준이 다른 것 같다. 미세한 차이로

https://www.ncloud.com/일단 위에 주소를 통해 가입을 진행하고, 마이페이지에 결제수단 관리에 들어가서 카드를 등록해줘야 한다.맞다...돈 나가는 거다.콘솔버튼을 클릭해 api 서비스에 map을 들어가준다음 등록을 하면 된다.본인 프로젝트 이름

리액트 쿼리는 '서버'에 상태관리를 도와주는 라이브러리이다. 서버에 데이터를 캐싱해놨다가 서버에 데이터를 요청하면 그 때 한번 데이터를 불러오기 때문에 불필요한 렌더링을 방지할 수 있다.서버상태는 다음 4가지를 통해 쉽게 이루어진다.fetching : 서버에서 데이터

카카오 맵 API를 다루다가 마커로 찍은 장소들을 라인으로 이어주는 메서드에서 데이터를 넣는 작업을 하다가 배열을 다루는게 익숙치 않아서...다음과 같은 에러가 떴다.자꾸 저렇게 변수에 저장해주니까 currentCourse에 담은 배열이 해당 장소에 맞는 배열이 리턴되

자바스크립트에 약점을 보완하기 위해 나온 타입을 지정해 주는 언어이다.JavaScript는 개발자가 실수를 저지른 것을 <span style="background-color:자바스크립트는 변수의 타입이 실행시간에 알려주기 때문에 실행시간에 변수의 값과 타입을 모두

함수에서 타입을 지정해줄때는 인자와 리턴문에 타입을 지정해주면 된다.반환되는 값이 없을 경우 void로 적어주면 된다. 리턴문에 타입은 생략이 가능하지만 처음에 쓸 때는 일일히 명시적으로 적어주는 편이 좋다.화살표 함수로 선언해줄때는 리턴문이 하나에 표현식일 때 괄호는

이라는 에러가 떴다..말그대로 타입을 매치할 수 없는 에러인 것 같다. 커스텀 훅스 컴포넌트에 가보면 리턴 문에 타입을 지정해주지 않았다.함수 다음에 받아주는 인자값에 타입을 받은 인자 수 만큼 지정해주면 된다. value값은 문자열로 받고 setState는 함수로 제

풀스택 웹 어플리케이션을 구축하기 위한 react 기반 프레임 워크이다. 버셀에서 제작되었기 때문에 next.js를 사용하면 버셀에 배포할 때 좀 더 편리하게 이용할 수 있다. next.js는 리액트에 고급 성능 최적화 되어 있기 때문에 좀 더 쉽게 개발할 수 있으며

next.js는 react에서 사용했던 CSR(Client-Side-Rendering)과 다르게 SSR이나, SSG 즉 서버측에 요청해서 화면을 그려준다.웹 서비스에서 렌더링을 해줄 때 클라이언트에 요청해서 화면에 렌더링 해주는 걸 말한다. 브라우저에게까지 전달되는 과

로그인이나 회원가입을 할 때, 필요한 인증서비스를 구축할 때 인증과 인가가 어떻게 다른지 알아보기로 했다.인증(Authentication)이란 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차인가(Authorization)이란 특정 리소스에 접근할 수 있는 권

리코일은 2020년에 페이스북팀의 한 개발자 엔지니어가 개발한 라이브러리이다. 동시성모드를 해결하기 위해 나온 React에 상태관리 라이브러리다.리코일의 특징은 다음과 같다.우리는 공유상태(shared state)도 React의 내부상태(local state)처럼 간단

짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것이다.(주로 사용되는 예: 무한스크롤)Type 1: Leading EdgeType 2: Trailing EdgeType 3: Lea

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.인자로 받은 배열을 map을 통해서 돌려서 인자를 이차원

일단 기술에 변화가 빨리빨리 일어나듯..최신버전에 react-query를 사용하려면 이름도 TanStack Query로 바뀌었고 문법적으로도 달라진게 살짝씩 있었다. 공부하다 보니까 그래도 최신것이 쓰기도 깔끔하게 바뀌고 불필요한 작업들을 한번에 축소 시킨 것 같아서

풀스택 웹 어플리케이션을 구축하기 위한 React 프레임 워크이다. next.js를 사용하면 프레임워크는 Next.js가 React에 필요한 도구와 구성을 지원하고 애플리케이션을 위한 별도의 구조, 기능 그리고 최적화를 제공한다는 의미이다.React를 사용하여 UI를

ostgreSQL은 가장 복잡한 데이터 워크로드를 안전하게 저장하고 확장하는 많은 기능과 결합된 SQL 언어를 사용하고 확장하는 강력한 오픈 소스 객체 관계형 데이터베이스 시스템입니다. PostgreSQL의 기원은 캘리포니아 대학교 버클리 캠퍼스의 POSTGRES 프로

approuter 앱라우터는 정말 잘써야 하기 때문에 개념을 확실히 알고 갈 것앱라우터 약속next js docs -> file conventions파일 이름에 규칙이 있다경로자체가 url이 된다변화하는 값은 예를 들면 id(파라미터값) \[] 대괄호를 써서 만들어줌

자꾸..next로 생성한 프로젝트에 설정 해준적도 없는 경로가 자꾸 디폴트로 잡혀서 아무리 검색해봐도..about으로 설정한 주소가 나와 있지 않은데 대체 어디가 문제지 고민하다가혹시나 해서 브라우저 캐싱을 지워줬떠니 해결이 되었다.설정 -> 개인정보보호 및 보안 ->

슈파베이스 타입스크립트 최신화 하는 방법1\. npx supabase login // 로그인 먼저 해주기2\. npx supabase gen types typescript --project-id aksbymviolrkiainilpq // 프로젝트 id를 통해 원격 데이

nextjs를 사용해서 게시물 삭제를 구현하다 발생되는 이슈가 있었다튜터님에 도움을 받아 공식문서에서 캐시를 지울 방법을 찾았다재검증 경로를 사용하면 특정 경로에 대해 온디맨드 방식으로 캐시된 데이터를 제거할 수 있습니다.알아두면 유용합니다:revalidatePath는

조회 등록 제거

css를 줄 때, 클릭했을 때 효과를 다르게 주려고 버튼에 border를 추가하는 과정에서 다른 레이아웃에 영역에 top이랑 left, right도 같이 움직이는 현상을 발견했다.튜터님의 도움을 받아 원인을 분석해 보니 레이아웃 시프트 현상이 나타난다는 것이였다.레이아

레이아웃이 추가 되었다.페이지간 이동이 쉽다? 원하는 부분만 렌더링이 된다.서버 컴포넌트로 사용자 경험을 높일 수 있다.CSR은 클라이언트 사이드 렌더링의 약자클라이언트쪽에서 렌더링이 되기 때문에 데이터를 서버에 전달하면 받아올 때 클라이언트 쪽에 부분적으로 렌더링?S

이미지 최적화란 이미지의 품질은 유지하면서 파일 크기를 줄여 파일이 빠르게 로드 되도록 만드는 프로세스를 말합니다. 이미지 최적화의 중요한 요소는 올바른 이미지 형식을 선택하는 것입니다. 예를 들어, JPEG는 압축률이 높은 파일로 공간을 적게 차지하지만 움직임이나 투

리액트 쿼리에 Provider를 주입하다가 이슈가 생겼다. 바로 하이드레이션 에러..저기 https://..로 되어 있는 링크를 누르면 다음과 같은 공식문서가 뜬다. 공식문서를 확장프로그램을 사용해서 한글로 번역했다. (DeepL 이란 녀석을 깔고 드래그 하면

분명 supabase에서는 textarea태그로 데이터를 넣었을 때 개행처리(줄바꿈)가 돼서 들어갔는데 꺼내올 때는 줄바꿈 처리가 안돼서 데이터에 문제인가 했더니 가져올 때 태그에 속성을 적용안시켜 줘서 그랬다.등록된 textarea에서 개행처리가 아니라 조회를 해주는

반응형 웹은 해상도나, 디스플레이 화면 크기에 따라 레이아웃이 그 크기에 맞춰서 UI가 바뀌는걸 말한다. 모바일 환경은 UX라고 부르면 통칭 UI/UX 디자인이라고 많이 얘기한다.기준이 예를들어 640px인 경우 640px부터이기 때문에 초기에 설정하는 값을 제일 작은

너무 좋앗쓰빈다..