티스토리

Always Do it

검색하기

블로그 홈

Always Do it

hayeonn.tistory.com/m

hayeonn 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

[React] react-dnd 를 이용해서 리스트 순서 변경하기 (드래그 앤 드롭) 들어가며프로젝트를 진행하면서 리스트 순서를 바꾸는 기능이 필요했다. 리스트 순서를 변경하는 라이브러리는 react-beautiful-dnd 와 react-dnd 두 가지가 있었다.처음에는 react-beautiful-dnd 를 사용해서 테스트를 해보다가 곧 종료된다는 이야기가 있어서, 주말간에 react-dnd 를 새로 설치해 테스트 해보았다!react-beautiful-dnd 를 적용했을 때 애니메이션이 미리 정의되어 있어서 좀 더 유연한 느낌이지만 용량이 react-dnd 보다 크다.반면에 react-dnd 는 hover 중일 때 순서가 변경되는 애니메이션이나 위치 변경을 직접 정의해야해 처음 적용시킬 때 살짝 어려운 편이다. 설치하기# react-dnd를 사용하기 위해 필요한 라이브러리 instal.. 공감수 0 댓글수 0 2024. 11. 10.
[React] 리액트에서 FormData 다루기! (FormData를 이용해서 파일과 텍스트 post 요청하기) 들어가며 프론트단을 개발하면서 데이터를 post 해야하는 상황이 항상 생긴다. 이번에는 유저가 파일과 텍스트를 올렸을 때 그 안의 내용을 post 하는 상황이었다. formData를 처음 써보는거라 많은 고민을 했다. 그리고 백앤드 개발자 분에게 전송이 제대로 되었는지 계속 물어봐야해서 좀 미안하기도 했다.. 아무튼, formData로 데이터 post 하는법을 알아보자~! 본문 먼저 폼을 만들어준다. 나는 유저가 설명을 입력하고 파일을 업로드하도록 만들었다. 제출! 여기서 textarea에 받은 value 값과 input을 이용해 올린 파일이 데이터로 전송될 것이다. 처음에는 리액트쿼리를 이용하지 않고 짰다가 리액트 쿼리를 이용하면 좀 더 간편하게 보여진다고 해서 리액트 쿼리를 이용했다. 리액트 쿼리를 .. 공감수 0 댓글수 0 2024. 2. 16.
[React/오류해결] 상태(state)에 따라 background-image 렌더링하기 (tab 유무에 따른 배경이미지 렌더링) 들어가며, 회사에서 디자인 시안에 따라 개발을 하던 중, 탭 메뉴를 눌렀을 때 background-image를 다르게 보여줘야 했다. 컴포넌트에 배경이미지를 적용하면 컴포넌트 내, 즉 컴포넌트 크기만큼만 사용할 수 있기 때문에 전체너비를 다 차지하지 못한다. 어떻게 해야할 지 고민을 하던 와중, 탭을 눌렀을 때 변하는 상태에 따라서 배경이미지 css를 조절하면 어떨까라는 생각에 도달했다. 본문 먼저 가장 부모 컴포넌트를 만들어준다. 가장 바깥 부모에서 상태관리를 해준 이유는 가장 바깥 컴포넌트에 배경이미지를 적용해야하기 때문이다. 위에서 말했듯이, 전체 너비에 배경이미지를 적용하기 위해선 만들어낸 컴포넌트가 아닌 가장 바깥 컴포넌트에 적용한다. // App.jsx import React, { useSta.. 공감수 4 댓글수 1 2024. 1. 30.
[React] typescript에서 interface와 type의 차이점을 알아보자 들어가며, react-responsive 라이브러리를 사용해 반응형 웹을 만들며 여러가지 테스트를 해봤다. 타입스크립트를 사용했기 때문에 타입 지정을 해줘야 했다. 타입을 지정하는 방법 중에 interface와 type이 있는데 두 가지의 정확한 차이점을 알고 정리해놓으려고 한다. 본론 function Pc({ children }) { const isPc = useMediaQuery({ query: '(min-width: 768px)', }); return {isPc && children}; } react-responsive 라이브러리 내 useMediaQuery를 사용했다. PC 버전과 Mobile 버전일 때를 나눠 만드려고 했으며, children을 통해 값을 받아오도록 코드를 짰다. return {.. 공감수 0 댓글수 0 2024. 1. 25.
[React/CRA] CRA + typescript + Eslint + prettier 초기 세팅하기 들어가며, 리액트로 반응형 웹을 만들기 위해 프로젝트 초기설정을 하고 있던 와중, 정보가 너무나 많아서 한 번에 정리하고 나중에 다시 보기 위해 글을 써서 정리해두려고 한다. 예전에 Vite로 스캐폴딩하는 법은 써놨으니 Vite로 설정하는 방법은 맨 아래 추가하겠다. 본론 일단 난 CRA를 통해 프로젝트를 만들었고 여기에 typescript 와 eslint, prettier를 설치할 것이다. 1. CRA + typescript 설치하기 npx create-react-app --template typescript 이렇게 프로젝트를 만들어주면 루트에 tsconfig.json 파일이 생긴다. 이때, "baseUrl" : "./src" 코드를 추가해준다. 추가해주는 이유는 기본 절대 경로를 사전에 설정해 추후 .. 공감수 0 댓글수 1 2024. 1. 23.
[React/CRA] CRA로 react 설치 후 의존성 문제에 대한 경고가 뜨는 경우(렌더 시 bebel dependencies 오류 메시지 발생) 들어가며, react로 반응형 웹을 만들어 보려고 cra를 이용해 리액트 프로젝트를 시작했다. 타입스크립트와 기본적인 것들을 설치했는데 이런 경고가 장황하게 떴다. 대충 바벨에 관련해서 말하는 것 같았다. 경고문구 발생 해당 경고 문구! One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already.. 공감수 1 댓글수 2 2024. 1. 22.
[성능 최적화] 웹 성능 최적화에 대한 고찰과 최적화 하는 방법을 알아보자 1. 웹 성능 최적화란? 웹 프론트 환경에서는 각종 리소스들을 화면에 띄우고 업데이트 하는 과정에서 지속적으로 비용을 소모한다. 따라서, 웹 프론트엔드 성능 개선을 위해서 개발자는 최소한의 데이터로 빠른 시간에 사용자가 불편함을 느끼지 않는 최적의 화면을 띄워야 한다. 상품 관리자, 프로덕트 매니저에게 웹 페이지가 얼마나 빨리 로딩되는지가 서비스 사용자 경험(UX, User Experience)에 영향을 주며 매출 및 수익에 영향을 줄 수 있으므로 웹 성능 최적화를 대략적으로 이해하는 것이 중요하다. 결과적으로, 웹 프론트엔드 개발자의 웹 성능 최적화 작업으로서 사용자에게 좋은 사용자 경험을 제공할 수 있고 비즈니스의 성공과도 직결될 수 있다. 2. 최적화를 왜 해야할까? · 비즈니스 관점 웹 성능 최적.. 공감수 1 댓글수 3 2024. 1. 18.
[자료구조] 해시 (Hash, Hash Table, Hash Function)와 자바스크립트에서의 해시맵 해시(Hash) 해시는 저장, 검색 등 자주 활용되는 자료구조이다. 또한 입력 데이터를 고정된 길이의 데이터로 변환한 값을 말한다. 데이터의 key값이 해시 함수를 통해 변환된 간단한 정수이며 정수로 변환된 해시는 배열의 인덱스, 위치, 데이터 값을 저장하거나 검색할 때 활용된다. 해시 함수 (Hash Function) 유일한 값(반복되지 않는 값)을 저장하기 위한 자료구조이며, Dictionary(Map) 자료구조와 같이 key, value 의 쌍 형태로 저장된다. 모든 데이터가 유일한 키값을 가져 해시 자료들은 특정한 값을 아주 빠르게 찾아낸다. 1. 직접 주소 테이블 (Direct Address Table) 유일한 키가 있다면 그냥 인덱스로 쓰면 되지 않을까? 즉, 입력받은 value가 곧 key가.. 공감수 2 댓글수 4 2024. 1. 7.
[자료구조] 이분 탐색/이진 탐색 (Binary Search) 이분 탐색 알고리즘은 정렬되어 있는 리스트에서 탐색 범위를 반씩 좁혀가며 데이터를 탐색하는 방법이다. 또한, 배열 내부의 데이터가 정렬되어 있어야만 사용할 수 있는 알고리즘이다. 변수 3개 (start, mid, end)를 사용해 탐색하며, 찾으려는 데이터와 중간점에 위치한 데이터를 반복적으로 비교해 원하는 데이터를 찾는다. 단순한 배열 순회(O(N))보다 시간복잡도에서 이점을 가진다. 입출력 예시 let output = binarySearch([0, 1, 2, 3, 4, 5, 6], 2); console.log(output); function binarySearch(arr, target){ let [start, end] = [1, Math.max(...arr)]; while(start 공감수 0 댓글수 1 2024. 1. 4.
CSRF(Cross Site Request Forgery)와 XSS(Cross Site Scripting) CSRF(Cross Site Request Forgery) 공격 웹 어플리케이션 취약점 중 하나로 인터넷 사용자가 자신의 의지와 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 만드는 공격. - CSRF를 통해 해커는 희생자(사용자)의 권한을 도용해 중요 기능 실행하는게 가능해짐 - 해커가 사용자의 컴퓨터를 감염시키거나 서버를 해킹해서 이뤄지는 공격은 아님 [조건] 1. 위조 요청을 전송하는 서비스(페북)에 희생자가 로그인 상태 2. 희생자가 해커가 만든 피싱 사이트 접속 요즘 유명 사이트는 보통 PC에서 자동 로그인을 해놓는 경우가 많고 피싱 사이트는 피싱 메일 등을 통해 접속될 수 있음. 또한 희생자가 해커가 만든 피싱 사이트를 이용하지 않아도 해커가 XSS 공격을 .. 공감수 0 댓글수 0 2023. 12. 2.
[Webpack5 + typescript] resolve alias 절대경로 설정하기 프로젝트를 하면서 폴더 구조를 전부 변경했다. 이런식으로 그냥 src안에 있었던 폴더들을 components 폴더를 만든 후 넣어줬다. 그리고 각 컴포넌트 폴더 안에 컴포넌트.tsx 파일과 index.ts 파일을 만들어 내보내주도록 만들었다. 이 과정을 하면서 원래 상대경로로 잡혀있던걸 절대경로로 바꿔주는 작업을 시도했다. 나는 webpack과 typescript를 사용했기 때문에 webpack.config.js 파일과 tsconfig.json 파일을 변경해야했다. webpack.config.js module.exports = { resolve: { alias: { "@": path.resolve(__dirname, "src"), }, extensions: [".ts", ".tsx", ".js", ".j.. 공감수 0 댓글수 0 2023. 8. 28.
[Next.js] Webpack5 번들링 후 tailwind가 적용되지 않는 문제 해결 디자인시스템을 만드는 팀 프로젝트를 진행 중 우리가 만든 컴포넌트들을 npm 패키지로 배포해야 했다. 처음에는 Rollup으로 시도했다가 이건 뭔가 아닌 것 같다는 판단이 들었다. 왜냐하면 Next.js는 Vite와 달리 Rollup 번들러가 아니라 Webpack 번들러를 사용하기 때문이다. 팀원과 함께 Webpack으로 번들링하는데는 성공했지만 tailwind 스타일링이 적용되지 않는 문제가 발생했다. 배포한 npm 패키지를 설치하고 Toast 컴포넌트를 적용시켰을 때 div에는 tailwindcss가 잘 적용된 것 처럼 나온다. 하지만 결과는 제대로 나오지 않고 폰트 크기만 적용되어서 나오는 문제가 발생했다. 구글링을 해도 검색이 잘 되지 않아 영문으로 검색하니 동일한 문제를 겪은 사람들이 있었다. .. 공감수 1 댓글수 0 2023. 8. 6.
[React/Axios] 리액트에서 서버통신 중 key값을 할당해도 문제가 해결되지 않을 때. each child in a list should have a unique key prop. Each child in a list should have a unique key prop. 처음엔 todoList를 리스트렌더링할 때 idx값을 key값으로 넘겨줬었다. 근데 배열의 원소 순서가 바뀌면 index값도 바뀌고 컴포넌트마다 고유해야 하는 key값도 바뀌기 때문에 지양해야 한다고 한다. 그래서 나는 idx 부분을 todo.id로 바꿨고 저런 오류가 발생했다. [초기 코드] {todoList.map((todo, idx) => ( ))} [수정 코드] {todoList.map((todo) => ( ))} 코드를 수정했을때 id값을 찾지 못하는 것 같았다. 이거때문에 3일이라는 시간이 소요됨.... 에러를 해결하는 방법을 엄청나게 찾아봤는데 해결방법이 2개가 있었다. 1. Key값을 정확하게 넣을.. 공감수 0 댓글수 0 2023. 6. 20.
[React/AXIOS] axios 401 Error (AxiosError: 'Request failed with status code 401') 오류해결 개발 중에 만난 axios 401 에러.. 처음에는 서버가 잘못된건지 뭐가 잘못된건지 계속 헤맸다. 한 두시간 넘게 계속 헤맸다가 정말 어이없게 해결했다. 이 오류 해결에 도움을 준 내 친구에게 영광을 돌린다. 사실 이 문제는 같이 오류해결을 하려고 했던 친구가 먼저 이 오류를 마주했다. 함께 찾아보다 결국 해결하지 못했는데 이 친구는 선언했던 변수명과 응답해야하는 변수명이 달라서 오류를 뱉어낸 것이었다. (내가 준 코드 때문에 변수명이 달랐음) 그래서 나도 변수명이 문제인가했지만 그럴리가 없었다. 왜냐면 나는 계속 똑같은 코드를 써왔기 때문에.. 투두리스트를 만들고 axios를 이용해서 통신을 하는데 계속 오류가 발생했다. 나는 headers도 잘 넣었는데 왜 안될까..를 고민하던 와중 데이터를 보내는.. 공감수 0 댓글수 0 2023. 6. 15.
[React/오류해결] Form submission canceled because the form is not connected 오류 리액트로 투두리스트(todoList)를 구현하고 있던 도중 이런 오류를 만났다. 폼을 제출할 때 콘솔창에 이런 오류가 뜨기 시작했다.. 뭐가 문제인지 구글링해봤는데 form 안에 버튼이 2개가 존재하면 이런 오류가 뜰 수 있다고 한다. 내가 쓴 코드는 이러하다. { onEdit(index); }} > setNewTodo(e.target.value)} /> 제출 setEdited(false)} > 취소 버튼이 2개인데 버튼마다 타입을 명시해줘야 한다고 해서 각 버튼마다 타입을 명시해줬다. 제출 setEdited(false)} > 취소 근데도 오류가 뜸.. 그래서 다른 방법을 찾아야 했다. 나머지 방법을 스택오버플로우에서 찾았는데 e.preventDefault()를 사용해야 한다고 나와있었다. 그러면 저 코.. 공감수 0 댓글수 0 2023. 6. 15.
[React/AXIOS] localStorage를 이용해서 token 저장해 로그인 구현하기 📖 서두 로그인 기능을 구현하려던 와중 회원가입 → 로그인을 하면 계속 로그인 상태를 유지하고 만약 token 값을 가지고 있지 않다면 다른 기능을 사용하지 못하도록 설정을 해야했다. 한 번 로그인을 했다면 계속 유지를 시켜야하므로(즉 로그인을 했다는 정보를 가지고 있어야 한다.) localStorage를 이용해서 로그인 정보를 유지할 수 있도록 token값을 저장해줘야 했다. 📝 localStorage localStorage는 자바스크립트의 Web Storage를 이용한 것이다. 웹 스토리지에는 localStorage와 sessionStorage 2종류가 있다. 두 가지의 차이점을 간단히 설명하자면, 데이터 저장이 어떤 범위로 계속 보존되어 있는지에 달려있다. localStorage는 어떤 세션에 들어.. 공감수 0 댓글수 0 2023. 6. 12.
[AXIOS] axios headers 요청하기 axios로 통신을 하던 와중 headers에 왜 이것을 써주어야 하는지 궁금했다! axios 요청할 때 header에 이런 것을 넣어준다. 'Content-Type' : 'application/json', 이것의 의미는 json 형태로 응답해주세요. 라는 뜻이다. 백엔드와 프론트엔드 사이에 전달을 요즘 다 json형태로 하는 추세라고 한다. request랑 response 형태가 어떤 형태로 들어가고 나오는지 확인 후 헤더를 정한다. 예를들어 로그인을 했을 때(백엔드에서 POST로 signin을 한다면) 어떤 것을 줄까?를 물어본다면 그것은 응답이다. 응답 : json토큰 (jwt) { "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI.. 공감수 0 댓글수 0 2023. 6. 11.
[React/CRA] Aborting installation. 오류 (CRA가 설치되지 않고 중단되는 오류해결) 프로젝트를 CRA를 이용해 만드려고 설치를 하던 중 오류를 발견했다. 두번이나 시도했는데 계속 실패해서 구글에 이유를 찾아봤다. 뭔가 node 버전이 맞지 않아서 그런 것 같았다. 오류를 발견했을 때 다른 분은 node 버전이 낮아서 이런 오류가 발생했는데 나는 저번에 yarn을 설치하면서 버전이 너무 높았던 것 같다. node 버전을 18.14.0으로 설치해주니까 CRA 설치가 정상적으로 작동했다. 이렇게 명령어로 설치를 해준 후 확인을 해보면 제대로 바뀌어 있는 것을 볼 수 있다. 나는 원래 노드 버전이 20.3.0이었는데 lts에 맞게 버전을 내려줬다. 다시 재 설치하면 정상적으로 작동하는 것을 볼 수 있다! 공감수 0 댓글수 0 2023. 6. 10.
[패스트캠퍼스] React 강의 8주차 내일배움카드를 통해 리액트 리덕스 강의 마지막 주차다. 마지막 주차 강의에서는 성능개선을 위해 어플리케이션을 만들었다. 성능을 체크할 때 구글에 프로파일러와 하이라이트를 통해 성능을 체크할 수 있었다. 이것은 구글 확장프로그램이어서 깔고 쓸 수 있다! 프로파일러와 하이라이트를 사용하면 내가 입력할 때마다 반짝이는 것을 볼 수 있다. 이 부분은 하이라이트를 체크해야 볼 수 있는 부분이다. A, B 컴포넌트를 각각 만들 때 A컴포넌트는 한 번에 만들었고 B는 쪼개서 만들었다. 쪼개서 만들었을 때 성능이 더 좋지않을까? 싶지만 그것도 아니다. 오히려 불필요한 곳에서 리렌더링이 일어나 좋지 않을 수 있다. 따라서 React.memo를 이용해 성능을 최적화 시킬 수 있다. React.memo로 래핑될 때 리액트는.. 공감수 0 댓글수 0 2023. 5. 28.
[Node.js] 노드 버전 변경 안될 때 해결법 (Mac에서 Node.js, NPM 업데이트하기) 타입스크립트를 공부하면서 node를 최신 버전으로 업데이트를 해야했다. 그치만 계속 안되는 오류가 발생했다. 원래는 노드버전이 v17.08.5 인지 아무튼 이랬는데 아무리 최신버전을 설치해도 되지 않았다. Node 터미널을 열고 Node.js 버전을 확인해준다. node -v v x.x.x n 모듈이 설치되지 않았을 경우 n 모듈을 설치해준다. sudo npm install -g n 이경우 나는 권한? 때문에 앞에 sudo를 붙이니까 설치가 잘 되었다. Node.js를 원하는 버전으로 업데이트 한다. Stable 버전 설치 $ sudo n stable 최신 버전 설치 $ sudo n latest LTS 버전 설치 $ sudo n lts 특정 버전 설치 $ sudo n 원하는 방식을 붙여넣고 설치해준 후 .. 공감수 0 댓글수 0 2023. 5. 22.
[패스트캠퍼스] React 강의 7주차 어느덧 내일배움카드를 통해 듣고 있는 리액트 & 리덕스 강의 7주차째다! 새삼 시간이 빠르고 많은 일이 있었지만 앞으로 나아갈 일만 남은 것 같다. 이번주에는 저번에 만들었던 것에 이어서 상태관리를 app 컴포넌트로 옮겼다. 처음에는 square 컴포넌트였다가 두번째는 board 컴포넌트로 옮겼었는데 아예 제일 최상위 컴포넌트로 상태를 옮겨서 board컴포넌트에 props를 통해 받아줄 수 있도록 변경했다. 코드는 이런식으로 다시 짰다. 좀 많이 길어지긴 했는데 앱 컴포넌트에 squres안에 들어갈 내용과 눌렀을 때 변경되는 부분등을 관리하도록 넣어준 부분이다. 처음에 똑같이 작성했는데 홈페이지에 나오지 않아서 당황했다. 나는 calculateWinner라는 함수를 계속 사용했는데 위에서 사용되지 않는다.. 공감수 0 댓글수 0 2023. 5. 22.
[패스트캠퍼스] React 강의 6주차 드디어 국비지원 교육을 통해 들을 수 있는 리액트 강의에 접어들었다. 선생님이 바뀌셔서 그런지 수업 스타일도 약간? 바뀐 것 같았다! 초반에는 클래스를 이용해 컴포넌트를 짰다. 일단.. 리액트를 함수 컴포넌트로만 자주 짜봐서 클래스 컴포넌트로 짜는법이 어색했다. 리액트로 조그마한 어플리케이션 하나를 만들었다. 원래는 완성본을 올리고 싶었지만 아직 진행중이라 완성본은 추후에 넣을 예정이다. 하지만 클래스로 컴포넌트를 짜면서 constructor, super, props의 개념을 다시 잡을 수 있었던 것 같다. 일단 이런식으로 클래스로 기본틀을 짜줬다. constructor안에 super와 state가 바뀔 대상을 지정해준다. 이때 9칸의 네모칸을 만들건데 이 안을 클릭할 때마다 변해야 하는 구조이다. 칸 .. 공감수 0 댓글수 0 2023. 5. 19.
[패스트캠퍼스] React 강의 5주차 오늘도 내일배움카드를 통해 수강한 리액트 & 리덕스 강의 5주차 후기를 써보려고 한다. 기간이 얼마 남지 않아서.. 후딱 듣고 빨리 후기를 남겨야하는데 이것저것 할게 너무 많아서 계속 미뤄졌다. 그래서 그냥 자바스크립트 부분을 다 듣고 쓰는게 좋을 것 같아서 자바스크립트 까지 모두 들었다! 이번 강의를 들으면서 좋았던 점은 npm에 익숙하지 않은 사람들에게 좋은 강의가 되었을 것 같다. 개발을 처음 시작할 때 환경설정하는게 어찌보면 제일 힘들고.. 영어가 많아서 어지럽다. 그냥 어찌저찌 npm을 깔고 개발환경을 구축했었는데 이번 강의를 통해서 npm과 nvm의 차이점에 대해서도 정확히 알 수 있었다. 그리고 npm버전에 대해서 자세히 알 수 있었다. 그냥 숫자면 버전인가보다~ 하고있었는데 프로젝트를 배포.. 공감수 0 댓글수 0 2023. 5. 16.
[프로그래머스] lv.2 게임 맵 최단거리 - javascript 문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/1844 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 간만에 올리는 코테 풀이다.. 최근에 bfs, dfs 개념을 공부하고 정리할 겸 내가 푼 풀이를 다 풀어서 기록해보려고 한다. 이번 문제는 bfs(너비우선 탐색) 방법으로 문제를 풀었다. 이렇게 캐릭터가 위치해 있으면 빨간색 오각형이 있는 위치까지 최단거리로 이동하면 된다. 검은색 부분은 막혀있는 곳이므로 지나갈 수 없고 흰색 부분을 지나되 가장 짧은 거리로 이동하면 승리한다. 여기서 제한.. 공감수 0 댓글수 0 2023. 5. 13.
[패스트캠퍼스] React 강의 4주차 요즘 할게 많아서 강의를 조금 미뤘더니 너무 쌓여서 css 부분 끝까지 후딱 들어버렸다! 나름 css는 좀 할 수 있다고 생각했는데 많이 써보지 않은 속성까지 배울 수 있어서 좋은 기회였던 것 같다. css 강의가 끝나고 마지막에 예제를 만들어보는 수업을 했다. 오직 HTML과 CSS로만 이루어진 예제라서 약간의 노가다(?)가 필요했다. 오버워치 예제를 만들었는데 원래 이미지를 그냥 자바스크립트로 반복되게 굴려주면 쉬울 것 같은데 자바스크립트를 사용하지 않아서 배경이미지를 32개나 일일이 다 넣어주었다..... 그래도 따라하기 쉬운 예제라서 재미있었던 것 같다. (머리에 휴식을 주는 예제였음) 또 transform 속성을 많이 사용하긴 했는데 skew나 이런 속성은 자주 사용하지 않았어서 더 유용했던 것.. 공감수 1 댓글수 0 2023. 5. 11.
[React/Vite] Prettier 설정하기 ESLint 설정을 마쳤으니 마지막으로 Prettier를 설정해보자!! 일단 Prettier 및 ESLint + Prettier 구성 패키지를 설치해주자. npm i -D prettier eslint-config-prettier 그리고 .eslintrc.cjs 파일을 열어서 extends 배열 맨 마지막에 추가해준다. extends: [ // ... 'prettier', ], 그리고 .prettierrc.json 파일을 생성해준다. 그 안에 설정하고 싶은 내용을 작성해주면 된다. { // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a) arrowParens: 'always', // 닫는 괄호(>) 위치 설정 // ex: htmlWhitespaceSensitivity: 'css', br.. 공감수 0 댓글수 0 2023. 5. 5.
[React/Vite] ESLint 설정하기 초기 환경설정에이어 이제 ESlint 설정을 해보려고 한다. 1. ESLint 구성 파일 ESlint 구성 파일을 npm 초기화 명령을 사용해 생성한다. npm init @eslint/config 그러면 파일구조에 .eslintrc.cjs 라는 파일이 생성된다. 2. ESLint 린팅 제외 파일 특정 파일 또는 디렉토리의 경우 린팅을 수행하지 않도록 ESlint에 지시할 수 있다. .eslintignore 파일을 생성하고 린팅(linting) 검사에서 제외할 디렉토리를 작성하자. .eslintignore build coverage dist 3. ESLint 플러그인 구성 ESLint가 제공하는 다양한 플러그인 중 React 개발과 관련된 항목 구성에 대해 살펴보자. 1) eslint-plugin-reac.. 공감수 0 댓글수 0 2023. 5. 4.
[패스트캠퍼스] React 강의 3주차 이것 저것 하느라 강의 듣고 글 쓰는게 미뤄졌다..🥲 이번엔 CSS 속성에 관한 글을 작성하려고 한다! 나름.. CSS는 못하지 않는다고 생각하지만 flex나 grid 같은게 아직 익숙치 않은 것 같다. flex는 그래도 예전에 예제 만들며 직접 해봐서 많이 늘은 것 같다! 처음에는 가상선택자니.. 선택자 개념이 좀 헷갈렸는데 확실히 하면서 많이 익숙해지는 것 같다. 개발은.. 하면 할수록 느는(?) 과정인 것 같다. 그리고 이 강의를 들으면서 처음으로 :not 에 대해서 알 수 있었다. 개발하면서 써보지 않아서 있는지도 몰랐던.. 개념강의라 세세하게 다 알려주시는 것 같았다. 예를들어 이런 코드가 있다. p:not(.classy) { color: red; } body :not(p) { color: gr.. 공감수 0 댓글수 0 2023. 5. 3.
[React/Vite] Vite로 리액트 프로젝트 환경설정 하기 이전 프로젝트에서도 Vite로 환경설정을 해서 진행했었는데 기록해서 남기기위해 다시 처음부터 해보려고 한다. Vite로 환경설정 시작하기 먼저 터미널창을 열어서 Vite를 설치해보자. npm create vite@latest 그다음 순서대로 눌러줘야하는데 1. React 2. JavaScript (원하는 걸로 고르면 된다.) 그러면 설치했다고 나오고 실행하는 방법을 가르쳐준다. 이때 우리가 만든 vite-project로 들어가서 작업을 진행해야한다. 위에서 나온 명령어 그대로 따라치면 된다! 만약 npm run dev 까지 잘 진행했다면 이런 새창이 뜨게된다! 만약에 새창이 안뜨고 터미널 창에 이렇게만 나올 수가 있다. 나는 처음에 했을 때 작동은 되는 것 같은데 새창이 바로 안떠서 뭐지? 내가 잘못했나.. 공감수 0 댓글수 0 2023. 5. 3.
[Network] DNS(Domain Name System)와 Round Robin방식에 관하여 💻 DNS(Domain Name System) DNS는 사람이 읽을 수 있는 도메인 이름을 기계가 읽을 수 있는 IP주소로 변환하거나 IP를 넣으면 해당하는 도메인을 반환하는 시스템이다. 예시 네이버에 접속하자. 우리는 네이버의 IP 주소를 알고 있어야하고 그 아이피 주소를 통해 접속해야 한다. 하지만 우리는 일반적인 대명사로서 naver.com을 사용한다. 그러면 DNS Server는 naver.com이 가리키는 IP를 브라우저에게 반환한다. 즉 DNS Server는 웹 서버 주소에 해당하는 IP 주소 테이블을 가지고 있는 서버라고 보면 된다. 1. DNS Query DNS 서버에서 Domain Name을 이용해 IP를 받아온다. 이때 Domain Name Server에 접속하는 유저에 대해서 Roun.. 공감수 0 댓글수 0 2023. 5. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.