전체 글 썸네일형 리스트형 HTML과 CSS 완 드디어 다 만들었다! 최근 1주일동안 개인적으로 일어난 일들이 많아서 예상보다 3일이나 늦어졌다! (빨리 취업하고 싶은 이유중 하나) 하지만 앞으로가 중요하니 열심히 임하자! 작업 방식은 전과 같이 구조를 먼저 짜고 css를 입혔다. 하다보니 아래 이미지의 사이드바를 컴포넌트로 빼지 않았어서 구조를 바꿨어야 했는데 확실히 수월했다! (역시 사람은 배워야해,,) 앞으로 기능 넣을것이 너무 기대된다! 히히 더보기 HTML로 구조를 만들고 CSS로 옷을 입히자! HTML로 먼저 구조를 짜고 CSS로 옷을 입혔다! 처음에는 디자인을 보면서 구조를 짰다. 그 후 className과 id를 넣고 display 나 flex-direction 속성을 넣으며 디자인에 맞는 위치에 글이나 박스를 배치했고 배경색과 폰트사이즈, 마진 값을 줬다! 이런식으로 하니 나중에 css를 수정할때 속성이 꼬이지 않아 수월했고 무엇보다 더 재밌었다. 그 후 완성됐다! 이 페이지의 소요시간은 약 1시간 30분? 정도나 걸렸다! (화장실 가는 시간 빼면 더 줄지도,,) 저기 은행 마크 아래 최고연 이라는 글씨나 상세한 CSS 조정에 시간이 소요됐다. 더보기 프로젝트 디자인을 HTML과 CSS로 이틀간 하루에 3페이지씩 만들었다. 이제 4~5 페이지만 만들면 HTML은 끝이다! 처음 홈 화면 만들때보다 나중 갈수록 속도가 더 빨라지는게 느껴져 기분이 좋다. 더보기 Figma로 디자인 하기! 화면 디자인을 Figma를 활용해서 만들었다! 피그마 구경 주소 https://www.figma.com/file/OlOR8cfXc8RhmB9sfbaDPr/%EC%A0%81%EA%B8%88%EC%A0%80%EA%B8%88?type=design&node-id=0%3A1&t=mXCOCiT2oDW6wCDg-1 페이지 이동을 구현했고 여러기능들을 넣고 뽐내고 싶었지만 화면 구성상 넣지 못한것이 아쉽다. 디자인 설명을하자면 3가지 색으로 최대한 심플하게 풀었다! 이런식으로 디자인했다! 더보기 Next.js 1 (라우팅) Next.js 는 리액트 문법이 기반이기 때문에 기존에 리액트를 사용해봤다면 수월하다! (개꿀) Next.js는 자동 라우팅 기능이 있다! 자동 라우팅이라니! 리액트에서는 BrowserRouter, Routes, Route = path 같이 여러 작업을 했었는데 next.js 는 사용하지 않는다! 사용법! 위 사진처럼 app 안에 새로운 폴더를 만들어 주면 된다! 그럼 자동으로 폴더 명으로 url이 생성된다. 그리고 이렇게 page.js를 만들어 주고 우리 React 쓰듯이 아래처럼 만들어주면 이렇게 나온다! 만약 /hello/world 라고 만들고 싶을때는? 위에서 app 폴더에서 한것처럼 하면 된다! 더보기 Next.js를 알아보자! Next.js는 무엇이냐! 1. React 라이브러리의 프레임워크로 Server side rendering (서버에서 HTML다 완성해서 보내주는 것)을 할 수 있다. 2. client side rendering으로도 할 수 있다. 3. 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR) 도 가능하다! Next.js를 쓰는 이유! SEO(Search engine optimization)를 위한 SSR(Server side rendering) 이전에는 React 나 vue같은 라이브러리를 써서 client side rendering (CSR)을 했었다. 그 이유는 화면이 부드럽게 렌더링 되고되고 특정 부분의 .. 더보기 프로젝트 회고 일주일 전 메인프로젝트가 끝이 났다!! 이 글에 프로젝트를 진행하면서 있었던 일들을 적어보려 한다. 팀 구성 난 프로젝트 팀을 정할때 랜덤으로 진행했다. 더 많은 동료 개발자 분들과 소통을 하는 경험을 하고 싶었기 때문이다. 그런데 내가 있던 팀원분들 중 과반수가 부트캠프 중도포기를 하셨고 난 다른 랜덤 팀으로 가게 되었다. 그래도 둘째 날부터 다른팀에 합류하게 되어 다행이었다. 기획 옮겨온 팀에서는 워터폴 방식으로 프로젝트를 진행하시기로 하셨고 프로젝트 주제와 레이아웃이 나온상태였다. 나는 팀원분들과 요구사항 정의서와 화면 정의서를 작성했다. 그 과정에서 큰 마찰 없이 충분히 소통해서 원만하게 기획 할 수 있었다. 그리고 우리 팀의 규칙을 정했는데 매일 아침 9시에 회의를 하며 각자 오늘 할 일과 건의.. 더보기 JSON 서버 만들기! JSON 서버를 왜 만드나 이번에 프로젝트를 하면서 느낀 점이 있다. 바로 내가 원하는 시점에 api가 완성되지 않는다는 점이다. 완성되기까지 마냥 기다릴 수 없기 때문에 나는 api가 없어도 내가 가짜 서버를 만들어서 테스트를 해야겠다고 강하게 느꼈다. 그래서 시작하는 JOSN 서버 만들기! JSON 서버 란? JSON 서버는 진짜 서버는 아니지만 JSON 데이터를 주고받을 수 있게 필요한 것을 제공해준다! JSON 서버 만들기 npm install -g json-server 먼저 https://www.npmjs.com/package/json-server 이 사이트에 들어가서 터미널에 위에 사진 처럼 json-server를 설치해 준다! 그리곤 프로젝트 최상위에 폴더와 파일을 만들어주고 DB.json .. 더보기 이전 1 2 3 4 5 6 7 다음
