Today Hailie Learned

방법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..

이번 포스팅은 프론트단에서 카카오 소셜로그인으로 토큰까지 발급받을 수 있는 방법에 대해 정리한 글입니다. 개인적으로 구글 소셜 로그인보다 카카오 소셜 로그인이 조금더 수월하게 진행되었습니다. 1. 카카오 developers 페이지에서 api 등록하기 https://developers.kakao.com/docs/latest/ko/getting-started/app Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com api 등록하는 방법은 kakao developers 내의 설명과 다른 블로그에서 내용정리가 잘 되어 있어서 생략합니다. 설정해둔 리다이렉..