본문 바로가기

이모저모

 (189)
항해 99 일지(65) 오늘은 메인 컨텐츠의 뷰 작업을 마무리하였다. 이번 프로젝트에서 만족스러운 점은 API 호출을 최소화하고 최적화된 방식으로 컴포넌트 구조를 적용한 것 같다. 내가 할 수 있는 최고의 앱을 만들 수 있을 것 같다! 2주전에 본 네이버 코딩테스트의 결과가 아직 나오지 않았다. 하루에 몇 번씩 확인을 하며 기다리고 있는 중이다. 과연 ...!
항해 99 일지(64) 오늘 아침에 Next.js 의 중대한 단점을 알게 되었다. 바로, 페이지를 이동시에 깜빡거리는 문제점이 있다는 것이다. 이것은 UX에서 치명적인 단점이라고 생각되었고 그 이외에 배포의 문제라던지 등의 사항이 있어서 드랍하는 것이 낫다는 결론을 내리게 되었다. 그 이후에는... Next.js 에 맞게 세팅된 라이브러리나 파일구조 코드 등을 다 뜯어 고쳤다. CRA로 옮겼을 때의 산재하던 그 엄청난 길이의 오류 문구를 잊지 못한다... 그래도 어찌 저찌 다 해결할 수 있었다. 덕분에, 오늘 프로젝트 진전은 거의 없었다... 그래도 디자인도 거의 완성되었고 데이터도 다 받을 수 있는 상태이니 내일 집중하여 빠르게 진행해 볼 것이다!
항해 99 일지(63) - WIL09 WIL (Weekly I Learned) 이번주는 실전 프로젝트 과정 1주차로, 프로젝트를 선정하고 개발 진행을 위한 자료 조사 및 공부를 하였다. 이번주에 내가 배운것 Next.js 리액트 앱을 서버사이드 렌더링으로 구현하는 프레임워크 라우팅 Next.js를 사용하기 위한 디렉토리 구조 TypeScript JavaScript에 정적 타입을 명시할 수 있다. IDE(VSC)에서 함수나 변수 전달에서 어떤 타입이 오갈 것인지 정의할 수 있다. 런타임에서의 오류를 최소화할 수 있다. 불변성 관리 리덕스에서 불변성 처리를 하는 이유를 알게 되었다. 참조형 데이터는 값이 바뀌어도 해당 변수는 동일한 주소값을 보기 때문에 값을 통째로 바꾸어야 렌더링이 되기 때문이다. 프로젝트 세팅 Next.js , TypeScr..
항해 일지(62) 어제 이후로 페이지에 데이터를 출력해내는 작업을 하고 있다. 리덕스를 다루는데는 이제 꽤 익숙해져서 약간 재미가 붙은 것 같기도 하다. 서버 데이터를 스토어에 담아내는 것을 확인할 때마다 흐뭇하다고 해야하나.. ㅎㅎ 하루의 기온 정보를 받아와서 페이지를 구현할 때는 서버에서 별도로 보내주는 시간 정보가 담긴 배열을 사용해서 데이터를 분류해야했는데 알고리즘 테스트를 푸는 느낌으로 해결할 수 있었다. 여러모로 이번 프로젝트 재밌는 것 같다! (세팅할때는 힘들었지만😵)
항해 일지(61) 최소 단위 컴포넌트의 오류를 해결하고 와이어프레임을 토대로 디자인 초안을 적용하고 있다. 서버로 부터 받아온 데이터를 화면에 적용하려는데 프로퍼티에 접근할 수 없다는 오류를 또 겪었다. 원인은 initialstate 에 프로퍼티가 없어서 렌더링이 되는 첫 순간에 오류가 발생하게 되는 것이었다. 이 오류는 정말 겪고 또 겪어도 간과하는 것 같다. 잘 기억해두자. 그리고 나중에 스피너를 구현하기 위해서 리덕스에 is_loaded라는 상태값을 정의하여 이 값이 fale일 때 스피너를 출력하고 true 일 때는 컨텐츠를 표시하도록 할 것이다. 그리고 이번에는 제일 부모 컴포넌트에서 props로 데이터를 넘기는 것이 아니라 해당 데이터가 필요한 각 컴포넌트 내에서 useSelector로 뽑아내는 방식을 사용할 것..
항해 일지(60) 어제 막혔던 타입스크립트 관련 문제를 해결하고 필요한 최소단위 컴포넌트를 80프로정도 완료하였다. (하나가 문제인데, 오류는 다른 팀원분께서 해결책을 찾으시는 중이다.) 그 이후, 백엔드에서 API가 완성되어서 호출을 해본 뒤, 리덕스 모듈을 만들고 state에 데이터를 담아내는 것까지 하였다. 타입스크립트를 하면서, 느낀점이 자바스크립트에 비해 엄격하다는 것이다. 리덕스 모듈을 만드는데도 일일이 타입을 지정하고 그 방법들을 찾느라 조금 고생했다. 하지만 그만큼 오류를 방지한다는 면에서는 아주 뛰어난 것 같다. 여유가 날 때마다 타입스크립트의 이론을 공부해서 좀 더 능숙하게 프로젝트에 적용해야 겠다.
항해 일지(59) 생각보다 styled-component에 typescript를 적용하는 것에 시간을 많이 사용하였다. 기초적인 문법을 다시 공부하고 관련 자료들을 참고하면서 해보니 적용은 되었다. 다만, 함수를 props를 받아올 때 , () => void 로 타이핑을 하였는데, 내가한 것이 맞는 방식인지는 모르겠다.(함수는 받아와서 실행 자체는 된다. eslint로도 문법 오류가 나오지도 않는다.) 정말로 기본적인 세팅은 다 끝났으니 내일은 속도를 내어서 기본 레이아웃을 짜고나서 api 호출 세팅, 실제 데이터 받아오기(백엔드가 준비되었다면)를 해볼 것이다.
항해 일지(58) 오전에 디자이너분과 함께 전체회의를 진행하였다. 취합한 레퍼런스들을 토대로 컨셉을 윤곽을 잡았다. 요즘 트렌드의 디자인들을 보여주셨는데 하나같이 다 이뻤다... 특히 뉴모피즘이 너무 이뻤다. 예전의 아이콘을 보는 듯 한데 절제되어 있는 느낌이라 작은 보석처럼 빛나는 느낌이다(디알못) 그 이후에는 드디어 패키지 세팅을 마무리 하고 만들 페이지 컴포넌트들을 만들었다. 최소단위 컴포넌트는 내일 마무리 될 것이다!

티스토리툴바