항해9924 항해 후기 항해에 대해 제가 생각나는 대로 주저리주저리 적었습니다 필요하신 분은 보시고 필요한 부분만 흘러 읽으시면 될꺼 같습니다!! 목차 항해를 지원하고 들어가기 까지 항해 커리큘럼 항해 장점과 단점 항해99를 추천하는 사람 [ 항해를 지원하고 들어가기 까지 ] 항해 이전 나는 실제로 전공생이지만 학교에서 이론주의 공부를 하여 프론트엔드에 대해서는 하나도 모르는 상태에서 졸업을 했다 항해에 하기 전에는 혼자 개인 공부하면서 개발자가 되는 공부를 했다 혼자 공부하니 내가 잘하고 있는 것인지 알 수가 없었다 의지도 약해지고 이렇게 하다 보면 아무것도 나아가지 못하겠다고 생각이 들던 와중 부트캠프 광고를 보게 되었고 부트캠프를 알아보게 되었다 항해 지원동기 여러 부트캠프를 알아보았다 나는 빠르게 공부를 배우고 싶어 애.. 2023. 9. 19. 리액트 심화주차4 [ 인증/인가(쿠키, 세션, 토큰, JWT) ] ▶ 인증&인가 인증(Authentication) vs. 인가(Authorization) 인증(Authentication): 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 인가(Authorization): 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차 http 프로토콜 통신의 특징 2가지 무상태 (Stateless): 서버는 클라이언트의 상태를 기억하지 않음 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 함 비연결성 (Connectionless): 서버와 클라이언트는 연결되어 있지 않음 그래서 서버 입장에서는 매번 새로운 요청임 비연결성으로 인해 최소한의 서버 자원으로 서버를 유지할 수 있게 해줌 각 사용자별 요청이 .. 2023. 7. 6. 리액트 심화주차3 [ Custom hook ] ▶ Custom hook 반복되는 로직이나 중복되는 코드를 자신만의 훅 즉 커스텀 훅을 통해서 관리할 수 있음 리액트에서 제공하는 useState, useEffect와 같은 내장 훅을 사용해서 자신만의 훅을 만드는 것 첫 custom hook → useInput 연습하기 만들 커스텀훅은 useInput 이라는 것 input을 관리하는 훅이니까 useInput이라고 이름을 지은 것뿐 커스텀 훅을 만들때 이름은 마음대로 해도 상관이 없으나 단! 파일의 이름 앞에 use 라는 키워드를 붙여줘야 함 src 폴더에 보통 hooks라는 폴더를 생성해서 커스텀 훅들을 보관하는 식으로 많은 개발자들이 디렉토리 구조를 설계함 코드 구현하기 // src/hooks/useInput.js impo.. 2023. 7. 5. 리액트 심화주차2 [ 비동기 통신 - axios, fetch ] ▶ Axios Axios 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트라고 소개하고 있음 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하면 됨 Axios 설치하기 터미널에서 패키지 설치 yarn add axios ▶ json-server 설정 API 서버는 json-server를 사용 한 프로젝트 내에서 3001 포트로 서버를 가동해 사용 테스트용 db.json 설정 { "todos": [ { "id": "1", "title": "react" } ] } ▶ GET Axios get get은 서버의 데이터를 조회할 때 사용함 // url에는 서버의 url이 들어가고, con.. 2023. 7. 4. 리액트 심화주차1 [ Redux Toolkit(Feat. Flux Pattern) ] ▶ 리덕스툴킷 리덕스툴킷 리덕스 툴킷은 줄여서 RTK라고 하고 리덕스를 개량한 것으로 생각하면 됨 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고 리덕스 팀에서는 이것을 수용하여 코드는 더 적고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것 리덕스 툴킷은 리덕스와 구조나 패러다임이 모두 똑같음 즉 새로운 것이 아님 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 ducks패턴의 요소들이 어느정도 자동화 됨 컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같음 바뀐 부분은 모듈 파일 뿐 ▶ 일반 리덕스와 코드 비교 툴킷.. 2023. 7. 4. 리액트 숙련주차4 [ React Router Dom - 소개, hooks, children ] ▶ react-router-dom 페이지를 구현할 수 있게 해주는 패키지 react-router-dom을 이용하면 여러 페이지를 가진 웹을 만들 수 있음 ▶ react-router-dom 설치하기 패키지 설치 터미널에 입력하여 패키지 설치 yarn add react-router-dom ▶ react-router-dom 사용하기 사용방법 순서 페이지 컴포넌트 생성 Router.js 생성 및 router 설정 코드 작성 App.js에 import 및 적용 페이지 이동 테스트 페이지 컴포넌트 생성 src 폴더에 pages라는 폴더를 만들고 그 안에 페이지를 만듬 Router.js 생성 및 route 설정 코드 작성 브라우저에 우리가 .. 2023. 6. 28. 리액트 숙련주차 3 [ Redux - Redux 설정 ] ▶리덕스 설정 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 함 참고로 react-redux라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지 yarn add redux react-redux # 아래와 같은 의미 yarn add redux yarn add react-redux 폴더구조 생성하기 각각의 폴더와 파일은 역할이 있음 redux: 리덕스와 관련된 코드를 모두 모아 놓을 폴더 config: 리덕스 설정과 관련된 파일들을 놓을 폴더 configStore: “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일 modules : 우리가 만들 State들의 그룹. 예를 들어 투두리스트를 만든다.. 2023. 6. 27. 리액트 숙련주차 2 [ React Hooks - useContext(Context API) ] ▶ useContext 소개 react context의 필요성 일반적으로 부모컴포넌트에서 자식컴포넌트로 데이터를 전달해줄때 props를 사용 그러나 너무 깊어지게 되면 prop drilling 현상이 일어남 prop drilling의 문제점은 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려움 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦을 수 밖에 없음 이 문제를 해결하기 위해 나온것이 react context API 라는 것 useContext hook을 통해 쉽게 전역 데이터를 관리할 수 있음 context API 필수 개념 createContext : context 생성 Cons.. 2023. 6. 27. 리액트 숙련주차 1 [ Styled Components ] ▶ css-in-js JS 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식 순수한 CSS 코드가 아니라 JS를 이용해서 CSS코드를 만들어내는 것 ▶ styled-components styled-components는 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 다양한 패키지가 있지만 styled-components 예전부터 꾸준히 많은 개발자들에게 선택받은 패키지 패키지란? React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 패키지들은 누군가에 의해 만들어진 것으로 npm에 모여 있음 우리는 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치해서 사용할 수 있.. 2023. 6. 27. 이전 1 2 3 다음
