- 전체보기(200)
- cors(4)
- Constructor(3)
- UI(3)
- express(3)
- ux(3)
- react hook(3)
- 객체 지향 프로그래밍(3)
- stack(2)
- default parameter(2)
- reduce(2)
- InnerHTML(2)
- CSS in JS(2)
- scope(2)
- Map(2)
- selector(2)
- callback queue(2)
- seo(2)
- textContent(2)
- https(2)
- var(2)
- Sort(2)
- body parser(2)
- Routes(1)
- promise.all(1)
- gui(1)
- underscore.js(1)
- element(1)
- react router(1)
- recursive case(1)
- 비연결성(1)
- .slice()(1)
- overflow-x(1)
- session(1)
- mkcert(1)
- git(1)
- WAI-ARIA(1)
- .indexOf(1)
- sop(1)
- 무상태성(1)
- 논리 연산자(1)
- git clone(1)
- encapsulation(1)
- webpack dev server Proxy(1)
- git add(1)
- Mock-up(1)
- argument(1)
- function(1)
- Promise Chaining(1)
- 웹 접근성(1)
- undefined(1)
- CH(1)
- destructuring assignment(1)
- .trim()(1)
- asynchronous(1)
- component(1)
- User Flow(1)
- etag(1)
- resolve(1)
- Render Tree(1)
- promise(1)
- every(1)
- http 1.1(1)
- Math.abs()(1)
- else if(1)
- responsive web(1)
- vw(1)
- console.table(1)
- TCP/IP(1)
- Flex Items(1)
- .toUpperCase(1)
- 시맨틱 HTML(1)
- File System(1)
- link(1)
- npm(1)
- .toLowerCase()(1)
- indexOf(1)
- instance(1)
- URI(1)
- parsing(1)
- git commit(1)
- UI 디자인 패턴(1)
- git push(1)
- push(1)
- querySelector(1)
- prepend()(1)
- Polymorphism(1)
- networking(1)
- stopPropagation(1)
- catch(1)
- rds(1)
- server(1)
- http(1)
- DNS(1)
- git fetch(1)
- JavaScript Interpreter(1)
- If-None-Match(1)
- git status(1)
- linked list(1)
- queue(1)
- On-page SEO(1)
- S3(1)
- UI Backend(1)
- transform(1)
- git pull(1)
- 웹 콘텐츠 접근성 지침(1)
- app.delete()(1)
- react router dom(1)
- request header(1)
- Asymptotic Notation(1)
- heap(1)
- align items(1)
- flex direction(1)
- flex wrap(1)
- justify content(1)
- JSON.parse(1)
- dot notation(1)
- React.lazy(1)
- new Array()(1)
- Math.pow()(1)
- 3-Tier-Architecture(1)
- hiding(1)
- git remote add(1)
- 2 Tier Architecture(1)
- nodemon(1)
- 도메인(1)
- pseudo-classes selector(1)
- rest parameter(1)
- block scope(1)
- url(1)
- Promise hell(1)
- 커링 함수(1)
- PORT(1)
- fs(1)
- CSSOM Tree(1)
- callback(1)
- React(1)
- Math.round(1)
- If-Modified-Since(1)
- npm init(1)
- box-shadow(1)
- .repeat()(1)
- UI 레이아웃(1)
- .replace(1)
- settled(1)
- HTTP Messages(1)
- bracket notation(1)
- call stack(1)
- Spread Syntax(1)
- internal stylesheet(1)
- AVIF(1)
- client(1)
- MPA(1)
- text-shadow(1)
- webp(1)
- local scope(1)
- chai(1)
- fill(1)
- IPv4(1)
- Flex Container(1)
- 콜백 함수(1)
- SaaS(1)
- PaaS(1)
- IaaS(1)
- Miro(1)
- null(1)
- vh(1)
- Object.assign(1)
- Session-based Authentication(1)
- ''.join()(1)
- append(1)
- Prototype(1)
- useEffect(1)
- useState(1)
- 비교 연산자(1)
- .hasOwnProperty()(1)
- JOIN(1)
- ajax(1)
- event loop(1)
- NaN(1)
- 경로(1)
- flex-flow(1)
- Blocking(1)
- non blocking(1)
- 고차 함수(1)
- px(1)
- git init(1)
- git log --decorate(1)
- reject(1)
- mocha(1)
- package.json(1)
- node.js(1)
- Math.ceil(1)
- HTTP 모듈(1)
- parameter(1)
- class(1)
- while(1)
- for(1)
- wireframe(1)
- in(1)
- includes()(1)
- Flex(1)
- JSON.stiringify()(1)
- SSH keys(1)
- 관리자 권한(1)
- flex-basis(1)
- app.post()(1)
- abstraction(1)
- ip(1)
- attribute(1)
- npm install(1)
- Flexbox(1)
- layout(1)
- Column Grid System(1)
- unshift(1)
- typeof(1)
- IPv6(1)
- git checkout(1)
- flex grow(1)
- 상대 경로(1)
- 절대 경로(1)
- hoisting(1)
- Math.sqrt()(1)
- inheritance(1)
- 조건문(1)
- break(1)
- classList(1)
- ec2(1)
- git log(1)
- UDP(1)
- cli(1)
- 반복문(1)
- Time Complexity(1)
- Route(1)
- Jacob Nielsen's 10 Usability Heuristics(1)
- REST API(1)
- querySelectorAll()(1)
- json(1)
- continue(1)
- http status code(1)
- big o notation(1)
- concat(1)
- global scope(1)
- const(1)
- let(1)
- http-proxy-middleware(1)
- .toString(1)
- git remote -v(1)
- nslookup(1)
- box-sizing(1)
- browser engine(1)
- Last-Modified(1)
- .split()(1)
- express.json(1)
- Off-page SEO(1)
- require(1)
- Set-Cookie(1)
- filter(1)
- border-radius(1)
- content-box(1)
- serve(1)
- app.put()(1)
- props.children(1)
- 일급 객체(1)
- 지속 연결(1)
- foreach(1)
- for...in(1)
- Math.floor(1)
- combinator(1)
- delete(1)
- flex-shrink(1)
- String(1)
- app.use(1)
- response header(1)
- event.target.value(1)
- .substring()(1)
- Array.isArray(1)
- git merge(1)
- console.dir(1)
- callback Hell(1)
- external stylesheet(1)
- user agent style(1)
- 증감연산자(1)
- loose coupling(1)
- media query(1)
- useRef(1)
- synchronous(1)
- inline block(1)
- this(1)
- setTimeout(1)
- DOM(1)
- HTTP Requests(1)
- event bubbling(1)
- axios(1)
- nvm(1)
- grid-system(1)
- variable shadowing(1)
- SSL/TLS(1)
- Web APIs(1)
- function scope(1)
- memory heap(1)
- 함수 표현식(1)
- html(1)
- git branch(1)
- object.entries(1)
- .prototype(1)
- shift(1)
- BrowserRouter(1)
- overflow(1)
- CSR(1)
- SSR(1)
- splice(1)
- innerText(1)
- display: flex;(1)
- Pop(1)
- inline-style(1)
- block(1)
- painting(1)
- remove(1)
- HTTP Responses(1)
- .includes(1)
- figJam(1)
- Metadata(1)
- 화살표 함수(1)
- inline(1)
- git reset(1)
- onchange(1)
- CDN(1)
- reverse(1)
- strict mode(1)
- .concat()(1)
- http method(1)
- removeChild(1)
- shallow copy(1)
- array(1)
- sematic tags(1)
- extends(1)
- super(1)
- Then(1)
- Fetch(1)
- CSS 방법론(1)
- React Proxy(1)
- spa(1)
- display(1)
- rem(1)
- rendering engine(1)
- git checkout -b(1)
- http 1.0(1)
- github(1)
- 이중 반복문(1)
- Image Sprite(1)
- Fulfilled(1)
- onClick(1)
- fs.readFile(1)
- JSX(1)
- 함수 선언식(1)
- app.listen()(1)
- Peter Morville Honeycomb(1)
- cookie(1)
- slice(1)
- css 전처리기(1)
- setAttribute(1)
- Array.from(1)
- useNavigate(1)
- object.keys(1)
- Database(1)
- border-box(1)
- Math.random(1)
- app.get()(1)
- .length(1)
- text-decoration(1)
- PT(1)
- Props(1)
- new promise(1)
- General header(1)
- CreateElement(1)
- else(1)
- if(1)
- overflow-y(1)
- object.values(1)
- CA(1)
- DOM tree(1)
- Pending(1)
- border-style(1)
- Representation header(1)
- em(1)
- 웹 표준(1)
- base case(1)
- Rejected(1)
- User Interface(1)
- Suspense(1)
JavaScript의 this
: 실행 컨택스트 내에서 현재 실행 중인 함수나 메서드를 호출한 객체를 참조하는 특별한 키워드this를 사용하여 해당 객체의 속성에 접근하거나 수정할 수 있다.this의 값은 함수를 호출하는 방법에 따라 달라진다.JavaScript의 모든 함수는 this를 가지고 있다
git merge & rebase
Git은 여러 개발자가 원활하게 협업할 수 있도록 돕는 강력한 분산 버전 제어 시스템이다. Git은 코드베이스에 대한 변경 사항을 추적함으로써 개발자가 다양한 버전의 코드를 효과적으로 관리하고 조정할 수 있도록 하고, 개발 프로세스가 체계적으로 유지되도록 한다.또한 작
슬라이딩 윈도우 테크닉
: 주어진 배열에서 고정 크기의 윈도우(창문)를 이동하면서, 윈도우 내의 정보를 처리하는 알고리즘 기법배열이나 리스트와 같이 순차적인 자료구조에서 연속적인 구간을 처리해야할 때 유용하다.구간의 합, 최댓값 또는 최솟값, 유사도를 구하는 데 활용될 수 있다.주어진 배열의
투 포인터 테크닉
1차원 배열 문제나 문자열 문제에서 많이 사용한다.한 배열에서 부분 배열을 다루거나, 한 배열에서 각각 다른 위치에 있는 두 개의 원소의 값을 가지고 계산할 때 사용한다.1차원 배열에서 각자 다른 원소를 가리키는 2개의 포인터를 사용하여 목표값을 구한다.완전 탐색 O(
Virtual DOM
: 메모리에 저장된 UI의 이상적인 또는 "가상"적인 표현으로, React DOM과 같은 라이브러리에 의해 "실제" DOM과 동기화되는 프로그래밍 개념Virtual DOM과 Internals - React실제 DOM은 UI의 현재 상태를 나타내는 트리 구조이다.UI가
[DP] 단어 퍼즐
문제 단어 퍼즐은 주어진 단어 조각들을 이용해서 주어진 문장을 완성하는 퍼즐입니다. 이때, 주어진 각 단어 조각들은 각각 무한개씩 있다고 가정합니다. 예를 들어 주어진 단어 조각이 [ba, na, n, a]인 경우 ba, na, n, a 단어 조각이 각각 무한개씩 있습
동적 계획법 (Dynamic Programming)
다이나믹 프로그래밍 : 메모리를 적절히 사용하여 수행 시간 효율성을 비약적으로 향상시키는 방법 이미 계산된 결과(작은 문제)는 별도의 메모리 영역에 저장하여 다시 계산하지 않도록 한다. 즉, 한 번 해결한 문제는 다시 해결하지 않는다. (효율성 ↑) 완전 탐색을 이용했
[그리디] 구명보트
문제 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100kg이라면
[트라이] 자동완성
포털 다음에서 검색어 자동완성 기능을 넣고 싶은 라이언은 한 번 입력된 문자열을 학습해서 다음 입력 때 활용하고 싶어 졌다. 예를 들어, go 가 한 번 입력되었다면, 다음 사용자는 g 만 입력해도 go를 추천해주므로 o를 입력할 필요가 없어진다! 단, 학습에 사용된
[리팩토링] 재사용 가능한 버튼 컴포넌트 만들기
모동숲 마켓에서 사용하는 여러번 사용하는 버튼 디자인은 크게 3가지가 있다.1\. 민트색 버튼 2. 흰색 버튼 3. 회색 버튼TailwindCSS를 사용해서 만들면서 그때 그때 className을 복사해서 만들었는데, 디자인이 겹치기 때문에 버튼 컴포넌트를 만들어서 재
[리팩토링] useToggle 훅 만들어 재사용하기
MyPage 컴포넌트에는 boolean 값을 가지는 상태가 2개가 있다. 프로필을 수정 중인지 아닌지를 나타내는 상태 isEditing 모달이 열려있는지 닫혀있는지를 나타내는 상태 isModalOpen 두 상태 모두 같은 기능을 하는 토글 상태이므로 재사용 가능한 u
알고리즘 스터디(Recursive) 회고
부트캠프를 수료하고 2월 20일부터 1일 1알고리즘을 푸는 스터디를 해온지 벌써 3달 차가 되어간다.쉬운 문제부터 시작해서 조금씩 실력을 키워나가자는 생각으로 프로그래머스 Lv.1 문제의 정답률이 높은 문제부터 낮은 문제까지 순서대로 풀어갔고, 4월 말쯤에 드디어 레벨
Next.js - head 메타 데이터 추가하기 & Vercel 배포
Next.js는 페이지마다 head 요소를 추가하고 메타 데이터를 추가할 수 있다.Next.js에서 제공하는 특수한 컴포넌트인 <Head> 컴포넌트를 import한다.원하는 페이지에 <Head> 컴포넌트를 추가하고, 그 안에 필요한 태그들을 작성하면 된다.&
Next.js - MongoDB에서 데이터 가져오기
이제 홈 화면에서 더미 데이터가 아닌 MongoDB 데이터베이스에 있는 데이터들을 가져와서 보여주도록 하자. 이 작업 또한 새로운 API 라우트를 생성하고 handler 함수를 작성하여, API를 이용해 데이터를 fetch해오도록 할 수 있지만.. 이 방식은 불필요한
Next.js - API 엔드포인트 생성 & MongoDB 연결
Next.js에서는 pages/api 폴더를 사용하여 API 엔드포인트를 생성할 수 있다.pages/api 폴더 안에 있는 JavaScript 파일들은 API 라우트로 간주되며, 해당 파일들의 이름 = 엔드포인트 경로가 된다.예를 들어, pages/api 폴더 안에 u
[프로그래머스] 피보나치 수
피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다.예를들어F(2) = F(0) + F(1) = 0 + 1 = 1F(3) = F(1) + F(2) = 1 + 1 = 2F(4) =
Next.js 정적 사이트 생성(SSG) & 서버 사이드 렌더링(SSR)
Next.js는 서버 측 렌더링(SSR)을 지원하여 기본적으로 모든 페이지를 사전에 렌더링(pre-render)한다. 서버 사이드 렌더링은 페이지의 HTML 마크업을 미리 생성하여 클라이언트에 전달하는 방식이다.이로 인해 Next.js 애플리케이션은 브라우저로 전송되는
Firebase 보안 규칙
Firestore의 보안 규칙은 커스텀 언어를 활용하는데, CEL(Common Expression Language) 기반 언어를 사용하며, match와 allow 문을 사용하여 조건부로 액세스 권한을 부여할 수 있다.보안 규칙 언어 - Firebasee.g.servic
Next.js 기초 2
React는 페이지를 컴포넌트로 분해하여 관리할 수 있게 한다. 그리고 이러한 컴포넌트들은 재사용할 수 있기 때문에 매우 효율적이다. Next.js에 헤더나 네비게이션 바, 푸터와 같이 모든 페이지에서 재사용되는 컴포넌트를 레이아웃으로 적용하고 싶다면 어떻게 해야할까?
Next.js 프로젝트 세팅 & 기초
1. 프로젝트 생성 프로젝트를 생성하면 pages, public, styles 폴더를 확인할 수 있다. Next.js 앱에 index.html이 없는 이유 Next.js 앱은 일반 React 앱과 똑같이 public 폴더를 가지고 있으며, 이 폴더는 정적인 파일을