리액트 컴포넌트 내부에서 onSubmit 등의 이벤트 핸들러를 화살표함수로 구현하는 이유 :일반 함수형으로 표현하면 this는 보통 전역객체를 참조하기 때문.

여태까지는 높이값을 하나하나 다 줬었고,가운데 정렬을 하기 위해 주로 flex 기법만을 이용해왔지만 최근에서야 다른 방식들도 쓰게 되어 기록해 놓는다.(scss)자동으로 auto가 된다.min-height를 준다.\-> 이유는 다른 인풋이나 버튼과 같은 기타 UI 컴포

!codesandboxcustom-hooks-useref-practice-forked-nydmm7?fontsize=14&hidenavigation=1&theme=dark처음 App.js 렌더링 될 때 그 시점에는 previousValue 값이 비어있으므로, 빈 값을 렌

Next.js React로 만드는 서버 사이드 렌더링(SSR) 프레임 워크 클라이언트 사이드 렌더링의 단점을 보안한다. >클라이언트 사이드 렌더링(CSR)의 단점 > 최초 로딩 속도 - 첫페이지 렌더링 시 서버로부터 모든 파일을 한번에 다운받고 파싱하므로 유저 대기 시간이 증가한다. 검색 엔진 최적화(seo) - 자바스크립트를 통해 동적으로 html ...

css, js 애니메이션에 대해 공부하다가 알게 된 사실을 정리해 본다. 브라우저가 콘텐츠를 화면에 나타내기 까지의 과정은 paint까지만 알고 있었는데, (이전포스트) 사실 composite라는 과정이 더 있었다. 이 과정에서 스타일 지정 방식에 따라 화면에 나타낼

웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML, CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 것을 뜻한다. HTML은 접근성과 시맨틱 HTML의 가이드라인을 충족해야 한다.웹 표준을 논할 때 일반적으로 다음의 것들이 중요성이

Node.js,mysql,aws\_개인프로젝트 진행하며 알게 된 점(+ 복습)

TypeScript_개인프로젝트 진행하며 알게 된 점(+ 복습) 프로젝트를 하며 처음 접했고, 아직 공부 중이므로 실제 개발하며 마주한 에러 메시지 + 알게 된 부분 위주로 정리 타입스크립트로 앱 폴더 생성 $npx-create-react-app "생성할 프로젝트 이름" --template typescript 자바스크립트로 만들어진 써드 파티 라이브...

Canvas API, Gsap_개인프로젝트 진행하며 알게 된 점(+ 복습) 그림판(canvas API)으로 그린 그림 서버와 소통 post, get(Feat: encoding, decoding 과정) 정리페이지

JS,REACT_개인프로젝트 진행하며 알게 된 점(+복습) 코드 public 폴더 관리 index.html 타이틀, 로고, 설명 등 관리해주자 정리했던 페이지 이미지 파일 저장 위치 src/(기본 저장 장소로 추천됨) : 앱 내부에서 쓰이는 이미지들 pu

The-Dreamer 간 밤에 꾼 꿈 해몽에 대해 검색할 수 있고, 꿈을 그림으로 기록할 수 있는 사이트 the-dreamer 위키 아이디어 기획 기획 과정 코드스테이츠의 프론트엔드 특별 심화반을 수강하기 위해서는 해당 기간 내 진행할 개인 프로젝트의 SR이 완성되어 있어야 했다. >아이디어 기획 시 고려한 점 백엔드에 많은 시간을 투자하지 않고...

한달 반 여정이었던 프론트엔드 특별 심화반이 금요일에 폐회식을 내렸다.기존 코스에서는 개발자로서의 전반적인 기초를 다지는 느낌이었다면, 이번 한달 반 가량의 프특심 코스는 프론트엔드 위주의 지식과 역량을 키울 수 있는 시간이었다.알고리즘 풀이 및 페어와 리뷰프론트엔드

Canvas 이미지를 데이터로 저장저장된 Canvas 이미지를 base64에서 디코딩디코딩된 값을 바이트 배열로 변환 후 저장typed array인 8bit unsigned array로 변환new blob() 생성자를 사용해 blob 값으로 변환FormData() 생성

브라우저가 자바스크립트 코드를 실행시키는 원리에 대해 구체적으로 알아보고, 얻은 내용을 바탕으로 보다 나은 웹 퍼포먼스를 가진 서비스를 개발하고자 한다. 알아야 할 중요 개념 >+ 프로세스(Process) > 실행 중인 하나의 애플리케이션 > 운영체제가 프로그램의 실행을 위해 프로그램에 메모리를 할당하는 단위 > > 스레드(Thread) 한 가...

리액트는 내가 코딩을 시작하고 프론트엔드를 지망하면서 가장 많이 사용한 프레임 워크이지만, 아직 어떻게 하면 더 효율적으로 코드를 최적화할 수 있을까에 대한 고민을 많이 해보지 못한 것 같다.이 기회에 그 방법들에 대해 알아보았다.들어가기 전에 간단히 리액트란, 그리고

HTTP네트워크에 대해 공부하던 중 OSI 7 Layer와 TCP/IP Layer에 대해 이해해보고자 정리해본다. 네트워크 프로토콜을 들어가기 전에 IP와 IP 패킷의 단점에 대해 알아보자. >IP(인터넷 프로토콜) - 인터넷 통신의 기본 > IP주소 : 각 컴퓨터들

웹 어플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행되므로 브라우저 환경을 고려할 때, 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 브라우저의 렌더링 과정 (출처 : '모던 자바스크립트 Deep Dive'

최근 리액트로 개인 프로젝트를 하며 useRef와 useEffect를 활용해 애니메이션을 구현했었는데, 그 과정에서 알게 된 내용을 정리해 보고자 한다.

개인적인 사이드 프로젝트를 준비중인데, 스크롤을 이용한 이벤트들을 구현 예정이다.그 중의 한가지는 스크롤을 내림에 따라 원형이 나타나며 점점 화면을 가득 채우는 사이즈로 커지고, 다음 컨텐츠가 그 화면을 배경으로 자연스럽게 나타나는 효과이다.(넘 멋진 애플의 아이폰 s

개인적인 사이드 프로젝트를 준비중인데, 스크롤을 이용한 이벤트들을 구현 예정이다.window 객체의 스크롤 이벤트를 사용하면 되겠다 하고 어렴풋이 생각했지만 구체적인 방법을 더 알아보다가 알게 된, 혹은 다시 한번 보게 된 스크롤 관련 속성 몇개를 정리해본다. 현재 스