Today Hailie Learned

프로젝트 마무리 단계에서나 배포하기 전에 확인하면 좋을 내용을 간단히 정리합니다. 1. 웹 페이지 Title에는 React App 또는 Vite + React app가 아니라 파비콘과 앱 이름이 정확히 적혀 있어야 합니다. 저는 프로젝트에서 Vite라는 빌드 도구를 사용했습니다. 아무런 설정을 하지 않으면 아래와 같이 웹 탭이 생성이 되는데, 프로젝트를 배포할 때에는 꼭 설정을 해서 완성도를 높여야 합니다. 2. SNS로 다른 사람에게 링크로 공유시 og 카드는 제대로 나와야 합니다. (Open Graph태그 설정하기) 'og 카드'라는 단어가 생소해도 위의 캡쳐본을 보면 한눈에 알겠죠? og 카드는 SNS미리보기 화면이라고 생각하면 되고, SNS에 게시되는데 최적화된 데이터를 가질 수 있도록 설정하는 ..

이 내용은 우아한테크코스 테코톡 영상을 보고 정리한 글입니다. MVC란? 유지보수가 편해지는 코드 구성 방식! Model : 데이터와 관련된 부분 View : 사용자한테 보여지는 부분 Controller : Model과 View를 이어주는 부분 MVC는 왜 생겨났을까? 코드가 많아지면 많아질수록 코드가 복잡해져서 코드를 파악 하기도 힘들어지고 기능을 수정할 때마다 대부분의 코드를 갈아엎는 경우가 많았다고 합니다. 유지보수를 편하게 하기 위해 고민하다가 생겨나게 된 디자인 패턴이 바로 MVC 입니다. MVC 맛보기 1. 유저가 '무언가'를 검색함 2. Controller는 유저가 검색한 데이터를 Model에게 요청함. 3. Model은 결과 데이터를 Controller에게 줌 4. Controller는 M..

방법1 const solution = (arr) => { let newArr = [] for(let x of arr){ let newarr = x.toString().split('').reverse().reduce((a,b) => a+b,0) newArr.push(Number(newarr)) } console.log(newArr); } solution([32, 55, 62, 20, 250, 370, 200, 30, 100]) // 결과 [ 23, 55, 26, 2, 52, 73, 2, 3, 1 ] 방법2 const solution = (arr) => { let newArr = [] for(let x of arr){ let result = 0; while(x){ let t = x % 10; result =..

국비 부트 캠프 수료 후 취업을 위해 포트폴리오를 만들었습니다. 사용한 기술과 기능들을 정리해보았습니다. ⭐️배포 링크: https://portfolio-hellohailie.vercel.app/ 📚사용한 기술 Next.js : 처음 방문했을 때 빠르게 로딩이 되면서, 포트폴리오가 검색이 잘 되면 좋겠다는 생각에 Next.js를 사용하였습니다. tailwind CSS : 쉽게 반응형 웹을 만들고자 했기 때문에 tailwind CSS를 사용했습니다. class에 설정을 하면 되기 때문에 파일을 따로 설정할 필요도 없고, 화면을 위,아래로 번갈아가면서 개발하지 않아도 되서 좋았습니다. 💡getStaticProps 함수를 활용한 Notion API 연동 Nextjs의 경우 사전 렌더링(pre-rendering..

11월8일에 원티드가 주최한 컨퍼런스 정리 & 후기 입니다. 프론트엔드 파트와 실무 상 어려움을 겪는 질문에 대해 정리했고, 모든 답변을 정리하지는 않은 점 참고해주세요. 프론트엔드 (셀러웹프론트엔드개발팀 김정환 님) Q. 제조 B2B 솔루션 회사에서 FE 개발자로 재직중입니다. FE개발자의 전문성은 성능개선, SEO, UI/UX 관련 능력이라고 생각하는데, 현재 회사에서는 FE 개발자에게 기능 구현 정도의 수준만 요구해 전문성을 쌓을 수 있을지 고민입니다. B2B 회사 내에서도 FE 개발자로서 커리어를 잘 쌓을 수 있는 방법이 있을지, 아니면 B2C 회사로 이직을 해야할 지 고민입니다. A. 보통의 회사에서는 코드 개선하는데 소요되는 시간까지 주지 않는다. 기능 구현에만 매달리게 된다면 유지보수하기 어..

✔️ Next.js는 무엇인가? vercel에서 만든 리액트의 프레임워크!! 클라이언트 사이드 기술과 서버 사이드 기술을 모두 가지고 있는 올인원 솔루션입니다! api를 구현해서 프론트엔드인 리액트와 하이브리드하면 간단하게 서버 기능과 프론트엔드 기능을 모두 가지고 있는 애플리케이션 스택을 구축할 수 있습니다. ** 라이브러리 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미합니다. 폴더명, 파일명 등에 대한 규칙이 없고 프레임워크에 비해 자유롭습니다. ex) 무언가를 자를 때 '도구'인 '가위'를 사용해서 '내가' 직접 컨트롤하여 자른다. ** 프레임워크 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미합니다. 폴더명, 파일명 등에 대한 규칙이 있고 라이브러리에 비해 좀 더 엄격합..

✔️ 에러 코드 Unhandled Runtime Error Error : Hydration failed because the initial UI does not match what was rendered on the server. ✔️ 에러가 나온 이유 Hydrate는 서버사이드에서 rendering된 정적 페이지와 번들링된 js코드를 클라이언트에게 보낸 후 js코드가 HTML DOM 위에서 다시 rendering 되면서 서로 매칭되는 과정인데 이 과정 중에서 문제가 발생해서 생긴 문제였습니다. 이 에러를 해결하기 위해서 구글링을 하다가 stackover flow에 나와 비슷한 오류를 가진 사람의 글을 보게 되었고, 결국에는 Next.js 공식 문서를 통해 해결하게 되었습니다. (Next.js는 친절하다..

전직을 위해 프론트엔드 개발 부트캠프를 수료하고 처음으로 이력서, 자기소개서를 준비하면서 어려운 점이 많았습니다. 이 책을 통해서 기본적인 글쓰기 구조를 잡는데 도움을 받았다는 이야기를 듣고 책을 읽고 정리한 글입니다. 이 책을 통해 얻고 싶은 것 내가 왜 개발자가 되고 싶은지 명확하게 이야기하기 부트캠프에서 무엇을 배웠는지 명확하게 이야기하기 내가 어떤 것을 잘하는지 설득하기 면접 준비 잘하기 좋은 일자리 찾기 입사 후에도 커뮤티케이션을 잘하는, 일 잘하는 개발자 되기 1장 왜 하버드대학교는 글쓰기에 매달릴까? 원격 업무 등 비대면 업무가 자리 잡는 포스트 코로나 시대에는 핵심을 빠르게 전달하고 원하는 반응을 요청하고 설득하여 상대를 내가 원하는 방향으로 움직이게 만드는 능력이 중요해졌다. 글쓰기는 사..

1. 프로젝트 설명 프론트엔드 2명, 백엔드 2명 총 4명이 이 프로젝트를 만들었습니다. 이 프로젝트가 취업에서 아주 중요한 역할을 할 것이기 때문에 모두 열정을 가지고 처음부터 끝까지 달려왔기에 무사히 끝마칠 수 있었습니다. 프로젝트 전, 정말 많은 아이디어가 나왔는데 최종적으로 반려견에게 산책 친구를 만들어줘서 강아지의 사회성을 길러주고, 산책으로 동네 친구를 사귈 수 있는 일석이조라는 긍적적인 측면에서 "PuppyBuddy"가 채택되었습니다. ⭐️배포 링크: http://seb39-main-019-front.s3-website.ap-northeast-2.amazonaws.com/ ⭐️gif 기능 시연 링크 : https://codestates.notion.site/PuppyBuddy-79487fea..

메인 프로젝트에서는 CRA보다 빠른 환경에서 개발을 할 수 있다는 멘토님의 말에 vite 환경에서 개발을 하게 되었습니다. 프론트단에서 cors 에러를 해결하기 위해 proxy 설정을 하게 되었고, cra 환경과는 다른 설정 방법이기에 정리합니다. import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import svgr from "vite-plugin-svgr"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [svgr(), react()], esbuild: { define: { this: "window", }, }, server: { pr..