분류 전체보기

[Next.js] 원티드 프리온보딩 FE 챌린지 10월 사전과제

CSR / SSR with Next.js Next.js는 프로덕션용 웹/앱을 쉽게 작성하도록 라우팅, 이미지 최적화 등 많은 기능을 지원하는 React의 프레임워크. SEO 등 비즈니스 목표 달성을 위해 필수적인 SSR, SSG 간편 구현을 목적으로 많은 기업에서 Next.js를 도입 중이다. 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. 3. Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤,..

[WIL] 리액트 심화주차 | 이노베이션 캠프 동북권 - 5주차 회고

🚢 이번 항해는? 3주간의 주특기 주차 마지막까지 잘 달려왔다.🥳 매주 과제의 필수 기능들을 구현해 보며 트러블 슈팅을 하는 과정에서 책과 검색의 도움을 정말 많이 받았다. 그러는 과정에서 리액트의 기초를 많이 다질 수 있었고, 팀원 분들과 더 공부해보고 싶은 주제를 정리해와서 서로 가르쳐 주기도 했다. 특히 최적화나 서스펜스, 무한스크롤 등 익숙지 않았지만 관심 있었던 주제도 같이 이야기 나눠볼 수 있어서 알찬 시간이었다. 3주 동안 같은 팀이었던 팀원 분들께 감사하다. 리액트 주차 팀 과제 - 맡은 분량 정리 노션 💜 매거진 프로젝트 이번 리액트 심화주차의 과제는 로그인 유저용 매거진 사이트를 만들어 보는 것이었다. 개인적으로 나는 디자인이 예뻐야 만드는 재미도 있는 편이라, 지금까지 리액트 주차를 ..

[JavaScript] Promise와 Fetch API, Axios 이해하기

Promise 프로미스(Promise)는 비동기 처리를 위한 패턴으로 ES6에서 도입되었다. 프로미스의 등장으로 전통적인 콜백 패턴의 단점을 보완할 수 있게 되었다. Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스 객체를 생성하게 된다. const promise = new Promise((resolve, reject) => { if (condition) { // 비동기 처리 성공 resolve('result'); } else { // 비동기 처리 실패 reject('failure reason'); } }); 프로미스는 비동기 처리 결과(resolve, reject)와 진행 상태(pending, fulfilled, rejected) 정보를 갖는다. 비동기 처리가 아직 수행되지 않은 상태..

[JavaScript] 동기와 비동기, 자바스크립트 엔진과 브라우저 환경

동기(Sync) JavaScript 엔진은 하나의 실행 컨텍스트 스택을 가지고, 한번에 하나의 태스크(함수)만 실행할 수 있는 싱글 스레드(single thread) 방식으로 동작한다. 따라서 처리에 시간이 걸리는 태스크를 실행 중이면 작업 중단(blocking)이 발생하고, 다음에 실행될 태스크는 대기해야 한다. 이를 동기(synchronous) 처리 방식이라고 한다. const sleep = (func, delay) => { const delayUntil = Date.now() + delay; while (Date.now() { console.log('함수1 실행'); } const bar = () => { console.l..

[WIL] React Hooks와 컴포넌트 최적화 | 이노베이션 캠프 동북권 - 4주차 회고

🚢 이번 항해는? 이번 주는 프로젝트 두 개와 부족한 부분을 채우기 위한 공부를 하느라 바쁘게 지냈던 것 같다. 리덕스에 익숙해지기 위해 따로 시작했던 프로젝트인 MBTI 웹툰 테스트도 마무리 후 배포했고, 리액트 숙련주차 과제인 나만의 사전 만들기 과제도 기한 안에 끝낸 뒤 배포했다. https://github.com/ddooyn/mbti-webtoon-test https://github.com/ddooyn/my-dictionary-app-2022 간단한 과제인데도 하면서 전반적으로 최적화가 어렵다고 느꼈다. 단어 수정 기능 같은 경우 파이어스토어에는 반영이 잘되는데 리덕스 스토어에 state 반영이 가끔씩 안되어서 리렌더링을 못하는 경우가 생겼다. 또 무한 스크롤을 처음으로 구현해봤는데 쓰로틀링/디바..

[React] 컴포넌트의 생명주기(Lifecycle)

생명주기(lifecycle)란? 컴포넌트가 페이지에 렌더링되기 전 준비 과정부터 페이지에서 사라지는 순간까지를 생명주기라고 한다. 모든 리액트 컴포넌트는 생명주기를 가진다. 클래스 컴포넌트에서는 생명주기 메서드를 사용함으로써 컴포넌트가 처음 생성(mount)되어 렌더링될 때나, 업데이트 전후, 또는 제거(소멸, unmount) 시기에 해야 되는 작업들을 각각 처리할 수 있다. 자주 사용되는 생명주기 메서드에는 ⭐ 표시를 달았다. > 마운트(Mount) DOM이 생성되고 웹 브라우저 상에 나타나는 것을 말한다. 이때 호출되는 메서드는 다음과 같다. constructor⭐ static getDerivedStateFromProps render⭐ componentDidMount⭐ > 업데이트(Update) 💡 ..

[React] CRA에서 모듈 import 시 절대경로 사용하기

절대경로 설정 최상위 루트 폴더에 jsconfig.json 파일을 생성한 뒤, 아래 코드를 붙여넣어 준다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } TypeScript를 쓰는 경우엔 기존 tsconfig.json 파일에서 compilerOptions 설정을 수정하면 된다. ES6 모듈 import 시 현재 파일 위치 기준의 상대경로(../ ./)가 아닌 src 폴더를 기준으로 한 절대경로를 사용할 수 있다. 사용 예시 Home.js에서 Button 컴포넌트를 불러온다면, 상대경로 👉 import Button from '../components/Button' 절대경로 👉 import Button from 'components/Butt..

[WIL] DOM과 서버리스 | 이노베이션 캠프 동북권 - 3주차 회고

🚢 이번 항해는? 리액트 입문 주차 동안 이노베이션 캠프에서 지급받은 리액트 기초반 강의를 완강했다. 클래스 컴포넌트 생명주기와 함수 컴포넌트 hooks 등 리액트의 기초 및 로딩 스피너, 프로그레스 바 같은 팁들과 AWS S3, 파이어베이스 호스팅을 통한 배포 방법을 알게 되었다. 특히 리덕스와 파이어스토어에 중점을 두어 공부했는데, 어렵게만 생각했던 리덕스를 강의를 통해 배운 후 할만하다고 느껴져서 바로 활용해보고 싶었다. https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org https://firebase.google.com/products/fires..