전체 글
모던 리액트 deep dive 스터디 - 6주차 발표 정리
모던 리액트 deep dive 스터디 - 6주차 발표 정리 주제: 11장. Next.js 13과 리액트 18 Next.js 13 📋 app 디렉터리의 등장 Next 13 버전 이전까지 모든 페이지는 각각의 물리적으로 구별된 파일로 독립되어 있었습니다. 만약 페이지 공통으로 무언가를 넣어야 한다면, 그곳은 _document와 _app이 유일했죠. 이마저도 _document와 _app은 목적이 서로 달랐습니다. _document는 , 태그를 수정하거나 서버 사이드 렌더링 시 CSS-in-JS를 지원하기 위한 코드를 삽입하는 제한적 용도, _app은 글로벌하게 React, Next 엘리먼트를 컨트롤 하는 용도로 사용되어야 했습니다. 무언가 페이지 공통 레이아웃을 유지할려면 그 방법은 _app에서만 했어야 했죠..
모던 리액트 deep dive 스터디 - 5주차 발표 정리
모던 리액트 deep dive 스터디 - 5주차 발표 정리 (9장) *본 글은 발표 대본용이라 상세 정보는 들어가 있지 않습니다. 9장 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 우리에게 편리함을 가져다주는 create-react-app과 create-next-app 편리한게 좋긴하지만 어떻게 프로젝트 구조가 잡히는지, 어떤 설정들이 필요한지에 대해서 깊게 생각하지 않고 만들게 된다. 이 편리한 CLI 도구를 사용해보지 않고 프로젝트 환경설정을 해보자. Next 프로젝트를 위해 설치할 것들 react react-dom next typescript @types/react @types/react-dom @types/node eslint eslint-config-next tsconfig.json {..
사내스터디 - GraphQL 스터디 1주차
사내스터디 - GraphQL 스터디 1주차 📋 범위 1장 *본 글은 발표 대본용이라 상세 정보는 들어가 있지 않습니다. GraphQL이란? - API를 만들 때 사용할 수 있는 쿼리 언어 - 쿼리에 대한 데이터를 받을 수 있는 런타임 보통 쿼리 언어라 하면 SQL이 먼저 떠오른다. SQL과 동일한 쿼리 언어지만, 차이가 있다. SQL은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이라면 GraphQL은 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적이다. GraphQL에 대한 특징을 살펴보자. - 요청 값에 맞게 데이터들이 response되어 원하는 데이터 형태만을 받아올 수 있다. - HTTP 요청 하나가지고 입맛에 맞게 원하는 타입대로 요청을 진행할 수 있다. ..
모던 리액트 deep dive 스터디 - 4주차 발표 정리
모던 리액트 deep dive 스터디 - 4주차 발표 정리 (8장) *본 글은 발표 대본용이라 상세 정보는 들어가 있지 않습니다. 8장 - 좋은 리액트 코드 작성을 위한 환경 구축하기 - EsLint - 리액트 테스트 라이브러리 ESLint - 정적 코드 분석 도구 ❓정적 코드 분석 도구란 코드의 실행과는 별개로 그 자체만으로 코드 스멜을 찾아내어 문제의 소지가 있는 코드를 사전에 수정한다. ESLint를 자주 사용하지만, 어떤 방식으로 코드를 분석하는 것에 대해서는 잘 알지 못한다. ESLint는 어떻게 코드를 분석할까? 자바스크립트 코드를 문자열로 읽는다. 자바스크립트 코드를 분석할 수 있는 파서로 코드를 구조화한다. => espree 사용 2번에서 구조화한 트리를 AST(추상구문트리)라 하며, 이 ..
모던 리액트 deep dive 스터디 - 3주차 발표 정리
모던 리액트 deep dive 스터디 - 3주차 발표 정리 (7장) * 본 글은 발표 대본용이라 상세한 정보는 들어가있지 않습니다. 크롬 개발자 도구 - 크롬에서 제공하는 개발자용 도구, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있다.- 제대로 디버깅 하고 싶다면, 시크릿 모드에서 페이지와 개발자 도구를 여는 것을 권장. (브라우저의 각종 확장 프로그램 때문. ex. 웹 애플리케이션이 제공하지 않은 전역객체 같은 다른 정보가 추가될 수 있음) 요소탭개발자 도구를 켰을때 가장 먼저 노출되는 탭 요소 화면 현재 웹 페이지를 구성하는 HTML을 나타냄. 보는 것 뿐만 아니라 수정도 가능하여 코드를 수정하게되면 화면에서 어떻게 보일지를 빠르게 확인할 수 있다. 또한, 코드의 중단 위치를 선택할..
모던 리액트 deep dive 스터디 - 2주차 발표 정리
모던 리액트 deep dive 스터디 - 2주차 발표 정리 범위 : 5장 상태관리 웹 애플리케이션에서의 상태란? => 어떠한 의미를 지닌 값이며 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값 UI웹 애플리케이션에서 상태는 상호 작용이 가능한 모든 요소의 현재 값을 의미한다. ex) 다크/라이트 모드, input... URL브라우저에서 관리되고 있는 상태값ex) 쿼리 (brandCd="N", gender='M", ...) Form로딩중인지, 제출됐는지, 접근이 불가능한지, 값이 유효한지... 서버에서 가져온 값API 요청의 결과 tearing하나의 상태에 따라 서로 다른 결과물을 사용자에게 보여주는 현상 tearing을 어떻게 방지할것인가? 에 대한 고민이 든다. 리액트에서의 상태관리..
모던 리액트 deep dive 스터디 - 1주차 발표 정리
모던 리액트 deep dive 스터디 - 1주차 발표 정리 리액트를 선호하는 이유는 뭘까? - 명시적인 상태 변경 리액트의 상태 변화는 '단방향' => 명시적이다. 양방향 데이터 흐름이 나쁜게 아니다. 다만, 단방향의 데이터 흐름은 변화가 단순하기 때문에 코드를 읽기가 쉽고 버그를 야기할 가능성이 비교적 적다는 장점이 있다. - JSX (JavaScript XML) Html에 JavaScript 문법을 더하다. 고유의 몇가지 특징만 이해하면 손쉽게 구현할 수 있다. ex) null은 아무것도 렌더링하지 않는다, JS 문법은 {}로 감싸야한다. 참고로, JSX는 리액트에 종속적이지 않은 독자적인 문법이다. - 비교적 배우기 쉽고 간결하다. 기존에 Html, JavaScript를 써봤다면, 쉽게 배우..
프론트엔드 신입 개발자 취업 후기
프론트엔드 신입 개발자 취업 후기 오늘부터 진짜 프론트엔드 개발자가 되었다. ☺️ 2021년 컴퓨터공학과로 편입한 뒤로 2년여간의 시간이 지났다. 올해 2월에 졸업하였으니, 졸업 후 취업까지는 3개월정도? 걸린듯하다. 이 포스팅에서는 내가 프론트엔드 개발자 취업을 위해서 어떤 준비들을 해왔는지 적어보겠다. 프론트엔드 신입을 준비하고 있다면 참고하면 좋을 것이다. 우선, 나는 비전공자였다. 세무학과를 다니고 있었는데, 프로그래밍 관련된 일을 하고 싶어 2학년 학교 수업과 병행하여 편입을 준비하여 원하는 컴퓨터공학과로 편입을 하게 되었다. 전공자가 된 이후로 65학점에 달하는 전공 수업들을 2년여간 열심히 수강하였다. 프론트엔드, 백엔드, 빅데이터 등등 여러 관련 수업들을 들었고 내 적성에 가장 맞는다고 생..