전체 글

이전 글로 포트폴리오 작성법을 정리해 보았고, 그다음 단계인 면접 준비 방법에 대해 정리해 보았습니다. 저는 어렸을 때부터 말을 잘 못해서 커서도 발표 같은 자리를 무서워했는데요, 그만큼 면접에서 합격 결과를 만들기까지 수많은 탈락을 경험했습니다. 수많은 탈락을 경험해도 다시 일어날 수 있었던 방법과 어떻게 면접에 임했는지 크게 면접 전, 면접 중, 면접 후로 나눠 설명하겠습니다. STEP 1. 회사에 대해 조사하기(before) 면접은 답변을 주구장창 외우는 것이 아닌 회사의 fit에 맞게 나를 알리는 것이라고 생각합니다. 저는 이전에 자기소개와 지원동기 같은 질문을 주구장창 외워서 준비했는데, 회사가 중요시하는 가치관 질문에 답을 하지 못했습니다. 그러니 서류 합격이 발표되고, 면접 준비를 시작하는 ..

이전에 개발했던 next 프로젝트를 수정 없이 실행했는데, 3달전에는 멀쩡히 실행됐던 프로젝트가 다음과 같은 에러가 발생하여 실행되지 않았습니다. 분명 코드 내부를 수정한 적이 없고, 실행만 했으니 종속성 문제라고 판단했습니다. 1. react, react-dom 버전 업그레이드 https://pimpdevelop.tistory.com/14 [에러해결] Invalid Hook Call Error 음악 관리 프로그램에서 며칠 전부터 Invalid Hook Call(유효하지 않은 Hook을 요청)하고 있다며 에러가 발생해 구동되지 않았다. useEffect(() => { callApi() .then(res => setMusics(res)) // 에러가 발생한 부분 .catc pimpdevelop.tistor..

CORS CORS는 Cross-Origin Resource Sharing의 약자로 "교차 출처 리소스 공유 정책"입니다. 한 origin에서 다른 origin의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 여기서 교차 출처라고 하는 것은 다른 출처를 의미합니다. Origin (출처) URL은 마치 하나의 문자열 같아 보여도, 사실은 여러개의 구성 요소로 이루어져있습니다. 여기서 Origin은 Protocol과 Host 그리고 Port를 합친 것을 의미합니다. 만약 Origin에 대해 감이 잡히지 않았다면 코드로 확인할 수 있습니다. 동일 출처 정책 (Same-Origin Policy) 먼저 SOP(Same Origin Policy) 정책은 동일한 출처에 대한 정책을 말합니다...

스코프 공부를 하다가 아래와 같은 문법을 보았다. 처음보는 구조에 신기하여 구글링 하였더니 IIFE라는 나한테는 생소했던 문법이었다. (function(){ })() 이 문법의 의미는 무엇이고 언제 사용하는지 알아보자! IIFE IIFE는 Immediately Invoked Function Expression의 약자이다. Immediately 즉시 Invoked 호출됨 Function 함수 Expression 표현 정의되자마자 즉시 실행되는 함수를 말한다. 기본 문법 첫 번째 괄호에는 익명함수를 포함하고 두 번째 함수는 그 함수를 실행시켜주는 걸로 볼 수 있다. 매개변수가 있는 함수라면 두번째 함수에 전달해주면 된다. ES6 문법에 추가된 화살표 함수와 함께 사용할 수 있다. (function(){ })..

서론 이 글은 아래 블로그를 번역한 것입니다. 구글번역을 전제로 번역하였기 때문에 영문 번역에 오류가 있을 수도 있으니 양해부탁드립니다. 오역이 있다면 피드백 부탁드립니다. 2021년 NextJS를 마스터하기 위한 3분 로드맵 Let's Go NextJS를 배우고 싶은데 뭐부터 배워야할지 모른다면, NextJS를 새로 배우려고 한다면, 꼭 이 로드맵을 확인하시길 바랍니다. CRA나 Gatsby는 NextJS에 비하면 아무것도 아닙니다. NextJS는 React 개발자들에게 새로운 유행입니다. 오늘 저는 NextJS를 마스터하기 위한 완벽한 로드맵과 가이드라인을 다룰 것입니다. 1. Architecture 개발 프로세스를 시작하기 위해 먼저 NextJS에서 따르는 기본 아키텍처를 배워야합니다. ( ..

틀린 내용이나 이상한 부분이 있다면 피드백 주세요! 🤨 Git 사용하고 있긴 한데.. Git 사용하고 있긴 한데.. 어떤 것인지, 왜 쓰는 것인지 생각해보신 적 있나요?? “남들이 다 사용해서요” “기업 요구사항에 있어서요” 아직도 그렇게 대답하실 건가요?? 이제부터 git이 어떤 것이고, 왜 쓰는지 알아봅시다! Git 이란? git은 컴퓨터 파일의 변경 사항을 추적하고 여려 명의 사용자 간에 해당 파일들의 작업을 조율하기 위한 스냅샷 스트림 기반의 분산 버전 관리 시스템이다. 라고 위키 백과에 나와 있는데요. 간단하게 말하자면 버전 관리 시스템이라고 생각하시면 됩니다. 왜 Git을 쓰나요? 만약, TodoList 프로젝트를 제작하고 있다고 가정해 봅시다. 투두 삭제 기능을 추가하려다가 로직이 꼬여 다시..

배경 새로운 프로젝트를 시작하면서 한 팀원이 "px 말고 rem으로 단위를 통일하는 게 어떨까요?"라고 해서 rem 단위로 개발하기로 하였습니다. 그래서 저는 다음과 같은 순서로 개발을 진행하였습니다. 일단 디자인에 나와 있는 px 단위로 개발 converter web으로 rem 단위 계산 프로젝트에 계산값 복사 이렇게 반복하던 도중 불편함이 계속 찾아왔습니다. 1. 반복성 가장 큰 문제점은 불필요한 과정이 반복된다는 것이었습니다. px 값을 입력하고 나온 결괏값을 드래그하고 복사하고, 붙여넣기 하고 그 과정이 너무 귀찮았습니다. 2. UI/UX 일단 converter web 들의 공통점들은 UX가 별로 좋지 않았다는 점이었습니다. 예를 들어 PX에서 rem으로 변환된 값을 복사할 수 없게 했다던가, 결..

어제(10월 26일 목) Next.js Conf에서 Next.js 14를 발표했다. 어떤 점이 바뀌었는지 공식문서를 번역하면서 알아보자! Next.js 14 Next.js 14 Next.js Conf에서 발표한 Next.js 14는 다음 사항에 가장 중점을 둔 릴리스입니다: Turbopack: App & Pages Router에 대한 5,000개의 테스트 통과 53% 더 빠른 로컬 서버 시작 빠른 새로 고침으로 94% 더 빠른 코드 업데이트 서버 작업(안정): 점진적으로 향상된 mutation 통합된 캐싱 및 재검증 간단한 함수 호출 또는 기본적으로 form에서 작동 부분 pre-rendering: 빠른 초기 정적 응답 + 스트리밍 동적 콘텐츠 Next.js 학습(신규): 앱 라우터, 인증, 데이터베이스..