개인 포트폴리오를 만드는 과정에서 다크모드를 구현해보고 싶어 구현 하던중최상위에서 상태를 관리해야 효율적이겠다는 생각이 들어 전역상태관리 라이브러리인 Recoil을 사용해보았다.전에 팀 프로젝트에서도 Recoil을 써본 경험이 있는데, Redux보다 설정하는게 쉽고 간

전부터 실행컨텍스트라는 단어를 몇번 들어보긴 하였는데, 찾아서 알아본 적은 없었다.하지만 이번에 궁금하여 여기저기 구글링하며 강의도 들어보고 이해를 하게 되었다.예전에 클로저, 호이스팅, 스코프에 대해서 공부를 하였었는데 실행컨텍스트를 이해하면 자바스크립트의 주요한 동

우선 브라우저 렌더링 과정이 어떻게 진행되었는지 전에 블로그 포스팅한거를 복습하며 짚어보자!브라우저에서 사용자가 요청한 페이지의 HTML을 읽어와 파싱 && 해당 파일에 지정 된 인코딩(UTF-8 등)에 따라 문자열로 변환.\-> 파싱: 데이터를 분해&분석하여 원하는

즉, 사용자 동작으로 자바스크립트가 실행되어서 CSS가 변경되거나 애니메이션 재생이 일어났을 때 어떻게 될까? 크게 3가지 경우로 동작을 한다.한번 알아보자!주로 요소의 크기나 위치가 바뀔 때, 아니면 브라우저창이 크기가 바뀌었을 때, 그림의 순서에 따라서 Layout

우리는 HTML / CSS / Javascript 로 코드를 써서 웹페이지를 만든다.웹 브라우저는 이 코드를 가지고 웹 페이지를 그려주게 된다.이 때, 브라우저에서는 어떤 일이 일어날까?사용자 인터페이스 : 주소 표시줄, 이전/다음/새로고침 버튼 등웹 페이지를 제외하고

면접준비를 제대로 준비를 아직 해보질 않아서 준비를 해보려고한다.우선 어떤부분들을 찾아서 공부를 해볼지 목록을 정해보자.질문에 대한 대답을 근거와 예시를 들어가며 설명할 수 있도록 정리!ex) 전달인자(argument)가 전달되는 과정에 대해서 설명하세요."라는 질문에

우유부단 프로젝트 리팩토링중에 네이버 소셜로그인을 구현하였다.그전엔 카카오 / 구글만 소셜 로그인을 구현한 상태였었고,방식이 조금 달랐다.OAuth2.0의 방식은이런 방식으로 진행이된다.하지만 카카오 / 구글 소셜로그인을 구현할 때에는약간 다르게 하였다.즉, 위처럼 카

무려 5개월전에 끝내고 UI의 반응형 리팩토링 한번했던 프로젝트이다.오랜만에 내용정리를 하려니 조금 기억에 무리가 있긴하지만, 기억을 되살려보며내용정리를 하려고한다.앞으로는 바로바로해야지...보배빌림 프로젝트에서는 react-router-dom을 사용한 라우팅방식 즉,

Recoil / MSW / Styled-Components / React-Hook-Form / Axios / Daum-Postcode

정리가 늦었지만 우유부단 프로젝트에서 내가 작업한 내용을 조금 디테일하게 정리해서 포스팅해보려고한다.Layout컴포넌트를 만들어 모든 페이지에 공통으로 적용될 헤더바, 푸터를 만드는 작업이었다.NextJS를 사용한 공통컴포넌트를 입히는 작업이었다.pages 폴더내에 \

우유부단 사이드프로젝트에는 React라이브러리와 NextJS 프레임워크를 도입하여 웹서비스를 만들었다.NextJS에서 \_app.js , \_document.js 에 대해 알아보자.위처럼 코드를 만들어 공통컴포넌트를 입히고 page Route를 할 수 있다.NextJS

우유부단 소개 현대인의 결정장애를 도와주는 공개 투표 서비스 프론트3명 & 백엔드3명 & 웹디자이너1명 작업 내용 레이아웃 - 컴포넌트에 공통으로 적용될 레이아웃 틀 회원가입 - 유효성 & 중복검사를 통한 회원가입 기능 로그인 - Window저장객체에 따른 로

프로젝트 진행중에 화면에서 스크롤을 내리면 왼쪽 사이드바에 리스트항목에 맞게 스크롤위치를 감지하여 색상이 변하게 하고싶었다.그래서 이번엔 스크롤 이벤트를 활용해보려한다.웹페이지에서 일어나는 모든 사건을 이벤트라고 한다.이벤트는 특정 동작이 벌어지는 사건이 일어난 것이다

AWS 웹에 들어가 검색창에 IAM을 들어간다.IAM 사이드바에 사용자 클릭.위 화면에서 우측 상단 사용자추가 클릭.사용자 이름 본인이 하고싶은거 아무거나 쓰고 다음.권한 옵션에서 직접 정책 연결 클릭.AmazonS3FullAccess 찾아서 체크, CloudFront

포트폴리오 프로젝트중 .mp4 파일을 사용한 커밋을 push 하려고 할때 엊그제부터 large파일이라며 에러가 나기 시작했다.찾아보니 대용량 파일은 git repository에서 직접 관리하는게 아니라 lfs라는 다른 저장소에서 저장해두고 repository에서는 일반

React에서는 <a></a>태그도 사용이 안되고Link 태그는 react-router-dom 사용으로 인해,localhost/가 붙어져있는 url로 라우팅이 된다.이럴때 외부 사이트로 링크를 주고 싶은데 어떻게 할까?찾아보니 window.open(url)이

포트폴리오를 만들던 중 Layout 컴포넌트에 children props를 전달하던 중 생긴 에러이다.위와 같이 Main/index.js 에서 components 상수에 \[<About />,<AboutMe />,<Skills />]를 선언하고 Layo

버튼을 누르면 원하는 컴포넌트에 스크롤이 되게끔 구현하고 싶어서React-scroll을 알게되어 사용해보았다.npm install --save react-scrollheader의 버튼을 누르면 원하는 컴포넌트 위치로 스크롤이 되게끔 할 것이다.이렇게 쓰면 Header의

cd ./port-foliogit initgit remote add origin git@github.com:rlgywnd/PortFolio.git연결된 repo 확인 (fetch / push 주소 확인)git remote -vgit add . git commit -m

이번에는 기존에 사용하던 Redux에서 좀 더 업그레이드된 Redux toolkit에 대해 공부해보았다.Redux가 솔직히 처음에는 너무 복잡하였지만 이제 좀 적응하려는데 Redux toolkit을 써야만 할까?하던 중 막상 사용해보니 코드는 더 간결해지고 더 편해졌다