CRA는 리액트 프로젝트를 빠르게 세팅하도록 도와주지만, 어떠한 동작을 통해 프로젝트를 세팅하는지는 알 수가 없습니다. 그래서 CRA없이 손수 세팅하는 연습을 해보았습니다. 진행 순서 npm 패키지 생성 패키지/모듈 설치 Babel 설정 WebPack 설정 npm-scripts 설정 (Package.json) React 코드 작성 (HTML, JS) develop 서버로 렌더링 npm 패키지 생성 프로젝트 디렉토리 생성 후, 해당 경로에서 npm 패키지를 생성합니다. (package.json) mkdir [project-name] cd [project-name] npm init -y패키지/모듈 설치 필요한 패키지/모듈을 설치합니다. 이때, 일반 패키지와 개발용 패키지를 나누어 설치합니다. npm i re..

현재 진행중인 프로젝트가 마무리되어서, 지난 포트폴리오와 경험들을 되돌아보았습니다. 올해 SSAFY에 입과해 활동하면서 새로운 프로젝트를 참 많이 수행했더라구요. 기념으로 이력서와 포트폴리오를 리뉴얼 해보았습니다. 새로 작성한 이력서와 포트폴리오도 자랑(?)할 겸, 이런저런 조언들도 받아보고 싶고, 앞으로의 계획도 떠올려볼 겸! 이렇게 게시글로 작성해보려고 합니다! 노션 이력서 & 포트폴리오 먼저, 웹 링크로 첨부할 노션 이력서&포트폴리오 입니다. 많은 기업들에서 이력서와 포트폴리오를 함께 기재할 것을 요구하기에, 두 가지 모두 작성해보았습니다. 단락 하단에 첨부된 링크에 접속하면 노션 홈이 나오는데요, 간단한 인적사항 및 소개와 함께 이력서와 포트폴리오로 이동할 수 있는 카드를 두었습니다. 이력서에는 ..

함수 선언문은 함수 호이스팅이 일어난다. 함수 표현식은 변수 호이스팅이 일어나지만, 함수 할당 전 사용이 불가하다. 다음은 가능하다. 함수 선언문 hello가 함수호이스팅 되었기 때문이다. function MyComponent () { hello() // hello function hello() { console.log("hello") } return } 다음은 불가능하다 함수 표현식을 저장하는 var 변수 hello는 최초 undefined로 초기화되며 변수 호이스팅된다. 따라서 값 할당 전에는 함수로서 부를 수가 없다. function MyComponent () { hello() // **not a function error** var hello = () => { console.log("hello")..

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다. 이번 기사가 (아마) SSAFY 생활 중 작성하는 마지막 기사가 되지 않을까 싶네요. 이번 기사도 많이많이 읽어주세요! 이번 기사의 주제는 바로바로~!~! [이달의SSAFY 11月] 채용공고, 어디서 봐? 입니다. SSAFY에 지원해 교육을 받는 이유는 여러가지가 있습니다. 여러가지 지식이나 기술을 배우기 위함도 있지만 이 모든 것에 대한 궁극적인 이유는 역시 취업이겠죠? 취업을 위해 가장 먼저해야 할 일은 무엇일까요? 바로, 채용 공고를 찾아 지원서를 작성하는 일입니다. 채용 공고를 찾기위해, 제가 자주 이용하는 몇 가지 취업 플랫폼을 소개드리고자 합니다. 지금부터 한 번 살펴볼까요? 💨💨 달력으로 한눈에, 자소설 닷컴 🎤 https://jasos..

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다. 싸피가 끝나갑니다. 이젠 정말 백...ㅅ..ㅜ... 본격적인 취준생 생활을 시작하게 되겠군요. 이번 기사도 많이많이 읽어주세요! 이번 기사의 주제는 바로바로~!~! 'Play, Place' 프로젝트 회고 입니다. SSAFY에서의 마지막 프로젝트인 자율 프로젝트가 어느덧 7주가 흘러 끝나게 되었습니다. 이번 기사에서는 마지막 프로젝트인 Play, Place를 간단하게 소개하고, KPT 방식으로 프로젝트를 회고해보고자 합니다. 지금부터 한 번 살펴볼까요? 💨💨 KPT 회고란? 🎤 본격적인 회고에 앞서, 이번 회고 방식인 KPT 회고를 소개합니다. 회고 방법론 중 하나로, 회고 내용을 Keep, Problem, Try로 나누어 진행하는 방식입니다. 각각의..

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다. 저는 요즘 자율프로젝트의 4주차를 향해 열심히 달려가고 있답니다. 오늘 전달드릴 내용은 유용한 프론트엔드 지식입니다! 이번 기사의 주제는 바로바로~!~! React + Typesciprt 환경에서 StoryBook 활용하기 입니다. 프로젝트시, 팀의 프론트엔드로서 UI개발을 할 때 주로 컴포넌트 단위로 개발을 하곤합니다. 컴포넌트가 잘 만들어졌나 확인할 때, 매번 페이지 컴포넌트에서 import 하여 테스트하기에는 한계가 있습니다. 오늘 소개드릴 StoryBook이라는 라이브러리는 구현한 컴포넌트를 독립된 환경에서 테스트해볼 수 있도록 도와준답니다! 지금부터 한 번 살펴볼까요? 💨💨 StoryBook이란? 🎤 스토리북의 공식 페이지에서는, 'UI 구..

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다. SSAFY의 프로젝트에는 특별한 활동이 하나 포함되어 있는데요, 바로바로 UCC 촬영/제작 입니다. 한번 알아볼까요? 이번 기사의 주제는 바로바로~!~! [이달의SSAFY 10月] 소개도 하고, 추억도 남기고, 마일리지도 쌓고, UCC 경진대회! 입니다. SSAFY 캠퍼스를 돌아다니거나, SSAFY 교육생들이 모여사는 동네에서 열심히 촬영하고 있는 9기 교육생들을 보신적이 있으신가요?! 있다면, 그들은 아마 유튜버이거나, 프로젝트 UCC를 촬영중일 겁니다! 어떤 활동인지 지금부터 한 번 알아볼까요? 💨💨 프로젝트 UCC란? 🎤 SSAFY 2학기에서는 아래와 같은 목적을 위해 UCC를 제작합니다! - 프로젝트의 영상 포트폴리오화 - 사용자 관점의 UC..

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다. 직전 기사에 이어서, 신한은행 해커톤과 관련한 기사의 주제로 '챙겨요' 프로젝트의 회고를 작성해보았습니다. 많이많이 읽어주세요~! 이번 기사의 주제는 바로바로~!~! '챙겨요' 프로젝트 회고 입니다. 직전 기사에서 신한은행 해커톤 with SSAFY에 관한 소식을 전해드렸었습니다 ! [이달의SSAFY 9月] 신한은행 해커톤 with SSAFY 참가 후기 안녕하세요! 9기 SSAFYcial 전인혁 기자입니다. 특화 프로젝트가 한창인 9월 말입니다! 싸피생활도 벌써 3달도 채 남지않았네요. 남은 기간도 끝까지 최선을 다해보겠습니다...! 이번 기사의 주제는 jeon-ny.tistory.com 이번 기사에서는 신한은행 해커톤에 참여했던 프로젝트인 '챙겨요..

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다. 특화 프로젝트가 한창인 9월 말입니다! 싸피생활도 벌써 3달도 채 남지않았네요. 남은 기간도 끝까지 최선을 다해보겠습니다...! 이번 기사의 주제는 바로바로~!~! [이달의SSAFY 9月] 신한은행 해커톤 with SSAFY 참가 후기 입니다. 8월 중순, SSAFY 복도에 눈에 띄는 공고문이 하나 붙었습니다. 바로, '신한은행 해커톤 with SSAFY'의 개최 소식 ! 1학기 때 친했던 동기들과 상의 후, 망설임없이 지원하였습니다. 서류를 열심히 준비한 결과, 오프라인 현장에 직접 참가할 기회를 얻었답니다! 해커톤 현장은 어땠을까요? 지금부터 한 번 살펴보겠습니다 💨💨 신한은행 해커톤 with SSAFY란? '연결과 확장' 이라는 주제로 진행되었..

Jeonny-Boilerplate ? vite를 활용해 React + Typescript 개발 환경(프로젝트)를 생성합니다. 대부분의 리액트 프로젝트에서 기본적으로 사용되는 라이브러리가 포함되어있고, 코드 포맷팅을 돕기 위한 도구들도 추가되어 있습니다. npm에 배포되어 있어서, 누구든 쉽고 빠르게 사용할 수 있습니다. https://www.npmjs.com/package/jeonny-boilerplate 왜 만들었나요? 매번 새로운 프로젝트를 진행할 때마다, vite, cra로 프로젝트를 생성하고, eslint, prettier, 기타 라이브러리들을 추가적으로 설치하는 과정이 번거로웠습니다. 특히 eslint, prettier는 설정 과정에서 종종 에러가 발생하기도 해서, 시간을 더욱 잡아먹곤했습니다...

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다. 이번에는 소식을 전하는 기사가 아닌, 유익한 정보를 공유하는 기사로 준비해봤어요. 이번 기사의 주제는 바로바로~!~! React와 TypeScript로 나만의 라이브러리 만들기 / npm 배포하기 입니다. 개발자에게 라이브러리란, 정말정말정말정말정말정말정말정말정말 없어선 안 될 중요한 요소입니다. 편리한 기능을 가진 라이브러리들은 어떻게 만들어져서, 어떻게 npm에 올라가는 걸까요? 이번 기사에서는 나만의 라이브러리를 만들어서 npm에 배포하고, 내 프로젝트에 적용하는 방법을 알려드리고자 합니다. 지금부터 한 번 살펴볼까요? 💨💨 React와 TypeScript로 나만의 라이브러리 만들기 / npm 배포하기 작업을 진행할 프로젝트 생성 🎤 라이브러리..

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다. 지난 7월, 2학기가 시작되고 어느덧 공통프로젝트를 마치고 특화 프로젝트가 시작되었답니다. 지난 공통프로젝트는 어땠을까요? 이번 기사의 주제는 바로바로~!~! [이달의SSAFY 8月] 2학기 공통 프로젝트 회고 입니다. 2학기의 첫 프로젝트였던 공통 프로젝트. 이번 프로젝트를 통해, 정말 많은 지식과 경험을 얻을 수 있었는데요, 공통프로젝트에서 어떤 역할을 수행해왔는지, 그리고 어떤 것들을 느끼고 배웠는지를 이번 기사에 담아보았습니다. 지금부터 한 번 살펴볼까요? 💨💨 2학기 공통 프로젝트 회고 공통 프로젝트 회고에 앞서, SSAFY의 2학기는 어떻게 진행되는지, 공통 프로젝트가 무엇인지 알아볼까요? SSAFY 2학기는 어떻게 진행되나요? 🎤 2학기..