무우너의 먹물 기록

수강후기꽤나 오랜 시간이 지났지만,,, 이제야 쓰는 XXXP,, 수강기간2022.10.24 ~ 2023.02.15(3개월) 주중 09:00-18:00(월-금) 교육과정회계기초 + FI 모듈 + IT기초 + Fiori 개발프론트엔드 공부를 하면서 내가 취업을 할 수 있을까? 취업 한다고 해도 너무나도 빨리 바뀌는 프론트엔드 시장에서 오래 일 할 수 있을까? 하는 불안감이 있던 시기에 알게 된 교육 과정!! Fiori와 Ui5를 이용한 프론트엔드 개발에 관심을 가지고 입과를 희망하게 되었는데, 교육 과정을 들으며 회계 지식과 FI 모듈, 시스템 세팅이 재미있어서 교육 중간부터 모듈 컨설턴트를 꿈꾸게 되었다!! 국비지원 교육과는 다르게 따로 내일배움카드 발급이 필요하지는 않다! 지원 방식이 조금 다르긴 하지만..

청년취업사관학교 후기글입니다! 청년취업사관학교란? - SeSac은? 서울특별시와 서울산업진흥원(SBA)이 SW혁신 인재의 양성과 적소공급을 위해 조성한 장소입니다! 새싹(Seoul Software Academy, SeSAC)은 캠퍼스의 교육브랜드로 서울시에서 SW인재 양성을 위해 ‘싹’을 틔우고 성장시켜, 개발자를 꿈꾸는 청년들이 ‘SW개발자로 데뷔’ 할 수 있도록 돕는 교육 프로그램을 의미합니다. 현재 수강중인 과정! 지난 10월 24일부터 SeSac 금천 2기의 기업용 클라우드 기반 재무 애플리케이션 개발자 양성을 수강 중인데 정말 이전의 삶과 다르게 정말 갓생 살고 있다. 2022.10.24 - 2023.02.15 진행되는 3개월 교육인데 그만큼 교육 내용을 실무에서 자주 사용하는 내용으로 구성해서..

React Query란? React Application에서 서버의 상태를 불러오고, 캐싱, 동기화, 업데이트 하는 작업을 도와주는 라이브러리 Hook을 사용하여 React Component 내부에서 서버, 비동기적인 요청이 필요한 Source 데이터를 사용할 수 있는 방법을 제안 React Query를 사용하는 이유 1. 기존의 상태관리 라이브러리는 비동기, 서버 상태 작업에 부적합 -> 서버 상태*가 다르기 때문 2. 잠재적으로 대역폭을 절약하고 메모리 성능을 높이는데 도움 3. 간단한 로직으로 복잡한 코드 대체 가능 다음 블로그를 참고하여 작성한 글입니다! https://kyounghwan01.github.io/blog/React/react-query/basic/#usequeries react-qu..

carousel slide란? : 회전목마(carousel)처럼 요소들의 순환시키는 슬라이드 쇼 carousel slide와 slider의 차이는? carousel slide : 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트 slider(track bar) : 사용자가 점(인디케이터)를 움직임으로써 값을 설정할 수 있는 그래피컬 컨트롤 요소 (slider로 검색했더니 원하는 기능이 나오지 않아 검색하다 보면 차이점을 알게 되었다!) React에서 구현하기 react-slick fullPage.js Swiper React Swipeable React Responsive Carousel etc… 직접 구현해보기 react-slick을 사용해 구현하기 조건 일시 정지 기능 arr..

react-rest이란? : 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지 → 브라우저 간의 스타일 호환성 맞춤 적용 방법 npm npm i styled-reset yarn yarn add styled-reset styled-component 버전에 따른 사용 방법 styled-component 4.x || 5.x import * as React from 'react' import { Reset } from 'styled-reset' const App = () => ( Hi, I'm an app! ) import * as React from 'react' import { createGlobalStyle } from 'styled-components' import reset ..

네이버 로그인 중 직면한 문제 졸업 작품을 만들며 네이버 로그인을 구현하고 있는데 clientId를 그냥 변수로 노출시켜도 되나?? git에 올릴 예정인데 온라인 상에 노출시켜도 괜찮나? 라는 생각이 들어 React에서 환경변수 사용 방법을 알아보았다. React에서 환경변수 사용하기 1. 자바스크립트 이용하기 src 폴더 아래에 임의의 js 파일을 생성한다. ex. src/variables.js // varibales.js export const CALLBACK_URL ='localhost:3000'; export const CLIENT_ID = 'Ocotopus'; 컴포넌트에서 환경변수 불러와 사용하기 //Login.js import * as vars from './variables' const Lo..

TypeScript란? JavaScript + Type TypeScript를 쓰는 이유 1. Type이 엄격 JavaScript는 Dynamic Typing을 지원하기에 알아서 데이터 타입을 바꿔주며 오류가 발생하게 됨 -> 프로젝트가 커지면 문제가 발생할 확률 높아짐 2. 에러 메세지가 구체적 JavaScript의 경우 추상적인 에러가 많아 추적이 어려움 TypeScript는 오타, 타입 오류에 대해 에러를 반환함 TypeScript 설치 1. nodejs 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. VS..

JsDoc이란? JavaScript용 API 문서 생성기 => 즉 완전 유용한 주석이다 => VSCode, Webstorm 등 여러 IDE에서 지원함 일반적으로 사용하는 주석 /**/ // JsDoc 주석 /** * * */ => /** 으로 입력하면 사용 가능 일반 주석과의 공통점, 차이점 일반 주석 JSDoc 기능 함수의 기능 매개변수, 리턴값 함수의 기능 매개변수, 리턴값 주석 단 대상 hover 시 별 반응 없음 함수와 변수 등 주석을 단 내용이 보여짐 => 매개변수와 리턴값 이외에도 다양한 값 설정이 가능함 실제 사용되는 모습 /** * 이름과 나이 입력시 해당 내용으로 인사하는 함수 */ function Hi(name, age) { console.log(`hi $age years old $na..

이름 Jotai - 일본어로 상태 Zustand - 독일어로 상태 분석 Jotai - Recoil을 닮음 Zustand - Redux를 닮음 상태가 위치하는 곳 Jotai - React Component Tree 안 Zustand - React의 store 바깥 상태의 구성 Jotai - Atom(상향식 구조) Zustand - 하나의 객체(하향식) 기술적 차이 주요 차이점 - 상태 모델 Jotai 원시적인 atoms(함께 구성 가능함) useState + useContext에 의해 대체 가능 atoms은 하나의 큰 context를 공유함 Zustand 하나의 store(여러 독립적인 store 생성 가능) 외부에 존재하는 store(훅들이 이를 연결함) 언제 어떤 상태관리 툴을 이용해야 할까? useS..

Zustand? React의 상태관리 라이브러리 독일어로 "상태" 특징 특정 라이브러리에 엮이지 않음 한 개의 중앙에 집중된 스토어 구조 활용(상태 정의 및 사용이 단순) 상태 변경 시 불필요한 리랜더링 일으키지 않아 제어 용이(Context API와 차이점) React에 직접적인 의존 X(자주 바뀌는 상태 직접 제어 가능) 코드 양이 적음 👍👍👍 Context API를 사용하지 않는 이유 Context란? : 컴포넌트 트리 전체에 데이터 제공 가능해 의존성 주입에 효과적 (일반적인 React는 단계마다 props를 넘겨주어야 함) But 부모컴포넌트 쪽에 Context.Provider 컴포넌트 선언 후 Context로 전달되는 값이 변경될 때 해당 컴포넌트를 사용하는 모든 자손 컴포넌트가 리렌더링 즉 ..