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

Hoisting 이란? TDZ란? 호이스팅은 코드를 실행하기 전에 선언된 변수 및 함수를 해당 범위의 맨 위로 이동하는 JavaScript의 메커니즘입니다. 일반적으로 선언되지 않은 변수를 접근할 수 없습니다. 마찬가지로, JavaScript에서도 선언되지 않은 변수를 접근할 수 없으며, 선언되지 않은 변수를 접근하면 ReferenceError가 발생합니다. 하지만, JavaScript는 다음 예제처럼 나중에 선언되는 변수를 미리 접근할 수 있습니다. console.log(value); // undefined var value = 'Hello' console.log(value); // Hello 변수를 최상단으로 끌어올리는 호이스팅은 장점도 존재하지만, 단점도 존재합니다.호이스팅에 의해 에러는 나지 않지..

웹페이지가 브라우저에 랜더링되는 과정을 설명해주세요. 1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성. 첫번째로 서버로부터 받은 HTML, CSS 리소스를 다운받습니다. 그리고 HTML과 CSS파일은 각각 DOM tree와 CSSDOM으로 만들어집니다. 2. Render Tree생성 순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree와는 달리 Render Tree에는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성됩니다. 3. Layout 브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산합니다. 4. Paint Layout 계산이 완료되면 요소들을 실제 화면에 그리게 됩니다. 이전 단계에서 이미 요소들의 위치와..

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일 때..

드디어 어제 3월 22일 항해99 11기 수료식이었다! 정말 생각도 못하고있었는데 성장부문에서 상을 받았다... ㅠㅠㅠ 여러분들 너무 고마워요 가장 모범이 되는 성장속도라니요 🥺 괜히 이게 뭐라구 절대 안우는 ENTP 살짝 울컥했음.... 수상소감 너무 거창하게 해버려서 머쓱ㅎ 너무 훈훈한 분위기의 수료식,,,,, 소감준비한건 좀 별론뎈ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 준비 안했는데요 ㅎㅎㅎㅎㅎㅎ 우리오빠 반응 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 항해하는 내내 계속 응원해줬던 루크 고마워..... 내일 드디어 모각지! 첫 오프라인 모임이다 두근두근,,

리팩토링이 필요한 부분. 이 코드는 사실 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)` //이렇게하면 복사됨 `

내가 만든 스케쥴 디테일페이지에 이런 피드백이 있었다. 이미 끝난 프로젝트이지만 프로젝트 기간내에 다 하지 못했어도 추가적으로 디벨롭을 시키고싶었다! 최종 프로젝튼데 애니메이션효과정돈 넣어줘야하지 않겠수? Framer 사이트 완전 예쁨 https://www.framer.com/?utm_source=motion-readme Framer — Design and ship your dream site. Zero code, maximum speed. Design your website on a familiar canvas. Add animations, interactions and a CMS. Optimize for every breakpoint — no code needed and publish for free..