profile
프론트엔드 개발자
post-thumbnail

한끗차이로 올라가는 프론트엔드 개발의 기술

한끗차이로 올라가는 프론트앤드개발의 기술프런트 앤드 개발자는 사용자가 편리한 UI/UX를 제공해주는 것도 중요하고디자이너가 제작해준 디자인을 100% 구현하는 것도 중요하다.개발을 하다 보면 잘 챙기진 않지만 이런 부분을 챙기면좀 더 퀄리티가 올라가는 사이트를 제공할

2022년 6월 7일
·
0개의 댓글

리액트 moment 간단사용법

yarn add react-momentimport moment from "moment"; import "moment/locale/ko";moment(날짜).fromNow()이렇게 간단하게 해주면 하루전, 이틀전, 5시간전, 20분전 등등 표현된다.간단하다!

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

scroll button

스크롤 이벤트를 구현해보았다.뭔가 정리가 안된느낌이지만, state로 상태를 관리하면서 scrollY값의 범위를 주어 일정 높이를 벗어나면 버튼이 나타나고, 클릭시 최상단으로 가는 로직이다.핵심은 버튼보이기(true)안보이기(false)와 스크롤 시에 매번 바뀌는 Y값

2022년 5월 5일
·
0개의 댓글

is assigned a value but never used

변수를 선언을 해도 ESLint가 인지를 못해서 에러를 일으킬 때가 종종 있는데,이 경우에는 에러가 난 코드 옆에 주석으로//eslint-disable-line no-unused-vars를 적어주면 오류 해결!

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

일정 글자수 이상일때 ... 나타내기

일정글자수 이상일때 ... 나타내기!white-space: nowrap;overflow: hidden;text-overflow: ellipsis;간단하다. 박스를 하나 얹은 다음에 3가지 css속성을 추가한 후, width값을 주면일정 width값을 초과하면 ...으로

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

WIL Redux Toolkit

지난 한주동안 몸살 때문에 제대로 프로젝트를 진행하지도 못했고, 어제오늘은 이사를 하느라 시간이 부족했다. 하필 시간이 겹쳐버리는 바람에 프로젝트에 집중하기 어려웠는데, 그 안에서도 나름 최선을 다하려 노력했고 와이어프레임에 맞는 뷰를 구현하고 여러가지 기본 개념들을

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

Git flow

git flow란 간단히 말해서 형상 관리 전략입니다.Git을 사용하여 프로젝트를 진행할 때 Git Flow전략을 통해 관리하는 것이 더 효율적이고 유연합니다.소스 코드 관리를 효율적으로하고 협업할 때 발생할 수 있는 문제점을 최소화할 수 있는 전략이Git flow입니

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

4일차

실전프로젝트 4일차에 접어섰다!해외정보를 공유하는 사이트이다 보니 스코프가 너무 넓어서 페이지 구성을 어떻게 짜야하고, 페이지간 이동은 어떻게 설정할지, 와이어프레임은 어떻게 짜야할지 등 신경쓸 것들이 너무 많아서 감이 잡히질 않았다. 디자이너분들과 서로 의견을 제시하

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

1일차 약속

실전프로젝트 주제를 정하는데에 시간을 꽤 많이 쏟았다.지하철 혼잡도, 카페 메뉴 조합 추천 등 여러가지 주제들을 쏟아내면서 브레인스토밍 과정을 거쳤다. 프론트 2명, 백엔드 3명, 디자이너 2명 이렇게 총 7명이서 프로젝트를 맡게 되었는데, 그렇게 회의를 진행하던 중

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

장바구니 담기

장바구니 담기 기능을 구현중에 문득 드는 생각이, 담기를 누르면 모달창이 꺼지고 계속해서 쇼핑을 이어나간 후에 장바구니 페이지에 들어가면 그때 내가 선택한 상품 목록들이 나오는데, 굳이 장바구니담기를 누를때 DB에 저장을 해야하나? 라는 생각이 들었다.그래서 들었던 생

2022년 4월 19일
·
0개의 댓글

모달창 만들기

state로 보임 안보임 정보를 저장하기3항 연산자로 true일때 모달창 보여주기꽤 간단하다!!

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

항해 미니 프로젝트

주제는 좋아하는 취미의 사진을 올리는 웹사이트를 구현했다.인스타그램?과 같은 느낌인데 css보단 기능에 집중을 했다!첫 프로젝트임에도 불구하고 API명세서를 백엔드분들과 만들면서 하고 싶은 기능들을 추가하다 보니 스코프과 꽤 많이 넓어졌다. 그 중 내가 맡은 부분은 회

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

404오류

프로필 이미지를 서버로 보내주는 코드를 구현중에 404 Not Found 라는 오류가 떴다.검색해보니 데이터를 줄때 method나 url등 보내는 정보가 다를때 오류가 난다고 하는데, 코드를 확인해보니 틀린점이 없어서 꽤나 긴시간을 고민했다..2시간 정도 해맨후에 결국

2022년 4월 13일
·
0개의 댓글

pre-rendering

미리 화면을 그릴지 vs 모두 다 준비되었을 때 그릴지기본적으로 Pre-rendering 방식을 제공하는 Next.js는 우선 HTML 파일을 통해 정적인 화면을 먼저 보여준다.이후 JS 파일을 로드해와서 화면에서의 클릭 등의 이벤트 처리가 이뤄질 수 있는 반응하는 화

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

SEO란?

SEO는 Search Engine Optimization의 약자로 말그대로 검색엔진 최적화라는 의미이다.즉, 검색 결과에서 상위에 노출될 수 있도록 내 콘텐츠를 최적화하는 방식을 말한다.구글을 설립한 창업자 중 한 명인 래리 페이지(Larry Page) “완벽한 검색엔

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

리액트 라이프사이클

리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.리액트라이프사이클라

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

dispatch()

store의 값을 변화 시키기 위해서는 action이 필요한데 그 action을 action creater가 만들어주고 action creater를 담은 dispatch열차가 store의 reducer에게 action을 전달해주면 reducer가 action의 type

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

Redux의 미들웨어

리덕스 미들웨어는 action을 dispatch했을 때 reducer에서 이를 처리하기에 앞서 사전에 지정된 작업을 실행할 수 있게 해줍니다. action과 reducer 사이의 중간자 역할을 합니다.전달받은 action을 단순히 콘솔에 기록하거나, 전달받은 액션 정보

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

Redux 공부!

반복숙달로 익숙해진 다음에 이해하기!!서버가 없다면 기본적으로 리덕스는 데이터를 나의 로컬store에서만 관리한다.src -> redux 폴더안에 configStore.js 만들고,createStore, combineReducers 임포트하고,리덕스파일 임포트(여러개면

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

라우팅(Route) 공부

이해하기에 앞서 반복숙달로 먼저 익숙해지기! yarn add react-router-dom@5.2.1 (강의버전) 추가index.js에서 BrowserRouter 임포트 후 App 컴포넌트 감싸기App.js에서 Route 임포트 후 컴포넌트 연결하기. path 경로 추

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