본문 바로가기

스나이퍼팩토리

 (8)
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 5주차 후기 이번주에는 Alert 컴포넌트 제작과 코드 분석 페이지 퍼블리싱 작업을 진행했다. 1.Alert 컴포넌트디자인이 중간에 수정되면서 Alert 컴포넌트가 생겼다. 코드를 분석할 때 alert으로 상태를 표시하고 프로그래스 바를 파일 아래로 옮겨 디자인이 간소화되었다. 정보알림이라고 이름이 붙은 alert를 보면 모래시계가 기울여져 있는데, 이 속성은 animate-spin으로 돌아가도록 지정했다. 원래 정보알림은 대기중에 해당하는 alert인데, storybook용으로 만들었기에 저렇게 설정되어 있다.   코드의 props를 잠깐 살펴보면 isShow는 button을 보일지 말지 설정하는 것이고 linkHref와 buttonProps로 버튼에 설정될 페이지 이동과 onClick 이벤트를 대비한 모습니다. ..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 4주차 후기 1. lighthouse 점수를 위한 공부lighthouse는 프론트엔드 배포를 했을 때, 얼마나 최적화가 잘 되어있는지 점수로 나타내는 지표이다. 여러가지 요소가 있지만 일단 SSR을 SSG로 바꾸는 것을 공부했다.이렇게 react기반에서 데이터패칭을 한다고 생각하면 useState와 useEffect를 함께 사용해서 하는 것이 일반적이다. useEffect를 사용해서 패칭한 데이터를 state에 담아서 뿌려주는 방식이다. 사진에서는 더미데이터를 사용했다. 하지만 실제로 http 요청을 하는 상황에서는 이야기가 달라진다. useEffect는 컴포넌트 함수가 실행되고 난 이후에 실행된다. 처음 이 홈페이지 컴포넌트가 렌더링될 때 loadedMeetups는 비어있는 배열이다. 그 다음에 useEffect ..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 3주차 후기 3주차에는 지난 컴포넌트의 마무리와 퍼블리싱을 진행했는데, Landing 페이지의 퍼블리싱을 맡게 되었다. 이번 프로젝트에선 UI 테스트 자동화를 위해서 storybook을 적용했는데, 이것이 약간 어려워 작업속도가 더뎠는데, 만들어 놓고나니 활용도도 높고, 특히 공통 컴포넌트를 만들면 그 코드를 다른 팀원이 사용해야 하기에 storybook을 보고 용례를 짐작할 수 있어 좋았다. 아무래도 이런 것이 없다면 일일히 UI를 써봐야되고 시행착오에 시간이 소요되기에 개발과정이 더 오래 걸리게 되는 것이다. 이번에 스토리북을 사용하면서 조사한 내용를 정리해보려 한다.  1. 스토리북이란Storybook은 React, Angular, Vue 등의 분리된 UI 컨포넌트를 체계적이고 효율적으로 구축할 수 있는 개발 ..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 2주차 후기 본격적으로 프로젝트가 진행되었습니다. 우리가 맡은 프로젝트는스팩스페이스 - 플로디텍터-보안시장 이슈 시스템 개발인데, 일단 지난주에 작성한 다이어그램은 아래와 같다. 1) 객체 다이어그램2) 유즈케이스 다이어그램 생각보다 많은 기능이 있어 쉽지 않을 것 같아 보였다. 특히 실개발기간을 3주가 약간 넘는 기간으로 잡혀있어 일정이 빠듯해 보였다. 1. 공통컴포넌트첫째주는 공통컴포넌트 생성이 목표였다. 다음주 화요일까지 이 컴포넌트들을 활용해 퍼블리싱을 해야하니 꼼꼼하게 만들 필요가 있었다. 여태껏 필요하면 컴포넌트를 그때그때 만들어 썼고 재사용성을 고려해 만든 경우는 버튼 정도뿐이었다. 하지만 이번 교육기간에 배운 가장 큰 내용은 twMerge와 타입추론을 활용한 컴포넌트였다. 마지막으로 ts 프로젝트 작업..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 1주차 후기 일단 프로젝트 시작에 앞서 수업 때 했던 내용인데 정리하지 못했던 부분들을 모아보려고 한다.1. MongoDB 설정Database를 누르면 클러스터의 정보가 보이는데, 커넥트 버튼을 누르고 Driver를 클릭해 보이는 주소를 복사한다. 이미 연결한 이력이 있다면 선택하는 부분은 나오지 않고 바로 주소가 나올것이다.이런 형태의 주소인데 정보를 가린 첫번째 부분은 userName이 들어가고 부분에 을 포함해서 지워주고 클러스터를 생성할 때 설정한 비밀번호를 입력해야한다. 오른쪽 버튼을 클릭해서 복사한 뒤 env에 MONGODB_URL= 다음 입력해준다. 강의에선 첫줄의 느낌표 앞에 test라는 키워드를 붙여줬는데, test라는 공간에다가 DB를 생성하겠다라는 의미다. 아래 명령어로 패키지를 설치해주고,np..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기 이번주는 React에 대해 배웠다. Next.js 프로젝트를 이전에 해본적이 있음에도 useState, useEffect, useSearchParams 정도만 써봤는데, hook을 본격적으로 배우니 유용한 훅이 참 많다는 것을 느꼈다. useRef는 포커스, 텍스트 선택영역을 관리할 때 사용한다. 회원가입 페이지에서 폼 내용 중 모자란 부분에 자동으로 커서를 포커스해주는 기능이 바로 그것이다. 그리고 useId를 uuid를 생성할 수 있다. 렌더링 최적화에 대해서도 배웠는데, useCallback, useMemo, React.memo 라는 것으로 memoization 해서 불필요한 렌더링을 줄일 수 있다는 것을 알았다. 최적화를 위해 캐싱만 쓰이는 줄 알았는데, 속도를 더 끌어올리고 리소스를 아낄 수 있..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 1주차 후기 지난 월요일부터 수코딩님이 강의하시고 스나이퍼 팩토리에서 주관하는 일경험 프로그램에 참여하게 되었다.네개의 기업이 협업하는 프로젝트에 참여하여 기술을 경험하고 포트폴리오를 쌓을 수 있는 프로그램이다.  이전에 스파로스에서 했던 Next.js를 다시 잡으니 쉽지 않겠다는 생각과 함께 JS를 복습하는 시간을 가졌다. Node를 하면서 공부했으니 3번째로 다시 보는 내용일 것인데, 아직도 개념이 중구난방으로 헷갈리는 것을 보니 아직 취업하기엔 이르다는 생각만 남았다. 수코딩 님의 강의로 코딩공부를 시작했기에 감회가 새로웠던 점은 있다. 물론 그 때 JS까지만 듣고 간 터라 스파로스에선 고생하긴 했지만, 그래도 남는 것이 많은 경험이긴 했다. 거의 반년정도 놨던 프론트를 다시 한다고 생각하니 걱정이 앞서긴 하지..
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 1~2일차 후기 1. 자바스크립트 실행방법node 명령어를 사용하는 방법code runner 익스텐션을 사용하는 방법html 파일에서 script 태그를 사용하는 방법외부스크립트 -> 내부스크립트 -> 웹 브라우저의 개발자 도구 -> Console 탭에서 작성하는 방법 2. var, let, constvar는 변수, 사용하면 안됨.let, const : 재할당이 필요할 때는 let, 재할당이 필요없으면 const사용방법이 어렵다면 기본적으로 const로 쓰고, 분명 재할당된 식별자 때문에 에러가 뜬다면 let으로 바꾸면 된다. 3. 자료형1) 기본자료형 : 숫자, 문자열, 논리, 특수, 심볼숫자형 : 문자열(형) : 따옴표로 감싸져서 문자로 표현된 것.논리형 : true, false특수자료형undefined : 선언만 ..

티스토리툴바