0. PWA와 FCM을 쓰려는 이유친구들과 공모전을 나가기로 했었다. 공모전에 프로젝트를 제출하려면 몇 가지 조건을 충족해야했는데, iOS와 Android에서 모두 작동해야하며, 푸시 알림이 구현되어야 한다는 조건이었다. React와 문법이 비슷한 React Native를 빠르게 학습한 후 이 언어를 활용하여 개발을 진행하는 방법이 먼저 떠올랐다. 그 다음에 떠오른 것이 바로 PWA(Progressive Web App)였다. PWA 기술을 활용하면 웹사이트지만 네이티브 앱처럼 설치하여 사용할 수 있고, 푸시 알림, 오프라인 작동 등 앱과 유사한 기능들도 구현할 수 있다. 푸시 알림은 FCM(Firebase Cloud Messaging)을 통하여 구현하기로 했다. Firebase을 독학하여 CRUD를 구현..
‘큰돌의터전’님의 ‘자바스크립트로 코딩테스트 보기전 봐야할 핵심로직 12가지’ 유튜브 영상을 보고 정리한 글입니다. 자세한 내용은 해당 유튜브 영상에 나와있으니 참고 부탁드립니다! 유튜브 링크: https://www.youtube.com/watch?v=MlvZ2IufTFI1. 배열 순회a = [1, 3, 45, 2, 10]a.forEach((e, i) => { console.log(e,i)})// 결과// element와 index가 출력된다.// 1 0// 3 1// 45 2// 2 3// 10 42. 문자열 분할const str = "Hello World";const ret = str.split(" ")console.log(ret)// 결과 (공백을 기준으로 분할)// [ 'Hello', 'World..
1. react-datepicker로 달력을 구현하기로 했다.현재 진행하고 있는 프로젝트에서 달력으로 날짜를 선택하는 것을 구현해야 했다. 달력을 직접 구현하는 것은 힘들 것 같아서 ‘react-datepicker’ 라이브러리를 사용했다. 일단 달력 UI를 피그마에 맞게 커스텀하는 것에 집중했다. 달력을 커스텀하는 것은 생각보다 어려웠지만, 여러 번 시행착오를 겪으니 비슷하게 보이게 만드는데에는 성공할 수 있었다. 2. 이제 날짜 상태를 관리하자이제는 선택한 날짜를 상태로 관리해야 한다.먼저 구조를 설명하자면, SelectBox를 클릭하면 내가 만들어놓은 Dialog 컴포넌트가 나오고, Dialog 컴포넌트의 children에 Datepicker가 있고 그 밑에는 확인(confirm) 버튼과 닫기(ca..
0. 이번 주는 공통 컴포넌트를 만들기로 했다.현재 프론트 2명, 백엔드 1명, AI 1명으로 구성된 프로젝트에 참가 중이다. 나랑 같이 웹 프론트엔드로 참가하는 친구는 교내 개발동아리와 연합 개발동아리에서 프로젝트 개발을 하며 경험치를 많이 쌓아서 개발에 능통하다. 이 친구와 이번 주에는 프로젝트의 공통 컴포넌트를 제작하기로 했다. 친구는 컴포넌트를 어떻게 만들까? 친구의 코드를 살펴보기로 했다.1. 폴더(파일) 구조부터 확인하자src 안에 components 폴더를 만드는 것은 똑같은데, common components들을 저장할 common 폴더를 따로 만들고, 도메인별로 폴더를 만들어서 컴포넌트 파일들을 분리한다.input 컴포넌트를 만든다고 가정하자. 친구는 components/common 안에..
1. Next.js? 그냥 react 개발하듯이 하면 되지 않나?방학 동안, Next.js 14를 익히고 싶어서 Next.js로 자기소개 사이트를 만들고 있다. 블로그 글을 읽으며 개발할 때 React와 어떤 차이점이 있는지 읽고 바로 작업에 들어갔다. 작업을 하며 라우팅 방식이나 서버 컴포넌트 같은 차이점 외에는 React와 별 다른 점이 없다고 생각하기도 했었다.(header 밖에 안 만들었을 때 그런 생각을 한 게 참…ㅋㅋㅋ). 하지만, 그 생각은 길게 유지되지 않았다. 왜냐하면 css 애니메이션이 동작하지 않았기 때문이다. 2. css 애니메이션이 작동하지 않아요내가 좋아하는 음악의 앨범 커버, 노래 제목, 가수 이름이 적혀있는 MusicCard 컴포넌트가 있고, 그 MusicCard 컴포넌트들이..
HTML HyperText Markup Language의 약자 → 웹 페이지를 구조화하고 표시하는 언어 HTML은 웹 브라우저에서 해석되어 사용자에게 보여지는 모든 콘텐츠를 기술. HTML은 태그로 이루어져 있음. → 문서가 HTML5로 작성된 것임을 브라우저에 알려줌. → 문서의 모든 내용을 감싸는 컨테이너 역할 → 문서의 메타데이터와 스타일 시트를 포함 → 문서의 콘텐츠를 포함 → HTML 문서의 메타데이터를 정의 메타데이터 문서에 대한 정보를 나타내는 데이터 charset 문서의 인코딩 방식을 정의 인코딩을 명시하지 않으면 웹 브라우저에서 자동으로 인코딩을 처리하기 때문에 한글이 깨질 수도 을 적어주는 것이 좋다. name 메타데이터의 이름 content 해당 메타데이터의 값을 정의 viewport..
지금까지는 Webpack(Create-react-app) 환경에서 TypeScript를 실행했었기에 custom.d.ts(혹은 global.d.ts)에서 declare module "*.svg" { import React = require("react"); export const ReactComponent: React.FC; const src: string; export default src; } 위와 같이 작성하면 svg 파일이 잘 실행이 되었었다. 그런데 이번에 새로 프로젝트를 할 때 아래와 같이 svg 파일을 사용하려고 했는데, import { ReactComponent as ~~~Icon} from '../../ ........생략' 위와 같이 ReactComponent로 불러올려고 했는데 svg..
이번에 프로젝트를 진행하면서 useState()를 활용한 상태관리를 하고 있는데, 상태관리에 대한 확실한 이해 없이 무작정 작업을 하다보니 코드가 내가 이해하기도 어려울 정도로 복잡해져 있었다. 그래서 상태관리에 대한 공부를 하고 다시 코드를 수정했다. 이번에 알게 된 내용을 한 번 정리해 보려 한다. 1. 상태 관리는 부모에서 이루어지고, 자식에게 props로 전달한다. 부모 컴포넌트 A와 자식 컴포넌트 B,C가 있다고 가정하자. 그렇다면 상태를 관리하는 로직은 부모 컴포넌트 A에 작성하고 이를 자식한테 props로 전달하면 된다. 만약 자식 컴포넌트에서 버튼을 클릭하면 상태가 업데이트되는 것을 부모한테 전달하고 싶다고 가정하자. (여기서 부모는 SearchResult.tsx이고, 자식은 BtmShee..
이제 곧 프로젝트를 시작하는데 Typescript를 활용한다고 한다. 그래서 노마드코더님의 타입스크립트 무료 강의를 듣고 개념을 정리해보았다. 강의 링크 https://nomadcoders.co/typescript-for-beginners 타입스크립트로 블록체인 만들기 – 노마드 코더 Nomad Coders Typescript for Beginners nomadcoders.co (타입스크립트를 입문하는 분들에게 추천한다!) Typescript 특징 TypeScript는 JavaScript에 추가적인 구문을 통해 단단한 통합을 제공하며 초기 오류를 감지할 수 있다. TypeScript 코드는 JavaScript로 변환되어 브라우저, Node.js, 앱 등에서 실행될 수 있다. JavaScript를 이해하며..
ESLint와 같은 Linter 는 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구 Prettier와 같은 Formatter는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구 ESLint 설치 ‘npm install -D eslint 명령어 입력 -D를 입력하는 이유는 devDependencies에 설치하기 위함 → 실제 프로덕션에는 필요없기 때문 ‘npx eslint —init’ 명령어 입력 각 프로젝트마다 eslint 설정 ctrl+shift+p 입력해서 settings.json(User settings)에 들어가서 밑의 코드 입력 "editor.fontFamily": "D2Coding ligature", "editor.line..
