核周记

在思考文章名称的时候敲下了“两周实习考核记”，灵光一动想到了初中那篇《核舟记》，于是借用。
本文就来记录一下我在小企鹅的两周。

---

概述

从6月22日坐着晃悠悠的船来到深圳，到现在完成考核答辩也已经有两周了。然而即使是刚待上两周，在这段时间内也体会和收获到了许多。那就趁着等待考核结果的这个稍微悠闲的下午，来记录记录吧。

关于生活

在生活上，这是我第一次实习、第一次去以一个大人的角色去安顿自己，虽然还是免不了学生气，但也感受到了众人所谓之“成长”的东西。不同人生阶段真的会有非常不一样的感受，初高中的时候总是很向往大人的世界，总觉得到那个时候就可以享受到各种独立，然而随着时间流逝自己终于需要去考虑未来的时候，却又免不了感慨一下当小孩儿真好。

来到公司的第一天就见到了导师eraser，跟着他参加了组里的晨会，在迷迷糊糊地拒绝了组长jero提出的自我介绍之后进行了简单的自我介绍(禁止套娃)，也算是和大家打了个照面。之后就是每天跟着我们的饭群去吃饭，一来二去也熟悉了组里的其它小伙伴(elena、theo、vince、eto、luxing)。虽然由于封闭考核，还没有和他们进行工作上的交流，但是感觉都是比较稳的前端高手！以后就得多向你们请教啦！说回到吃饭，很神奇的是，自从我入职之后，组里的饭局频率达到了空前的高度，我也因此跟着前辈们吃了好多顿饭饭，不知道来的这几天有没有长胖呢。

关于工作

考核内容上，我们需要在两周的时间内从零开始学习React.js并配合Ant Design组件库完成一个管理后台系统。听到这个消息的我，内心已经波澜不惊了，因为从大三下开始我们就在被各种系统缠身：软件工程实验的家电销售管理系统、软件工程课设的在线聊天系统…现在又来了一个系统！感觉有点逃不出系统的魔爪了Orz

在两周的时间内，自己作为前端小组长，带领另外两位小伙伴去实现这个系统，感觉在很多维度上都收获了很多。

首先是建立了对前后端分离这个开发模式的整体观。因为之前的项目经历中，要么是前后端比较耦合的家电销售系统，要么是主要负责样式的咕咕报，总之都没有去从宏观的角度一步步推进系统的构建，这次则担起了小组长角色去构建框架、组织结构、完善细节，了解了分离开发的全部过程，构建了一个整体观。我个人觉得这种整体了解是非常有必要的，也是我现阶段比较欠缺的，这次学到了，很开心！

除此之外，对前后端对接的细节也有了比较全面的体会。譬如在对接前的部署时去配置路由转发，可以引申到对nginx的学习；遇到跨域问题时可以去深挖HTTP协议的细节内容；前后端联调过程中去调整API数据格式，可以引申到对接口层新技术如GraphQL等的学习…遇上的这些问题也是一个学习的契机，而且我觉得基于实际问题导向的学习，相比纯阅读书籍，对我来说是能记得更加牢的(参考之前我学了一暑假Haskell最后忘光光，FP也只摸了下门槛的例子)。

再就是，可以明显感受到，自己能力也在慢慢提升，人也更加机灵了！具体来说就是，能够比较好地把握住代码逻辑和思路，对出现的问题也能比较科学地分析出思路、思考出问题可能出在哪里，代码结构和审美也在逐渐提升上来了，感觉太棒啦！不过话说回来，我还是有好多好多要学的，希望能够成长为一名合格的前端空城师。

小问题

这段时间有意识地去记录遇到的问题、场景和解决办法，虽然万事均可STFG，但是记录一下也未尝不可。

VSCode中JSX体验不好

• 现象
  JSX内的HTML需要手动打<，没法自动补全。

• 问题
  缺少插件或配置。

• 解决
  Preference -> Emmet -> Include Language中添加如下内容，参考。

  "emmet.includeLanguages": {
      "javascript": "html"
  }

JetBrains Toolbox登录失败

• 现象
  授权登录后Toolbox显示登录错误信息：Fail to update和Fail to fetch user details: Host oauth.account.jetbrains.com not found。

• 问题
  proxy未设置。

• 解决
  先在Windows Setting -> Proxy找proxy设置，再根据其找到对应的address和port。

Node.js里解析query参数

• 现象
  写完in接口后新加了几条数据后竟然显示出错，第二页显示不对，即使page=2&limit=5，但返回列表的竟然比五条多。报错显示dataSource length is less than pagination.total but large than pagination.pageSize。

• 问题
  开始觉得要么是fetch时候传错参数了，要么是我的in写错了，后来在后台API处log了一下截取列表的范围，发现当page=2&limit=5的时候log出的是splice(5, 55)而不是splice(5, 10)，那问题就清楚了，因为在slice(page * limit, page * limit + limit)处page和limit都是字符串。

• 解决
  在Node.js里解析query parameters需要注意类型问题，避免将string类型误认为是number。

Git多人协作

• 现象
  git stash后工作目录空了，一时不知如何找到那部分内容。

• 问题
  不太熟悉git，乱用命令。

• 解决
  其实不太记得了，大概是git stash apply。
  以后要先fetch再commit的话，就按照如下方式：

  • 先git add .，但是如果只add是没用的
  • 再git commit -m "message"，保存好现场
  • 再git fetch，它是安全的
  • 再git rebase，它会提示我有冲突
  • 再去修冲突，过程中也要记得仔细检查，防止修错
  • 修完冲突就git rebase --continue
  • 然后就可以git add、git commit、git push了

npm run build

• 现象
  build出来的静态页面的静态资源无法获取到。

• 问题
  路径问题，build出来的东西的路径是直接在C盘上的。

• 解决
  在package.json文件中添加一行"homepage": "./"，参考。

修改react项目的默认启动端口

• 解决
  在package.json中将这个：
  "start": "react-scripts start"
  改为这个：
  "start": "PORT=3006 react-scripts start"

nginx配置路由

• 背景
  ip和域名的映射并不能将端口也映射上去(好像是)，也就是说当x.xxx.xx.xx和domain.com映射上的时候，如x.xxx.xx.xx:port是没法映射上domain.com:port的，而nginx就是一种解决映射的办法(这里理解不太深入，之后补)。

• 解决

  • 在conf/nginx.conf上修改配置，参考：

    server {
        listen port;
        server_name domain.com;
        location / {
            proxy_pass http://xxx.x.x.x:port;
        }
    }

  • 重启nginx
    使用命令nginx -s refresh。
  • 检查配置是否正确
    看看访问x.xxx.xx.xx:port和domain.com:port是不是同一个内容。

CORS跨域

• 解决
  前后端要协商一些特定的用于CORS的头部字段，这次前端带上了withCredentials=true，具体实现是在fetch的init中加入credentials: 'include'。

• 注意事项
  如果是本地文件/localhost用CORS解决跨域，是没有办法拿到Access-Control-Allow-Origin头的，或者浏览器会将请求头的Origin设置成null，参考、参考。

OPTIONS预请求

• 问题
  浏览器会在每次发送请求的时候预先发送一个OPTIONS请求头，用于验证后端是否支持跨域，如果支持则继续发送实际请求，否则返回错误信息。之前以为这样的话我就会通过接口拿到两次响应，不过实际上的fetch接口或axios的接口都会对它做出一定的处理，这样的话应用其实是感知不到的。不过在性能上会存在一些问题，因为每次需要法请求的话都会额外多发一个。

• 解决

  • 使用简单请求而不是非简单请求来避免发送OPTIONS，不过有很多首部字段的限制。
  • 使用Access-Control-Max-Age缓存住OPTIONS的响应来避免发送OPTIONS，不过也很局限，每个不同的URL都没法共享这个缓存。

Object的key

• 注意事项
  避免用String以外的类型作为Object的key，以免碰到预料外的类型转换。一些忽视的细节在邮件里被其他小伙伴提醒：for in遍历对象属性并修改可能会污染原型链，应使用Object.keys(obj)；如果希望用Number作为key，就不要偷懒用Object来存，而是直接使用Map。

判断对象是否为空

• 解决
  Object.keys(obj).length === 0 && obj.constructor === Object，参考。

设置父元素高度随子元素变化

• 解决
  设置overflow: auto，应该还有很多其他方法，参考。

后记

还有很多学习的地方，要开一开Todo List了。还有就是现在除了技术书其它都读得很少，写文章也有点写不出来了…视线停在屏幕上久久不知道怎么下笔…什么时候才有空去看看课外书呢？