본문 바로가기

프로젝트 회고21

코드 리뷰 사이트 개인 회고 4일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 다뤄볼려고 한다. 1. 반응형.... 정말 하.... 재밌다 ㅎㅎ : 내가 만든 프로젝트 한계점은 여러 사용자의 유저들이 이 프로젝트를 사용할 수 없다는 것이다. 즉 데스크탑을 기준으로 프로젝트를 보여주기 때문에 테블릿 , 모바일 환경에서 들어오는 사람들은 이 프로젝트를 보지 못한다. 그래서 나는 이 프로젝트의 사용성을 높이기 위해서 반응형을 구현했다. 반응형을 구현할 때 사용한 css 전처리기는 scss 였는데 이 scss가 굉장히 간단해서 생각보다 반응형을 구현하는데 어렵지 않았다. 실제로 반응형을 위한 로직은 다음과 같다. $breakpoint-mobile: 335px; $breakpoint-tablet: 758px; $breakpoint-.. 2023. 8. 27.
코드 리뷰 사이트 개인 회고 3일차 오늘은 코드 리뷰 사이트를 만들면서 개인적으로 어려웠던 부분들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 코드 리뷰 사이트 매인 페이지 디자인 수정 : 사실상 어제까지 만든 코드 리뷰 사이트에서 가장 수정해야 하는 부분은 메인 페이지 디자인이었다. 그 이유는 다음과 같다. 첫번째 ux적인 측면에서 사용자가 볼 수 있는 자료가 별로 없다는 점이다. 어제까지 만든 코드 리뷰 사이트에는 사실상 사용자가 볼 수 있는 정보가 한정적이었다. 태그도 자신이 선택한 태그를 넣을 수도 없었으며 답변이 되고 있는지 아님 안되고 있는지도 확인할 수 없었다. 따라서 유저가 이 사이트를 볼 때 이 사이트가 코드 리뷰 사이트인지 한 눈에 살펴보기에 굉장히 어려웠다는 점이다. 그래서 나는 디자인을 다음과 같이 수정했다. 위 사.. 2023. 8. 25.
코드 리뷰 사이트 개인 회고 2일차 오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 이야기를 나눌려고 한다. 1. lazy loading 어떻게 확인하는 가? : 내가 어제 lazy loading에 대해서 언급하면서 가장 궁금했던 점은 lazy loading 을 어떻게 확인하는 것이었다. 사실상 lazy loading 의 핵심은 번들러에 있다. 즉 페이지에 들어올 때 응답으로 어떤 컴포넌트들을 줄 것인지 전체 번들을 줄 것인지 아님 페이지 마다의 모듈을 줄 것인지 바로 이 부분이 핵심이었다. 그래서 나는 요청과 응답을 확인할 수 있는 개발자 도구에 네트워크 탭에서 확인을 해보았다. 네트워크 텝을 보니 lazy loading이 구현됐는지를 확인할 수 있었다. 증거는 다음과 같다. 2. 코드 하이라이팅 에디터 어떻게 구현했는가? :.. 2023. 8. 24.
코드 리뷰 사이트 개인 회고 1일차 오늘은 내가 코드 리뷰 사이트 매인 페이지를 제작하면서 느꼈던 어려움들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 폰트 어썸 CDN : 사실상 CDN이라고 하는 서비스는 분산 처리 시스템을 의미한다. 이는 서버를 한 군데에다가 넣어두는 것이 아니라 여러 곳에 배치하여 클라이언트와 서버 사이에 물리적인 거리를 줄인다. 또한 이 서버는 캐싱 서버이기 때문에 초기에 들어오고 나서 두번째부터는 캐싱이 된다는 장점이 있다. 하지만 여전히 물리적인 거리는 존재하기 때문에 속도는 낮을 수 밖에 없다. 그 뿐만 아니라 CDN 시스템에서 내가 원하는 폰트를 가져오기 때문에 내가 이 폰트를 압축시키지 못한다는 점도 문제이다. 이는 결과적으로 성능과도 연관되는 문제이기 때문에 이번에 나는 폰트를 CDN 서비스를 통해서 .. 2023. 8. 23.
TodoList redux 버전에 대하여.... 오늘은 오랜만에 redux에 대해서 살펴보려고 한다. 내가 TodoList를 redux로 만든 이유는 다음과 같다. redux는 안정성 측면에서 높은 평가를 받고 있다. redux의 경우 flux 패턴으로 이루어져있다. 즉 store , action , dispatch 개념을 통해서 안정성을 확보한 체로 문제를 해결할 수 있다. flux 패턴은 다음과 같다. flux 패턴 : https://minprogramming.tistory.com/entry/MVVM과-FLUX에-대하여 MVVM과 FLUX에 대하여... 오늘 나는 cs 스터디로 MVVM과 FLUX에 대해서 공부해보는 시간을 가졌다. 내가 MVVM과 FLUX에 대해서 공부한 이유는 다음과 같다. 1. 면접에 자주 나오는 질문이라서 2. MVC는 들어.. 2023. 8. 10.
TodoList Typescript 버전으로 만든 것에 대하여... 오늘은 TodoList을 Typescript로 변환하는 작업을 진행했다. 추가적으로 기능적 폴더 구조와 함께 React Js , Typescript를 통해 프로젝트를 만들었다. 그럼 여기서 이런 의문이 들었을 것이다. 왜 Typescript를 사용했는가? 그 이유에 대한 답을 얻기 전에 먼저 Typescript가 무엇인지를 Javascript와의 비교를 통해서 설명을 해보도록 하겠다. Javascript : 자바스크립트는 동적 타이핑 언어 , 즉 약한 타입의 성질을 가지고 있는 언어이다. 이와 같은 특성을 가지고 있는 언어로는 대표적으로 파이썬이 존재한다. 그렇다면 동적 타이핑 언어의 장점은 무엇일까? 동적 타이핑 언어의 장점은 코드의 생산성이 빠르다는 것이다. 우리가 예를 들어 C언어를 통해 게임을 만.. 2023. 8. 9.