프론트엔드 개발자 엄성준 블로그

이력서 제출을 통한 좌절을 뒤로하고 포트폴리오로 제출한 Vercel 링크가 잘 작동되는지 수시로 확인을 하는데 이번에는 새로운 오류가 나타났다. 진행했던 프로젝트들의 대표이미지가 불러와지지 않았던 것이다. 그래서 바로 긴급 수정에 들어갔다. 문제는 크게 어렵지 않았다. console에 찍힌 문제점을 구글에 검색하니 공식문서에 따르면 version 13부터는 기존에 코드에 있던 layout, objectfit 등을 삭제하라는 말이었다. 그래서 아래와 같이 코드를 수정하니 정상적으로 작동을 하게 되었다. 이력서에 제출한 포트폴리오 링크인데... 앞으로는 더욱 수시로 확인하고 공식문서를 잘 읽어봐야겠다!

지원한 회사에서 빠른 시간 내에 불합격 처리를 받은 경험을 통해 이력서에 문제가 있을 수 있다는 의문이 들었습니다. 제가 발견한 문제점과 개선 사항을 아래와 같이 정리했습니다. 자기소개 내용 강화 - 이력서에서는 프론트엔드 기술에 너무 초점을 맞추었다고 생각하여, 전공자로서 대학교 시절에 습득한 Spring Boot, SQL Developer, 네트워크 관련 경험과 지식 등을 강조하는 내용을 추가했습니다. 기술 스택 강화 - 지원한 회사에서 Next.js를 자격 요건으로 요구하는 경우가 많았으므로, 기존에 학습한 Next.js와 TypeScript, Tailwind CSS를 활용하여 인사 담당자를 위한 포트폴리오를 개발했습니다. 이 포트폴리오를 Velcel을 이용해 배포한 링크를 첨부하였습니다. 포트폴리..

문제 설명 숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요. 예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다. 제한사항 - 1 ≤ p의 길이 ≤ 18 - p의 길이 ≤ t의 길이 ≤ 10,000 - t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다. 입출력 예 t p result "3141592" "271" 2 "500220839878..

문제 설명 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다. 명함 번호 가로 길이 세로 길이 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때..

문제 설명 한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째, 네 번째 학생의 정수 번호를 더하면 0이므로 세 학생은 삼총사입니다. 또한, 두 번째, 네 번째, 다섯 번째 학생의 정수 번호를 더해도 0이므로 세 학생도 삼총사입니다. 따라서 이 경우 한국중학교에서는 두 가지 방법으로 삼총사를 만들 수 있습니다. 한국중학교 학생들의 번호를 나타내는 정수 배열 number가 매개변수로 주어질 때, 학생들 중 삼총사를 만들 수 있는 방법의 수를 return 하도록 solution 함수를 완성하세..

오늘은 TypeScript의 기본 타입을 다시 복습해 보는 시간을 가졌습니다! // 타입스크립트 복습 interface PersonType{ name:string; age:number; isStudent:boolean; studentNum?:number; } const person = { name:'엄성준', age:25, isStudent:false, } const getPersonAge = (peson:PersonType)=>{ console.log(person.age) } const array1:string[] = ['a','b','c'] // 문자로만 이루어진 배열 const array2:number[] = [1,2,3] // 숫자로만 이루어진 배열 const array3:boolean[] = [..

1. HTML과 HTML5의 차이점 - HTML : Hyper Text Markup Language - HTML5는 HTML 표준의 다섯 번째 업그레이드 버전 - 멀티미디어 기능 - 웹 저장 기능 - 웹 사이트 사용자의 정보를 pc에 저장할 수 있는 매커니즘을 제공함 - 웹 소켓 기능 - 위치 기능 - CSS3 2. GET과 POST의 차이점 GET - 서버에 정보를 조회하기 위해 사용되는 메서드 ex) 게시글 조회, 상품 조회, 회원 조회 - 서버에 정보를 요청할 때, 쿼리스트링을 통해 데이터 전송 - URL 주소에?로 주소로 데이터를 전송함, 길이 제한이 있음 - 서버에 동일한 요청을 여러 번 보내더라도 항상 동일한 응답이 돌아와야 한다는 것을 의미 == '멱등' POST - 서버에 데이터를 생성 또..

이전에 진행했던 Poketmon Master 프로젝트인데 급하게 팀 프로젝트를 진행하게 되어서 완벽하게 완성하지 못한 부분을 리팩토링 하려고 합니다. 먼저 메인 페이지에서 다크모드일 때 이름이랑 아래의 포켓몬 마크가 잘 보이지 않기 때문에 이 부분을 수정해야 할 것 같습니다. 또한 헤더에 영역이 가려지고 다크모드일 때도 아래의 부분은 적용이 되지 않는 것을 알 수 있습니다. 이 부분을 수정하고 상세페이지의 내용을 공유할 수 있는 카카오 공유하기 기능을 넣어볼까 합니다. 공유하기 기능 구현 공유하기 버튼 컴포넌트 생성 아래의 문구 index.html에 삽입 https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed Kakao..

빽엔드분들과 협업을 통해서 현재까지 제가 구현을 맡은 파트는 로그인, 회원가입, 비밀번호 찾기(초기화), 비밀번호 수정이었습니다. 먼저 현재까지 진행된 부분까지 파트별로 적어보겠습니다. # 회원 가입 회원 가입을 진행할 때 회원가입 input 데이터를 원래 JSON형태로 변환하지않고 string 통해서 바로 api에 전달했었는데 같이 협업하시는 빽엔드 개발자 분께서 blob형식으로 보내주시면 좋겠다라고 하셔서 변경이 있었습니다. 또한 회원가입 예외처리도 진행하였습니다. # 로그인 로그인은 이전과 동일하나 각각 상황에 맞게 예외처리를 해주었습니다. 또한 로그인을 하게 되면 Redux-Toolkit을 통해서 유저 정보를 전역적으로 이용할 수 있게 해두었고 토큰 값은 React-cookie를 이용해서 관리하기..

local 서버를 돌려야 하기 때문에 빽엔드 분들이 주신 파일을 자체적으로 가동하고 있습니다. 로그인 form에서 UseRef를 통해서 email과 password를 입력받습니다. 입력받은 데이터를 fetchLoginApi 비동기 함수를 통해서 POST를 통해서 이메일과 비밀번호를 서버에 전달합니다. 만약 정상적으로 진행된다면 React-cookie를 통해서 state에 SetCookie를 통해서 토큰 값을 쿠키에 저장합니다. 그 후 useDisptch를 통해서 setUser()를 통해서 action.payload의 담긴 유저의 정보를 구조 분해 할당을 해준 뒤 현재 initialstat에 저장된 값에 업데이트해줍니다. const userDispatch = useDispatch() 위의 부분만 진행 했을..