coordinates브라우저에는 x축과 y축이 있다.x는 수평축 y는 수직축이다.좌표는 브라우저창의 왼쪽 맨 위에서부터 시작(0,0) 한다.x는 오른쪽으로 갈수록 숫자가 커지고y는 아래로 갈수록 숫자가 커진다.Element 오브젝트 안에 들어 있는 api 즉 함수이다.

브라우저에서 웹페이지를 열개 되면window라는 전체적인 오브젝트가 존재하고window는 현재 열고 있는 페이지 뿐만 아니라 브라우저 전체 창을 의미한다.window 안에 페이지가 표기되는 부분이 바로 Document Object(DOM)이다.Document는 우리가

APIs는 Application Programming Interfaces의 약자이다.우리는 자판기가 어떤 원리로 작동하는지 몰라도 동전 투입구에 금액을 넣고 음료수를 고르는 버튼을 누르면 원하는 음료수를 살 수 있다.이처럼 윈도우스에서 동작하는 애플리케이션을 만들고싶다

다음 코드를 실행했을 때 콘솔창에 무엇이 출력될까?console.log(name) 부분에서는 'kim'이 출력되고console.log(id) 부분에서는 0이 출력된다.var name의 경우 함수 안에서 재선언 + 재할당을 하고 출력했기 때문에 'kim'이 출력된다.va

이번에는 non featured Posts를 carousel로 보여주도록 만들었다. react로 만들어본 경험은 있는데 NextJS를 사용하여 만드는 것은 처음이라 기록해보았다.캐러셀로는 featured posts를 제외한 non featured posts를 보여줄 것

포스트 내용을 간략하게 보여주는 포스트 카드를 만들고 카드들을 정렬해서 보여주도록 구현src/page.tsxFeaturedPosts 컴포넌트를 생성후 Home page에 Hero 컴포넌트 밑에 위치

NextJS를 활용한 개발자를 위한 blog 프로젝트를 시작했다.가장 먼저 페이지 레이아웃을 만들어보았다.

Next로 프로젝트를 진행할 때 기초 세팅하는 방법에 대해 정리해보았다.

하이브리드 렌더링과 하이드레이션에 대해 알아보자

Server Side Rendering에 대해 알아보자

Incremental Static Regeneration를 알아보자

Static Site Generation에 대해 알아보자

CSR의 특징과 장점에대해 알아보자

프론트엔드 개발자로서 디자인 능력을 갖추면 더욱 경쟁력 있는 개발자가 될 수 있을 것 같아서 피그마를 배우기 시작했다.작업의 효율을 높이기 위해 기본적인 단축키들을 정리해봤다.

NextJs를 사용해 간단한 이벤트 관리 프로젝트를 만들면서 라우팅과 필터링을 연습했습니다.

Next.js 애플리케이션 구조를 분석해보았다.

Next.js가 무엇인지 알아보고 핵심기능은 무엇이 있는지 알아보았다.

그동안 진행한 프로젝트들을 정리한 포트폴리오 사이트 입니다.원래 포트폴리오를 노션에 정리했었는데 저의 개성을 잘 나타내지 못하는 것 같아서 직접 포트폴리오 사이트를 기획 및 제작했습니다.모든 데이터들은 JSON형식으로 정리하여 적용했습니다. 타입스크립트를 사용하여 제작

개발 기간: 2022/10/17 ~ 2022/10/20개발 인원: 개인 프로젝트Front end시연 영상 보러가기Front EndHTML styled-component\`\`TypeScrip React Vite React-router react-calendar reac

변수를 변경하는 행위를 mutation이라고 한다. 이는 매우 중요한 리덕스의 기본 원칙 중 하나이다.그럼 어떻게 변경해??mutate하는 게 아니라 새로운 objects를 리턴해야 한다!상태를 수정하는 것이 아니라 새로운 것을 만들어야함!