- Today
- Total
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 에러처리
- React
- es6
- http
- deep dive
- 알고리즘
- git
- 백준
- 그림으로 배우는 http&network
- 자바스크립트
- error
- JavaScript
- html
- git error
- 상태관리
- 백준 실버
- Java Script
- 웹
- 비동기
- C++
- get
- 네트워크
- async
- 모던 자바스크립트
- js
- Angular
- 모던 자바스크립트 deep dive
- 이터러블
- map
- 프론트엔드
목록전체 글 (95)
sharingStorage
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bxHtFP/btsl2nmedlD/fTk7uiII9OPAekYx0U5v20/img.png)
styled-components를 사용하다보면 너무 많은 컴포넌트가 생성하면서 아래와같이 classname으로 구분이 힘들어질 때가 생깁니다. 이때마다 안의 CSS 내용을 보고 파일을 찾아갔었는데 그래서 좋은 방법이 없을까 하고 찾아보다가 이에 해당하는 bable plugin이 존재한다는 것을 찾게 되었고 적용하는 방법을 기록해볼까 합니다. Create-react-app 환경 create-react-app에는 다음과 같이 import하면 끝 import styled from 'styled-components/macro'; 이번에 vite를 사용하며 초기세팅해본 결과 cra와는 다르게 vite.config에도 동시에 설정해야되는 것이 많음 (ex: tsconfig baseUrl ) 설정과정 vite-plu..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rcvOF/btset6Gqfot/OEgX8D1gwiUfXKyrObNcn1/img.png)
들어가며 현재 모던 프론트엔드에서 대부분의 리액트 코드는 서버와의 통신 상태에 따라 View를 나누어 보여주어야하기 때문에 아래와 같이 작성하는 경우가 빈번합니다. /** React */ return ( {isLoading && } {apiError && } {data && } ) 기본적으로 React 17에서의 Suspense는 Data Fetching을 위한 Pending Handler가 아니라, 기존의 워터폴 방식으로 이루어져있는 Render방식을 개선해주는 역할이기때문에, 위의 상황에서 활용하기에는 문제가 있으나, React-Query나 Recoil에서 React 18부터 정식 릴리즈되는 Suspense를 활용해 명령형이 아닌 선언형으로 서버와의 통신 상태에 따라 View를 나누어 보여줄 수 있게..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dltMDq/btr91TLuQgS/8Q3WJrKYsa7AKFCvjZJmr0/img.png)
Package Manager 패키지 매니저란? 패키지를 관리하는 작업을 자동화, 안전처리 하기 위해 사용되는 도구 패키지 관리란 ? 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 관리, 갱신, 삭제하는 작업 패키지 매니저가 필요한 이유 ? 어떤 패키지가 동작하기 위해서 필수적으로 필요한 다른 패키지를 의존성(dependency)라고 하는데 이는 수동으로 관리하기 불가능하기 때문에 각각 패키지가 자신의 의존성 정보를 가지게 하여 패키지 매니저가 자동으로 설치해준다. 패키지는 코드의 배포를 위해서 사용되는 코드 묶음이며 일반적으로 라이브러리, 실행파일, 컴파일한 binary, 환경설정(configuration)정보, 의존성 정보 등을 포함한다. 자바스크립트 패키지 매니저 프론트엔드 개발자가 가장 흔히 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/BkUjN/btr8PZyZT67/OivIRASYpzbJhlWCIyZAnk/img.png)
문제 요약 왕복 달리기 선수는 N개의 이어진 일직선상의 코스들을 모두 지나 끝까지 도달한 뒤에, 다시 출발 지점으로 돌아와야 한다. 전체 코스들을 지나고 있는 상황에서 이동 거리가 K일 때, 현재 지나고 있는 코스의 번호를 출력하는 프로그램을 작성하시오. 접근 1. vector에 코스 길이를 입력받는다 2. 이동거리 K가 코스의 길이의 합 sum보다 큰경우와 작은경우를 나눠서 계산한다. 3. K가 sum보다 크거나 같다면 편도를 지났다고 가정하고(K-=sum) 벡터를 거꾸로 순회하면서 현재 코스를 찾는다. K가 sum보다 작다면 벡터를 순회하면서 현재 코스를 찾는다. 코드 #include #include #include #include #include #include using namespace std;..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/E5jLe/btr8axoY5qs/A9OhK4kMqdKUG7GRrmpBsk/img.gif)
label 태그와 그 역할 태그사이에 위치한 text, checkbox, radio 등 클릭 가능 영역이 텍스트로 확장됩니다 label for 속성을 통해 다른 요소와 결합할 수 있으며, 이때 요소의 for속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다. 이러한 요소는 브라우저에 의해 일반적인 텍스트로 렌더링 되지만 사용자가 마우스로 해당 텍스트를 클릭할 경우 과 연결된 요소를 곧 바로 선택할 수 있어서 사용자의 편의성을 높일 수 있습니다. 사용예시 label의 for 속성이 input의 id속성과 일치하므로 “분” 텍스트를 클릭해도 input에 focus가 맞춰지는 것을 볼 수 있습니다. 분/시 변환기 분: setMinute(e.target.value)} /> 사용예시 2 label 태그의..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/br9kTm/btr59ZPsWaU/pkhN8e7AqxGDiZJaxAJAg1/img.png)
여러 프로젝트를 동시에 하다보니 각 프로젝트마다 node 버전이 달라서 각각 관리를 해줘야하는데 그 방법을 알아본 후 공유해보려고 합니다. NVM window환경에서 Node.js의 버전을 관리하고 개발 환경에 따라 버전을 변경하기 위해 사용하는 것이 NVM입니다 NVM은 Node Version Manager의 약자로 말 그대로 node의 버전을 관리해주는 툴입니다. NVM은 ubuntu, Mac, Window WSL 플랫폼에서 작동합니다. 우리가 보통 사용하는 window에서는 사용하는 방법이 조금 다르기에 window에서 리눅스를 설치해서 사용하거나 아래의 방법으로 사용하실 수 있습니다. NVM을 사용하는 이유 다양한 협업시에 여러 버전의 Node를 쉽게 사용할 수 있습니다. (기존의 버전을 삭제할 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cxWQNE/btr6lpticnn/EUVwCA0NPnemD3JIuEC7O0/img.jpg)
세 번째 SOPT에 도전한 끝에 좋은 결과를 얻었습니다. 2학년때는 서류탈락, 3학년때는 면접에서 낙방, 마지막 4학년때결국 합격 통보를 받았네요. 대학생활을 끝마치기 전에 꼭 한번 SOPT라는 동아리를 경험해 보고싶었기에 서류기간이 나오자마자 지원서를 쓰기 시작했고 많은 노력을 기울여서 서류를 붙어 면접을 보게 되었습니다. 중요한건 꺾이지 않는 마음입니다. 제 글을 읽고 이후에 지원하시는 모든 분들이 좋은 결과를 받길 바랍니다. 사실 붙지 않더라도 세번의 도전동안 많이 성장하고 배웠기때문에 이 글을 작성하려고 했는데 작성하고 임시 저장해둔 상태에서 합격 통보 문자를 받았네요. 매 면접준비때마다 제가 한 프로젝트나 공부한 것들을 되돌아보면서 되돌아보는 시간도 갖게 되고, 또 새로운 기술질문을 대비해서 C..
팀 프로젝트를 진행하는 도중 매일 9시부터 10분씩 데일리 스크럼을 하는데 팀원 한분이 저에게 왜 proccess.env.PUBLIC_URL을 사용하냐고 여쭤보시더군요. 일반 public/asstes/ ,,, 으로 사용해도 되는데 말이죠 분명 저는 전자로 배우고 사용했었는데 막상 질문 받으니 한마디도 할 수 없었어요. 그래서 CRA(create-react-app)의 문서를 뒤져보고, stack overflow와 github의 create-react-app/issue 도 참고하여 이해한 것을 바탕으로 글을 적어봅니다. create-react-app은 CRA로 명칭해서 글을 작성하겠습니다. 1. public폴더와 src폴더 이 문제를 시작하기 앞서 CRA을 통해 만들어진 파일 구조와 쓰임을 확인해보겠습니다...
React API 연동하기 1번 과정에서 상태관리를 위해 사용했던 useState대신에 useReducer를 사용해보겠습니다. useReducer를 사용했을 때의 좋은 점 1. useState의 setState 함수를 여러번 사용하지 않아도 돼서 코드의 길이가 짧아진다. 2. reducer로 로직을 분리하면 재사용이 용이하다. 결과 User.js import React, { useEffect, useReducer } from 'react'; import axios from 'axios'; const reducer = (state, action) => { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: nul..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cI9IwK/btrVZtyUnyq/WGR7SWPkvjBVWAZlgQBmkK/img.gif)
1.React에서 API를 사용해보기 1.1 API 연동의 기본 API연동을 위해서 우선 새 프로젝트를 만들어야 한다. npx create-react-app react-api-use API를 호출하기 위해서 axios 라는 라이브러리를 설치한다. cd react-api-use npm install yarn // yarn add axios axios를 사용하여 GET, PUT, POST, DELETE 등의 메서드로 API요청을 할 수 있다. API연동 실습에는 JSONPlaceholder 에 있는 연습용 API를 사용해볼 것이며 API는 https://jsonplaceholder.typicode.com/users 주소이다. 결과물 [ { "id": 1, "name": "Leanne Graham", "use..