개발새발 로그

이제 교육을 들은 지 두 달이 되었다. 어떤 변화가 있었는지, 부족한 점이 있었는지 확인해 보면서 MIL을 작성하려고 한다. 무엇을 배웠나? 두 달 동안 배운 것 또는 했던 것들을 간단하게 나열해 보았다. 1. 노션 클로닝 프로젝트 2. vercel로 배포하는 법 3. 무한 스크롤 UI 4. bread crumb 방식의 UI 5. 검색어 자동완성 기능 6. Drag and Drop 기능 - draggable="true" 속성, (dragstart, dragover,drop 이벤트) 7. CSS 8. SCSS 9. 타입스크립트 10. Vue 기초 이렇게 적으면서 생각해 보니 바닐라 JS 부분이 잘 기억이 나지 않는다.. 그래서 영상을 다시 봤는데 뜨문뜨문하게 기억만 나고, 만약에 지금 다시 해보라고 하면 ..

webpack을 이용해서 겨우겨우 HTML,CSS,JS를 구축했더니 이제는 이미지가 말썽이다. 나는 index.html에 태그를 써서 src 경로에 이미지 경로를 넣었다. 근데 webpack-server을 사용해서 서버를 돌렸더니 이미지를 못찾는다는 것이다.. 그래서 이게 뭘까 했다. 일단 문제는 내가 webpack-server을 돌릴 때 public폴더 즉 빌드된 폴더를 서버에 실행시키고있다. 그래서 public폴더에는 내가 개발 중인 src폴더에 있는 images폴더와 이미지 파일들이 없으니까 오류가 생기는 것이다. 문제는 바로 찾았다 그럼 어떻게 빌드 폴더에 이미지를 올릴까? 해결 영상 https://www.youtube.com/watch?v=FWyDqz3KzzI 바로 file-loader을 이용해..

1. npm init -y 2. npm install webpack webpack-cli --save-dev 3. webpack.config.json 파일 생성 4. webpack.config.json 파일 초기 구성( + mode 속성 추가) const path = require('path'); module.exports = { mode: "development", entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, }; 5. 파일을 실행할 서버 플러그인 webpack-dev-server 설치 npm install webpack-dev-server --save-dev 6. de..

webpack을 왜 쓸까? 간단하게 보자 우리가 아래의 파일을 사용한다고 가정하자 main.js about.js ... bootstrap.min.css fontawesome.css main.css ... 개발할 수록 파일이 너무 많아진다. 접속하는 유저는 이 파일들을 각각 다운로드를 받아야한다. 이렇게 많은 스크립트나 css를 하나의 스크립트, 하나의 css로 합쳐준다. 그러면 웹사이트는 빠르게 작동한다. 왜냐면 브라우저는 하나만 다운로드하면 되니까! 설치 방법 1. npm 초기화 npm init -y -y를 빼서 입력하면 직접 설정할 수 있다. 설치하면 package.json이 생성된다. 2. webpack 설치 npm install webpack webpack-cli --save-dev - webpa..

한 달간 내가 코드리뷰를 하면서 또는 받으면서 문제점과 보완할 점을 정리하려고 한다. 첫 번째 과제 1. if ~ else문을 사용하지 않고, ealry return 하기 2. 변수명이나 함수명을 예측할 수 있게 작성하기 3. 고차함수 사용하기 (for...of 대신 forEach사용하기) 4. 함수는 카멜케이스 (postOrder)로 작성하기 - 파스칼 케이스(PostOrder)는 X 두 번째 과제 1. 에러를 발생시킬 때는 try..catch와 throw문 사용 - console.log로만 출력하지 말기 2. if ~ else 대신 a = b || [] 사용하기 3. 적절한 줄바꿈으로 가독성 있는 코드 작성하기 4. 관련있는 로직끼리 묶어서 가독성과 유지보수성 높이기 -> 함수로 바꿔주기 세 번째 과..

📝오늘 배운 것 1. API 요청에서 limit와 start을 활용해 데이터를 누적해서 불러오는 방법 2. isLoading 변수 활용 - API요청을 여러번 하는 버그 해결 3. 총 데이터 갯수를 이용해서 모든 데이터를 불러왔다면 API요청을 그만두는 방법 4. 더보기 버튼으로 데이터 불러오는 방법 5. 스크롤 이벤트를 이용한 무한 스크롤 방법 6. 디바운스 기법과 쓰로틀링 기법 7. 스크롤 이벤트가 계속해서 발생하는 문제를 쓰로틀링 방법으로 해결하는 방법 8. InterSection Observer 기능 9. 이미지 렌더링이 되기 전에 observe가 되는 현상 해결 방법 10. 현재 렌더링 된 이미지를 제외하고 새로운 데이터만 렌더링하는 방법(스크롤이 초기화 되지 않음) 💡중요하다고 생각하는 것 1..

한 달 동안 배운 것들을 정리하고자 MIL을 작성하게 되었다. 몇 가지의 중점을 가지고 어떤 변화가 있었는지 곰곰이 생각해 보았다. 무엇을 배웠나? 한 달 동안 정말 많은 것들을 배웠다. 과거부터 내가 배워온 개발 지식들보다 더욱 알찼다고 생각했다. 1. 자료구조 2. 컴퓨터과학 3. 코딩테스트에 필요한 스택, 힙, 우선순위 큐, 트리, 이진트리.. 등 4. 바닐라 자바스크립트 5. DOM 조작 6. 모듈 7. Promise, async/await, fetch 8. history API를 이용한 SPA 등등.. 적은 내용 말고도 배운 것이 정말 많았다. 내가 배운 내용들을 생각하고 정리하면서 내가 놓치거나 기억하지 못해 다시 배워야 하는 것들이 있다고 생각했다. 이번 프로젝트가 끝나면 다시 한번 복기하는..

미루고 밀려 오늘 드디어 LocalStroage를 이용해서 textarea에 데이터를 입력하면 setTimeout으로 데이터를 일정시간 이후에 localStorage에 저장해 새로고침을 하거나 다른 곳을 이동했다가 와도 불러올 수 있는 기능을 배웠다. 근데 이런 간단한 앱을 만들면서도 로직이 내 머리로는 한 번에 이해할 수 없다는 것을 알게 되었다. 그래서 나는 앱을 만들 때마다 그림을 그려가면서 정확하게 해야겠다고 매일매일 생각한다.. 📝배운 것 1. validation의 습관화 2. 태그의 어트리뷰트로 querySelector("[name=title]"); 3. keyup이벤트 4. 제목과 본문을 구분할 때 getAttribute를 이용해 구분하는 방법 5. 디바운스 기법 - 자동저장 기법 6. te..