TIL

검색결과를 보여주는 원리 -> 기계가 정해진 규칙에 따라 순서대로 일을 하기 때문이다(프로그램). 어떤 개발자가 컴퓨터에게 미리 알려준 것이다.\->> 컴퓨터에게 일을 시킬 때는 프로그램을 만들어서 시킨다.프로그램을 만들 때 사용하는게 프로그래밍 언어이다.프로그래밍으로

J.Query >자바스크립트를 짧고 직관적으로 사용하게 사용하게 도와주는 라이브러리 .val() HTML 폼 요소의 값(value)을 가져올 때 사용한다. .append() 요소의 마지막 자식 위치에 새로운 콘텐츠(HTML, 텍스트, 요소)를 추가하는 데 사용된다

(DataBase)체계적으로 정리되고 저장된 데이터의 집합을 의미합니다. 데이터 베이스가 있으면 데이터를 저장해두었다가 사용 가능하다.데이터를 왜 저장하는 특수한 곳이 필요할까?어떤 데이터베이스가 좋은 데이터베이스 일까?\-> 왜냐하면 잘 찾기 위해 잘 적재 해놓는다.

vscode > terminal > >\_모양 옆 아래 화살표모양 > bash로 실행 ~:데스크탑보다 더 큰 폴더. : 숨겨진 파일 의미pwd :현재위치하고 있는 폴더,파일ls :현재위치의 파일 목록\-a : 숨겨진 파일까지 모두보기cd.. :현재 위치보다 한단계위로

화면에 어떻게 보이는지 결졍해주는 속성정해진 공간만 사용한다.다른 요소들과 같은 라인에 배치된다.너비와 높이를 지정할 수 없다.span, a, ...한 줄을 모두 공간으로 사용한다.다른 요소들과 다른 라인에 배치된다.요소의 너비는 기본적으로 부모 요소의 100%를 차지

격자형으로 구조를 설정할 수 있는 속성격자 형태의 구조를 만들어야 할 때(이미지 사이트, ...)홈페이지의 구조를 격자형태로 설계할 때(header, main, footer, side) 자주 사용부모 container 자체에 display: grid; > 이제부터 g

박스와 아이템들을 행 또는 열로 자유 자제로 배치 시켜주는 속성이다.예전에는 float을 사용해 짜맞추기식 레이아웃을 했었다.float 은 이미지와 텍스트를 어떻게 배치하기 위한 속성인데 이미지 대신 박스를 사용했었다. 순수 목적에 어긋나는 행동이었다.부모 컨테이너에

branch > 코드를 통째로 복사하고 나서 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있는데, 이렇게 독립적으로 개발하는 것, 쉽게말해 복사본이라고 생각하면 된다. 브랜치 생성 + 이동 새로운 브랜치에서 코드 수정 새로운 branch에서 저장하면 mai

main branch는 배포용이기 때문에 개발용 branch를 만들어서 테스트를 한 후 main branch로 올리게 됩니다.한번에 완벽하게 기능 개발을 해야 merge할 수 있다.한 번에 완벽하게 기능 개발을 하면 시간이 오래 걸린다.만약 main branch에 올려

실행할 코드의 환경 정보를 모아 놓은 객체실행 컨텍스트가 활성화되는 시점에 하는 일들호이스팅외부 환경 정보 구성this 값 설정실행 컨텍스트를 이해하기 위해서는 콜 스택에 대한 이해가 반드시 필요하다.그 전에 스택에 대해 알아보자!스택(stack)은 바구니다. 마지막으

Variable Environment (VE)식별자 정보(record)를 가지고 있다.외부 환경 정보(outer)를 가지고 있다.Lexical Environment (LE)식별자 정보를 가지고 있다.외부 환경 정보를 가지고 있다.thisBindingthis가 함수안에서

원래 구조를 벗어나고 새로운 구조로 덧입힐 때 사용… 사용구조 분해 할당과 함께 많이 사용된다.배열에서의 전개객체에서 전개변수를 할당해서 전개 할 수있다.오늘은 지옥의 날이였다. 달리기반 첫 수업이었는데 수업 내용은 기초 내용이라 어렵진않았지만, 실습과제 마지막 문제가

식별자 정보를 실행 컨텍스트에 수집한다.수집 대상은 식별자, 함수 자체, var로 선언된 변수 등이 있다.수집 방법은 처음 부터 끝까지 훑어 가며 수집한다.JS엔진이 함수 안에서 변수들을 수집하는 과정이다.식별자 정보를 함수 최상단으로 올려 수집한다.변수 정보 수집과정

브라우저 환경에서는 window객체를 노드 환경에서는 global객체를 참조한다.식별자에 대한 유효 범위식별자의 유효 범위를 안에서부터 바깥으로 차례대로 검색해 나가는 것브라우저 환경에서는 window객체를 노드 환경에서는 global객체를 참조한다.스코프 체인이 가능

개인 과제를 하면서 Authorization: 'Bearer\~~'라는 부분이 있어서 검색해보게됬다. API KEY로만 인증하는 줄 알았는데 또 다른 인증방식이 있었다. 그게 바로 Bearer 인증 이다.토큰을 소유한 사람에게 액세스 권한을 부여하는 일반적인 토큰이

동기 방식은 하나의 코드가 실행이 끝나면 다음 작업이 실행되는 원리이다.비동기 방식은 하나의 코드가 실행이 끝나면 다음작업이 바로 실행되는 응답을 기다리지 않고 다음 코드가 실행이 되는 원리이다.장점코드가 설계가 간단하고 직관적이다.단점코드가 순서대로 진행되기때문에 중

과제를 진행하던 중 "배열이어야 하는 것이 왜 계속 object라고 콘솔에 찍히지?어 이상하다?" 라고 생각했다.그래서 검색해보니 배열도 객체 종류 중에 하나여서 objcet라 나온다고 알게되었다.이미지를 보듯이 배열도 objcet로 찍히는 결과를 볼 수 있다.기초적인

이 코드에 결과값이 무엇일지 예상해보자 . . . . . . . . . . . . . . . . . >맞다. 42이다. 왜 42인지 알아보자! 처음 호출되는 함수는 foo함수다. foo함수 안에 bar함수가 있다. bar함수 안에 console.log(실행부)가

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담는 ES6부터 사용 가능한 메서드다.예시1)예시2-1) 구조 분해 할당 전예시2-2)구조 분해 할당 후오늘은 React를 배우기 전 자바스크립트를 복습한 날이다. 뿐만아니라 평소 부족했던 html과 css를 보완하

React > 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리다 특징 컴포넌트기반 라이브러리 SPA기반 라이브러리다. 싱글 페이지로 구성된다. 선언형이다. 인기가 많다. UI가 필요한 곳이면 어디든 사용 가능하다. 모바일, VR, 등 인기가 많기때문에

컴포넌트란 UI를 재상용이 가능하도록 여러 조각으로 나눈 것 이다. 마치 자바스크립트에서의 함수와 비슷하다.함수형 컴포넌트에서 입력되는 값을 props라 하고반환되는 것은 element라 한다.import 영역export 영역자바스크립트 영역return 이후 리액트 영

컴포넌트 간의 정보 교류 방법이자, 부모 컴포넌트가 자식 컴포넌트에게 넘겨준 데이터 묶음이다.props에는 2가지 규칙이 존재한다.반드시 위에서 아래 방향으로 흐른다. (부모) > (자식) 방향 (단방향)반드시 읽기 전용으로 취급하며, 변경하지 않는다.1) 값 전달 받

state > 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다. 컴포넌트안에서 어떤 값이 바뀌어서 랜더링이 되야할 때 사용한다. 구조 분해할당도 사용된다. 시스템적으로 명시적으로 값을 바꾸는것이 안되기 때문에 사용한다. 기본 구조

컴포넌트 > 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구분한다. 때로는 큰 조각일 수 있다. 컴포넌트를 사용하는 이유: UI구축을 쉽게 만들어준다. 하나를 만들어놓고 반복되는 컴포넌트를 여러곳에서 사용한다. 컴포넌트가 어떤식으로 동작할지, 어떻게 생길지 선언해

리액트는 state의 변경에따라서, props의 변경에따라서,부모 컴포넌트에 변경에 따라서 리렌더링이된다. 리렌더링이 될 때 리액트는 실제DOM에 바로 반영하여 렌더링 하는 것이 아닌 가상DOM에 저장한 후 실제DOM에 ⭐일괄로 반영⭐한 후 렌더링을 하는 프로세스를 가

리액트에서 css in JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지자바스크립트 안에 css가 있는 형태백틱 사용특정 조건이나 로직을 적용할 수 있다.vscode 터미널에 yarn add styled-components 입력 후 Enterimport style

함수형 업데이트 > 상태 변경 함수 내부에 값을 직접 넣어도 되지만 함수를 넣어 함수형 업데이트를 구현할 수 있다. 증가 버튼을 눌러도 잘 작동하는 모습이다. 상태 변경 함수 인자에 값을 직접 할당하는 것과 함수를 할당하는 것의 차이점 > 반복해서 사용할 경우 차이

컴포넌트가 렌더링된 이후에 특정 작업을 수행하는 Hook이다.컴포넌트가 mount상태일 때 실행된다.useEffect는 undefined를 반환한다.최초 실행은 자동으로 실행된다.setup함수와 dependencies(의존성 배열)첫 번째 예시에서는 setup함수만 사

부모에서 자식 컴포넌트로 데이터 전달 시 단방향이 아닌 데이터 전달prop drilling문제점으로 인한 useContext API 등장특정 영역 안에서 state를 공유하는 것을 의미. 서로 값에 접근하고 업데이트할 수 있다.createContext: context

리렌더링 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props 가 변경되었을 때 부모 컴포넌트가 리렌더링 된 경우 자식컴포넌트는 모두 리렌더링 되었을 때 리렌더링이 많이 일어나는 것이 좋지않다. 비용과 사용자의 불편함이 발생된다. 이를 해결

custom hook > 자신만에 hook을 만드는 것을 의미한다. 반복되는 로직을 처리할 수 있다. 예시 코드 App.jsx 리팩토링한 App.jsx hook폴더 생성 후 useInput 생성 하루를 마치며 내일 드디어 숙련주차 개인과제가 시작된다. 공부했던

예측 가능하고 유지 관리 가능한 글로벌 상태 관리를 위한 JS 라이브러리전역 상태 관리 라이브러리https://redux.js.org/useState의 불편함 props를 전달하려면 부모-자식 관계가 성립되어야하고 부모컴포넌트가 props로 전달받은 값이 필요

store > store는 전역 상태 관리를 할 수 있게 관리해주는 중앙 관리소 store 사용 방법 1. rootReducer를 만든다! const { combineReducers } = require("redux"); const rootReducer = comb

Redux Tool Kit기존 리덕스를 개량한 것코드량은 적고 더 편리하다.가장 큰 차이점은 action creator와 action value를 하나로 합친다는 점이다. 이로 인해 코드가 짧아지고 편리성도 상승한다.또한 modules파일이 아닌 slices파일을 생성

GitHub공식 홈페이지에서 issue의 역할을 이슈를 만들고, 이를 작업으로 나누고, 관계를 추적하고, 사용자 정의 필드를 추가하고, 대화를 나누고, 대규모 프로젝트를 테이블 보드 또는 로드맵으로 시각화 하고 모든 것을 코드로 자동화 한다.라고 제시되어있다.한 줄로

supabase > Back-end환경을 사용할 수 있게 제공되는 Baas 어플리케이션 supabase 사이트에 들어가서 로그인을 한 후 Start project 클릭! 다시 한 번 New Project 클릭! Organization은 프로젝트를 생성할 최상위 저장소라고 생각하면 된다. Project name은 말 그대로 프로젝트 이름을 입력하면 된다...

Hyper-Text Transfer Protocol 웹에서 클라이언트와 서버간 데이터 전송을 하기위한 규칙들이다.클라이언트가 서버에서 요청을 보내면 서버는 요청에 대한 데이터를 클라이언트에게 응답해주는 시스템이다.무상태성: 요청과 응답은 독립적인 기능이기 때문에 이전

useState와 useEffect를 사용한 비동기 데이터 처리 방식은 관리할 상태가 많아질 수록 상태 관리가 복잡하고 코드 중복이 생겨 유지보수가 어렵다.리덕스에서 미들웨어로 서버 상태를 관리할 수 있지만 테스트하는 것이 복잡하고 보일러플레이트 코드가 많이 생기게된다

타입스크립트는 자바스크립트의 모든 기능을 포함하는 상위 집합의 언어다.타입스크립트는 정적 타입 시스템이다.타입스크립트는 구조적 타입 시스템이다.프로그램이 실행되기 전 타입을 고정시켜놓는 시스템이다.자바스크립트는 동적 타입 시스템으로 프로그램이 실행된 이후 타입이 결정된

Next.js > 웹을 위한 리액트 프레임워크 라이브러리 vs 프레임워크 > 이 두 용어는 매우 자주 들어봤을 것이다. 하지만 어떤 차이점이 있는지 모르는 사람이 많다. 나도 마찬가지다. 라이브러리 > 공통 기능의 모듈화가 이루어진 프로그램의 집합 React re

Server component > 서버에서 실행되는 컴포넌트 내 pc서버에서 실행 실행 주체가 서버 Client component > 클라이언트(브라우저)에서 실행되는 컴포넌트 크롬, 파이어폭스, 등 브라우저에서 실행 실행 주체가 브라우저 CSR > Client S

React > ui를 만들기 위한 Javascript 라이브러리 SPA 컴포넌트 state VirtualDOM 렌더링 다양한 Hook 전역 상태 관리 RTK RRD SPA > Single Page Application 하나의 페이지만 가진 어플리케이션 React는

you to create custom request handlers for a given route using the Web Request and Response APIs.웹 요청 및 응답 API를 사용하여 지정된 경로에 대한 사용자 정의 요청 핸들러를 만들 수 있다.

Static Site Generation최초 빌드 시에 서버에서 데이터를 fetch하여 클라이언트에게 html을 전달하는 방식즉 최초에 fetching하여 정적페이지를 만들어놓고, 그 이후에는 전달받는 html로 브라우저에서 렌더링하는 방식최초 빌드시에만 속도가 느리고

Incremental Static Regeneration설정한 주기마다 정적 페이지를 재생성하여 CDN에게 전달하는 기법SSG의 단점인 정적페이지만 전달할 수 있는 점을 그나마 보완한 기법이다.SSG와는 다르게 데이터가 업데이트되었을 때 실시간은 아니지만 그나마 업데이

Server Side Rendering랜더링의 주체가 서버인 렌더링 기법SSG, ISR과 같이 서버에서 html애 Javascript를 붙여 클라이언트에게 전달하는 방식CDN에 캐싱이 안되기 때문에 곧바로 클라이언트에게 html을 전달한다. 그러므로 유저가 요청을 할

CSR > Client Side Rendering 렌더링 주체가 클라이언트인 렌더링 기법 CSR, SSG, ISR과 반대로 빌드시에 Javascript가 담긴 html을 만들어 클라이언트가 요청할 때 보내는 것이 아니라, 빌드시에 비어있는 html과 자바스크립트 번들파

Server Action > Next.js에서 서버에서 실행되는 비동기 함수다. 사용하기 위해서 "use server"를 컴포넌트 최상단에 작성해야한다. 이 함수가 서버에서 실행되는 서버 액션임을 선언합니다. async를 작성해 비동기 함수를 동기함수처럼 동작시킨다

Cache Data? cache란? 아래와 같이 은닉하다. 무언가 잠시 숨겨둔다. 라는 의미를 가지고있다. 그럼 Cache Data는 데이터를 잠시 숨겨둔다.라는 의미를 가진다. Life Cycle? life cycle은 생명 순환(주기)다. Cache Data

HTML을 벗어나지 않고도 최신 웹사이트를 빠르게 구축할 수 있다.스타일을 CSS 파일이 아닌 className 안에서 직접 작성할 수 있게 해주는 CSS 프레임워크다.쉽게 말해, 클래스 기반으로 스타일을 빠르게 적용할 수 있게 도와주는 CSS 프레임워크다.Tailwi

프로젝트를 한 마디로 표현하자면 사람과의 관계를 전문적으로 관리할 수 있는 퍼스널 스케줄 서비스로그인 / 회원가입supabase auth로 인증/인가 시스템 구현소셜 로그인 지원 (Google, Kakao)사용자 인증 상태에 따른 Protected 페이지 구성 및 클라

Baas를 사용하는 이유는 프론트엔드에서 비교적 쉽게 데이터베이스를 사용할 수 있게해주기 때문에 사용한다.이메일/비밀번호 로그인, 소셜 로그인(Google, GitHub 등)로그인 등 다양한 인증 방식을 손쉽게 구현할 수 있게 해준다. 복잡한 인증 로직을 직접 구현할

테스트한 이유 > react-hook-form을 처음 사용해보기도 하고, 로그인/회원가입 기능을 다뤄보지 못했기 때문에 테스트를 진행했다. 🛠 사용 스텍 BaaS supabase supabase auth Development Next.js react-hook-fo

수파베이스 패키지react-hook-form 패키지우리 팀에서는 api폴더 아래 만들기로 결정했다.Browser Client: 쉽게 말하자면 클라이언트 컴포넌트에서 사용되는 ClientServer Client: 쉽게 말하자면 서버 컴포넌트에서 사용되는 ClientNEX

zustand에 create를 이용해 store를 생성한다.set함수를 사용해서 상태를 업데이트한다.set({ user, isLogin: true })처럼 user상태와 isLogin상태를 업데이트한다. 전달받은 객체를 이용해 기존 상태의 user와 isLogin 값을

Zod 공식 홈페이지에서는 정적 유형 추론을 통한 타입스크립트 우선 스키마 유효성 검사 라고 소개하고있다.쉽게 말하자면, 타입도 만들고, 그 타입에 맞는 값인지 검사도 한 번에 해주는 도구다.간결하고 직관적인 문법런타임에서도 검증 가능실제 입력되는 데이터에 대해서 실시

1️⃣ google cloud에서 환경 설정 ![](https://velog.velcdn.com/images/kjjyyy01/post/3e85c4db-2867-428f-a2ea-3f6c523

MVC 디자인 시스템 > - MVC 디자인 시스템(Model-View-Controller)은 소프트웨어를 만들 때, 프로그램을 역할에 따라 3개로 나누는 구조 데이터(Model), 화면(View), 처리(Controller)를 깔끔히 나눠서, 각각 역할에만 집중하게 만

Promise와 async/await 차이점 Promise와 async/await는 모두 자바스크립트에서 비동기 처리를 위해 사용하는 방법이다. 둘은 같은 개념을 기반으로 하지만, 사용 방식과 가독성 면에서 차이가 있다. Promise는 .then()과 .catch(

Javascript 특징 🔠 싱글 스레드 언어 > 한 번에 오직 하나의 작업만 실행할 수 있다는 의미, 즉 한줄씩 차례대로 코드가 실행 동시에 여러 작업을 처리하지 않고, 순차적으로 처리하는 방식 ❓왜 싱글 스레드 언어로 만들어졌을까❓ >자바스크립트는 웹페이지 상에

프론트엔드 프레임워크는 웹 애플리케이션의 사용자 인터페이스(UI)를 개발할 때 구조와 일관성을 제공하는 도구 모음입니다. 이는 개발자들이 효율적으로 작업할 수 있도록 기본 코드 구조, 재사용 가능한 컴포넌트, 상태 관리 등의 기능을 제공합니다.사용 목적ㄴ은 반복적인 작

사용자의 조작에 따라 사용자 인터페이스가 동적으로 변화하는 웹 애플리케이션을 개발할 수 있게 해 주는 프론트엔드 라이브러리입니다.Facebook이 개발한 React는 2013년에 출시되었으며, Facebook은 React를 자사의 제품(Facebook, Instagra

참고 자료: https://www.maeil-mail.kr/question/57자바스크립트는 어떻게 동시에 여러 작업들을 수행하나

https://www.maeil-mail.kr/question/33 특징1 > 함수를 선언하는 방식은 세 가지가 있다. 두번째 특징은 함수 표현식과 함수 선언문 그리고 화살표 함수입니다. 첫 번째로 자바스크립트에서는 이름 없는 함수, 즉 익명 함수를 정의할 수 있다

개발자가 흔히 보는 네트워크 탭이다.평범하게 개발하던 중 게시글 업로드를 하는 POST요청을 보내던 중 내가 요청 보낸 것 외에 다른 것이 같이 표기되고있었다.나는 이게 무엇인지 궁금했다. 알아본 결과....................................CO

팀 프로젝트를 하던 중, 팀원이 스쳐 지나가며 이런 질문을 던졌습니다. “혹시 form을 꼭 쓰신 이유가 있을까요?” 순간 멈칫했습니다. 입력과 제출을 처리하는 방법은 form만 있는 게 아니니까요. 그렇습니다. onSubmit 이벤트를 활용한 form도 있고, 단순히 div와 버튼의 onClick핸들러로도 구현할 수 있습니다. 그럼, 왜 굳이 form을...

입력창을 만들다 보면 의외의 버그를 만날 때가 있어요.저는 태그 입력 기능을 만들다가 "안녕"을 입력했는데, 태그가 "안녕"과 "녕" 두 개가 생성되는 황당한 상황을 겪었습니다.이 글에서는 그 원인을 설명하고, 어떻게 해결했는지 정리해보겠습니다.태그 입력 컴포넌트는 간

인턴에 참여하는 기업이 claude code를 사용하는 기업이라 사용해보던 중 mcp라는게 무엇인지 알게됨. mcp는 수없이 많지만 어떤 것을 사용할지 정하는게 중요함.어떤걸 어떻게 쓰냐에 따라 ai의 효율성이 달라짐. 하지만 어디까지 ai를 사용하고, 손코딩을 해야할

내일배움캠프를 마친 뒤, 팀 프로젝트가 기대만큼 속도감 있게 진행되지 않으면서 스스로 부족한 부분을 절실히 느꼈다.공백을 빠르게 메우고 실무에서의 감각을 느끼기 위해, 실제 기업 환경 속에서 일하며 프로젝트의 흐름과 팀 단위 협업을 직접 경험하고 싶다는 목표로 인턴에