profile
[...Way to FrontEnd Web Developer]
태그 목록
전체보기 (99)CSS(14)JavaScript(11)자바스크립트(6)React(5)Props(5)git(3)Fetch(3)html(3)http(3)State(3)불변성(2)styled components(2)동기(2)리액트(2)로그인(2)알고리즘(2)비동기(2)Date객체(2)TIL(2)path parameter(2)객체(2)lexical(1)비어있는 props(1)배열(1)asynchronous(1)페이지 이동(1)component(1)렉시컬(1)콜백(1)refactoring(1)npm run build(1)even digits(1)promise(1)커스텀 훅(1)캐러셀(1)ScrollIntoView(1)ReactComponent(1)terminal(1)text align(1)React 개발환경(1)svg 파일(1)dropdown(1)스코프 체인(1)객체 속성명(1)Restful(1)스코프(1)rebase(1)동적 라우팅(1)literal(1)linux(1)배포(1)deployment(1)transform(1)REST(1)가상요소(1)세션(1)git remote(1)모듈(1)통신(1)컴포넌트(1)윈도우(1)물음표 연산자(1)consecutive(1)url(1)유튜브(1)repository url(1)type="button"(1)button type(1)permission denied(1)callback(1)전역서체(1)Module(1)프론트엔드(1)input(1)scalex(1)toDateString(1)사용법(1)Recoil(1)await(1)css 변경(1)useState(1)계산된 속성명(1)자동 슬라이드(1)async(1)commit 돌아가기(1)form태그(1)return(1)사용자지정(1)class(1)remote url(1)Flex(1)pagination(1)array 요소 추가(1)github pages(1)이미지 공백(1)Uncaught TypeError(1)ESLint(1)Prettier(1)optional chaining(1)무한 슬라이드(1)layout(1)함수 바인딩(1)생성자함수(1)access token(1)무한렌더링(1)keyframes(1)set 객체(1)deploy(1)쿼리스트링(1)제거(1)REST API(1)font family(1)사용자계정(1)회원가입(1)이전 커밋(1)Computed property Name(1)특정요소(1)z-index(1)자동 스크롤(1)window.open(1)before(1)build(1)script tag(1)input 태그(1)Globalstyle(1)new(1)useMemo(1)useRef(1)synchronous(1)inline block(1)리팩토링(1)함수(1)grid 기초(1)비어있는 객체(1)checkbox(1)클릭 이벤트(1)transform-origin(1)semantic(1)form 태그(1)useCallback(1)날짜(1)map method(1)props 객체(1)window.location.(1)추가(1)Date object(1)개발자(1)binding(1)inline(1)transition(1)컴포넌트데이터전송(1)custom hook(1)클래스(1)after(1)페이지네이션(1)git workflow(1)animation-fill-mode(1)pages(1)array(1)form(1)youtube(1)실행 컨텍스트(1)user(1)Query String(1)조건부렌더링(1)aws(1)바인딩(1)css 변화(1)삭제(1)new Set(1)동영상 삽입(1)svg(1)react component return(1)Database(1)Map(1)iframe(1)Token(1)유효성(1)svg 이미지(1)연속 수(1)pseudo element(1)특정 요소 자동 스크롤(1)수정(1)grid(1)algorithm(1)생성자(1)Stateless(1)netlify(1)특정 요소(1)property name(1)img 중앙정렬(1)date 객체(1)이전 commit(1)query parameter(1)웹폰트(1)animation(1)Event(1)
post-thumbnail

배포하기 (GibHub Pages, Netlify)

이렇게 하면 위에 초록색 영역에 보이는 것 처럼 나의 프로젝트의 URL 주소가 생성된다. 이것을 일단 복사해놓자homepage 항목에 위에서 복사한 GitHub의 내 웹페이지 주소를 값으로 넣는다위의 둘 중 하나 선택하여 gh-pages 설치위 2줄의 코드를 packa

2022년 6월 13일
·
0개의 댓글
post-thumbnail

[React] | 무한-자동 슬라이드 캐러셀

버튼을 클릭해서 넘기는 방식이나 자동 슬라이드 모두 유튜브에 설명 영상이 많음.나는 상단 방향으로 이미지가 넘어가며, 자동으로 무한히 슬라이드 되는 컴포넌트를 구현.기본적인 무한 슬라이드 캐러셀 방식은내가 화면에 표시할 요소를 배열에 담고요소묶음 앞, 뒤로 동일한 요소

2022년 5월 31일
·
0개의 댓글
post-thumbnail

유튜브 영상으로 꽉 찬 div 박스 만들기

가져온 유튜브 영상을 컨테이너에 담았을 때, 유튜브 영상이 컨테이너에 꽉 차도록 만들기2가지 방법컨테이너의 width, height를 둘 다 지정하는 방법컨테이너의 height=0으로 놓고, padding을 이용하는 방법유튜브에서 영상의 iframe 코드 전체를 얻을

2022년 5월 20일
·
0개의 댓글
post-thumbnail

[CSS][Selector] | negation 가상클래스 - :not()

인수로 받은 요소와 일치하지 않은 요소들을 가리키는 선택자 표기법괄호에 들어간 요소를 제외한 다른 요소들을 역으로 가리키는 표기법:not(selector) {…스타일 속성…}

2022년 5월 20일
·
0개의 댓글
post-thumbnail

[styled-components] | keyframe - animation 효과 구현

styled-components에서 제공하는 keyframes 키워드 사용원하는 애니메이션 효과를 변수로 정의하여 모듈화하고, 이를 animations 속성에 값으로 삽입하여 효과 구현transition 속성과 다르게 이벤트 없이 상시 효과가 발현될 수 있도록 구현가능

2022년 5월 18일
·
0개의 댓글
post-thumbnail

[styled-components] | CSS에 변화 주는 방법 (CSS transform)

상황에 따라 CSS를 변경하는 방법에는 2가지가 존재한다.컴포넌트 props를 통해 특성 값을 주는 방식상황 별 스타일 컴포넌트를 만들고, 조건부 렌더링을 구현하는 방식첫 번째, 상황에 따라 스타일 컴포넌트에 props를 통해 CSS 특성을 변경하는 방법에 대해 알아보

2022년 5월 17일
·
0개의 댓글
post-thumbnail

svg 파일을 React 컴포넌트로 만드는 방법

CRA 공홈(https://create-react-app.dev/docs/adding-images-fonts-and-files/우리가 이미지 파일을 프로젝트에 사용할 때 svg 파일을 사용하는 경우가 많다.특히, 반응형 웹페이지를 구성하는 경우, 크기 변화에도

2022년 5월 17일
·
0개의 댓글
post-thumbnail

[React] | 웹폰트 - 전역서체로 적용하는 방법에 관하여

원하는 서체 파일을 다운로드 한다.구글 폰트나 찾아본 서체 웹페이지에서 제공하는 파일을 받으면 된다.내가 사용한 파일 포맷은 woff2그 전에 준비되어야 하는 것은 woff2 또는 다른 포맷의 서체 파일이다.원하는 이름의 .css 파일 생성@font-face 구문을 사

2022년 5월 16일
·
0개의 댓글
post-thumbnail

배열, 객체 불변성을 지켜야 하는 이유 & 배열 수정하기

기본적으로 참조형 데이터의 경우, 해당 값이 변경된다면 그것을 참조하는 다른 모든 기능들에 영향을 주어 예상치 못한 문제가 발생할 수 있으므로, 불변성을 지키며 코딩해야한다는 기본적인 논리는 바닥에 깔고...리액트의 state가 배열 또는 객체인 경우, 리액트는 배열(

2022년 5월 16일
·
0개의 댓글
post-thumbnail

Optional Chaining 연산자 (?. 연산자)

체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. - MDN체이닝 연산자 ( . )와 유사하게 작동하지만, 참조가 nullish (null 또는 undefined)라면, 에러가 발생하는 것 대신에 표현

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[React][Javascript] | 특정 Element로 웹페이지 자동 스크롤 기능 구현

어떤 버튼이나 링크를 클릭한 경우, 동일 페이지 내에서 또는 다른 페이지의 특정 요소로 스크롤이 되는 기능을 구현한다.나의 경우 다음과 같은 방식으로 기능을 구현했다boolean 값을 갖는 state 생성버튼 클릭 시, state 값 변경 및 특정 페이지로 Naviga

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[React][Javascript] | 웹페이지 이동 이벤트 구현 방법

window.location.hrefwindow.location.replacewindow.open()<Link> 컴포넌트 활용window.location 객체는 현재 페이지의 URL 주소 정보를 얻거나, 다른 웹페이지로 Redirect하는 경우 사용된다.새 윈도우

2022년 5월 12일
·
0개의 댓글
post-thumbnail

[HTML] | form - input 태그 기초

form 태그는 사용자가 입력한 정보를 서버로 전송할 수 있게 해주는 기능을 가진 HTML의 기초적인 태그이다.form 태그 구문은 input 태그로 이루어진 기본 골격을 가진다.사용자가 원하는 정보를 입력할 수 있는 입력 요소기본적인 input 태그는 단순한 텍스트

2022년 4월 16일
·
0개의 댓글
post-thumbnail

[알고리즘] | Valid Mountain Array 문제

임의의 정수로 이루어진 배열이 주어졌을 때, 해당 배열의 요소들이 증가했다가 감소하는 산 모양의 추세를 보이는지 판별하는 문제이다.중복인 요소가 있으면 안되며증가-감소 후 다시 증가, 감소가 있어서는 안된다.반드시 지속적으로 증가 후, 연속적으로 감소하는 경향을 띄어야

2022년 4월 12일
·
0개의 댓글
post-thumbnail

[TIL] | 실행 컨텍스트

실행 컨텍스트 (execution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.스택은 출입구가 하나뿐인 깊은 우물 형태의 데이터 구조 (100개의 작업을 저장할 수 있는 스택에 그 이상 투입 시 에러 발생)큐는 양쪽이 모두 열려있는 파이프 형

2022년 4월 12일
·
0개의 댓글
post-thumbnail

REST API 관련

REpresentational State Transfer.전반적인 웹 어플리케이션에서 상호작용에 사용되는 웹 아키텍쳐 모델.자원을 주고받는 웹 생태계에서 통신 체계 내의 범용적인 통신 스타일을 규적한 아키텍쳐.Application Programming Interface

2022년 4월 6일
·
0개의 댓글
post-thumbnail

왜 개발자가 되고 싶은가?

위대한 물리학자들의 전기를 읽어보면, 물리학뿐만 아니라 다양한 분야의 본질을 꿰뚫는 날카로운 시각을 소유했다는 것을 알게 되는데, 나는 그들처럼 지식이 풍부할 뿐만 아니라 지혜롭고 현명한 사람이 되고 싶었다. 물론 역사에 남을 위대한 사람이 되고자 했던 것은 아니다.

2022년 3월 16일
·
0개의 댓글
post-thumbnail

기업 인턴 프로젝트 리뷰

이번 프로젝트는 메가박스 홈페이지를 모티브로 하여 실제 영화 정보를 확인하고 영화 예매까지 과정을 구현한 웹사이트 제작을 목표로 하였다.참조한 웹사이트의 여러가지 기능이나 프로세스들을 팀원들의 수준 내에서 비슷하게 구현하기 위해 노력했다.특히, 내가 맡은 예매페이지의

2022년 3월 8일
·
0개의 댓글
post-thumbnail

2차 팀 프로젝트 리뷰

이번 프로젝트는 메가박스 홈페이지를 모티브로 하여 실제 영화 정보를 확인하고 영화 예매까지 과정을 구현한 웹사이트 제작을 목표로 하였다.참조한 웹사이트의 여러가지 기능이나 프로세스들을 팀원들의 수준 내에서 비슷하게 구현하기 위해 노력했다.특히, 내가 맡은 예매페이지의

2022년 3월 7일
·
0개의 댓글
post-thumbnail

async & await

async await는 promise를 조금 더 간결하고 간편하고, 동기적으로 실행되는 것 처럼 보이게 만드는 키워드promise/then+promise/then 이렇게 연속적으로 작성하게 되면 코드가 상당히 복잡하게 구성된다. 하지만 여기에 async await를 사

2022년 3월 1일
·
0개의 댓글