본문 바로가기

Next.js

 (6)
[유데미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기 - 프로젝트주차 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 : 선언만 ..

티스토리툴바