지금까지는 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..
1. 백엔드를 전공하는 친구에게 연락이 왔다. 이번 겨울방학 동안 동아리에서 진행했던 프로젝트가 끝이 났다. https://www.behance.net/gallery/192520373/-MOCU 모두의 쿠폰, MOCU 모두의 쿠폰, MOCU 게시: 2024년 2월 27일 www.behance.net (저번 겨울방학 동안 개발한 프로젝트의 포트폴리오는 위 링크를 통해 참고할 수 있다.) 프로젝트가 끝나기 하루 전 날, 갑자기 친구한테 카톡이 왔다. 백엔드를 공부하고 있는 친구였다. 지금 하고 있는 프로젝트가 끝나면 같이 프로젝트를 할 생각이 없냐고. 프로젝트를 하면서 프론트엔드 실력을 더 기르고 싶었기에 바로 수락했다. 프로젝트가 끝나고 며칠 뒤, 우리는 프로젝트에 대한 회의를 했다. 만들고자 하는 프로젝..
Day 4 피자 나눠먹기(1) https://school.programmers.co.kr/learn/courses/30/lessons/120814 function solution(n) { // n을 7로 나눈 나머지를 integerCheck 변수에 저장 let integerCheck = n % 7; let answer = 0; // integerCheck가 0이라면 피자는 n / 7개가 필요하다. // 예시: 피자를 나눠먹을 사람이 21명이면 피자는 3판이 필요하다. if (integerCheck === 0) { answer = n / 7; } // integerCheck가 0이 아니라면 피자는 n / 7의 몫 + 1개가 필요하다. // 예시: 피자를 나눠먹을 사람이 22명이면 피자는 3판 + 1판이 필..
웹 프론트엔드 공부를 계속하면서 다양한 라이브러리를 써보며 익숙해지는 연습을 계속하고 있다. 그런 와중에 정작 웹 개발의 기초가 되는 자바스크립트에 대한 공부를 소홀히 한 것 같아서 아쉬움을 계속 느끼고 있었다. 문법을 익히기에는 알고리즘 문제를 푸는 것이 가장 좋은 방법인 것 같아서 자바스크립트로 알고리즘 문제들을 풀기로 했다. 지금까지는 알고리즘 문제를 백준에서 풀었지만 백준에서 자바스크립트를 쓸려면 조금 복잡해서 이번엔 자바스크립트를 잘 지원해주는 프로그래머스에서 문제를 풀기로 했다. 프로그래머스는 코딩 테스트 문제를 입문 문제, 기초 문제, 모든 문제로 카테고리화 했는데, 일단은 입문 문제를 풀다가 넘어가도 되겠다싶으면 기초 문제로 넘어갈 것이다. 그리고 하루에 4문제씩 일일 도전 과제 문제들을 ..
https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad Coders React Firebase for Beginners nomadcoders.co 파이어베이스의 사용법을 익히고자 노마드코더의 ‘트위터 클론코딩’ 강의를 수강했다.(위 링크로 접속할 수 있다.) Firebase란 Firebase는 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로, 직접 구현하기에는 복잡하고 어려운 기능들을 사용하기 쉽게 제공해준다. Authentication API를 통하여 계정 기능을 쉽게 만들 수 있다.(구글, 깃허브 로그인) Cloud FireStore로 데이터베이스를 사용할 수 있다. Hosting으로 웹 사이트를 배포할 수 있다. Cloud Storage로 사용자가..
이번에 프로젝트를 진행하면서 useState()를 활용한 상태관리를 하고 있는데, 상태관리에 대한 확실한 이해 없이 무작정 작업을 하다보니 코드가 내가 이해하기도 어려울 정도로 복잡해져 있었다. 그래서 상태관리에 대한 공부를 하고 다시 코드를 수정했다. 이번에 알게 된 내용을 한 번 정리해 보려 한다. 1. 상태 관리는 부모에서 이루어지고, 자식에게 props로 전달한다. 부모 컴포넌트 A와 자식 컴포넌트 B,C가 있다고 가정하자. 그렇다면 상태를 관리하는 로직은 부모 컴포넌트 A에 작성하고 이를 자식한테 props로 전달하면 된다. 만약 자식 컴포넌트에서 버튼을 클릭하면 상태가 업데이트되는 것을 부모한테 전달하고 싶다고 가정하자. (여기서 부모는 SearchResult.tsx이고, 자식은 BtmShee..
겨울, 본가 2023년 1월 1일에 나는 아마 본가에 있었을 것이다. 막 전역하고 친구들을 만나고 다니던 때였다. 코로나로 가지 못했던 대학을 다시 갈 수 있을 거라는 희망에 가득 차 있었다. 신나기만 한 것은 아니었고, 전공에 대해 아는 바가 거의 없었기에 유튜브로 알고리즘 강의를 들으며 백준 문제를 풀었다. 나름 도움이 되었던 것 같다. 그렇게 시간을 보내다 서울로 올라가서 집을 구했다. 집을 꾸미고 적응하는 과정은 나름 재밌었다. 웃기도 하고 당황하기도 하며 적응하다보니 학교에 가게 되었다. 2학년 2학기가 되어서야 도착할 수 있었던 캠퍼스는 바쁘고 활기찼다. 그 분위기가 처음에는 참 어색했다. 봄, 1학기 처음 듣는 대면 수업은 큰 강의실에서 진행되었다. 아는 사람 한 명 없이 편안하게 OT만 듣..
