분류 전체보기

회사에서 60장 분량의 API 규격문서를 하드코딩해서 올리라는 말을 듣고 잠시간 할 말을 잃었습니다.. API연동 문서에는 많은 테이블과 텍스트들이 있었지만 그 중 가장 관건은 request와 response 예시인데 이렇게 되어있는 내용을 이렇게 보기 좋게 구분이 되어있는 예쁜 소스 코드 형태로 만들어야 하는 작업이 생겼습니다. 일일이 span태그로 class를 주는 것은 너무 가혹한 것 같아 부랴부랴 라이브러리가 없는지 찾아보았습니다. 그래서 결정된 오늘의 포스팅 주제!! code 구문 강조하기 많은 개발자들이 웹사이트에 글을 작성할때 코드 부분을 실제 에디터에서 보이는 것 처럼 강조하기 위한 방법으로 highlight.js를 사용합니다. 이것을 사용하기 위해 npm 또는 yarn을 사용하여 프로젝트..

React는 컴포넌트를 렌더링 한 뒤, 이전 렌더된 결과와 비교하여 Dom 업데이트를 결정합니다. 이 때 재렌더가 필요없는 컴포넌트의 렌더를 방지하여 이 업데이트 속도를 높일 수 있는 방법들이 있는데 정확한 역할과 차이점을 구분하기 위해 정리해 보고자 합니다. 1. React.memo React.memo는 Higher-Order Components(HOC)입니다. (HOC란 컴포넌트를 인자로 받아서 새로운 컴포넌트를 return해주는 구조의 함수) HOC의 예시 (Auth에 따른 페이지 권한 검사) // Auth라는 HOC를 통해 권한에 따라 라우팅 처리 function App() { return ( ); } export default App; // Auth validation example import..

react에서 네트워크 통신을 도와주는 api인 axios와 fetch. 이것은 어떨 때 사용하고, 무슨 차이가 있는지, 그래서 사용법은 어떤지에 대해서 정리해보려한다. 저는 camp-us프로젝트를 하면서 axios를 먼저 써보고, 회사 프로젝트인 Hisms에서는 fetch를 써봤었는데, 정확하게 둘의 차이를 알고 한게 아니라 일처리하기 급급해서 개념정리를 미룬 상태였습니다.ㅠ 그래서 약간의 여유가 있을 때 정리해두려고 합니다. Axios Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. axios 지원하는 브라우저 사용하기 좀 더 편리하다. -> 개인적인 생각으로는 사용법이 살짝 다르지만, 전체적으로 비슷한데, axios 가..

이번에 맥북 에어를 샀습니다..🥰 맥북은 처음 써봐서 아직 적응 못하고 어버버 거리는 중인데요. 곧 개발에 들어갈 프로젝트에서 맥북으로 작업하려고 환경을 셋팅하던 중 제가 기존에 자주 사용하던 git bash를 설치해보려 합니다. windows와 mac OS는 아무래도 설치하는 것도 커맨드도 다른 것이 너무나도 많네요. 검색 할 때 여러 탭을 켜고 반복적으로 화면을 끄고 켜기가 아직 적응을 못한 탓인지 힘들게 느껴져서 이 한 페이지에 다 담을 수 있으면 좋겠습니다. 먼저 git bash를 검색하면 mac에서는 Homebrew를 먼저 설치하라고 뜹니다. 1. Homebrew 홈페이지 접속 아래 페이지로 접속해줍니다. https://brew.sh Homebrew The Missing Package Manag..

이유는 모르겠지만 커밋을 추가하려니 갑자기 다음과 같은 에러메세지가 떴습니다. fatal: Unable to create 'C:/Users/user/Desktop/project/6th-camp_us-fe/.git/index.lock': File exists. Another git process seems to be running in this repository, e.g. an editor opened by 'git commit'. Please make sure all processes are terminated then try again. If it still fails, a git process may have crashed in this repository earlier: remove the fil..

1차 프로젝트가 눈 깜짝할 사이에 끝났다. 약 한달정도 되는 기간 내내 매일 성장하는 기쁨을 느끼면서 코딩할 수 있게 해준 우리 팀원분들 모두 고맙습니다~ 💛 여러분들과 함께했기 때문에 프로젝트를 잘 마칠 수 있었어요! 🥳 🏆 프로젝트 소개 최종 결과물 확인 : https://www.camp-us.ga 우리가 진행한 프로젝트는 전국 캠핑장 추천 플랫폼 'CampUs'이다. campUs에서는 전국 3000 여개의 캠핑장 정보를 제공하고, 사용자의 위치에 따라 가까운 캠핑장을 추천해주는 서비스를 제공한다. 각 캠핑장별로 이용 후기를 남기고, 커뮤니티를 통해 캠퍼들간의 유용한 정보를 교류할 수 있다. ⌛ 진행기간 2022.01.18 ~ 2022.03.01 (5주) 📌 팀 구성 (TEAM COOP) 프론트엔드 ..

작업 내용 리뷰 리뷰 길이에 따라 더보기 버튼 생성 기존 Figma 디자인 상에서는 리뷰가 길어지면 3줄 이상이 되었을 때 ...으로 표시하도록 하였는데, 생각해보니 그렇게 하면 리뷰 내용 전체를 아무도 볼 수 없는 UI가 되어버렸다. 이 부분을 modal로 처리할 지, 더보기 버튼을 추가할지 고민하다가 인스타그램을 참고하여 일정 텍스트 길이보다 크면 더보기 버튼이 나타나고, 더보기 버튼을 클릭하면 전체 작성 내용이 표시되도록 수정하였다. 더보기 전 더보기 후 👍시도 // ReviewsList.jsx import React, { useState, useEffect } from 'react'; import './ReviewsList.styles.js'; const ReviewsList = ({ review..

작업 내용 리뷰 antd 커스텀 우리 프로젝트의 메인 컬러는 햄버거바에서 보이는 바와 같이 연두색에 가까운 초록색인데, React UI library를 앤트디자인으로 사용하였더니 default컬러가 저런 파란색으로 나왔었다. 우리가 직접 css한 부분은 초록색인데 antd를 사용한 부분만 푸릇푸릇하니 통일성이 없어보여 이 부분을 우리가 커스텀하기로 했다! 👍시도 less를 글로벌로 설치한다. npm i -g less antd.less 파일을 불러오기 쉽도록 터미널로 node_modules에 직접 들어가서 커스텀 코드를 작성할 less 파일을 생성한다. cd node_modules/antd/dist touch my_custom.less 디렉토리의 node_modules/antd/dist 경로에 가보면 my..