프론트엔드 킹왕짱이될테다 프론트엔드 킹왕짱이될테다

1. recoil install yarn add recoil 2. index.js에 Recoil Root 추가하기 import { RecoilRoot } from "recoil"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 3. recoil폴더를 만들고 Atom.jsx import { atom } from "recoil"; export const Atom = atom({ key: "textState", // 유니크한 이름 짓기 default: { name: "LeeCJ", age: 30, }, // default value (aka initial value) 이니셜스테이트 }); default에 초깃..

컴포넌트를 분리하여 구조를 개선을 하는 이유: 코드의 가독성과 유지보수성을 향상시켜 코드 퀄리티를 올리기 위해 면접을 보러갔다가 컴포넌트 구조와 관련해서 좀 더 개선해보면 좋을 것이라는 조언을 받았습니다. 어제 하루는 FE팀원들과 상의하여 어떤 방식의 컴포넌트 구조가 좋은 것인지 각자 찾아보고 고민하는 시간을 가졌고, 오늘부터 수정을 시작했습니다. 리액트 공식홈페이지에서는 아래와 같이 컴포넌트를 표현하고있습니다. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 컴포넌트는 UI를 독립적이고, 재사용 가능한 부분으로 분리해주며 각각을 고립시켜 생각할 수 있게 해줍니..

추가되는 게시글은 순차적으로 커지는 id값을 가지고있어 기존 old순서에서 최신순 배치로 변경하는데 id값을 이용할 수 있었다. sorting의 순서를 바꾸는건 처음해보는데 useState를 이용한 로직은 머릿속에 금방 그려졌고, 다른 방법도 고민해보고싶어서 찾아보다가 조금 더 복잡한 데이터를 다룰 때 useReducer를 이용한다는 것을 알게되었다. 최신순으로 정렬하는건 useState와 쿼리스트링으로 충분히 구현이 가능했고, useReducer를 사용하는게 과연 더 편할지 직접 로직을 짜보면서 공부해보았다. useState를 이용한 코드. (sort메소드) const WikiPage = () => { ... //postData 데이터 원본을 담을 변수 const [postData, setPostDat..

항해99를 수료하고,, 스파르타에서 하는 취업대비반에서 이것저것 도움 받으며 면접준비+이력서첨삭+코딩공부를 하고있다. 면접 예상질문을 받고 답변을 준비하며 거기에 대한 공부를 하는데, 항해를 하는동안은 집중적으로 실전에 필요한 부분만 빠르게 습득하고 적용시키느라 디테일한 것들을 많이 공부하지 못했다. 그래서 지금 하고있는 면접대비 답변정리가 실제로 면접에서도 도움이 되겠지만 무엇보다 전반적인 JS에대한 이해도를 높이고있는 것 같아 좋은 것 같다. 제일 어려웠던 this에 대해 좀 더 작성해보려한다! this바인딩의 예시 -일반함수 호출시 this바인딩 (window객체가 출력됨.) function myFunction() { console.log(this); } myFunction(); // this는 전..

react query ajax성공/실패시 보여주는 html별도로 지정하거나, 몇 초마다 자동으로 ajax요청해야할 일이 있거나, 실패시 몇 초 후 요청 재시도해야 할 때 등 실시간 데이터가 중요할 때 쓰임! 1. install yarn add @react-query npm install @react-query 2. index.js 설정 //index.js import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); ... ... 이용할 컴포넌트에서 useQuery("이름", () => { return axios.get("https://codingapple1.github.io/user..

Overloading 오버로딩은 함수가 서로 다른 여러개의 call signature를 갖고있을 때 발생한다. type Add= (a: number, b: number)=> number const add: Add = (a, b) =>a+b type Add= (a: number, b: number)=> number 위 callsignature는 아래 callsignature와 같다. type Add= { (a: number, b: number) : number } 1. 매개변수의 데이터 타입이 다른 경우 예외 처리 type Add= { (a: number, b: number) : number (a: number, b: string) : number } const add: Add = (a, b) => a+b..

변수의 타입을 미리 알지 못할때 unknown을 사용할 수 있다. let a: unknown; if (typeof a ==="number"){ let b = a+1} void는 값을 반환하지 않는 함수의 반환 값. 함수에 return 문이 없거나 해당 return 문에서 명시적 값을 반환하지 않을 때 항상 유추되는 타입. never는 함수가 절대 return하지 않을 때 발생 예를 들어 함수에서 exception이 발생할 때. function z (name: string | number){ if (typeof name==="string"){ } else if (typeof name=="number"){ }else { name } } name은 string혹은 number임. 이미 앞에서 string일 때..

리팩토링이 필요한 부분. 이 코드는 사실 useState를 이용했다가 무한렌더링문제가 생겨 코드가 이지경이 되었다. 현재 작동은 잘 하지만 확실히 개선할 필요가 있다. 내가 생각한 문제 변수선언과 값의 할당이 분리되어있음 ->TDZ현상이 일어날 수 있음 근데 TDZ에 대해 정의만알고있지, 사실 이게 일어난 케이스를 본 적이 없어 어떻게 문제가 될지 궁금했다. 그래서 제 스승을 찾아가봤지요 GPT선생님께서 현재 내 코드의 문제를 'isHidden'이 let을 이용해 변수로 선언되는데, if문 밖에선 값이 할당되지않아 TDZ를 만든다. 즉, 값을 할당받기 전까지는 access할 수 없다. 그래서 값을 할당하기 전에 이 변수에 접근하면 에러가 발생한다. 라고 짚어줬다. 그리고 내가 요청한대로 예시까지 들어줬다..

object타입을 명시적으로 정해주는 방법 let a: number[] = [1, 2]; let b: string[] = ["hi"]; let c: boolean[] = [true]; 콜론이용, 타입적어주면 됨 그리고 ts가 타입을 추론하게 let a = [1,2] let b = ["il","1"] let c = [true] 이렇게해도 됨 이런식으로 더 많이한다고 함. optional types const player: { name: string; age?: number; } = { name: "nico", }; 옵셔널 체이닝처럼 물음표이용가능(선택적 타입) -> age가 undefined일 수도 있기때문에 ts가 에러처리함. ts는 알아서 에러처리를 알잘딱깔센 잘한다!!!! if (player.age&..

1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 위 내용은 다음과 동일한 결과를 가져온다. function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } else를 생략해도 똑같은 기능을 한다. JS는 function안에서 return이라는 키워드를 만나면 return 밑에있는 코드는 더이상 실행되지 않음. 2. 삼항연산자 Ternary operator -> 중첩사용도 된다. function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : ( 2 ===..

리덕스에대해 이해가 부족한 것 같아서 반성하면서 이용법을 천천히 다시 공부하고있다... import { configureStore } from "@reduxjs/toolkit"; export default configureStore({ reducer: {}, }); import { Provider } from "react-redux"; import store from "./store.js"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 이제 과 그 모든 자식컴포넌트들은 store.js에 있던 state를 맘대로 꺼내쓸 수 있습니다! store.js에서, const user = createSlice({ ..

상태관리 라이브러리없이 props전송없이 state공유가 가능한 방법이 있다. 그건 바로 context API 근데 잘 안쓰는 이유는, 1. 성능이슈 2. 컴포넌트 재활용이 어렵다 로 인해 잘 이용은 안함. 컴포넌트 바깥에 const Context1= createContext() 이렇게 만들어준다. 그리고 state를 공유할 부분에 이렇게 감싸주고, 전송할 데이터를 value={{여기안에넣으면된다}} 그리고 Detail 컴포넌트로 임포트를 해주고, import { Context1 } from "./App"; const {shoes}=useContext(Context1); useContext를 이용해 보관함을 해체한다. 그리고 이제 자유롭게 쓰면되는데, 아까 언급한 것 처럼 state 변경시 쓸데없는 컴포..

폭풍업뎃... 이게 어떻게된거냐면요 코딩애플로 리액트 전체 다시 한번 싹 훑는 중입니다.. 근데 몰랐던 내용도 많고 나는 그동안 아무것도 모르고 코딩하고있었구나....싶네요 라이브러리 없이 애니메이션효과넣는걸 하고있었다. //App.css .start { opacity: 0; } .end { opacity: 1; transition: opacity 0.5s; } //이렇게도 되고 //이렇게도 됨 useEffect(()=>{ setFade('end') }, [탭]) 그냥 이렇게했을 땐 안되는 이유 classname="start end" 로 만드려는건데, start였다가 start end 이렇게 변경돼야 작동함. 그래서 다시 공백으로 만들어주는 코드가 필요. setFade("") setFade("end") ..

AJAX Asynchronous JavaScript And XML의 약자이며, 자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신입니다. XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있습니다. AJAX로 GET/POST요청하려면 방법 3개 중 택1 하면 됩니다. 1. XMLHttpRequest라는 옛날 문법 쓰기 2. fetch() 라는 최신 문법 쓰기 3. axios 같은 외부 라이브러리 쓰기 axios.get("https://codingapple1.github.io/shop/data2.json") .then((data) => { console.log(data); }) .catch(()=>{ console.log('통..

컴포넌트가 페이지에 장착된다 (mount) 컴포넌트가 업데이트된다 (update) 컴포넌트가 삭제된다 (unmount) class Detail2 extends React.Component { componentDidMount(){ //마운트될 때 실행할 코드 } componentDidUpdate(){ //업뎃될 때 실행할 코드 } componentWillunmount(){ //언마운트 될 때 실행할 코드 } } 옛날방식의 코드. function Detail(props){ useEffect(()=> { //여기 적는 코드는 mount, update될 때 실행됨 }) } 그리고 useEffect를 이용한 mz방식 ㅋ.ㅋ useEffect안에있는 코드는 html렌더링 후 동작한다. -> 효율적인 동작. html..

Styled component props 문법 const Stbutton=styled.button ` background: $ { props => props.bg} color: $ { props => props.bg === “blue” ? “white” : “black”} ` … return ( ) 이게 무슨 문법인게 아니라 라이브러리사용법이라 그냥 이렇게 쓰라고 한다 ㅎㅎㅎ 하하 그리고 const StNewButton=styled.button(Stbutton)` //이렇게하면 복사됨 `