HOC(Higher-Order Component, 고차컴포넌트)로 게시판 구조 개선하기
안녕하세요 오랜만입니다! 오늘은 리액트 프로젝트에 HOC(Higher-Order Component) 패턴을 도입하게 된 과정을 공유해보려고 합니다!
Category
FRONTEND
Next.js params 타입 에러 해결기
🔥 문제 상황
블로그 글 작성 커밋에도 컨벤션을 적용해 보자
이전까지 블로그에 글을 올릴 때 update, upload, 혹은 유형을 생략하는 식으로 커밋 메시지를 작성했었다. 사실 블로그 글 작성은 나 혼자 하는 일이기 때문에 크게 필요성을 느끼진 못했었다. 언젠간 유형을 제대로 지켜서 작성해야지 했지만, 미루고 미루다 결국 제대로 지키지...
Vercel 배포 후 404 Not Found가 떴다!
Vite + React + TypeScript로 구현한 개인프로젝트를 Vercel을 통해서 배포했다.
node_modules 재설치 후 에러가 발생했다!
현재 10월 중순부터 첫 개인프로젝트로 커뮤니티 사이트를 구현 중이다. React Quill 에디터를 사용해서 게시글을 포스팅이 가능하게 만들었고, quill-image-resize-module-react를 통해 이미지 리사이즈를 구현했는데, 갑자기 리사이즈가 제대로 작동하지 않았...
프론트엔드에서의 배열
프론트엔드 개발자가 배열을 잘 다뤄야 하는 이유
Front-end vs. Back-end
Front-end vs. Back-end
CSS
[CSS] 말줄임(…) 적용하기
생각보다 많이 사용하게 되는 말줄임(…). 잊어버리지 않기 위해 문장이 1줄일 경우와, 2줄 이상일 경우로 나누어 정리해보고자 한다!
[CSS] Flex와 Grid
Flex Flex란? 1차원의 레이아웃 시스템을 만들 수 있는 속성
[CSS] 미디어쿼리를 최소화하여 반응형 웹 작업하기
미디어 쿼리란? 미디어쿼리를 이용하여 사용자의 화면 크기, 해상도, 방향 등을 감지하여 스타일시트를 동적으로 변경할 수 있는 CSS 기술 따라서, 이를 통해 다양한 기기에 대응하는 반응형 웹을 만들 수 있음 미디어 유형과 미디어 특성으로 구성됨 미디어쿼리 기본 구문...
[CSS] 애니메이션 최적화
브라우저 렌더링 과정 파싱(Parsing): DOM Tree, CSSOM Tree 구성 스타일(Style): DOM Tree, CSSOM Tree 를 기반으로 Render Tree를 생성 레이아웃(Layout): Render Tree의 각 노드들의 위치, 크기, 너비 ...
[CSS] 웹 폰트와 로컬 폰트
웹 폰트 & 로컬 폰트 웹 폰트: 브라우저에서 웹 페이지에 사용되는 글꼴을 다운로드하여 웹 페이지에 적용하는 폰트 로컬 폰트: 사용자의 컴퓨터에 이미 설치된 폰트
[CSS] float 속성과 clear 속성
[CSS] float 과 clear 속성
Zerobase
[Zerobase] 1개월차 회고
지난 한 달간 느낀 점 취준멤버십 ‘제법’ 활동에서 듣게 된 제로베이스 프론트엔드스쿨을 통해 취업에 성공하신 프론트엔드 개발자분의 세미나를 통해, 제로베이스의 체계적인 커리큘럼을 간접경험했고 결국 참여하게 되었다. 역시 온라인으로 참여하다보니, 내가 원하는 시간에 원하는 만큼...
[Zerobase/FE28기] 나의 다짐
제로베이스 프론트엔드 스쿨에 참여하는 나의 다짐
[Zerobase]JavaScript 프로젝트 과제 회고
JavaScript를 공부하면서 느낀점 자바스크립트가 왜 멀티 패러다임 언어인지 제대로 깨닫는 시간이었다. 어떻게 코드를 작성하는 것이 효율적일지에 대해 끊임없이 고민하는 자세를 가져야겠다고 다짐했다.
[Zerobase] 3개월차 회고
3개월차 좋았던 점 2개월 차 한 달 동안 이웅모 강사님-자바스크립트 스터디에 참여했을 때, 자바스크립트의 문법에 대해 자세히 이해하는 시간을 가졌었다. 이때 배웠던 것들을 잊어버리지 않을까 걱정했었는데, 매주 진행하는 코딩테스트에서 적용할 수 있었던 점이 가장 좋았다. ...
[Zerobase] HTML/CSS 회고
HTML/CSS를 공부하면서 느낀 점 HTML, CSS에서 어떤 개념이 약한지를 알 수 있는 한 달이었다. 미션 과제를 진행하면서 웹사이트를 제작하기 위해서는 기본기가 탄탄해야 함을 느꼈고, 모든 사용자가 쉽게 이용할 수 있도록 “웹 접근성”을 고려하여 웹사이트를 제작하는 것이 프...
내가 가고 싶은 회사
내가 가고 싶은 회사
HTML
[HTML] noreferrer, noopener, nofollow
HTML의 a 태그는 링크를 만드는 데 주로 사용되며, rel 속성으로 noreferrer, noopener, nofollow를 사용함
[HTML] HTML5 시맨틱 태그 & 웹 표준
HTML5 시맨틱 태그 시맨틱 태그란? HTML 문서의 구조를 명시적이고 직관적으로 설계하기 위해 HTML5에서 추가된 태그 콘텐츠의 의미와 목적을 설명하는 태그
[HTML] svg 태그
svg svg(Scalable Vector Graphics): 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어
Programmers
맨 위로 이동 ↑Github
Git/Github 어휘 정리
Git/Github 어휘 정리
JavaScript
[JavaScript] 클래스(Class)와 모듈
자바스크립트의 클래스와 모듈의 특징을 간단하게 살펴보고, 클래스를 활용한 모듈화 방법도 간단하게 알아보도록 하자.