본문 바로가기
안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요.

전체 아티클77

리크루팅을 위해 어플라이 사이트를 개발했다 목차 · 너무 형식적인 UI와 사용자 경험이 마음에 들지 않았다. · 내 집은 디스코드 · 처음 진행해본 프로젝트 QA · 잘 돌아가고 있다, 내가 만든 서비스가 · 다시 처음 개발했던 때로 돌아간다면 멋쟁이사자처럼 5기와 6기를 수료하고, 다시 11기를 시작했다. 군 입대와 동시에 7기 운영을 선배 누나가 진행을 해주셨고, 그 후에는 학교의 멋쟁이사자처럼이라는 단체가 사라졌다. 학교 생활보다 대외 활동을 더 재밌게 임할 수 있었던 나는, 사람들과의 네트워킹이 얼마나 중요한지를 알게되었고 교내 중심으로 활동을 하는 멋쟁이사자처럼 강남대학교라는 단체가 사라졌을 때 당시 군입대를 하고 있던 너무 아쉬웠다. 너무 형식적인 UI와 사용자 경험이 마음에 들지 않았다. 아는 동기형님이 멋쟁이사자처럼 11기를 다시 .. 2023. 3. 2.
[에러일지] React The href attribute requires a valid value to be accessible. 목차 · 원인 · 해결 방법 · 레퍼런스 React The href attribute requires a valid value to be accessible. ESLint를 적용하면서, 그 전에 뜨지 않던 태그에 관련된 에러가 뜨게 되었다. 아직은 하이퍼링크를 적용시키고 싶지는 않지만, 일단은 구현해두어야하는 코드기에 이럴 경우에는 어떻게 상황 대처를 해야하는지에 대해 의문이 들었다. 바로가기 // Vanilla 바로가기 // React 원인 The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href.. 2023. 3. 1.
[에러일지] ESLint - Function component is not a function declaration 목차 · 원인 · 함수 유형 구분 · 해결 방법 · 레퍼런스 Function component is not a function declaration eslint (react/function-component-definition) ESLint를 연결해주는 과정에서, 마주한 에러이다. 함수는 올바르게 작성을 했지만 ESLint 설정 과정에서 함수에 관련된 규칙을 빼먹은 것 같아 구글링을 진행하고 이에 따른 해결방법을 포스팅을 했다. 원인 리액트에서는 공식문서에서도 나왔듯이 클래스형 컴포넌트보다 요즘 많이 찾는 보통 함수형 컴포넌트를 사용한다. ESLint react/function-compoent-definition 규칙을 사용한다면, 이 함수형 컴포넌트를 어떤 함수 유형으로 사용할지 미리 정하고 rules.. 2023. 3. 1.
토스 채용 서비스인 줄 알았는데,, 목차 · 토스 채용 서비스 인 줄 알았는데, · 엥, 근데 토스 서비스가 아니었다고? · 두들린의 그리팅 서비스 토스 채용 서비스 인 줄 알았는데, 2023년 2월 대학교를 졸업하고, 대외활동에서의 여러 팀원들과 프로젝트하는 것이 즐거워 멋쟁이사자처럼 11기를 다시 시작했다. 멋쟁이사자처럼은 보통 지원 어플라이 사이트를 직접 제작해 만들어 학교에 제공을 하기 보다는 구글 폼을 이용해 학교 내의 팀원들을 꾸리도록 운영을 하고 있는데, 우리는 독특하고, 색다르게 학교 자체만의 어플라이 서비스를 만들고자 하였다. 와이어 프레임을 먼저 그렸다. SOPT에서 UI 디자인 툴인 Adobe XD에 대해서 배운 적이 있기 때문에, 보통 전문 디자인을 배운 사람이 없으면 보통 내가 와이어 프레임을 그리고, 디자인하고 프.. 2023. 2. 24.
This의 여러 쓰임새 단독으로 쓴 this 기본적으로 this를 호출하는 경우엔 global object를 가리킨다. 브라우저에서 호출하는 경우 [object Window]가 된다. 이는 ES5에서 추가된 strict mode(엄격 모드)에서도 마찬가지이다. 'use strict'; var x = this; console.log(x); // Window 함수 안에서 쓴 this 함수 안에서 this는 함수의 주인에게 바인딩된다. 함수의 주인은 window가 된다. function thisTest() { return this; } console.log(thisTest()); // Window var num = 0; function addNum() { this.num = 100; num++; console.log(num); //.. 2023. 2. 20.
자바스크립트 new Date 객체의 크로스 브라우징 문제 문제 발생 어플라이 프로젝트를 만들면서 아래와 같이 코드를 작성해주고, currentTime에 따른 변수가 startTime과 endTime 안에 속할 때 열리는 페이지를 구상을 했다. ("YY:MM:DD HH:mm:ss") 다음과 같은 날짜 양식을 지정을 해주었고, 이 양식은 Edge, Opera, Firefox, Chrome 브라우저에서는 동작을 잘 하지만, IOS(Safari)의 경우 NaN을 나타내고 있었다. 문제 해결 Media Query를 통해 모바일 해상도의 접근을 막아놓긴 했지만, Safari로 접속을 하는 태블릿의 경우는 이 문제점을 발견할 수 있다. 그래서, ("YY-MM-DD HH:mm:ss") 와 같이 시간 규격을 변경해주거나 아래와 같은 표준 방식으로 변경을 해주어야한다. let .. 2023. 2. 17.

티스토리툴바