- 전체보기(118)
- 프로그래머스(17)
- 코딩테스트(17)
- canvas(6)
- three.js(6)
- nextjs(6)
- html5(6)
- 인증(4)
- Camera(3)
- three(3)
- ThreeJS(3)
- 리액트(3)
- Renderer(2)
- 브라우저 렌더링(2)
- 부트캠프(2)
- File-based Routing(2)
- Scene(2)
- CSR(2)
- CSSOM(2)
- SSR(2)
- DOM(2)
- async(2)
- React(2)
- reflow(2)
- typescript(1)
- api 타입(1)
- Dynamic Pages(1)
- animation(1)
- mbti테스트(1)
- 정규표현식(1)
- React.memo(1)
- 서버 사이드 렌더링(1)
- airbnb(1)
- modernizr(1)
- 위장(1)
- 행렬 테두리 회전하기(1)
- object(1)
- 배열(1)
- useRef 타입(1)
- spotLight(1)
- proto(1)
- promise(1)
- video(1)
- useFetch(1)
- 커스텀 훅(1)
- 데이터 모킹(1)
- 리페인트(1)
- environment(1)
- link(1)
- 함수형업데이트(1)
- shadow(1)
- https 서버(1)
- refresh-token(1)
- 쿠키옵션(1)
- http(1)
- bind(1)
- academind(1)
- 문자열 압축(1)
- 호이스팅(1)
- transform(1)
- 후보키(1)
- 프론트엔드 실무 가이드(1)
- LifeCycleMethod(1)
- image(1)
- 객체 키 타입(1)
- 세션(1)
- 쿠키(1)
- mbti 테스트 만들기(1)
- FROM(1)
- 캔버스(1)
- 코딩 강의(1)
- perspective camera(1)
- oAuth(1)
- 조은(1)
- 메뉴 리뉴얼(1)
- 브라우저(1)
- useInput(1)
- 프로퍼티 섀이딩(1)
- config-airbnb(1)
- https 서버 구현(1)
- 알고리즘(1)
- create-next-app(1)
- HemisphereLight(1)
- NextJS 라우팅(1)
- 튜플(1)
- csrf(1)
- 뉴스 클러스터링(1)
- Prototype(1)
- await(1)
- storybook(1)
- nest.js(1)
- Nested Page(1)
- draw(1)
- 애니스크립트(1)
- oauth2(1)
- 솔트(1)
- 후기(1)
- defaultProps(1)
- 비동기(1)
- 괄호변환(1)
- Repain(1)
- Dynamic Route Data(1)
- 렉시컬 스코프(1)
- JavaScript(1)
- 사이드프로젝트(1)
- Received `true` for a non-boolean attribute X(1)
- 타입스크립트(1)
- 포트폴리오(1)
- Github 소셜로그인(1)
- ESLint(1)
- Prettier(1)
- 플래그(1)
- layout(1)
- 이벤트 객체 타입(1)
- 프린터(1)
- access token(1)
- 정적 사이트 생성(1)
- 클라이언트 사이드 렌더링(1)
- 커스텀훅 예시(1)
- Github 로그인(1)
- orthographic camera(1)
- https(1)
- 짝지어 제거하기(1)
- const(1)
- let(1)
- var(1)
- Mock Service Worker(1)
- 클로저(1)
- fragment(1)
- 이벤트 핸들러 타입(1)
- 소셜 로그인(1)
- history 타입(1)
- context(1)
- 패스트캠퍼스(1)
- Fullstack Capabilities(1)
- useState 타입(1)
- useContext(1)
- useMemo(1)
- useRef(1)
- this(1)
- setInterval(1)
- 프로젝트회고(1)
- 코드스테이츠(1)
- 솔로프로젝트(1)
- 와플(1)
- 강의콘텐츠(1)
- lightHelper(1)
- gatsbyjs(1)
- 화살표함수(1)
- 괄호 변환(1)
- 리플로우(1)
- 파싱(1)
- material(1)
- object.entries(1)
- mbtious(1)
- useCallback(1)
- 콜백 헬(1)
- MSW(1)
- repaint()(1)
- session.save()(1)
- getStaticPaths(1)
- 구명보트(1)
- preventDefault(1)
- ambientLight(1)
- 코딩 독학(1)
- 걸그룹 mbti(1)
- custom hook(1)
- animation loop(1)
- 리액트 라이브러리(1)
- Shadows(1)
- useAlert(1)
- 프로젝트(1)
- 캔버스 사이즈 설정(1)
- geometry(1)
- Defer(1)
- getStaticProps(1)
- next.js(1)
- NestJS(1)
- ssg(1)
- 오픈채팅방(1)
- Mesh(1)
- 기능개발(1)
- 소수 찾기(1)
- 토큰(1)
- life cycle(1)
- 강의추천(1)
- regexp(1)
- 영어 끝말잇기(1)
- 커스텀훅(1)
- 함수 타입(1)
- ES6(1)
- Light(1)
- 거리두기 확인하기(1)
- 수식 최대화(1)
- WebGL(1)
- 패턴(1)
- 오버라이딩(1)
- The Red(1)
- NextJS 장점(1)
- 해싱(1)
- 프리코스(1)
- 생명주기(1)
- be mbtious(1)
- contextAPI(1)
- 고해상도(1)
- apply(1)
- call(1)
Merge, Squash and Merge, & Rebase and Merge
우선 깃헙에 머지 실습 레포지토리를 생성해준다.create-next-app으로 간단하게 실습을 시작한다.로컬과 리모트 레포지토리가 연결되었다면, cli 명령어를 입력해 nextjs 프로젝트를 시작해주자!우선 gitignore파일을 만들어주자..env .next /nod
Next.js Crash Course for Beginners 2021 강의노트(4): General Layout & Programmatic Navigation
지금까지는 페이지 세팅에 관한 기본적인 것들을 배웠다!그러나 NextJS가 제공하는 훨씬 많은 기능이 있다, 예를 들면 데이터페칭같은 것들!새로운 섹션으로 넘어가기 위해서 우선은 뉴스 프로젝트는 잠시 접어두고 새로운 프로젝트로 학습을 시작해보자.1) starting p
Next.js Crash Course for Beginners 2021 강의노트(3): About NextJS Pages
Adding Nested Pages / Paths file-based routing system을 좀 더 면밀히 깊게 살펴보자! 프로젝트의 파일과 폴더들을 구성하기 위해 우리가 알고 있어야 할 중요한 대안이 있다. 일일이 index.js와 news.js로 따로 이름을
Next.js Crash Course for Beginners 2021 강의노트(2): Starting NextJS
위 명령어를 통해서 간단하게 NextJS 프로젝트를 시작해줄 수 있다. 프로젝트 이름은 임의로 설정해주도록 한다.위와 같은 프로젝트 폴더를 확인할 수 있다.세개의 중요한 폴더가 생성된다.1) pages: 얘는 특히 중요하다.2) public: 퍼블릭 리소스를 보관한다.
Next.js Crash Course for Beginners 2021 강의노트(1): What is NextJS? & Key Features
NextJS는 ReactJS를 위한 놀라운 프레임워크이다! 리액트는 이미 라이브러리인데, 왜 라이브러리를 위한 프레임워크가 필요한가에 대해 의아하게 생각할 수도 있을 것이다. 우리는 "NextJS가 어떻게 페이지를 pre-render하는지", "어떻게 검색엔진최적화를
The Net Ninja <Next.js Tutorial> 강의 노트
NextJS는 Server Side Rendering과 Static Site Generation을 지원하는 프레임워크이다. 다시 말해 Pre-render되는 리액트 웹사이트를 만들기 위한 프레임워크라고 할 수 있다. Client Side Rendering 방식을 따르
아직도 한땀한땀 MockData 만든다고!? 이제 「Mock Service Worker」 쓰자 🤡
모킹이란 모의 데이터를 만들어서 활용하는 방식통상적으로 data fetch를 해야하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 함서버가 없는 경우, api 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가가 필요하다. 공식문서는 이곳에!
눈물의 preventDefault💧💦☔️
이제 평생 preventDefault를 잊기는 힘들지 않을까...!깊은 사연은 지금 여기에 기술할 수 있는 상황이 아니라... 구구절절 사연을 늘어놓을 수는 없지만...대충 너무 중요했던 채용 프로세스 과정에서, preventDefault에 대한 질문을 받았는데...
제발 그만 만나고 싶은 에러들(2): Received `true` for a non-boolean attribute X
도대체 무슨 에러인지 감도 안 잡혀서 아주 화가 나버리는 에러...^^;;stackoverflow와 몇 가지 블로그 포스팅을 참고 해본 결과,fragment 태그를 사용해야 한다던지, 하는 조언이 있었으나 내 경우에는 적용되지 않았다.일단 에러 내역에서 시키는 대로 l
[개발 초기 세팅하기] ESLint (eslint-config-airbnb-typescript) + Prettier + React + TypeScript
마법의 cli 명령어 크리에이트 리액트 앱! 뒤에 살포시 타입스크립트 템플릿을 추가해준다.이 때 parser와 plug-in을 함께 설치해준다.명령어는 다음과 같다.내용은 아래와 같이 작성해준다.시험 삼아, 사용되지 않는 변수를 선언하고 값을 할당한 후에 npm run
자바스크립트 셀프 QnA(8): HOOOAAAArray!
(<자바스크립트 셀프 QnA> 시리즈에 작성된 포스팅들은 각 주제에 해당하는 <모던 자바스크립트 딥다이브> 챕터를 읽으며 요약한 내용입니다. 더 자세한 내용은 <모던 자바스크립트 딥다이브>를 참고해주세요.)모던 자바스크립트 딥다이브자바스크립트에 배열이라
StoryBook 연습하기!
시작하기 🔧 리액트 타입스크립트 앱 설치! 위 cli 명령어를 입력해 우선 스토리북을 실습할 디렉토리를 생성해주었다. npm run start를 통해 로컬 호스트에서 앱이 잘 실행되는 것을 확인! ⚙️ 스토리북 설치 및 초기화! 스토리북 공식문서에서 안내
🧟♂️ 정규표현식, 이제는 더 이상 물러날 곳이 없다!
부트캠프 코스란 자고로 쉴새없는 새 스택과 새 기술 학습의 연속! 우선순위를 설정하고 선택과 집중을 하는 것이 무엇보다 중요하다. 그런 부트캠프 학습과정 중 가차없이 탈락된 학습 파트가 있었으니... 정규 표현식! 인간에게 이다지도 친화적인 자바스크립트를 공부하는 내게
✍🏼 리액트 생명주기 메서드 한 줄 정리!
마운트 constructor: 컴포넌트 생성자 메서드 getDerivedStateFromProps: props로 받아온 것을 state에 넣어주고 싶을 때 사용 render: 렌더 메서드 componentDidMount: 첫 번째 렌더링이 마치고 나면 호출되는 메서드
자바스크립트 셀프 QnA(6): JS는 닫힌 문, 클로저
(<자바스크립트 셀프 QnA> 시리즈에 작성된 포스팅들은 각 주제에 해당하는 <모던 자바스크립트 딥다이브> 챕터를 읽으며 요약한 내용입니다. 더 자세한 내용은 <모던 자바스크립트 딥다이브>를 참고해주세요.)모던 자바스크립트 딥다이브자바스크립트 엔진은 함
자바스크립트 셀프 QnA(5): Not My Type 🥶 프로토타입 🥵
(<자바스크립트 셀프 QnA> 시리즈에 작성된 포스팅들은 각 주제에 해당하는 <모던 자바스크립트 딥다이브> 챕터를 읽으며 요약한 내용입니다. 더 자세한 내용은 <모던 자바스크립트 딥다이브>를 참고해주세요.)모던 자바스크립트 딥다이브자바스크립트는 명령형,
🤠 NestJS 개념 훑기 🤠
기본적으로 NestJS는 NodeJS 위에서 움직이는 프레임워크이다. Express를 이용하므로, Express 위에서 움직이는 것이라고도 할 수 있겠다. NestJS는 다른 언어들의 백엔드 프레임워크들의 특징을 그대로 NodeJS로 가져온 것이라 할 수 있다. Nes
자바스크립트 셀프 QnA(4): 선언 키워드 전쟁
(<자바스크립트 셀프 QnA> 시리즈에 작성된 포스팅들은 각 주제에 해당하는 <모던 자바스크립트 딥다이브> 챕터를 읽으며 요약한 내용입니다. 더 자세한 내용은 <모던 자바스크립트 딥다이브>를 참고해주세요.)모던 자바스크립트 딥다이브중복 선언이 가능하다.
자바스크립트 셀프 QnA(3): What is THIS?
(<자바스크립트 셀프 QnA> 시리즈에 작성된 포스팅들은 각 주제에 해당하는 <모던 자바스크립트 딥다이브> 챕터를 읽으며 요약한 내용입니다. 더 자세한 내용은 <모던 자바스크립트 딥다이브>를 참고해주세요.)모던 자바스크립트 딥다이브객체는 상태를 나타내는
자바스크립트 셀프 QnA(2): 브라우저 렌더링
NodeJS의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발언어가 되었다. 그러나 여전히 자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드! 이때