Spring

🧑‍💻 Develop

<blockquote>배포한 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://keeeep.web.app/">https://keeeep.web.app</a> 에 접속하면 확인해볼 수 있어요.</blockquote>react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 무료로 사용할 수 있어서 간단하게 소개해보겠습니다.위에 소개한 앱은 database또한 firebase로 만들어진 todo 앱인데요, database를 연동하는것은 추후에 소개해볼게요.<h1>배포하기</h1><h2>프로젝트 생성</h2><a target="_blank" rel="noopener noreferrer nofollow" href="https://console.firebase.google.com/">https://console.firebase.google.com/</a> 에 접속해 프로젝트를 생성해주세요. 애널리틱스 연동은 필요에 따라 선택해주시면 돼요.생성해주셨다면 빌드 &gt; 호스팅 메뉴를 선택해 시작하기를 눌러주세요.<img src="https://image.until.blog/morethanmin/article/1722157087360" alt="until-959"><h2>firebaes cli 설치</h2>가이드에 따라 firebase-cli를 설치해주세요.<pre spellcheck="false"><code class="language-bash">npm install -g firebase-tools</code></pre><code spellcheck="false">웹 앱에 Firebase 자바스크립트 SDK를 추가하는 단계도 표시합니다.</code> 는 호스팅만 하는 경우에는 필요하지 않으니 꼭 체크하지 않으셔도 괜찮아요.<h2>firebase init</h2>배포하고자 하는 app의 root directory에서 아래 커맨드를 순차적으로 입력해주세요.<pre spellcheck="false"><code class="language-bash">firebase login

firebase init</code></pre>init 입력시 아래와 같이 나오는데, Hosting이 목적이므로 <code spellcheck="false">Hosting</code> 선택. <img src="https://image.until.blog/morethanmin/article/1722157605095" alt="until-960">프로젝트를 만들었으므로 <code spellcheck="false">Use an existing project</code> 선택.<img src="https://image.until.blog/morethanmin/article/1722157665078" alt="until-962"><code spellcheck="false">npm run build</code> 입력시 생성되는 react app의 빌드 디렉터리를 입력 해주시면 됩니다. 기본적으로 <code spellcheck="false">build</code> 폴더에 빌드되기 때문에 <code spellcheck="false">build</code> 를 입력해주었어요.<img src="https://image.until.blog/morethanmin/article/1722157807152" alt="until-963">리액트는 기본적으로 single-page-application이기에 <code spellcheck="false">y</code> 입력.<img src="https://image.until.blog/morethanmin/article/1722157882041" alt="until-964">Github과 연동하지는 않을 것이므로 <code spellcheck="false">N</code> 입력.<img src="https://image.until.blog/morethanmin/article/1722157930986" alt="until-965">기존 index.html을 덮어씌울것이냐고 물어보는데, <code spellcheck="false">N</code>입력.<img src="https://image.until.blog/morethanmin/article/1722158011014" alt="until-966">그러면 아래와 같이 설정파일들이 생성돼요.<img src="https://image.until.blog/morethanmin/article/1722158178162" alt="until-967"><h2>빌드 스크립트 추가하기</h2>이제 <code spellcheck="false">firebase deploy</code> 만 입력하면 바로 배포가 되는데요, 조금더 편리하게 배포할 수 있도록 <code spellcheck="false">package.json</code>에 스크립트를 추가해보겠습니다.우선, <code spellcheck="false">npm install -D firebase-tools</code> 을 입력해 cli를 프로젝트에 설치해줍시다.이후 아래와 같이 deploy 스크립트를 추가해주었어요.<img src="https://image.until.blog/morethanmin/article/1722158413570" alt="until-968">이제 <code spellcheck="false">npm run deploy</code>만 입력해주면 빌드 후 배포됩니다. 콘솔에 나와있는 url에 접속하면 배포된 것을 확인할 수 있어요. <h1>*.web.app 도메인 주소 변경하기</h1>만약 본인이 *.web.app 기반의 다른 도메인 주소로 변경하고 싶다면 <code spellcheck="false">호스팅 &gt; 사이트 추가</code> 에서 원하는 도메인을 입력해주시면 무료로 도메인도 변경할 수 있어요.<img src="https://image.until.blog/morethanmin/article/1722158725214" alt="until-969">

배포한 결과물은 https://keeeep.web.app 에 접속하면 확인해볼 수 있어요.react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 

firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기

winOS

취준생 일지

<h1>📣 들어가기 전</h1><blockquote>💡 내 개인적인 생각도 있지만 주 내용은 현업자분께 들은 설명을 기반으로 한다.</blockquote><hr><h1>💻 개발자로 진로를 잡는다는 것은,</h1><blockquote>💬 평생, 혹은 최소 10년은 공부해야 하는 직업을 갖겠다는 의미.</blockquote><h2>개발자는 어떻게 나누어질까?</h2>초급, 중급, 고급, 특급…… 등 실력 혹은 연차로 나누어지는 개발자의 등급에 대해서 들어봤을 것이다. 당연히 우리의 최후 목표는 특급이고, 당장은 초급 개발자로 취직하는 게 제일 큰 목표다.<ul><li>초급<ul><li>1 ~ 5년 업무를 수행함.</li></ul></li><li>중급<ul><li>6 ~ 9 년 업무를 수행함.</li><li>하나의 파트를 끝낼 수 있어야 한다.</li></ul></li><li>고급<ul><li>9 ~ 12년 업무를 수행함.</li></ul></li><li>특급<ul><li>12년 이상의 업무를 수행함.</li></ul></li></ul><h2>그렇다면 이 개발자 등급은 구두로 나누어지는 걸까?</h2><blockquote>🎓 소프트웨어 기술 경력은 KOSA(소프트웨어기술자 경력관리시스템)에서 확인을 받는 것이 좋다.</blockquote><h3>KOSA란?</h3>SW기술자 경력확인제도로 정보처리 분야의 기술자격을 취득하거나 학력 또는 경력을 가진 사람이 경력, 학력 및 자격 등의 관리에 필요한 사항을 신청하는 제도<ul><li>SW기술자의 경력 입증의 어려움을 해소하여 경력 등을 객관적으로 증명하며 개인의 역량을 판단할 수 있는 기준을 제공할 수 있음.</li><li>소프트웨어 진흥법 등에 근거하여 관련 법에 의거하여 수행되는 제도.<ul><li>절차 및 제출서류 등은 관련법에 규정 되어 있으며, SW 기술자는 이에 따라 신청을 해야함.</li></ul></li><li>프로젝트를 진행하고 회사에서 통합해서 신청해주는 경우가 있고, 아닌 경우에는 개인적으로 사비를 들여서라도 신청하는 게 좋다.</li></ul><h3>어떤 것을 인증해주나요?</h3><ul><li>사업에 참여한 내역을 쌓아서 보내면 그걸로 경력을 인정해준다.</li><li>(회사에서 한 번에 신청하는 경우가 많다고 들은 듯?)</li></ul><hr><h1>이직에 관하여,</h1><h2>개발자는 이직이 많지 않나요?</h2><blockquote>❗이직이 잦은 것은 사실! 하지만 고려 해야 할 점이 있다.</blockquote><ul><li>회사를 자주 옮긴다는 것은 평가에 영향을 미친다.<ul><li>개발자가 아무리 이직이 많다는 편견이 이미 있다지만 그래도 잦은 이직은 평가에 영향을 미칠 수밖에 없다. 회사를 옮기는 순간 그 회사에서는 나에 대해서 문서 상으로만 봤지 실제 평가는 없다. 즉, 평가가 리셋된다.</li><li>또 프로젝트를 맡길 때 안정성이 떨어진다고 평가되어 중요한 파트나 큰 파트를 맡을 수 없을 수도 있다. 이 과정이 반복되면 내 연차에 했어야 할 일을 해보지 못해 사실 상 경력에 영향을 미친다.</li></ul></li><li>이직을 확실하게 고려할 만한 건 고급이 되고 나서가 안정적이다. <ul><li>고급이 되면 원한다면 일이나 프로젝트가 끊길 일이 적고 이게 이어지는 한 실력이 꺾일 일도 없다. </li></ul></li><li>가능하다면 한 직장에서 4~5년 정도는 일한다고 생각하자.<ul><li>두 직장에서 9년과 다섯 직장에서 9년은 많이 다르다.</li></ul></li></ul><hr><h1>큰 목표 라인</h1><ul><li>(정보처리/정보보안) 기사 취득</li><li>석사 (학교 이름은 중요하지 않다.)<ul><li>산업 대학원도 있음.</li></ul></li><li>45세 이후에는 박사. (역시 학교 이름은 중요하지 않다.)</li><li>한 분야를 10년 이상 파면 어지간한 건 이해할 수 있다. </li><li>IT는 계속 공부를 해야 하기 때문에 공부하는 것을 놓지 말기.</li></ul><hr><h1>지금 해야 할 일은?</h1><ul><li>정보처리 기사 자격 취득</li><li>이번 프로젝트를 진행한 내용에 대해서 복기하며 다른 팀원의 파트까지 전부 순서도를 그려보기.<ul><li>다른 팀원들의 파트 역시 이해하고 있어야 한다. </li><li>전부 자기 것으로 만드는 게 중요하다.</li></ul></li><li>전자정부 프레임워크 사용법을 익혀두자.</li><li>기죽지 말고 당당하게 면접 보자!</li><li>복기가 중요하다.</li><li>나에게서 IT란? 어떤 것인지 생각해보자.</li><li>비전을 설정하자.</li><li>목표 및 계획을 세우자.</li><li>문제 해결에 꾸준하고 성실한 나 자신을 만들자.</li><li>1 : 10 : 100의 원칙!</li><li>그리고, 쓰자. 메모하지 않으면 잊어버린다.</li></ul><hr><h1>처음에는?</h1><ul><li>1년차는 회사 내규에 따른 연봉을 받도록 하자.<ul><li>처음의 돈 욕심이 빠른 경력을 쌓는데 문제가 될 수 있다. </li></ul></li><li>업무를 수행하면서 종료 시 보고보다 중간 보고가 낫다. <ul><li>협업을 중요시 하자.</li></ul></li><li>연 단위 프로젝트에 참여할 수 있을 때까지 노력하기.</li></ul><hr>이상으로 열심히 주워들은 내용들이다. 자격증은 꾸준히 계속해서 따야하고, 학위도 계속 올려야한다... IT에는 끝이 없나보다...

[취준생 일지] 개발자 진로

Workthrough for prev. projectForm Basics : Controlled Input &amp; UnControlled InputReact &amp; FormsReact-Hook-FormZod + ResolverForm Component &amp; UI Componentfourth project : React-Hook-Form Proj

#4. Form handling in React

<img src="https://image.until.blog/steady/article/1727346269489.png" alt="until-1565"><h2>어디에 쓰이나?</h2><hr>한 서비스를 개발할 때 여러 플랫폼의 소셜 로그인 기능을 구현하다가 로그인 플랫폼에 상관없이 각 유저별로 서로를 특정할 수 있는 공통의 값이 필요하게 되었고 나는 닉네임을 필수로 입력받아 이 부분을 처리하려고 했다.하지만 회원을 등록할 때 닉네임을 직접 입력받게 되니 회원가입의 과정이 부자연스러웠고, 닉네임을 입력하지 않고 중간에 이탈할 경우의 데이터 처리가 모호해져 우선 무작위 닉네임을 지정하고 추후 변경하는 프로세스를 생각하게 되었다.그때 필요했던 기능이 이 무작위 닉네임 생성 기능이었다.<h2>개발 과정</h2><hr>가장 먼저 떠올랐던 예시는 썸네일에 사용한 블리자드의 무작위 작명이었다. 무작위로 주어진 단어들을 조합하여 특정한 닉네임을 만들어내는 단순한 기능이였다.우선 내가 개발하는 서비스는 반려동물과 관련된 서비스였기 때문에 동물과 관련된 닉네임을 생성하기로 했고 앞쪽에는 형용사를 뒤쪽에는 동물 이름을 사용해 닉네임을 만들어 보았다.<pre spellcheck="false"><code class="language-java">public class NicknameGenerator {

 // 형용사 배열
 private static final String[] adjectives = {
 "귀여운", "발랄한", "사랑스러운", "똑똑한", "활발한", "졸린", "장난꾸러기", "용감한", "상냥한", "행복한",
 "느긋한", "온화한", "믿음직한", "애교 많은", "웃음 가득한", "엉뚱한", "당당한", "재빠른", "고요한", "부드러운"
 };

 // 동물 이름 배열
 private static final String[] animals = {
 "강아지", "고양이", "햄스터", "토끼", "앵무새", "거북이", "고슴도치", "말티즈", "푸들", "치와와",
 "골든리트리버", "페르시안", "스피츠", "요크셔테리어", "러시안블루", "코뉴어", "페럿", "다람쥐", "이구아나", "비글"
 };

 // 랜덤 닉네임 생성 함수
 public String generateNickname() {
 Random random = new Random();

 // 배열의 길이에 맞춰 랜덤으로 배열 값을 조회
 String adjective = adjectives[random.nextInt(adjectives.length)];
 String animal = animals[random.nextInt(animals.length)];
 // 추가적으로 닉네임 중복을 방지하기 위해 1~999까지의 무작위 숫자 조회
 int number = random.nextInt(1000);

 return adjective + animal + number;
 }
}</code></pre>위 처럼 간단한 무작위 닉네임 생성기를 만들어 보았다.하지만 이걸로는 유저의 닉네임 중복을 완벽히 막을 수는 없어서 DB를 통해 해당 닉네임이 존재하는 지 확인 후 재생성하는 과정도 포함시켜야 한다.<h2></h2><h2>돌아보며</h2><hr><blockquote>개발 후 코드를 보면 간단하지만 차근차근 생각해 나가는 과정이 중요한 것 같다.코드 자동화 기술이 워낙 많이 발전해서 이 정도는 간단하게 작성해주겠지만 백지 상태에서 스스로 생각하면서 만들어봐야 더 기억에 오래 남아 추후에 시간을 절약하게 되는 것 같다.모든 코드를 백지에서 부터 천천히 만들 순 없겠지만, 미래를 위해 자동으로 작성된 코드라면 천천히 작동 방식을 생각해보며 머릿속에 남기며 공부해 나가보자</blockquote>

어디에 쓰이나?한 서비스를 개발할 때 여러 플랫폼의 소셜 로그인 기능을 구현하다가 로그인 플랫폼에 상관없이 각 유저별로 서로를 특정할 수 있는 공통의 값이 필요하게 되었고 나는 닉네임을 필수로 입력받아 이 부분을 처리하려고 했다.하지만 회원을 등록할 때 닉네임을 직접 입력받게 되니 회원가입의 과정이 부자연스러웠고, 닉네임을 입력하지 않고 중간에 이탈할 경우