jongviet

*11월2일 *customized input tag -리액트에서는 스타일링이나 재사용을 목적으로 특정 기능 or 특정 태그를 컴포넌트 단위로 쪼갬. 스타일링된 input tag를 다양한 곳에서 사용하기 위해 실습해봤다. 1)Input이라는 명칭으로 컴포넌트 생성 후, 부모 컴포넌트에서 하기와 같이 props 값을 전달. formik에 대한 의존성을 없애기위해 필요한 formik 또한 모두 전달 2)자식 컴포넌트에서 typescript를 활용하여 props를 정의하고, 받은 props를 연결 export interface Props { type?: "text" | "password”; // 타입이 한정되어 있다면 명확하게 종류를 정의하는 것도 좋음 placeholder?:string; toggleVisib..

*10월30일 *클라이언트 저장소 1)local storage -브라우저 종료시에도 계속해서 데이터 보관 localStorage.setItem('key', key); localStorage.getItem('key'); localStorage.removeItem('key'); localStorage.clear(); //전체 삭제 2)session storage -브라우저 종료시에 함께 삭제됨 sessionStorage.setItem('key', key); sessionStorage.getItem('key'); sessionStorage.removeItem('key'); sessionStorage.clear(); //전체 삭제 3)react-cookies -쿠키 삭제 하지 않는 한 계속해서 보관 npm in..

*10월26일 *useEffect & useState -effect는 class 컴포넌트의 생명주기와 100% 매칭되지는 않지만 비슷한 개념으로 이해하면 됨. -state는 this.state.isOn, this.setState 느낌으로 이해하면 됨! const [isOn, setIsOn] = useState(true); // 배열형태로 getter & setter 리턴 useEffect(()=>{ const timer = setInterval(tick, DELAY); // componentDidMount 역할, useEffect scope 내 return ()=>{ clearInterval(timer); // componentWillUnmount 역할 } }, [isOn] )// deps 위치, Com..

*10월5일 -프론트 관련 일부 업무를 병행하게 되었다. HTML, CSS 베이스 프론트는 많이 접했었지만, REACT는 생전 처음으로 코드 한줄 마다 console.log 하나씩 치면서 겨우 일부 이해를 했다. 다행히 삽질한 시간 만큼 조금씩 익숙해지고 있어서 다행이다. -주말 중 REACT 관련 강의를 하나 듣고 개념을 좀 더 확실히 잡아야겠다. *기본 -this.setState 통해서 주로 컴포넌트 변경 진행함 -useeffect()는 마운트 이후 state가 바뀌면 실행함 -render()는 최종 정리된 값들을 페이지 상 구현하는 역할을 함 -componentWillUnmount()는 특정 페이지에서 나갈 때. 즉 더이상 해당 컴포넌트를 사용하지 않고 나갈 때 발생함. -componentWillR..

#Front-end(JavaScript) *4월1일~28일 -function, callback, apply, closure, self-invocation, jquery 등 *Function -var x = function (a, b) {return a * b}; //익명함수 -arguments.length // parameter들의 길이를 가져올 수 있음; 배열형으로 형성되어 있음. -ES5, ES6용 따로 정의; 자바스크립트만으로 개발하는 회사에서 주로 보임; -optional param function(x, y = 2) { //y는 빈값일 시 2로 둠; overloading } *function callback관련 -call은 function에 적용한다고 생각하면됨; -부름 당한 놈이 부른놈을 다시 ..

#Front-end(JavaScript) *4월1일~28일 -JS 두번째!!! 웹을 자유자재로 다루기 위해서는 JS는 매우 중요함!! -Json, JS 필수 method, DOM, BOM 등. *json 형태 값 정렬 -숫자값 : cars.sort(function(a,b) {return a.year - b.year} ); //특정 value값 기준 정렬 -문자값 : lowercase로 다 바꿔준 후 비교; 대소문자에 따른 아스키코드가 달라서 타입 일치 먼저 시켜야 함; *문자 array 값 / join -일반적인 comma는 fruits.toString(); -다른 문자 넣고 싶으면 fruits.join("*")과 같이 넣어서 구분해서 정렬 가능. 데이터 전송때 주로 씀; *pop, push, shift..

#Front-end(Javascript 이하 JS) *4월1일~28일 -이클립스에서는 JS용 개발 라이브러리 플러그인 지원을 중단함 -> vscode 사용. -vscode용 js 플러그인 설치(js code snippets, prettier, jquery code snippets) -JS는 script reading! 즉, 순서대로 읽고 출력; JS는 리소스를 한번이라도 읽어놔야 해석가능....(interpreter 방식); -JS 위치는 최하단이맞음.. 선언은 주로 head쪽에 배치; html + css가 모두 읽히고 난후에 JS가 적용되어야 하기에. 위치가 최하단이라는 것. ->jquery를 이용하여 $(function() { }); 안에 넣는식으로 보완 가능함. -특정한 폼에 입력된 정보들을 취합하..

#Front-end(CSS) *4월1일~28일 -CSS의 경우 욕심이 생기면 한도 끝도 없다고 생각함. 따라서 나는 디자이너가 아니기에... 깔끔하게 정렬하고 스펙 수정할 수 있는 정도만 기능을 익히는 것에 초점을 맞추었다. 1)Selector -과한 디자인 욕심이 없는 사람에게 가장 중요한 기능! -p + h1는 p태그 바로 뒤에 오는 h1 찾기, p > h1과 같이 안에 있는 구조랑은 다름 -'^' ~으로 시작하는; '$' ~으로 끝나는; '*' 모든/~을 포함하는; *Basic Selector -class 단위(중복으로 적용됨; 사용은 '.classname') / 하나에 2개의 클래스명 적용 가능, class="nn ss" -id 단위(하나씩만 적용됨; 사용은 '#idname') -*은 전체 -h1..