[회고 : 24.04.22] javaScript의 this
2024. 4. 22. 21:16
회고록&간단정리
자바스크립트의 this는 자바의 this 개념과 많이 다른 것 같다.이해는 했지만...뇌 가비지 컬렉션에 의해서 삭제될 것 같다. 어떤 어려움이 있었는지?아래 코드에서 log가 어떻게 출력되는지 맞추는 과제였다.var fullname = 'Ciryl Gane'var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function () { return this.fullname; } }, getName: function() { return this.fullname; ..
[리액트] axios 사용 (with.Json-server)
2024. 4. 19. 12:16
몰아 넣기
Axios란? 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지. Axios 설치 yarn add axios Json-Server Axios 를 사용하기전에 Axios 로 통신할 서버가 필요하다. 그 역활을 Json-Server로 대체 json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지이다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. json-server를 통해서 F..
[회고 : 24.04.17] 언어 공부는 코드로 직접
2024. 4. 17. 19:50
회고록&간단정리
어떤 어려움이 있었는지? 아무리 강의를 들어도 직접 코드를 작성해보려고하니 훈련이 되지않아서 코딩이 잘 안됐다. 배움에는 뭐가 있었지? 처음 웹 프로그래밍을 접한 건 java 인데 spring 프레임 워크가 어려워서 익숙해질 때까지 게시판만 계속 만들었던 거 같다. 그 때의 초심을 잡고 리액트도 코드로 직접 치고 내가 만들고 싶은 웹을 만들면서 훈련해야겠디.
[리액트] Styled Components - 소개, 사용
2024. 4. 17. 17:10
몰아 넣기
CSS-in-Js란? 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식 컴포넌트를 만들고 컴포넌트를 꾸미기 위해 css 파일을 만들어서 import 하고 HTML tag 마다 classname를 넣고 CSS 코드를 작성하는 것을 반복하는 것을 줄일 수 있다. styled-components styled-components는 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 패키지들은 누군가에 의해 만들어진 것으로 npm에 모여있다. 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치 1. styled-components 준비 yarn..
[리액트] React Router Dom 사용법
2024. 4. 17. 16:50
몰아 넣기
react-router-dom이란? 페이지를 구현할 수 있게 해주는 패키지이다. 패키지 설치 yarn add react-router-dom 구조 및 사용법 1. src 폴더에 pages 라는 폴더를 만들고 그 안 가상의 여러 페이지 생성 2. src/shared/Router.js 생성 import React from "react"; // 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다. import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import About from "../pages/About"; import Contact from "...
[리액트] useEffect란? 그리고 의존성배열
2024. 4. 16. 19:52
몰아 넣기
useEffect란? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook, 즉 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용한다. 코드로 보기 렌더링될 때 useEffect 안에 있는 console.log가 실행된다. 이게 useEffect 핵심 기능 import React, { useEffect } from "react"; const App = () => { useEffect(() => { console.log("hello useEffect"); }); return Home; } export default App; useEffect와 리렌..
[회고 : 24.04.16] useEffect
2024. 4. 16. 19:50
회고록&간단정리
계속 잊어버리는 useEffect 에서 대해서 정리해보려고 한다. useEffect란? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook, 즉 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용한다. 코드로 보기 렌더링될 때 useEffect 안에 있는 console.log가 실행된다. 이게 useEffect 핵심 기능 import React, { useEffect } from "react"; const App = () => { useEffect(() => { console.log("hello useEffect"); }); return Home..
[CSS] 자주쓰는 CSS
2024. 4. 15. 10:47
몰아 넣기
1. 이미지 .image { background-image: url(); background-position: center; background-size: cover; } 2. 정렬 .box { height: 100vh; display: flex; justify-content: center; align-items: center; } 3. 박스 width: 100px; height: 100px; border: 1px solid red; margin: 20px auto 20px auto;