데스크탑으로 개발할때는 알수없었던 특정 브라우저의 버그를 개발서버로 배포하고나서 발견하였다.상단 chrome tab바가 position: fixed로 설정해놨던 엘리먼트의 상단을 가려버리는 것이다.처음에는 css로 수정을 해가면서 테스트 해봤지만 html에 metata

기존 input의 file타입을 사용해서 프로필사진 업로드 기능을 구현하였었다.위와같이 event.target.files0으로 이미지파일의 정보를 가져올수 있었고 다음 api통신과 미리보기 기능을 구현했었다.근데 첫번째 클릭시에는 onChangeImg함수가 잘 작동했지

특정 이벤트를 수행하였을때마다 결과를 알려주는 알림기능을 구현하였다.custom hook으로 따로 만들어서 재사용가능하게 만들어보았다.pop이라는 boolean값으로 true시에 상단에서 내려오고 false로 바뀔경우 다시 상단으로 사라지는 컴포넌트를 따로 만들었다.T

클릭시 모달창이 나오는 기능을 구현하던중 재사용이 만을듯하여 커스텀훅으로 만들기로 하였다. 생각해야할 이슈는 모달바깥쪽을 클릭했을때 모달이 사라져야한다. 모달이 생겼을때 스크롤을 없애야한다. 1. html구조 파악하기 컴포넌트로 모달을 만들어 재사용할것이기 때문에

server와의 이미지 파일 업로드가 아닌 프론트에서 받아온 이미지를 미리보기로 보여주는 과정을 기록한다.파일받아오기는 기존에 진행했던 input file을 이용하였다.위와같이 input을 클릭하면 이미지 업로드화면이 나오고 e.target.files0은 image의

진행중인 프로젝트에서 프로필 사진을 업로드해야했었고, 백엔드쪽에서 이미지파일은 multipart/form-data로 해주세요~ 라는 요청이있었다.input 타입을 file로 지정하면 파일을 가져올수있는 형태의 input이 생성된다.이미지파일을 콘솔로 확인해보면 데이터가

현재 진행하는 프로젝트에서 회원가입 또는 로그인을 하면 access-token과 refresh-token을 같이 발급해준다. access-token은 로그인후의 요청들에 필요한 header값으로 넣어줘야하고 access-token의 기간이 만료되었을때 돌아오는 erro

진행하고 있는 빵덕 프로젝트의 테마상세 페이지에서 스크롤시 네비게이션바의 색이 변환하는 디자인이 나왔다. 스크롤 위치를 어떻게확인할까 고민을 하다가 IntersectionObserver를 사용하기로 하였다.1.eEffect안에 IntersectionObserver로 r

react.ts로 naver map api를 사용한 과정을 적는 글이다. 먼저 naver dev 홈페이지 로 들어가서 로그인을 한다(회원이 아니라면 회원가입 후 카드등록 정보까지 작성해주어야한다.)1\. 우측 상단에 console이라는 버튼을 누른다.2\. 좌측에 Pr

clean code란 원하는 기술을 사용하여 무조건 구현해내는것이 아니라 코드자체를 읽기만해도 무엇을 설명하는지 이해가 되어야한다. 즉 협업을 하게 되거나 시간이 지난 코드를 내가 다시보게될때 코드를 분석하지않아도 간단하게 알아볼수있어야한다. clean code를 작성

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교

nextjs는 SSR을 제공하는 React프레임워크라고만 알고있었다. 그러나 Nextjs에는 SSG라는 추가개념이 있었다. 그렇다면 ssg는 ssr과 무엇이 다른가?최초의 렌더링시점으로 거슬러가보면 파일은 HTML만 존재했으며, 매우 가벼웠기때문에 매 요청마다 stat

Next.js는 React의 SSR을 간단하게 구현하기위해서 사용하는 React프레임워크이다.난 그동안 create-react-app을 사용하여 REACT를 사용해왔다. 그러나 CRA로 만든 서비스는 SEO에 굉장히 좋지않다. 즉 index.html파일안이 div태그

문제 설명이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다.별(\*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요.제한 조건n과 m은 각각 1000 이하인 자연수입니다.1.n으로 들어올 인자만큼 반복문을 돌려서 '\*'

라이브러리에 의존하게 되는것 같아서 연습삼아 이미지 슬라이더를 만들어 보았다.1.슬라이더 이미지박스인 Slider컴포넌트와 아래 SliderDot컴포넌트를 분리하였다. (각자의 기능이 컴포넌트안에서 연관이 없었기에 코드가 길어지는 것보다 나누는것이 나을것으로 판단하였다

3개의 다른 라이브러리를 사용예정이다.1.input태그의 name과 똑같은 이름으로 schema를 만든다.2.각 요구조건에 맞게 설정후 마지막에는 required()를 적는다.필요한 register,handleSubmit,formState를 작성하고 useForm의 r

주로 Text Editor나 로그인 폼 규칙을 정할때 사용되며 입력한 문자열에서 특정한 조건을 표현할 경우 일반적인 조건문으로는 표현하기 복잡하여 사용되곤 한다. 코드가 간단하지만 가독성이 매우 떨어지기 때문에 숙지하지 않으면 이해하기 힘들다는 단점이있다.정규표현식은

문제 설명단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.재한사항s는 길이가 1 이상, 100이하인 스트링입니다.1.replace와 정규식을 이용하여 props의 여백을 모두 없앤다.2.

프로젝트의 규모가 커질수록 파일 용량이 커지기 때문에 그로인한 사용자에게 느린환경을 경험하게 할수 있다. 이럴때 코드 스플리팅을 사용하여 첫 렌더링시 당장 필요한 코드가 아니라면 나중에 불러오게 하여 로딩속도를 개선할 수 있다.import방식을 lazy에 감싸서 필요할

문제) 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2