삶의 하루: 프런트엔드 개발자가'간단한'오류를 어떻게 해결하는지

저는 최근에 초급 전단 개발자와 합작하고 포부를 가진 개발자를 지도하고 있습니다. 그들은 저에게 어떻게 하면 더 좋은/고급 개발자가 될 수 있는지 물었습니다.이것은 정량적으로 대답하기 어려운 문제이지만, 나는 고급 개발자의 특징 중 하나가 그들이 제때에 문제를 해결하는 능력이라는 것을 안다.이 글에서 나는 이 방면을 설명하고 싶지만 일화 같은 견해를 주었다. 하루가 마치 전단 개발자의 생활과 그것이 채택할 수 있는 곡절로 인해 간단해 보이는 문제를 해결할 수 있을 것이다.

구린내 나는 벌레

나는 우리의 한 응용 프로그램에 새로운 보고 페이지를 실현했다. 사용자는 몇 개의 매개 변수를 설정하여 유사한 전자 표의 보고서를 만들 수 있다.내가 그것을 전자 표와 같다고 말하는 이유는 시각적으로 사용자의 전자 표처럼 보이지만, 나는 그것을 flexbox를 기반으로 한 단일 격자 격자로 실현하기 때문이다. 왜냐하면 다른 요구 때문에 일반적인 표를 사용하기가 매우 어렵다.지금까지는 괜찮았습니다. 책상의 외관을 유지하기 위해서 저는 정말 각 격자 사이에서 픽셀급의 완벽한 일치성을 달성해야 합니다. 이것은 제가 맥북 크롬에서 충전과 간격을 약간 조정함으로써 실현한 것입니다.코드 배치가 끝났습니다. 제 동료가 Windows에서 실행하는 것을 제외하고는 모든 것이 좋아 보였습니다. 그들은 일부 열이 경미한 이동을 하는 것을 관찰하여 표의 착각을 깨뜨렸습니다.이것은 그들이 관찰한 것이다.

간단하다. 그날 아침 8시 30분에 나는 이것이 단지 다른 과장된 문제일 뿐이며, 나는 그것을 복제하고 복구하기만 하면 된다고 자신에게 말했다.
제1과: "그것은 내 기계에서 일한다"는 것은 개발자가 잘못에 대한 효과적인 대답이 되어서는 안 된다.다른 사람이 망상증을 가지고 있다고 믿지 않는다면, 조사를 시작하는 기초로 삼아야 한다. 적어도 그것은 어딘가에서 작용해야 한다.너의 관점에서 볼 때, 그것은 영원히 끝내서는 안 된다.

Chrome/Mac에서 질문 복사

내가 말한 바와 같이 Windows 10의 동료가 이 버그를 보았을 것이다. 그래서 나는 우선 나의 크롬 브라우저에서 해상도를 바꾸어 응답성 문제와 관련이 있는지, 불가능한지 보려고 한다.이어서 나는 주의력을 운영체제로 옮겼고 문제는 크롬 렌더링의 차이와 관련이 있을 수 있으며 이것은 운영체제에 달려 있다고 생각했다.

BrowserStack을 사용하여 Chrome/Windows 10에서 문제 재현

다음은 Chrome 브라우저 10의 BrowserStack 인스턴스에서 테스트했습니다.여러 번 시도해 보았지만 주사위는 다시 없었다.다른 거 해볼까요?나는 내 주위 (비크롬) 가장자리에 IE11/Windows10 가상 머신이 있는 것을 기억한다.이때가 되자 스탠딩 공연까지 합치면 오후 12시가 되었다.

Chrome/Windows 10에서 VirtualBox를 사용하여 문제 재현

나는 가상 머신을 시작하고 이 문제를 재현하려고 했지만 여전히 성공하지 못했다.나와 동료들은 이 문제가 해결 방안과 관련이 있다는 것이 분명하다.그들의 노트북은 1920x1280 해상도로 실행되어 복제하기 쉽다.VirtualBox에서 Windows 10 가상 머신 방문객을 동일한 해상도로 렌더링하는 데 약 1시간이 걸렸지만 성공하지 못했습니다.내 구글 검색에서 누군가가 내가 Parallels를 설치했다고 언급했다.

Chrome/Windows 10에서 병렬 프로그램으로 문제 재현

Parallels가 시작되면서 해상도가 정확한 Windows 10 가상 머신을 바로 시작하고 Chrome을 설치할 수 있었습니다. 이것은 제가 가장 좋아하는 Windows 동료의 snark를 찾았습니다.

회사 명
@ 아보칸

Internet Explorer: 새로 설치된 Windows에서 Chrome 브라우저를 다운로드하는 데 주로 사용되는 탐색 도구입니다.
18:2020년 2월 21일 오후 56시
0
일.
봐라, 우리의 개발 서버에 접근할 때, 페이지가 불러오자마자 오류가 발생했다.빠른 디버깅 후에 나는 문제의 배후를 과장한 원흉을 찾았다.
제2과: 접을 필요가 있을 때 잘 받아들여야 한다.만약 당신이 길을 걷고 있지만, 그것이 작용하지 않는다면, 신속하게 재평가하고 다른 것을 시도하는 것을 배워야 한다. 이것은 당신의 목표에 더욱 가까워질 것이다.

문제

특정 격자에 대한 경계를 정의할 때 다음 코드를 사용했습니다.

border-top: dashed

Chrome Mac에서는

border-top: dashed 3px;

기본적으로 3배 점선 테두리가 생성됩니다.나는 이것이 크롬의 기본 테두리라고 천진난만하게 생각한다.Windows에서 Chrome이 실제로 다음과 같은 결정을 내릴 수 있음을 발견했습니다.

border-top: dashed 1px;

그래서 격자 사이에는 항상 2px의 차이가 있다.간단합니다. 이제 이 문제를 알게 되었습니다. 이 문제를 복구하고 테스트하기 위해 로컬 env로 전환하고 싶습니다.오후 3시쯤 돼요.
3: CSS를 사용하여 규칙을 작성할 때 가능한 한 구체적으로 가정하지 마십시오.

고치다

이곳에서 내가 다시 복구를 시도했을 때 또 다른 장애에 부딪혔다.우리의 Angular 응용 프로그램은 포트 4200에서 실행되고 API는 8080에서 실행됩니다. 이것은 Parallels를 Windows 가상 시스템에서 나의 Maclocalhost에 접근할 수 있도록 설정해도 CORS 문제로 인해 이 응용 프로그램을 시작할 수 없다는 것을 의미합니다.이 문제를 해결하는 데는 여러 가지 방법이 있는데, 나는 아주 빨리 시도했다.

내 편집 /etc/hosts

ngrok

하지만 내장된 각도 프록시 설정을 사용하기로 했습니다. 저희가 예전에 사용한 적이 있지만 API에서 CORS를 사용한 후에 버렸습니다.내가 에이전트 설정이 작용하지 않는다는 것을 깨달았을 때, 나는 원래 1분의 일이 한 시간으로 바뀌었다고 생각했다.

각도 에이전트

proxy.conf.json에서 다른api 프록시 경로를 정의했습니다.

 "/api": {
    "target": "http://localhost:8080/api",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  },

응용 프로그램이 실행될 때, 예를 들어 /api/reports 를 누르면 http://localhost:8080/api 이 아니라 http://localhost:8080/api/reports 로 에이전트를 가져옵니다.세계태권도연맹?문서를 여러 번 다시 읽은 후에 나는 마침내 내가 무엇을 잘못했는지 깨달았다. Angular/Webpack 개발 서버는 ytarget가 틀렸다고 정확하게 지적할 것이다. 나는 targeturl에 상하문 경로를 추가하지 말고 호스트에만 추가해야 한다.구성을 다음과 같이 변경합니다.

 "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  },

모든 것이 순조로워서 나는 정상적으로 일하고 문제를 해결할 수 있다.심리!이와 동시에 한 초급 개발자가 PR을 제출했다. 나는 반드시 그에 대해 코드 심사를 해야 하기 때문에 영상 통화를 해서 코드의 의미를 깊이 연구했다. 왜냐하면 개발자는 그의 코드가 실현될 때 코드에 몇 개의 회귀 오류를 도입할 수 있다는 것을 몰랐기 때문이다.이 문제를 해결한 후에 나는 마침내 문제로 돌아가 복구와 배치를 진행할 수 있었다. 지금은 오후 5시경이다.
제4과: 디테일, 특히 문법과 맞춤법에 주의하세요.프로그래밍과 코드 심사 등 실천에 중요한 이유다.두 번째 그룹의 눈 검사 코드는 이러한 작은 오류를 포착하는 데 도움이 될 것이다. 왜냐하면 우리는 자신의 코드에 익숙하기 때문에 우리는 이 오류를 포착하는 데 시간이 오래 걸릴 것이다.

총결산

간단한 시각적 CSS 오류가 구글, VirtualBox와 병렬 데스크톱 가상 머신, Browserstack, Angular와 일부 고급 네트워크etc/hosts와 관련된 여정을 만든 것처럼 보인다.이 과정에서 저는 배운 것이 있습니다. 다음은 그날의 경험에서 얻은 조언입니다. 저는 포부가 있는 전단 개발자와 공유할 것입니다.

누가 너에게 말하든지 간에 전방 개발자로서 너는 HTML, CSS, 자바스크립트만 처리할 줄 안다.보시다시피 응용 프로그램을 만드는 데는 더 많은 지식이 필요하지만, 이것은 일반적으로 당신이 직접 가르칠 수 없는 것이다.이것은 네가 경험에서 배운 것이다.

개발자로서 당신의 가장 중요한 기능은 문제를 해결하는 것입니다.본고에서 보듯이 코드 문제를 해결하는 것은 때때로 쉬운 일이 아니다.너는 반드시 문제 중의 문제를 해결해야 한다.

당신의 일을 가지고 있습니다.생성된 코드에 대해 최종 책임을 지고 최고의 품질을 확보하는 것이 당신의 직책입니다.

이 과정을 받아들이다.이것이 바로 우리 업계가 왜 이렇게 재미있지만, 동시에 이렇게 사람을 낙담하게 하는가 하는 것이다.설령 네가 한 모든 일이 옳다고 생각한다 하더라도 일은 항상 옳지 않을 것이다.설령 네가 최선을 다했다 하더라도 일이 깨지거나 고장이 날 수 있다. 너의 일부 업무는 그것을 어떻게 다시 일하게 하는지 찾아내는 것이다.

팀의 비코딩 인원에게 중요한 것은'간단해 보이는 일이 그리 간단하지 않을 수 있다는 것을 이해하는 것이다. 실현 중이든 평가를 할 때든 바로잡는 것이다.

제가 영어를 하지 않는 친구들에게 당신들의 영어 수준을 향상시킵니다.내가 말한 바와 같이 이 문제들을 훑어보는 데는 대량의 구글 검색이 필요하다. 만약 내가 영어에 정통하지 않다면, 내가 얼마나 느리게 걸을지 상상할 수 없다.좋은 정보가 많은데 그 중 절대 다수는 영어이기 때문에 이 언어를 잘 파악하는 것이 틀림없이 도움이 될 것이다.

사후에 보니, 나는 BrowserStack으로 돌아왔다. 보아하니 너는 특정한 해상도를 가진 가상 기기를 시작할 수 있을 것 같다. 만약 내가 주의한다면 이것은 나를 몇 시간 절약할 수 있을 것이다.하루가 끝났을 때, 나는 전체 경험이 매우 재미있다는 것을 발견했지만, 비전형적인 것이 아니라, 나는 몇 가지 것을 배웠다.이것이 바로 다른 사람들과 그것을 공유하는 이유이다. 특히 사칭 증후군을 처리하는 초급 개발자들이 당신에게 고급 개발자가 되는 것은 모르는 것이 없고 완벽한 것이 아니다. 그것은 단지 당신이'스타일에 곤경에 빠지다'는 것을 의미할 뿐이다. 보통 이런 곤경에서 더 빨리 회복될 수 있다는 것을 의미한다.너는, 너는 어떤 재미있는 버그나 경험을 공유할 수 있니?