토이프로젝트 (20) 썸네일형 리스트형 programmerGround 검색창 만들기(2020.02.07) 안녕하세요! 새콤하고달콤입니다. 오늘은 programmerGround 프로젝트에서 구현한 검색창 만드는 방법에 대해서 살펴보겠습니다. 결과는 다음과 같습니다. 1. focus 적용 전 2. focus 적용 후 3. 알아간 것들 1. focus 속성 : input의 경우 focus 속성을 이용하여 input 클릭 시 효과를 구현할 수 있었습니다. &:focus { background-color: #fff; transition: all 0.2s ease; box-shadow: 0px 10px 10px 0 rgb(0 0 0 / 10%); outline: none; } 2. box-shadow : css 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐.. 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.. tsconfig.json 설정, eslint, prettier 패키지 설치(2021.01.28) 안녕하세요! 새콤하고달콤입니다. 오늘은 tsconfig.json 파일과 eslint 설정을 진행하려고 합니다. * tsconfig.json - 자바스크립트는 동적인 언어 즉, 런타임 환경에서 자료형이 변경되기 때문에 자료형 자체의 체크가 굉장히 어렵다는 단점이 있는데 이러한 점을 보완하기 위해서 typescript를 사용합니다. - tsconfig.json은 typescript로 짜여진 코드를 javascript로 변환해주어야 하는데 변환하기 위한 설정을 관리하는 곳 - compilerOptions : - allowJs : 자바스크립트 파일 컴파일 허용 여부 - checkJs : .js 파일의 오류 검사 여부 - noImplicitAny : 'any' 타입으로 구현된 표현식 혹은 정의 에러처리 여부 { .. 메인페이지 UI 구상(2020.01.28) 안녕하세요! 새콤하고달콤입니다. 오늘은 ProgrammerGround의 메인페이지 UI를 구상하는 시간을 가졌습니다. 일단 header부분은 로고, 방 관련 메뉴를 관리할 아이콘, 알림, 내 계정 정보를 담았습니다. 중간에 검색창과 계절변화, 다크모드 화이트모드로 나눠서 보여질 수 있도록 구현할 예정입니다. 아래는 각 프로젝트의 정보를 담는 컨테이너를 3개씩 분배할 예정입니다. 프론트엔드에서 필요한 기술 - 다크모드, 화이트모드, Fixed 모드 구현 - 무한스크롤 - debounce, throttle backend - sequelize 선언, model 설정, frontend - prettier 설정(2021.01.27) * sequelize란? - Node.js에서 가장 많이 사용하고 있는 ORM입니다. - Promise 패턴 기반의 Node.js ORM입니다. Chaining을 통해서 callback hell에서 탈출할 수 있습니다. - async await의 깔끔한 코드를 작성할 수 있습니다. * ORM란? - Object Relational Mapping(객체-관계 매핑)의 약자입니다. 자동으로 DBMS의 데이터를 객체 형태로 변환해줘서 더 객체 지향적인 코드를 생산할 수 있도록 도와줍니다. 이를 통해 개발자는 데이터를 가지고 어떤 작업을 할지에만 집중할 수 있습니다. 또한 손쉽게 DBMS를 변경할 수 있어서 제품이 높은 이식성을 가질 수 있게 됩니다. // db/index.js - sequelize 모듈을 가져옵.. 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.. koa 관련 패키지 설치 및 apollo server 패키지 설치 (2021.01.25) 안녕하세요! 새콤하고달콤입니다. 오늘은 간단하게 koa와 관련된 패키지, apollo server와 관련된 패키지를 설치해보았습니다. 먼저 프론트엔드는 next와 apollo server를 연동하기 위한 패키지 및 graphql 관련 패키지를 설치하였습니다. 백엔드는 koa와 관련된 패키지 및 cors 패키지를 설치하였습니다. 1. 프론트엔드 "@apollo/react-hooks": "^4.0.0", "apollo-boost": "^0.4.9", "apollo-client": "^2.6.10", "graphql": "^15.4.0", "next-with-apollo": "^5.1.0", - @apollo/react-hooks : apollo를 hooks 문법으로 사용하기 위해서 설치합니다. - graph.. 이전 1 2 3 다음
