frontend
1.JS : 동기와 비동기(1)
동기와 비동기 비동기를 배우기 전까지는 코드가 실행되는 시간을 통제하지 못했습니다. 이 문장이 뜻하는 바가 무엇인지 이해하기 위해서 예시를 하나 들어보겠습니다. 아래코드는 데이터를 받아 저장하는 일을 합니다. 편하게 이해하기 위해 대충 적은 코드이기에 형식이 정확하지
2.[React] 서버연결 에러 해결방법
서버연결이 안되는 상황개발자도구의 네트워크 확인├ package.json에 프록시 추가├fetch url은 endpoint 이후만 작성외부 서버를 로컬서버인척 속여서 cors문제를 피하는 방법이라고 한다.
3.[React] 컴포넌트에 이벤트 추가 가능?
예를 들어 버튼 컴포넌트를 하나 만들었다.이 컴포넌트를 쓰고 싶은 페이지에 import했다.이 상황에서 BlackButton 컴포넌트에 바로 이벤트를 달 수 없다. 이벤트를 DOM요소에만 설정할 수 있기 때문이다. 직접 만든 component는 DOM요소가 아니다. 컴
4.[AJAX]Authorization Bearer
요청 header에 Authorization를 보낼때, jwt혹은 OAuth에 대한 토큰이라면 type으로 Bearer을 주어야한다.
5.[React-Router] TIL: react v6 서브라우터(중첩라우터)
서브라우터(중첩라우터) 라우터 속의 라우터를 말합니다. 성능과 관련이 있습니다. 변하는 부분만 랜더링을 다르게 걸어주면 굳이 전체를 랜더링하지 않아도 되기 때문입니다. > 방법 React에서는 보통 랜더링하는 부분을 모아서 App.tsx 에 설정해둡니다. 서브라우
6.TIL: 5/28
환경변수 언제쓰고 안쓰는건가?...rest 쓰는 이유구조분해 할당이 불필요한 나머지 Props을 넣어주는 것 하지 않는다면 발생하는 이슈: className 등등등도 다 따로 구조분해할당을 해야 한다.
7.[TIL] CORS
Cross-Origin Resource Sharing (COR) 정의: 다른 출처에게 요청하는 것이 안전한지 판별하기 위해서 브라우저와 상호 통신하는 하나의 방법 즉, 웹 애플리케이션이 지금 실행중인 출처와 다른 출처의 자원에 접근할 수 있도록 권한을 부여하도록 브
8.[TIL ]브라우저 동작원리
브라우저는 어떻게 동작할까? 주소창에 링크를 넣거나, 로그인을 하면 브라우저는 어떤 동작을 거쳐서 사용자에게 화면을 보여주는 것일까요? 예측하기로는, 아마 어디선가 자료를 받아서 화면에 띄우는 것일텐데. 정확히 어떤 자료를 받고, 어떤 방법으로 화면에 표시하는지에 대
9.[TIL]ES6에 추가된 문법
저와 같은 경우에는 ES6+가 익숙하고, 바벨을 사용하기 때문에 전 버전은 어떠했는지와 전 버전에 비해 어떤 것들이 추가되었는지를 잘 알지 못했습니다. 추가된 문법 중 자주 쓰이는 것들을 정리해보았습니다.let, const템플릿 리터럴화살표 함수구조분해할당promise
10.[TIL] SSR vs. CSR
토이프로젝트에 Next.js를 도입하려합니다. 그러려면 서버사이드 렌더링과 클라이사이드 렌더링에 대해서 알아야합니다. 두 가지의 방법은 완전히 서로 배척점에 있어서 알맞게 쓰기 위해서는 각 방식의 장단점을 알아둬야합니다.서버에서 렌더링 준비를 마친 후 클라이언트에 전달
11.[TIL]Next.js란 무엇인가?
📎 연관 자료\[TIL] SSR vs. CSR공식문서를 바탕으로 NEXT.js가 무엇이고, 어떤 식으로 사용하는지에 대해 간략하게 공부해보고자 합니다. Next.js는 빠른 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 유연한 React 프레임워크입니다.웹 어플
12.[TIL] Semantic Markup
시멘틱 마크업이란 의미를 잘 전달할 수 있도록 HTML 문서를 작성하는 것을 말합니다. 위 그림처럼 div 태그로만 작성하는 것이 아닌, 각 부분에 알맞는 태그를 사용하여 웹 구조를 의미있게 만드는 것을 말합니다.예시검색엔진이 웹을 잘 이해해서, SEO에 유리해집니다.
13.[TIL] 스코프와 클로저
프로그래밍을 하기 전에 필수적으로 알아야 하는 개념은 무엇일까요? 여러가지 있겠지만, 변수를 선언했을때 이 변수가 어디까지 이용가능한지를 알아야 코드를 작성할 수 있을 것 같습니다. 그 변수가 이용가능한 범위를 바로 '스코프'라고 합니다. 정의: 변수이름, 함수이름 등
14.[TIL] React 최적화(1) useMemo
리액트의 기본 훅들이 익숙해지니.... 이제는 최적화에 눈이 가기 시작합니다. 리소스를 아끼고 싶고, 원하는대로 딱딱 동작하는 웹을 개발하고 싶어집니다. 그렇기에 Usememo, usecallback같은 훅을 공부해보록 합시다!메모이제이션이라는 의미는, 동일한 값을 리
15.[TIL] React - 환경변수
환경변수는 .env라는 파일의 이름으로 저장하여 사용하게 됩니다. 직접적으로 값이 밝혀지면 안되는 경우, API키나 백 서버 주소 등등 보완을 위해서 설정하여서 사용합니다..env.development 등, 다양한 이름으로 관리할 수 있습니다. 내부에는 값을 이런 식으
16.[NextJs] 학습 중
🏄♀️ 참고링크 > 튜토리얼 공식 문서입니다. 타입스크립트에서의 활용입니다. Js랑 다른 부분이 많으니 꼭꼭 참고!!! 넥스트 예시모음 깃허브 레포지토리입니다. 참고하면 좋을 것 같습니다~ Next.js + Typescript + Styled-components