본문 바로가기

분류 전체보기

 (131)
부스트캠프 회고 - 멤버십 4주차 day5 성능 vs 가독성 Tradeoff 변경이 잦을 경우 가독성에 더 무게가 쏠린다 실행횟수가 많은 infrastructure 코드일 경우 성능이 중요해진다 InnerHTML 사용 시 주의점 element.innerHTML += `some html...` 형식으로 사용하는 경우, DOM Tree를 새로 그리기 때문에 붙여놓은 이벤트 리스너가 다 떨어지는 것을 주의 나름 이번주 열심히 잘했다고 생각했는데, 마스터클래스 코드리뷰때 보니 나보다 훨씬 많이, 잘하신 분들이 많다. 한분은 로그인 + 사용자별 페이지까지 구현하셨다... 거의 상용 서비스급 아직 갈길이 멀고, 또 배울것이 많구나! 조만간 추석을 지나면 그룹프로젝트를 시작할텐데, 좋은 팀원 분들과 매칭될지(또는 구할 수 있을지) 고민이다. 팀원으로 받아달라..
부스트캠프 회고 - 멤버십 4주차 day4 Drag & Drop API 사용하기 drop event 핸들링하기 SQL SELECT 문에서 조건 넣기 비교연산자로 갱신된 데이터만 가져오기 ORDER BY 연산자 + DESC 키워드로 내림차순으로 데이터 가져오기 Express 미들웨어 처리 모든 처리내용을 미들웨어로 리팩토링하고, route에서는 미들웨어 등록만 처리하기 2번째 프로젝트의 (사실상)마지막 날이다. 선택사항, 권장사항은 안되더라도 필수 구현사항은 모두 만들고 싶어서 새벽 4시까지 코딩을 했다. 새벽까지 버닝하니 금요일이 힘들다... Slack에 파란불들을 보니 나만 버닝한 건 아닌거같다 REST에서 특정 객체의 일부 데이터만을 변경하는 것이 까다롭다. PUT은 모든 데이터를 덮어쓰기 하는 느낌인데, 일부 정보만 변경이 필요한데 Clie..
부스트캠프 회고 - 멤버십 4주차 day3 Drag & Drop API 사용하기 드래그 대상에 draggable = true 설정 drop target에 dragover 또는 dragenter 이벤트 enable 시켜주기 브라우저에서 기본으로 drop을 막아놓기 때문에 event.preventDefault를 해주어야 한다 Modal창 직접 custom으로 만들어서 띄우기 Drag & Drop이 API를 쓰니까 은근히 금방 UI는 구현했다. 추상화는 위대하구나... 이걸 API 없이 구현하려면 얼마나 어려울까.... 시간이 오래 걸렸지만, PR 리뷰사항에 따라서 좋은 Frontend 구조를 고민해보고 리팩토링 했다. 마스터 클래스 시간에 내가 구현한 사항을 이야기했다. 중간중간 쉴때 턱걸이 한 세트씩 하기 놓쳤던 사소한 요구사항 까먹지 않고 구현하기
부스트캠프 회고 - 멤버십 4주차 day2 CORS Cross-Origin Resource Sharing 도메인 간 resource 접근 권한 부여 브라우저에서 CORS가 세팅되지 않으면 막는 경우가 있다 나중에 찬찬히 더 읽어보기! express에서 204 status를 보내주는 경우 body가 자동으로 비어서 간다 클라이언트쪽에서 res.json()으로 받지 말고 따로 코드를 보고 처리를 해주어야 한다 Chrome 개발자도구 디버거는 신세계 breakpoint 걸면 거의 모든 요소에 커서 올려서 inspect가 가능하다 vscode 디버거는 아직 쓸줄 모르겠는데... 빨리 배워서 BE 디버깅을 이걸로 해야겠다 Dev 서버 모드를 한번 세팅해두니까 엄청 편하다 어제 세팅하느라 좀 고생했는데, 백엔드 프론트엔드 모두 변경사항에 따라서 자동 갱신되..
부스트캠프 회고 - 멤버십 4주차 day1 Webpack 세팅하기 entry 포인트 세팅하기 HtmlWebpackPlugin으로 자동 html 생성 & js bundle include 파일 확장자 별 loader 세팅 webpack-dev-server 패키지 이용한 devServer 세팅 proxy로 api 서버 포트와 이어주기 concurrently 패키지로 BE/FE 수정 시 reload 되도록 만들기 Babel 세팅하기 브라우저별 호환 설정 브라우저 점유율에 따른 설정 Windows 10 hosts 파일 수정해서 alias 세팅하기 C:\Windows\System32\drivers\etc\hosts 경로에서 파일 수정 IP와 alias를 텍스트 파일에 관리자 권한으로 수정 후 ipconfig /flushdns 명령어로 refresh 하기 개..
부스트캠프 회고 - 멤버십 3주차 day5 MySQL 추천 Practice select * 쓰지 않기: 성능 + 코드 가독성 pool을 써서 connection 재활용 prepared statement 쓰기: 성능 + sql injection 방지 멤버십에서 멘탈 & 체력 관리방법(feat.이전기수캠퍼님들) 다른 사람과 비교하지 않기 수면 + 식사 + 운동으로 자기관리 해주기 처음 마음가짐을 되새기기 오늘 전 기수 수료생 분들이 와서 간단한 발표를 해주셨다. 딱 멘탈, 체력적으로 힘든 시기에 들어서 확 와닿았다. 개인적으로 좌절보다는 어떻게든 따라가려고 하는 편이라 다른 분들에게 자극 받는 것은 좋다고 생각하는데, 이것을 넘어서 지쳐서 포기해버리지 않도록 해야겠다. 출퇴근 하던 이전 기수에서도 운동을 하셨다고 한다. 나도 조금이라도 시간을 내야지..
부스트캠프 회고 - 멤버십 3주차 day4 VSCode 플러그인으로 eslint, prettier 등록해서 쓰기 ./vscode/settings.json 을 아래와 같이 잡아주기 { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": false, "[javascript]": { "editor.formatOnSave": true }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } HTTP method 별 HTTP status Code GET: 성공 - 200 OK(성공) POST: 성공 - 201 Created(성공), 실패 - 422 Unprocessable Entity(중복 데이터 등으로 실패) ..
부스트캠프 회고 - 멤버십 3주차 day3 express-session 패키지 사용하기 자동으로 접속자에게 sid를 생성해서 발급 secret을 이용해서 sid가 서버에서 발급한 것인지 검증 미들웨어로 등록하면 req.session에 붙어서 편리하게 사용가능하다 dotenv 패키지 사용하기 dotenv.config()만 하면 현재 디렉토리의 .env 파일을 끌어다 쓸 수 있다 민감한 정보(ex. DB 접속용 host, password)의 경우 코드에 포함하지 않고 .env로 사용 express에서 정적 html 호스팅하기 express.static(...some directory..., { extensions: ['html'] })을 하면 public 디렉토리에 바로 html 파일을 넣어서 호스팅이 가능하다. html 확장자를 url에 넣지 않아..

티스토리툴바