개발

병렬 라우트 (Parallel Routes)병렬 라우트는 동일한 레이아웃 내에 여러 페이지를 동시에 렌더링할 수 있도록 한다. 예를 들어 대시보드 내에 여러 섹션을 구성하거나 소셜앱의 피드와 같은 곳에 사용할 수 있다.@폴더명으로 경로를 설정하여 해당 페이지 내의layout.js에서 이 폴더명을 props로 받아 사용한다.위 사진과 같이 app 하위에@team과 @analytics폴더를 생성하여 경로의 layout.js에서 children뿐만 아니라 team과 analytics를 받아 한 페이지 내에 여러 페이지 UI를 구성할 수 있다. 경로에는 영향을 주지 않으므로app/@폴더명의 경로로는 접근할 수 없다. 만약 병렬 라우트 하위에 여러 페이지가 존재하고 같은 레이아웃을 설정하고 싶다면 @폴더명/lay..

매년 하는 행사인데 당첨되기 너무 빡세다..경쟁률이 높다는 것은 그만큼 좋은 행사란 거겠지 아직 배울 것이 많은 주니어라 가서 네트워킹도 하고 많은 인사이트도 얻고 싶습니다..항상 온라인으로 다시 봤는데 올해는 제발 가게 해주세요ㅠㅠ 이렇게 시간표를 짤 수 있어서 너무 편하고 좋았다!가게 된다면 시간표만 캡처해 두고 이거만 보면서 움직이면 될 거 같다  인프콘 사이트인데 여기서 발표/프로그램 세션을 확인하면 된다좋은 발표들이 많아 시간표에 어떤걸 담을지 고민이 많이 됐다프론트엔드지만 객체지향이나 데브옵스같은 백엔드 내용도 들어보고 싶어서당첨 되면 시간표를 바꿀 수도 있을거 같다..! 인프콘 2024 - INFCON 2024인프런이 만드는 IT인의 축제, 인프콘에 초대합니다www.inflearn.com  ..

Next.js 13버전부터 가장 크게 변화된 점은 Page Router ➡️ App Router로 변경된 라우팅 방식이다.App Router의 핵심 기능들에 대해 알아보자. Route 설정# 기본 구조Next.js 는 기존 Page Router 에서는 pages/의 하위에 route 경로를 설정하여 페이지를 구성했다면, 이번 App Router에서는 app/폴더 하위에 경로를 설정하여 페이지를 구성한다. 하위 파일명 또한 pages/파일명.js 또는 pages/폴더명/index.js로 route가 설정되었지만 App Router에서는 app/폴더명/page.js로만 사용할 수 있다. 만약 폴더 하위에 page.js파일이 없다면 route로 인식되지 않으니 해당 폴더명의 경로로 접근해도 페이지가 뜨지 않는..

처음 프론트엔드 개발자로 시작한 회사를 퇴사한 지 어느덧 한 달 차이다. 첫 회사는 아니었지만, 개발 경력으로는 첫 회사나 마찬가지였기에 나에게는 의미가 큰 회사였다. 약 1년 6개월 동안 이 회사에서 내가 어떤 것을 배우고 얼마큼 성장했는지 되돌아보면 좋을 것 같아 넷플릭스에서 시행한다는 퇴사 부검을 인용해 작성해보려 한다.   넷플릭스에서는 퇴사자들에게 마지막 의무로 부검 메일을 작성하게 하는 문화가 있다. 굉장히 독특하면서도 회사와 개인 서로에게 도움이 되는 좋은 문화라고 생각했다. 이 아이디어를 전에 회사에도 말하고 싶었지만 말했다간 이 문화 취지와는 맞지 않게 흘러갈 분위기여서 말하진 않았다.. 회사 입장에서 퇴사라는 건 여느 회사와 같이 부정적인 인식이 강해 이런 문화를 받아들일 여유가 없었다..

견고한 React 지식은 프론트엔드 개발자에게 가장 가치있는 기술 중 하나입니다. 많은 회사들은 끊임없이 리액트 개발자들을 찾고있으며 그들에게 더 많은 돈을 지불하려 합니다. 그것이 개발자로서 끊임없이 발전해야 하는 중요한 이유이며, 매우보람 있는 노력입니다. 당신의 여정을 돕기 위해, 더 나은 리액트 코드를 작성하는데 유용했던 4가지 팁을 공유하려 합니다. 새롭고 유용한 것을 발견하길 바랍니다. 바로 시작하겠습니다!차례handler 에서 함수 반환하기책임 분리하기조건문 대신에 객체 맵 사용하기독립 변수를 React 라이프 사이클 외부에 두기handler 에서 함수 반환하기만약 함수형 프로그래밍이 친숙하다면, 무엇을 말하려고 하는지 알 것입니다. 흔히 "currying" 이라고도 합니다. 우리는 미리 ..

리액트에서 컴포넌트랑 UI 또는 기능을 부품화해서 재사용이 가능하도록 만드는 것이다.따라서 리액트는 동일한 UI를 재활용하고 안의 데이터만 바꾸는 형식으로 구성되어있다. 컴포넌트를 만드는 방식에는 함수형과 클래스형으로 나뉘는데 예전에는 클래스형만 라이프 사이클을 관리할 수 있었기 때문에 종종 클래스형 컴포넌트로 많이 짜여졌으나 리액트 버전 16.8 이후 Hook 기능이 추가되면서 요즘은 함수형을 더 많이 쓰는 추세다, 실제로 리액트 공식 문서에서도 함수형 컴포넌트와 Hook을 함께 사용할 것을 권장하고 있다.함수형 컴포넌트function New() { return 함수형 컴포넌트 }export default New함수형 컴포넌트는 말 그대로 함수형으로 쓰는 방식의 컴포넌트이다. 자바스크립트의..

State ?state는 리액트에서 앱의 유동적인 데이터를 다루기 위해 있는 객체이다.리액트에서는 유동적인 데이터를 변수에 담아서 사용하지 않는다.함수형 컴포넌트에서는 useState() 라는 함수를 사용해서 state라는 저장공간에 담아 실행한다.state가 변경되면 자동으로 변한 부분만 재렌더링이 된다. State 동작 원리리액트의 함수형 컴포넌트는 최초에 한번 실행하면서 초기에 설정한 state값을 가진다.// 초기값은 0이다const [state, setState] - useState(0);useState()는 구조분해할당을 이용해서 첫 번째에 변경될 값을, 두 번째에 변경하는 함수를 설정한다.위 코드는 state의 초기값을 0으로 설정하고 어떠한 이벤트가 발생할 때 setState 함수를 호출하..

JavaScript의 ESES란 ECMAScript의 약어로 자바스크립트의 표준 규격을 의미하며 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수 등 핵심 문법을 규정한다.각 브라우저 제조사는 ECMAScript 사양을 준수해서 브라우저에 내장되는 자바스크립트 엔진을 구현한다. 자바스크립트는 ECMAScript를 포함하여 브라우저가 별도로 지원하는 클라이언트 사이드 Web API, DOM, Canvas, XMLHttpRequest, fetch 등을 포함한 포괄적인 개념이다. ES5 / ES6 문법변수 선언console.log(a) // undefinedconsole.log(b) // Errorconsole.log(c) // Errorvar a = 0;let b = 1;const c = 2;ES5 및 ..