프로젝트캠프 (4) 썸네일형 리스트형 [유데미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기 - 사전직무교육 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 : 선언만 .. 이전 1 다음
