둥글게 둥글게

Electron을 시작하기 전에 약간의 삽질이 있을 수도 있다.. 고 말씀하셨던 개발자 동료분.. 의 말에 정확하게 삽질이 있긴 했다.하고 나서 생각해 보면 너무 흔한 오류인가? 싶기도 하고, 경험담이겠지? 싶은 🤣프로젝 생성까지 했으니 배포 레츠고.🏠 구조 🏠electron-app/ - sample-app/ 👉🏻 생성 프로젝트 - src/ - main.js 👉🏻 Electron 메인 프로세스 (앱 창 띄우기) - package.json 👉🏻 Electron + 실행 스크립트 설정 - node_modules/🔨 실행 🔨> nvm use > npm run dev NVM 및 Electron 설치는 아래 포스팅 참고 🔽https://cyjcyj.tistory.com/207 El..

nvm까지 설치를 했으니, 실제 프로젝트를 생성해서 Electron으로 감싸보자!🔧 개발 환경 : Vite🔨 라이브러리 : React 🤔 언어 : JavaScript NVM 설치 관련은 아래 포스팅 참고 🔽https://cyjcyj.tistory.com/207 Electron으로 데스크탑 앱 만들기 (1) - NVM 설치부터구구절절 시작 🔽(갑자기 회의에 참여하게 된) "유진님, 저희 데스크톱 앱 만들어야 하는데 먼저 nvm부터 까시고여. nvm이 node 버전 관리해 주는 건데, 아마 기존 프로젝이랑 왔다 갔다 하면서 개cyjcyj.tistory.com 🏃🏻‍♀️ 목표 목표 : 데스크탑 앱으로 띄우기 순서 : 1️⃣ 프로젝트 생성 -> 2️⃣ Electron 설치 및 기본 설정 -> 3️..

구구절절 시작 🔽(갑자기 회의에 참여하게 된) "유진님, 저희 데스크톱 앱 만들어야 하는데 먼저 nvm부터 까시고여. nvm이 node 버전 관리해 주는 건데, 아마 기존 프로젝이랑 왔다 갔다 하면서 개발하셔야 영향이 없고여. 또.. Electron으로 앱 만들어야 하는데, 우선 Hello World부터 띄워주세여" ------> "...옝? 😳"로 시작된 갑자기 Electron으로 데스크탑 앱 만들기 시작~ NVM이란? NVM(Node Version Manager)은 Node.js의 버전을 쉽게 설치하고, 전환할 수 있게 해주는 도구.❓ 이것이 왜 필요하냐? 기존에 맡고 있던 프로젝트가 있기 때문에, 프로젝트마다 요구하는 버전이 다를 수 있다.따라서 프로젝트마다 nvm을 써서 원하는 버전으로 사용..

구구절절 시작 👉🏻 자바스크립트는 불안정한 언어라고들 많이 얘기하는데, 사실 js를 사용하면서 크게 문제점을 느끼지 못했다.그런데..! 이번 프로젝트를 시작하면서 ts를 써볼까? 싶어 정말 정말 오랜만에 타입스크립트를 사용했는데,웬걸 js에서는 나지 않는 오류들이 ts에서는 컴파일타임에서부터 에러가 수두룩 나는 것을 보고.. 이때 깨달았다.'와, 나 typescript 제대로 배워야겠다' 싶어 책까지 구매해서, 내가 이해한 ts에 대해 기록을 해보고자 한다.타입스크립트와 자바스크립트의 차이 중 가---장 기본 개념인 타입시스템 '정적 타입 vs 동적 타입'   자바스크립트 - 동적 타입 (dynamic typing) ✏️ 변수를 선언할 때 타입을 지정하지 않음. 값이 할당될 때 자동으로 타입 결정co..

💪🏻 약 5개월간 같이 스터디를 진행했던 팀원들과 새프로젝트를 시작했다. 최근에 이력서 / 포트폴리오 / 자기소개서도 마무리하고, 기업에 이력서도 제출하고, 면접도 보고, 상담도 하고 엄청 바쁜 날을 보냈다. 어느정도 새로운 일상에 적응할 때쯤 시작한 팀프로젝트! 오랜만에 팀 회의를 하니 두근두근 👀 🍎 Project 'Apple Market' 💁‍♀️ 프로젝트 소개 👜 중고 물품 거래 플랫폼 * 1:1 채팅 기능 * 원하는 상품 지역 카테고리를 통해 검색 * 지도를 통한 물품 검색 * ChartJS를 통해 해당 상품의 인기도 구현 * 사용자 인증 (로그인 & 회원가입) * 게시글 CRUD 🏃🏻‍♀️ 참여 인원 👉🏻 프론트엔드 3명 👉🏻 백엔드 1명 정말 감사하게도 팀원 분 중에 한 분이 백엔드 개발자 ..

Next.js의 SSR과 SPA에 대해서 알아보고, 를 사용하면 좋은 점에 대해서 설명하고자 한다! 💁‍♀️ Next.js SSR(Server Side Rendering)이란? SSR(Server Side Rendering)은 서버 측에서 초기 로딩을 수행하고, 렌더링 된 완전한 HTML을 사용자에게 반환한다. ❗️ React의 경우, JavaScript로 페이지를 로드하기 때문에 Disabled javascript를 할 경우, 페이지가 렌더링 되지 않는다. ⭕️ 그러나 Next.js는 SSR을 지원하기 때문에 서버에서 초기 렌더링을 수행하며, SEO(Search Engine Optimization)를 개선할 수 있다. (SEO : 검색 엔진 최적화) 👀 Next.js SPA(Single Page App..

현재까지 사용자의 효율적인 페이지 이동을 위해 react-router-dom을 사용하여 라우팅 기능을 구현하였다. 라우팅 기능은 매우 중요하면서도 기본이 되는 기능이라고 생각한다. Next.js에서는 라우팅을 어떻게 구현하면 좋을지 강의를 통해 얻은 지식을 정리하고, 프로젝트에 적용해 보고자 한다 👀 💁‍♀️ (먼저!) 라우팅이란? * 웹 라우팅은 웹 애플리케이션에서 URL의 경로에 따라 특정 페이지나 리소스를 사용자에게 보여주는 것 👉🏻 즉, url의 path에 특정 페이지를 설정하고, 사용자가 해당 경로로 이동할 때, 설정한 페이지를 보여주는 것이다. 🙋🏻‍♀️ Next.js 라우팅 1️⃣ 페이지 생성 'pages' 디렉터리에 파일을 생성하면, 해당 파일의 경로와 이름에 따라 자동으로 라우트가 생성 ..

🫠 Programmers (level 1) 👉🏻 문제 39번 (2016년) ✏️ 문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a , b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN, MON, TUE, WED, THU, FRI, SAT입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. ✏️ 제한 조건 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) ✏️ 입출력 예 a b result 5 24 TUE function soluti..

이번에 새로 시작한 프로젝트를 Next.js로 하기 때문에 생활코딩 강의를 부랴부랴 챙겨봤다. 이해하기 쉽게 설명이 되어 있어, 강의는 빨리 볼 수 있었다!! 강의를 보며 기록으로 남겨두고 싶은 부분들을 정리할 계획이다 ☺️ 💁‍♀️ Next.js란? : React를 기반으로 하는 SSR 및 SSG 프레임워크이며, 사용자에게 보다 빠르고 최적화된 웹 경험을 제공합니다. 👀 SSR : 서버 사이드 렌더링(Server Side Rendering)은 웹 애플리케이션에서 사용자가 웹 페이지에 접속할 때, 서버 측에서 해당 페이지의 초기 렌더링을 수행하는 방식이며, 완전한 HTML 페이지를 생성한 후 클라이언트에게 전달 👉🏻 장점 : 초기 콘텐츠 표시까지의 대기 시간이 줄어듦 👉🏻 단점 : 서버 자원을 사용하기 ..

🫠 Programmers (level 1) 👉🏻 문제 38번 (시저 암호) ✏️ 문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. ✏️ 제한 조건 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000 이하입니다. n은 1 이상, 25 이하인 자연수입니다. ✏️ 입출력 예 s n result "AB" 1 "BC" "z" 1 "a" "a B z" 4 "..