TIL

1. HTML html은 Hyper Text Markup Language의 약자이고, 웹 페이지를 위한 마크업 언어이다. (마크업 언어: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지) 2. CSS css는 Cascading Style Sheets

var, let, const의 차이점 var var로 선언된 변수는 전역 범위 또는 함수 범위이다. 범위 내에서 업데이트 및 재선언할 수 있다. 호이스팅했을 경우 undefined로 초기화된다. let let으로 선언된 변수는 중괄호 안에 있는 블록 범위 내에서만

내가 React 트랙에 참여한 계기는 무엇인가요? 처음에 단순히 웹 프론트엔드가 재미있어 보여서 시작하게 되었고 내일배움캠프에서 실력을 키우고 싶어 참여하게 되었습니다. 내가 이해한 개발자는 어떤 역할을 하는 사람인가요? 최신 트렌드에 맞춰 꾸준히 공부하

10번 문제 - 배열의 평균값for of문은 반복 가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등 포함)에 대해 사용할 수 있다. 보통은 Array(배열)에 사용한다고 흔히 알려져 있다.array.length

CSS box-sizing box-sizing을 알려면 먼저 box model부터 알아야 한다. box model은 HTML 요소가 웹 페이지에서 차지하는 영역을 정의한 것이다. 그림을 통해 한 요소의 box model의 크기를 계산하면 다음과 같다. 안쪽부터 순서

내 코드 :split 함수 = 문자열을 'separator'로 잘라서, 'limit' 크기 이하의 배열에 갈라진 문자열을 저장하여 리턴한다.separator필수 X문자열을 잘라 줄 구분자값이 입력되지 않으면 문자열 전체를 배열에 담아서 리턴한다.separator의

내 코드 :\-> repeat() 함수는 메서드에 주어진 수만큼 반복해서 새로운 문자열을 반환하는 함수이다.\-> slice() 함수는 특정 범위를 복사한 값을 담고 있는 새로운 배열을 만드는데 사용한다. 첫 번째 인자로 시작 인덱스, 두 번째 인자로 종료 인덱스를 받

코드카타 25번 : 나누어 떨어지는 숫자 배열 내 코드 : 자바스크립트 배열 정렬 함수 sort sort() 함수란? : 배열의 요소를 정렬한 후에 그 배열을 반환하는 함수(기본적으로 오름차순으로 정렬됨. ASCII 문자 순) arr.sort([compareFunc

코드카타 29번 : 제일 작은 수 제거하기 내 코드 : Javascript에서 배열의 최댓값, 최솟값 구하기 배열에서 최댓값, 최솟값을 구할 때 구하는 값이 숫자인 경우에는 Javascript의 내장함수인 Math.max()와 Math.min()을 사용하여 구할 수

문제 설명문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요.s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다.나의 풀이문자를 비교하기 위해 아스키코드로 변환해서 내림

문제 설명문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다.처음 나의 코드 : 코드를 이렇게 쓰니 테스트 케이스에서

문제 설명두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution

코드카타 과제 02. 숫자 기억 게임 만들기 내 코드 HTML CSS ![](https://velog.velcdn.com/images/slppills/post/51

문제 설명네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.1478 → "one4seveneight"23

2013년에 페이스북에서 만든 자바스크립트의 라이브러리로, SPA(싱글 페이지 애플리케이션)의 UI를 생성하는데 집중한 라이브러리이다.필요한 영역만 캐치하여 즉각적인 화면의 변화를 줄 수 있기 때문에 사용자가 느끼기에 네이티브 애플리케이션과 같은 자연스러운 사용감을 줄

Router : 사용자가 어떤 주소로 들어왔을 때 그 주소에 해당하는 페이지(데이터)를 사용자에게 보내주는 것을 말한다. React Router 사용하기 리액트 라우터 설치 BrowserRouter HTML5를 지원하는 브라우저의 주소를 감지한다.(History A

과제에서 데이터가 주어지고 이 데이터로 위의 스크린샷과 같은 화면을 만드는 과제였다.내 코드 :여기까지는 필수 사항만 구현한 코드이다.선택사항 4번은 예시로 나와있는 가격을 객체의 속성으로 추가했다.menuItems에 price 속성을 추가했고description 속성

사전캠프 데일리미션 - 할 일 목록(To Do List) 만들기

typescript에서 type과 interface의 역할이 비슷한거같은데 무슨 차이가 있나 궁금해서 알아보게 되었다.extends 키워드를 이용해서 확장할 수 있다.& 기호를 이용해서 확장할 수 있다.선언적 확장(Declaration Merging)이 가능하다.(같은

useParams는 react-router-dom 라이브러리에서 제공하는 Hook으로 동적으로 라우팅을 생성하기 위해 사용한다.리액트 라우터 라이브러리에서 제공하는 함수이고, Route path 와 일치하는 현재 URL에서 동적 매개변수의 키/값 쌍의 개체를 반환한다.

머쓱이는 태어난 지 11개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음과 네 가지 발음을 조합해서 만들 수 있는 발음밖에 하지 못하고 연속해서 같은 발음을 하는 것을 어려워합니다. 문자열 배열 babbling이

내 코드 :배열의 10칸을 0으로 채우는 코드이다.X, Y 문자열로 반복문을 돌려서 countX와 coutY 배열의 각 char 인덱스에 1을 더한다. (문자형도 인덱스로 쓸 수 있었다.)

🧐 useState란? useState는 리액트에서 기본으로 제공해주는 훅 함수들 중 하나로 컴포넌트에 상태 변수를 추가할 수 있도록 해주는 함수이다. useState는 2개의 원소를 갖는 배열이 반환되며, 첫번째 원소는 상태값, 두번째 원소는 상태값을 변경할 때 사

리액트 훅(react hook) 이란? 리액트의 훅은 16.8 버전부터 새로 추가된 기능이다. 기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴포넌트에서는 상태를 관리할 수 없었지만, Hook을 통해 상태 관리를 할 수 있게 되었고, 상태 관리

pwd는 현재 내가 작업하고있는 폴더의 경로를 보여준다.ls는 list의 약자로, 파일 및 디렉터리 목록을 볼 수 있다.다음 리스트는 ls의 옵션들이다.\-l : 내용을 권한, 생성일 등을 포함한 긴 형식으로 보여준다.\-a : 숨김파일이나 숨김폴더 등을 모두 보여준다

내가 무엇을 배웠는지 기록한다.학습한 것을 정리하여 이해도를 높이고, 복습도 가능하다.비슷한 문제 상황 발생 시 활용할 수 있다.취업을 하기 위해선 증명을 해야 합니다.내가 남들보다 더 열심히하고 잘한다는 것을 증명해야 합니다.내가 남들보다 회사에 도움일 될 사람이라는

처음 나의 코드이렇게 실행하니까 NaN이 나왔다.찾아보니 Math.min과 Math.max 함수는 배열이 아니라 고유한 변수를 기대하기 때문에 배열에 Math.min과 Math.max를 쓰려면 Destructuring이 필요하다.최종 코드

절대경로 : 파일이나 폴더를 최상위 디렉토리부터 전체 경로를 통해 지정하는 방식을 말한다. 상대경로 : 현재 파일의 위치를 기준으로 연결하려는 파일의 상대적인 경로를 적는 것을 말한다. 형식 절대경로 - file:///Users/sung/Documents/custo

scroll snap은 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치에 자동으로 스냅되도록 하는 css 속성이다.예를들어 유저가 페이지를 스크롤할 때 컨텐츠 중간에 멈춰버리면 콘텐츠의 일부분만 보이게 되는데, 이를 미리 설정한 위치로 자동 스냅하여 UX를 더욱

: 매개변수 이름 앞에 ...을 붙여서 정의한 매개변수rest parameter는 함수에 전달된 전달인자들을 배열로 전달받는다.전달인자의 수가 정해져 있지 않은 경우에 사용할 수 있다.콜백함수 : 매개변수로써 쓰이는 함수고차함수 : 함수를 인자로 받거나 return하는

코딩 컨벤션 이란 쉽게말해 이름 짓는 방법을 말한다. 코딩 컨벤션이 중요한 이유 협업할 시에 팀원 모드 같은 코드를 작성할 수 있게 된다. 사람에 의존적이지 않고 규칙에 의존적인 코드를 짜게 된다. 모르는 부분의 코드도 빠르게 파악할 수 있게 한다. 코드, 컨벤션만 보

참조형 타입은 메모리에 값이 저장된 주소를 참조하는 타입이다. 자바스크립트에서 참조형은 객체, 배열, 함수 등이 있다. 참조형 타입은 값을 직접 가지지 않고, 해당 값이 저장된 메모리 주소를 가리킨다.따라서, 같은 참조형 타입 변수를 여러개 만들면 모두 동일한 메모리

(JS 달리기반 강의 2회차 정리)JS에서 배열 메서드는 크게 변경 메서드와 비변경 메서드로 나눌 수 있다.변경 메서드는 배열 자체를 변경하는 메서드이다. 원본 배열을 수정하기 때문에 주의해서 사용해야 한다.배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이

(JS 달리기반 강의 3회차 정리)DOM은 HTML 문서를 구조화 해놓은 객체이다.문서를 트리 구조로 나타내고, 노드라는 단위로 Document의 일부를 나타낸다. DOM을 이용해서 자바스크립트로 HTML에 접근해서 Document의 구조, 스타일 및 내용을 변경할 수

자바스크립트에서 네트워크 요청을 보내는 주요 방법은 XMLHttpRequest 객체와 fetch 함수이다. 이 두 가지 방법을 통해 클라이언트는 서버와 데이터를 주고받을 수 있다.XMLHttpRequest 객체는 오래된 방식의 네트워크 요청 방법으로, 브라우저가 서버와

프로젝트 회고록을 쓰기에 앞서 회고록에 대하여 정리해보았다.개발자는 프로젝트를 하면서 가장 크게 성장한다고 한다. 하지만 프로젝트가 끝나고 조금의 시간만 흘러도 배웠던 것들은 금방 기억에서 사라진다. 나도 정말 이 말에 동의하는거 같다. 그래서 우리는 회고를 통해서 잘

javascript 영화 웹사이트 팀 프로젝트를 하던 도중 영화 포스터를 슬라이드 하는 기능을 맡게 되었다. 메인페이지에 띄우는 영화 슬라이드의 영화 목록은 총 20개이고, 20번째 영화 슬라이드에서 다음 슬라이드로 이동하는 버튼을 누르면 슬라이드 리스트의 1번째 영화

tailwind를 사용하기 전, 공부 용도로 tailwind에 대해 정리하게 되었다.tailwind는 부트스트랩과 비슷하게 m1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML코드 내에서 스타일링을 할 수 있다.스타일 코드가 HTML코드 안에

문제 설명사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 "may", "kein", "kain"이고 각 인물의 그리

구글 로그인 과정을 이해하기 위해 글을 적게 되었다.구글 로그인의 전체적인 과정은 다음과 같다.1\. 프론트에서 구글 로그인 버튼을 만든다.2\. 그 로그인 버튼을 클릭하면 구글 로그인 창을 띄운다.3\. 사용자가 구글 로그인 창에서 로그인을 완료하면 구글에서 acce

개발 도중 의문이 생겨 찾아보고 작성하게 되었다.다음 두 코드의 공통점은 onClick시 clickBtn함수를 실행하는 것이고 차이점은 콜백 형태이냐 아니냐가 있다.clickBtn에 들어갈 인자값이 있다고 하면 함수 뒤에 ()를 붙여야하는데 이럼 onClick할 때만

리액트에서 리렌더링이 자주 일어나는 것은 좋은 일이 아니다. 이러한 불필요한 리렌더링을 막기 위해서 우리는 최적화를 해야한다. 리액트에서 최적화하는 방법은 대표적으로 memo(React.memo) : 컴포넌트를 캐싱useCallback : 함수를 캐싱useMemo :

setState는 useState에서 state의 값을 변경하는 훅으로 대부분 알고있을 것이다. 그렇게 setState를 쓰다가 console.log로 setState 된 것을 찍어보면 setState 한 것이 제대로 반영이 되어있지 않거나 useState의 초기값이

View에서 액션이 일어난다.dispatch에서 action이 일어나게 된다.action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다.middleware에서 명령내린 일을 수행하고 난 뒤, reducer 함수를 실행한다.reducer의 실행

styled components에서 props를 넘겨주는 도중 위의 사진과 같은 에러가 발생했다. 구글링해보니 transient props로 $ 접두사를 props 앞에 붙이면 이 props는 styled components의 스타일링을 위해 사용된다 라고 한다. pr

Supabase를 알기 위해선 먼저 BaaS(Bakcend As A System)를 알아야 한다. BaaS는 웹과 모바일 앱 개발을 쉽고 빠르게 할 수 있게 도와주는 클라우드 기반 백엔드 서비스이다. BaaS를 이용하면 복잡한 백엔드 시스템을 직접 관리하지 않아도 된다

CI/CD는 애플리케이션 개발 단계부터 배포 때까지의 모든 단계들을 자동화를 통해서 조금 더 효율적이고 빠르게 사용자에게 배포할 수 있도록 만드는 것을 말한다.CI는 지속적인 통합의 약자로, 버그 수정이나 새로 만든 기능들이 메인 repository에 주기적으로 bui

뉴스피드 팀프로젝트를 진행하던 도중 무한스크롤을 구현하게 되었다. 내가 생각한 계획은 처음에 화면에 한줄에 4개씩 총 2줄로 8개의 게시물을 띄우고 화면 스크롤을 맨 아래로 내릴 때마다 그 다음 8개 게시물을 불러오도록 구현하려고 했다. 하지만 막상 이렇게 구현하고 보

Throttling Throttling 기법은 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것을 말한다. 주로 무한스크롤에서 사용한다. Debouncing 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정시간(d...

useEffect hook을 사용하여 컴포넌트가 마운트될 때 비동기 요청을 통해 데이터를 가져오는 방식은 가장 기본적인 방식이다. 그렇게 가져온 데이터는 useState hook을 통해 생성한 state에 저장하여 활용했다.그러나 이렇게 구현했을 때는 로딩중이거나, 오

SWR은 최신 데이터가 도착하기 전까지 기존 캐시 데이터를 사용하는 전략이다. 이를 통해 사용자는 최신 데이터를 기다리는 동안에도 빠른 응답을 받을 수 있다. TanStack Query는 이 SWR 전략을 사용하여 효율적으로 데이터를 관리한다. 그렇다면 캐시 데이터는

https://mbti-test-orcin.vercel.app/ 로그인 이후 시간이 지났을 때 accessToken으로 유저 정보를 받아오는 페이지에서 401(unauthorized) 에러가 났다. 코드에서 accessToken을 localStorage에 저장했기에

다운로드 UI 가 있을 때, 또는 UX를 저해시키는 불필요한 네트워크 요청을 제거하기 위해 사용된다.대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있다.queryF

팀 프로젝트 중 유튜브에서 검색어에 대한 검색 결과를 유튜브 api로 가져와 프로젝트에 유튜브 영상 그대로 뿌려주는 작업을 맡았다. 특정 키워드에 대한 유튜브 검색 결과를 가져오는 것은 YouTube data api로 할 수 있었다.하지만 YouTube data api

인증이란, 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차이다.인가란, 인증을 받은 유저가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다.쿠키란 브라우저에 저장 되는 작은 데이터 조각이며, key-value 형태로 저장된다.HTTP의 무상태성과

sass를 프로젝트에 사용해보기 위해 정리해보았다.sass는 css의 확장판 스크립트 언어이다. 기존 css와 비교하여 기능 부재의 단점을 보완한 다양한 기능이 추가되어있고, 가독성이 높고 코드의 재사용에 유리하다.css를 썼을 때 프로젝트의 크기가 커지고 고도화될수록

타입스크립트는 자바스크립트의 모든 기능을 포함하는 상위 집합의 언어이다. (타입스크립트 = 자바스크립트 + 정적 타입 시스템)정적 타입 시스템 -> 타입 시스템 중에 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식타입스크립트는 컴파일 과정에

타입어노테이션과 추론 타입어노테이션 타입 어노테이션은 어떤 값이 어떤 타입을 참조하고 있는지 개발자가 직접 타입을 작성해서 타입스크립트에게 알려주는 행동이다. 타입 추론 TypeScript는 코드에서 타입을 명시적으로 지정하지 않아도, 컴파일러가 코드의 문맥을 통해

TypeScript와 JavaScript를 위한 스키마 선언 및 검증 라이브러리데이터 유효성 검증 라이브러리를 사용하면 객체의 구조를 간단한 문법으로 정의할 수 있고 데이터 유효성 검증의 복잡성을 관리할 수 있다.직관적인 API: 선언적인 방식으로 스키마를 정의할 수

Next.js에서 svg아이콘을 import해서 사용하려고 하는데 에러가 났다.에러를 검색해보니 next.js에서는 svg를 import해서 쓰려면 따로 패키지를 설치해야 했다.npm install --save-dev @svgr/webpackyarn add --dev

프로젝트를 vercel로 배포하고 나서 페이지에 들어가보니GET https://lol-dex-chi.vercel.app/api/rotation 500 (Internal Server Error)이런 에러가 발생했다. 이 페이지에서는 env 환경변수를 사용해서 a

shadcn/ui shadcn/ui는 Vercel 의 shadcn이 만든 UI 도구로, Radix UI 와 Tailwind CSS라는 상당히 최신 기술을 기반으로 하는 컴포넌트 컬렉션이다. 별도의 종속성 설치없이 코드를 복사하여 프로젝트에 붙여넣고 필요에 맞게 사용자

nextjs + tailwind 환경에서 로컬 폰트를 적용하는 방법을 정리해보았다.display: "swap"\-> 사용자 정의 폰트가 로드되는 동안 시스템 기본 폰트로 텍스트를 먼저 표시하고, 사용자 정의 폰트가 로드되면 즉시 교체한다는 뜻장점 : 콘텐츠를 즉시 볼

팀프로젝트를 하던 도중 회원가입하는 코드를 짜고 있었다. 회원가입쪽에서 가입하는 유저의 프로필 이미지를 받을 때 사용자가 이미지를 등록해야만 사진 제거 버튼이 화면에 나오도록 로직을 썼다. 그래서 리액트 훅 폼의 watch 함수로 등록한 프로필 사진이 존재하는지의 여부

플렉스 컨테이너 내부의 각 아이템을 개별적으로 제어하는 속성을 정리해보았다.플렉스 컨테이너 안에서 사용 가능한 공간을 아이템이 얼마나 차지할지 설정한다.기본값은 0으로, 추가 공간을 차지하지 않는다.숫자가 클수록 더 많은 공간을 차지한다. 각각 flex-grow: 1과

사용자 인증 및 리소스 접근을 위해 발급되는 단기 토큰이다.Access Token의 특징으로 유효기간이 짧아서 짧은 유효기간 덕분에 토큰이 탈취돼도 피해 최소화할 수 있다.Access Token 발급 이후, 토큰의 유효기간이 끝났을 때 Access Token을 재발급하

유닛 테스트는 애플리케이션의 특정 부분(함수, 모듈, 컴포넌트 등)이 예상대로 작동 하는지 확인하기 위한 테스트로, 코드의 안정성과 신뢰성을 높이는 과정이다.코드 변경이 기존 기능에 악영향을 주지 않는지 검증개발 중 오류를 빠르게 발견하고 수정할 수 있음코드 구조를 변

사용자 환경에서 발생하는 에러를 탐지해서 빠른 문제 발견이 가능하다.중요한 기능의 장애를 줄여 사용자 만족도를 향상시키는 안정적인 서비스를 제공할 수 있다.로그는 에러가 발생한 순간의 데이터를 제공해 문제 해결 시간을 단축시킬 수 있다.특정 환경이나 사용자 흐름에서만