🧚♀️: 귤님! 취직준비할 거라면서요! 어디를 가고 싶어요? 🍊: 어.. 어.. 개발자요! 개발하는 곳! 뭐, 어.. java나 js쓰는 곳! 🧚♀️: 어휴, IT기업 종류부터 알아보죠~ SI업체 System Integration 구인구직 활발 (수요도 많고 퇴사도 많고 프리랜서도 많고) 무에서 유를 창조 고객의 요구사항에 따라 만들어주는 일 공공기관에서 프로젝트를 발주함 -> SI업체에서 수주하여 구축(기획, 디자인, 개발 진행) 업무강도 높음(요구사항을 따라가다보니 일정 스트레스, 맞춰준다는 것 자체에 대한 압박 스트레스 존재) 경력 인정이 좋음. (보편적인 업무능력이 향상될 것이나, 특정 전문적인 경력 인정으론 어려울 것임) ex) 삼성SDS, LG CNS ... 솔루션 회사 무에서 유가 아니라..
useContext context이용시, 트리 단게마다 명시적으로 props를 넘겨주지 않고도 컴포넌트가 값을 공유할 수 있다 useContext는 Context.Provider과 같이 사용된다 context를 써야하는 경우 예를 들어, 로그인한 유저, 테마, 선호하는 언어 등의 전역적 데이터를 공유할 때 (아래는 테마를 통한 예시) 기존 방식: 테마 인수를 명시적으로 넘겨주기 정보를 일일이 넘겨주고 있음 App > Toolbar > ThemedButton class App extends React.Component { render() { return ; } } function Toolbar(props) { return ( ); } class ThemeButton extends React.Componen..
useEffect함수 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록함 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 되었음 useEffect() 작성법 useEffect(funtion, deps) fuction: 수행하고자 하는 작업 deps: 검사하고자 하는 특정 값에 대한 배열 혹은 빈 배열 *deps = dependency Component가 mount되었을 때 mount란 component가 가장 처음 렌더링 될 때다 deps위치에 [ ] 표기 혹은 배열표시 생략 예시코드 import React, {useEffect} from 'react'; useEffect( () => { //컴포넌트 화면에 가장 처음 렌더링 될 때, 한 번만..
1. useState() 함수형 컴포넌트에서 상태를 관리하기 2. 사용법 리액트 패키지에서 useState 함수를 불러온다 import Ract, {useState] from ‘react’; useState함수 호출을 통해 배열을 반환시킨다 const [상태 값 저장 변수, 상태 값 갱신 함수] = useState(상태 초기 값); 상태 값 갱신 함수, setNumber 라고 지정해줬다고 치자. 여기엔 업데이트 할 새로운 값을 넣어줄 수 있다. setNumber(number+1) 기존 값을 업데이트 하는 함수를 넣어줄 수 있다. setNumber(preNum ⇒ preNum +1) 3. 예시 import React, {useState} from 'react'; function InputTest() { c..
초기 코드 index.html Co-kgyury Home Tistory Github Velog Youtube 1️⃣ 목록 만들기 아무 의미 없는 div로 각 영역을 나타내기보다, ul로 나타내주자 ul:UnOrdered List 목록화 되어있음을 나타내기 위함. 이 안에 카테고리 목록이 될 리스트들을 작성해주자 (li>a)*5 로 단축시켜 다섯 개를 불러낼 수 있다. Co-kgyury Home Tistory Github Velog Youtube Co-kgyury Home Tistory Github Velog Youtube 2️⃣ CSS 스타일링하기 레이아웃 설정 .navbar { display: flex; justify-content: space-between; align-items: center; } ..
자바를 자바바 Stream : 함수 여러 개를 조합하여 필터링, 맵핑된 결과를 얻게 할 수 있도록 함 1️⃣ 배열의 원소를 가공하는 방법 map: 요소들을 특정 조건에 해당하는 값으로 변환함 filter: 요소들을 조건에 따라 걸러내는 작업을 함 sorted 요소들을 정렬하는 작업을 함 위와 같은 가공이 끝나면, 리턴해줄 결과를 collect를 통해 만들어준다 2️⃣ 실전 test SET ArrayList list = new ArrayList(Arrays.asList("KIM", "GYU", "RY")); 1. map list.stream().map(s->s.toUpperCase()); list.stream().map(String:toUpperCase); System.out.print(list.strea..
1️⃣ 어원 연극 용어로서의 Script 배우의 대사를 중점으로 배우의 표정 등장과 퇴장, 무대장치 중심으로 지시한 내용 즉, 배우의 행동을 지시하는 것과 같이 소프트웨어의 실행에 대한 지시 및 제어하는 것을 Script라고 일컫기도 한다 2️⃣ IT에서의 스크립트 뜻 다른 프로그램에 의해 번역되거나 수행되는 프로그램, 명령어들의 나열 스크립트 언어: 기존에 이미 존재하는 소프트웨어를 제어하기 위한 용도를 쓰이는 언어 즉, 배우의 행동을 지시하는 것과 같이 소프트웨어의 실행에 대한 지시 및 제어한다 인터프리터 방식을 위함 소스코드를 컴파일 하지 않고도 실행할 수 있는 프로그래밍 언어 Perl, JavaScript, jQuery, JSP, PHP, ASP, Python... 3️⃣ 스크립트 언어 (ftea..
프로젝트에서 필요했던 react 관련 내용을 정리합니다 Redux의 액션함수 사용하기 1. createAction 파라미터로 전달받은 값을 객체에 넣어주는 작업에 대하여 자동화 시킴 예시코드 //기존 export const increment = (index) => ({ type: types.INCREMENT, index }); //함수사용 export const increment = createAction(types.INCREMENT); 단, createAction함수를 사용하면 기존의 파라미터(index)값이 무엇인지 모른다 따라서 파라미터로 전달받은 값을 액션의 payload값으로 설정해준다 만약 increment(5) 이었다면 다음의 객체가 생성되는 것이다 { type: 'INCREMENT', pa..
프로젝트에서 필요했던 react 관련 내용을 정리합니다 Redux : js App을 위한 state container (react, augular, jQuery, vanillaJS등의 framework와도 작동) : action에 반응하여 상태를 변경함 (UI 상태에 대한 함수 기술 framework, 즉 리액트와 잘 어울림) 1. React에서 Redux가 필요한 이유 react에서 Component와 Application은 각각 다음의 state를 가진다 Component: local state, Application: global state 프로젝트 규모가 커지며 Component의 수가 늘어나면 local state의 전달이 어렵다 data전달시 필요없는 data의 흐름이 생긴다 data전달이 잘..
React로 진행한 프로젝트 내에서 공부가 필요했던 라이브러리를 정리합니다. React 라이브러리/모듈/함수 정리 모듈명 설명 참고주소 pender 1. 프로미스 기반 액션들을 관리하기 위한 미들웨어와 도구가 포함된 라이브러리 2. redux-promise-middleware와 유사함 3. payload에 프로미스가 있으면 이 프로미스가 시작하기 전, 완료, 실패 했을 때 뒤에 PENDING, SUCCESS, FAILURE접미사를 붙여줌 4. 요청들을 관리하기위한 reduser와 요청관련 액션들을 처리하기 위한 액션 핸들러 함수들을 생성해주는 도구가 있음 https://redux-advanced.vlpt.us/2/04.html pender의 type 속성 pender에 type이 주어지면 type에 접미..
최신수정일 22.02.14 왜 명령어를 다시 정리하냐면. 실무와 팀프로젝트에서 본격적으로 깃을 통한 협업이 들어가는데 개인 레포지토리를 관리할 때랑은 알아야 할-자주 쓸 명령어가 따로있다. 따라서 경험상 필수적인 명령어 위주로 나 좋으라고 다시 정리한다. 지속적으로 추가 예정 진짜 완전 기본 명령어 명령어 설명 $ git clone [원격/로컬 경로] 작업할 레포지토리 이리와라, (origin이란 리모트 저장소 자동 등록) $ git add [파일경로] - [파일경로]에 해당하는 [변경파일]만 스테이징 $ git add . - 모든 [변경파일]을 스테이징 $ git commit -m "[메시지내용]" 커밋 생성, 커밋내용 확정 $ git push 커밋 전송 더 디테일한 기본 명령어 명령어 설명 $ git..
React에 대한 개인학습을 기록합니다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 ✔ 리액트 개요 확인 ✔ JSX다루기 ✔ 리액트 컴포넌트 ✔ 리액트 스타일링 ✔ 컴포넌트 복잡하게 다루기 ✔ 속성 전달 ✔ JSX 복잡하게 다루기 ✔ 상태 다루기, 카운터 설정 ✔ 데이터를 UI로 불러오기 ✔ 이벤트 다루기 ✔ 컴포넌트 생명주기 (생명주기 메소드) ✔ DOM 엘리먼트 접근하기 ✔ 라우터를 통한 싱글 페이지 앱 구축 ✔ Todo list 앱 제작 ✔ 리액트 개발 환경 구성 13. 싱글페이지 앱 제작하기 SPA에선 완전히 새로운 페이지가 로딩될 일이 없다. 동일한 페이지 안에서 인라인으로 뷰가 로딩된다 13.1. SPA(Single page app)의 기대사항 주소 표시줄에 보이는 URL은 항상 현재 보고..