토이프로젝트/programmerGround (14) 썸네일형 리스트형 header 컴포넌트 제작(2020.02.06) React를 이용해서 간단하게 header 컴포넌트를 제작하였습니다. 간단한 소스코드는 다음과 같습니다. export const HeaderContainer = styled.div` display: flex; justify-content: space-around; border-bottom: 1px solid #a2b8e1; height: 80px; padding: 0px 8px; `; export const HeaderMenuContainer = styled.div` display: flex; justify-content: center; width: 200px; height: 50px; padding-top: 20px; & img { padding-left: 5px; margin-left: 10px; w.. 메인페이지 UI 구상(2020.01.28) 안녕하세요! 새콤하고달콤입니다. 오늘은 ProgrammerGround의 메인페이지 UI를 구상하는 시간을 가졌습니다. 일단 header부분은 로고, 방 관련 메뉴를 관리할 아이콘, 알림, 내 계정 정보를 담았습니다. 중간에 검색창과 계절변화, 다크모드 화이트모드로 나눠서 보여질 수 있도록 구현할 예정입니다. 아래는 각 프로젝트의 정보를 담는 컨테이너를 3개씩 분배할 예정입니다. 프론트엔드에서 필요한 기술 - 다크모드, 화이트모드, Fixed 모드 구현 - 무한스크롤 - debounce, throttle token값 응답 객체에 담기, 라우팅(2021.01.27) 안녕하세요! 새콤하고달콤입니다. 오늘은 token값 응답 객체에 담기, 라우팅, UI/UX 만들기, 컴포넌트 제작을 진행해보았습니다. 1. token값 응답 객체에 담기 먼저 백엔드에서 넘겨준 header 정보에 token이 담겨있는 줄 알고 기대했었는데 담겨있지 않았습니다. 흠.. 이상하다 생각해서 network 탭에서 확인해보니까 network 탭에서는 잘 찍혀있었습니다. 구글링 결과 서버쪽에서 header를 추가해야되는데 아래의 header를 추가하면 됩니다. 아래의 header는 응답 객체에 옵션을 보여주는 옵션이라고 생각하면 됩니다. headers.set("token", userService.jwtLogin(jwtLoginDTO.getCode(), jwtLoginDTO.getOauthId())).. eslint 설정(2021.01.25) 안녕하세요! 새콤하고달콤입니다. 오늘은 eslint, prettier를 다시 설정하고 webpack bundle 파일을 생성해보겠습니다. 1. eslint - 자바스크립트 문법 검사를 해주는데, 그 문법 검사에 대한 조건에 다양한 옵션을 추가할 수 있습니다. - 일관적인 규칙을 적용하기 위해서 다른 개발자들이 많이 사용하는 config를 불러와서 사용하면 됩니다. - airbnb를 많이 사용하기 때문에 airbnb를 사용하였습니다. 저의 세팅 결과는 다음과 같습니다. module.exports = { parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint', 'react-hooks'], extends: [ 'airbnb', // or air.. programmerGround 구상 회의 👍 주요 토론 내용 github oAuth api 프론트엔드 백엔드호출 완료 github commit 수 graphql로 작업해야할 것 같음..(굳이 관리 안해도 될듯?) UI 구상 메인 페이지 : 프로젝트 제목, 원하는 사람의 수준(주니어, 시니어, 신입), 쓰이는 언어(여러 개) - 로고 도커 개인정보 페이지 : github 참고 플레이그라운드 페이지 : 인프런 참고 skill - enum으로 구현 https://www.otwojob.com/main 🧑🎓 각자 해야할 일 github total 수 세는 api 만들기 user 엔티티 작업 메인페이지로 이동 + 메인페이지 UI 구체적인 구상 및 구현 📖 참고자료 https://github-readme-stats.vercel.app/api?usernam.. programmerGround 프로젝트 개요 첫 소개글은 programmerGround 프로젝트를 소개하려고 합니다. programmerGround 프로젝트는 개발자들을 위한 커뮤니티라는 명목으로 기획한 프로젝트입니다. 팀원 : 4명 (프론트 1명 + 백엔드 3명) 팀 내 역할 : 프론트엔드 프로젝트 기술 프론트엔드 Webpack Babel Eslint Prettier React TypeScript Redux GraphQL Apollo Jest 백엔드 Spring Boot Spring Security Spring Data JPA QueryDSL Native Query - 최대한 안쓰는 방향으로 Node.js(Express) Socket.io TDD(Junit, MockMVC, ) BDD(Spock) ATDD 인프라 Redis MariaDB Mong.. 이전 1 2 다음
