분류 전체보기124

• 

  [커넥팅칩스] 프로젝트 3주차(09.18 ~ 09.24) 서버가 완성되고 api명세서를 기준으로 코드를 작성하기 시작하였다. 더미데이터로 코딩을 하다가 실제로 데이터를 받아서 코드를 작성하니깐. 너무 구조가 달라져서 시간이 오래 걸리고 버그도 많았다. 그리고 처음으로 typescript를 적용하였는데 원시타입만 하는줄 알았는데 useState나 event마다 다른 type을 지정해주어야 해서 너무 짜증 나고 스트레스받았다. 에러코드를 읽어도 이게 뭔 소리지?라는 게 대부분이라 더욱더 어려웠다. 1. axios로 데이터 받아오기 axios를 오랜만에 사용해서 다 까먹고 효율적으로 사용하는 방법이 있다고해서 정리를 해보았다. axiosConfig (GET, POST, PUT, DELETE) 서버에 요청을 보낼 때 GET, POST, PUT, DELETE를 사용하게.. 프로젝트/커넥팅칩스 2023. 10. 6.

• 

  이미지를 가져오는 여러가지 방법 프로젝트를 진행하면서 이미지를 어디에 보관하고 어떻게 가져오는게 좋은지에 대한 궁금증으로 인해서 블로그를 작성하게 되었다. 1. 어느 폴더에서 관리하는게 좋지? 📂 public webpack에 의해 관리되지 않는다. (minify되지 않고, content hash가 포함되지 않는다) 대신 원본이 build폴더에 복사된다. public 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수를 사용해야한다. 경로가 잘못 되었거나 파일이 없을 경우 컴파일단계에서 에러가 발생하지 않고, 404 에러가 발생한다.👎 CRA 문서에서 다음과 같은 경우에만 public 폴더에서 관리하는 것이 유용하고, 이외에는 src 폴더 관리를 추천한다. manifest.webmanifest 처럼 build된 결과물에서 특정한 파일 .. 개발 2023. 10. 6.

• 

  타입스크립트 제네릭(Generic) 타입 타입스크립트의 제네릭(Generic) 타입은 타입의 재사용성을 높이고, 다양한 타입에 대응하는 함수나 클래스를 작성할 수 있게 도와준다. 간단히 말하면 타입을 변수화 한 것이다. 제네릭 함수 다음과 같이 함수에서 꺾쇠 괄호와 대문자 T 변수로서 지정함으로서, 제네릭을 통해 코드에 선언한 타입을 변수화 하고, 나중에 타입을 정하는 식으로 유연하게 사용이 가능하다. function add(x: T, y: T): T { // 제네릭 : 꺾쇠와 문자 T를 이용해 표현. T는 변수명이라고 보면 된다. return x + y; } add(1, 2); // 제네릭 타입 함수를 호출할때 라고 정해주면, 함수의 T 부분이 number로 바뀌며 실행되게 된다. add('hello', 'world'); // 'hellow.. 개발/TypeScript 2023. 10. 6.

• 

  Atomic Design Pattern 리액트를 사용해서 프론트엔드 개발을 하고 있는데 컴포넌트를 어떻게 통일성있고 직관적으로 정리를 해야 팀원들과 소통을 할 때 편할까라는 의문으로 컴포넌트 정리방법을 공부를 하였다. 버튼의 통일성이 없으면 하나의 버튼이라도 위치와 역할에 따라서 폰트 크기, 배경색, 테두리의 둥글기 등이 페이지마다 다를 수 있다. 이렇게 된다면 개발시간이 오래걸리고 팀원들과의 소통에도 어떤 버튼인지를 설명하는 시간이 필요하여 불필요한 대화시간이 길어진다. 명확한 컴포넌트 설계 기준이 필요한 순간이다. Atomic design 위와 같은 문제는 디자인 시스템으로으로 해결 가능하다. 디자인 기초 요소들을 만들고 공통 컴포넌트를 만들면 된다. 아토믹 디자인은 다음과 같이 단계별 기준을 가지고 있습니다. 단계별로 추상적인 것에서 .. 개발 2023. 10. 5.

• 

  요소 크기의 단위와 rem을 사용하는 이유 프로젝트를 진행하면서 px보다 rem을 사용하는 게 좋다는 말은 들었는데 그 이유를 제대로 알지 못하여서 블로그를 작성하게 되었다. 1. 요소 크기의 단위 현실에서 cm, mm, inch, yard가 있듯이, css에서 사용하는 대표적인 크기 단위는 px, em, % 이다. px는 절댓값이고 rem, em, %는 상대값이다. 대부분의 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%로 설정되어 있다. 1) px (픽셀) px은 픽셀(화소) 단위이다. 1px은 화소 1개의 크기를 의미한다. 모니터의 해상도가 1600 * 900이라면 가로 1600개의 픽셀과 세로 900개의 픽셀을 가진다는 의미이다. 하지만 같은 사진이라면 모니터의 해상도가 1600*900인 것과 1920*1080인 것에 따라서 .. 개발/CSS 2023. 9. 29.

• 

  JWT(Json Web Token)란 무엇이고 어디에 담아야하는가 프로젝트를 진행하면서 JWT를 로컬스토리지에 담아서 사용하다가 백엔드에서 쿠키에 담아서 사용하는 것을 제안을 하여서 자세히 알아보고자 블로깅을 한다. 1. JWT란 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다. JWT 정보를 request에 담아 사용자의 정보 열람, 수정 등 개인적인 작업들을 수행할 수 있다. 그 중에서도 JWT는 웹 표준을 따르고 있으며, JSON 객체를 사용하여 정보를 전달합니다. 웹표준을 따르기 떄문에 대부분의 언어가 이를 지원한다. 2. 구조 헤더, 내용, 서명이 .(dot ;점)을 구분자로 하여 JWT 토큰 1개를 이룬다. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6.. 개발 2023. 9. 16.

• 

  [커넥팅칩스] 프로젝트 2주차(09.11 ~ 09.17) 2주 차에서는 코드를 작성하는 것보단 백엔드과 서버를 만들 때까지 코드를 분석하고 어떻게 코드를 작성해 나갈지 고민해 보는 주간이었다. 코드분석 1주 차에서도 말했지만 내가 작성한 코드가 아니라 다른 분이 작성한 코드를 이어받아서 코드를 짜게 되어서 코드분석의 시간이 필요하였다. 다른 사람이 작성한 코드를 이해한다는 것은 생각보다 어려운 일이었다. 코드의 전체적인 구조를 이해를 못 하여서 하나씩 그려가면서 이해하려 하였다. 그리고 하나씩 뜯어보면서 분석을 했는데 내가 생각지도 못한 효율적인 방법을 사용한 경우도 있기도 하고 더 깔끔한 방식이 있음에도 사용하지 않아서 의문이 들었던 순간이 있었다. (2주 안에 혼자서 급하게 코드를 짠 거라 어쩔 수 없이 코드가 지저분하다고 하셨다.) 특히 공통 컴포넌트 부.. 프로젝트/커넥팅칩스 2023. 9. 14.

• 

  Mongo DB 왜 쓰는지와 셋팅방법 웹사이트 운영하려면 유저아이디, 유저의 글 이런걸 어디 저장해둬야하는데 유저의 데이터를 영구적으로 안전하게 저장하고 싶으면 Database에 저장합니다. 데이터베이스 종류는 여러가지가 있는데 대표적으로 관계형, 비관계형 데이터베이스가 있습니다. 관계형 데이터베이스는 데이터를 엑셀처럼 표에 저장합니다. 데이터 입출력시 SQL이라는 언어를 사용해야하고 미리 스키마 정의(표만들기)도 해야하고 데이터 중복저장을 피하기 위해 정규화해야하고 여러가지 귀찮은 점들을 신경써야합니다. 주로 안정적인 데이터저장과 운영이 필요한 곳에서 쓰면 좋습니다. 비관계형 데이터베이스는 자료를 조금 더 자유로운 형식으로 저장할 수 있고 SQL 언어, 스키마 정의(표 만들기), 정규화 이런게 대부분 필요없습니다. 분산처리를 기본적으로 잘.. 개발 2023. 9. 6.

• 

  [커넥팅칩스] 프로젝트 1주차(09.04 ~ 09.10) 참가하게 된 이유 무료하게 인강이나 들으면서 공부를 하니 집중도 안되고 재미도 없었다. 코딩을 하는 게 내 길이 맞는지 계속되는 의문과 싸우는 도중에 코드스테이츠에서 오랫동안 스터디를 같이하셨던 분이 프로젝트 참여를 제안을 하셨다. 실력적으로 많이 부족하지만 아무것도 안 하는 것보단 훨씬 낫다고 생각되어 승인하게 되었다. 참가를 하면서 지금 참가하는 프로젝트는 처음부터 새로만드는게 아니라 기존에 있던 팀이 무슨 대회(?)를 참가를 하여서 만든 웹인데 고객사에서 마음에 들어서 실제로 배포를 해보자고 하여서 팀을 키우는 와중에 내가 들어가게 되었다. 내가 짠 코드가 아닌 다른사람이 짠 코드를 보고 이해를 하고 발전시켜 나가는 경험은 처음이어서 매우 힘들었다. 1. Next.js 처음에는 React로 만들어진.. 프로젝트/커넥팅칩스 2023. 9. 4.

• 

  Next.js 설치와 개발환경 셋팅 설치 1. Node.js 설치 LTS버전으로 설치 18.0.x 버전이상으로 설치 chocolatey 어쩌구는 설치하지말자 2. VScode설치 3. 터미널로 next.js설치 터미널 열고 cd로 다운로드하고 싶은 파일로 가서 아래 코드 입력해서 설치 npx create-next-app@latest project name 적어주고 여러가지 쓸건지 물어볼건데 자기 맘대로 선택하면 됨 App router는 꼭 선택하자 그럼 설치 완료 ☆★ 브라우저로 미리보기 띄우고 싶다면 Terminal - New Terminal에서 npm run dev입력하고 엔터치면 localhost:3000 어쩌구 나오는데 브라우저에 입력하면 실시간 미리보기 뜬다. 프로젝트 파일들 설명 app 폴더 : 님들이 코드짤 폴더 page.js.. 개발/Next.js 2023. 9. 4.