072DATA

기술면접 솔직히 답변 적으면서 서치도 해보다보니 실제로는 대답 못할 것 같은 질문이 있슴다..하지만 이렇게 연습을 해놔야 내일 있을 모의 면접에서 웃음을 선사하기 싫어서 미리 학습해봤씀다...어떻게보면 기술면접 준비하는 과정도 학습이라고 생각해서 TIL로 제출해버릴까 합니다... 그럼 이만^_^b  Q . HTTP 프로토콜의 GET과 POST 요청의 차이점은 무엇인가요?A. GET은 URL에 데이터가 노출되어 조회와 캐싱에 적합하고,POST는 body에 데이터를 담아 보내어 보안성이 높고 데이터 생성에 적합합니다.Q.  자바스크립트에서 동기(Synchronous)와 비동기(Asynchronous)의 차이점은 무엇인가요? A. 동기는 코드가 순차적으로 실행되어 흐름 예측이 쉽고, 비동기는 여러 작업을 동시..

오늘은 내일 있을 기능 분배에 대해서 더 활기찬 참여를 위하여 어떤식으로 기능 분배를 하면좋을지에 대해서 생각해 보기 위해 기능 분배 방식과 생각을 정리해보려고 한다 이제 곧 프로젝트 개발이 시작될 듯 한데 이런 끄적끄적 적는 포스팅도 이제 마지막이겠지... 컴포넌트 단위로 기능 분배  컴포넌트 단위로 기능을 분배하는 경우에팀원들이 UI 요소나 특정 기능을 담당하는 작은 컴포넌트를 맡아서 개발함 예로 들어서팀원1: 버튼, 모달 같은 UI 컴포넌트 개발팀원2: 로그인 폼, 검색 바 같은 기능성 컴포넌트 개발팀원3: 카드 리스트, 그리드 레이아웃 컴포넌트 개발이런 방식으로 재사용 가능한 단위의 기능을 개발할 때 초점을 맞추고컴포넌트 단위로 분배하여 독립적으로 작업하고 이 컴포넌트 들을 페이지에 모아서 더큰 ..

- 1분 이내의 자기 소개안녕하세요 저는 노용철입니다 내일배움 캠프에서 프론트엔드 과정을 수료(예정)하여 5번의 팀 프로젝트를 통해 협업 능력을 키웠고, React와 Next.js에 대한 전문성을 쌓았습니다. 저는 학습 과정을 즐기며 늘 새로운 것을 배우고자 하는 열정이 있습니다. 이러한 노력을 바탕으로 사용자 경험을 향상시키는 인터랙티브한 프론트엔드 개발자로 성장하고 싶습니다.- 어떻게 개발을 시작을 하게 되었나요?제가 개발을 시작하게 된 계기는 군 복무 중 한 동기의 영향이 컸습니다 사실 어릴 적부터 저는 플래시 8 같은 도구로 새로운 것을 만드는 것을 즐겼습니다. 하지만 시간이 지나며 이런 창작에 대한 열정이 잊혀졌었죠. 동기의 성과를 보면서 제 안에 잊혀져 있던 이 열정이 다시 깨어났으며이 경험은..

최종 프로젝트 계획최종 프로젝트에 대해 데드라인에 맞춰서 어떤 식으로 개발에 들어갈지 계획좀 짜야겠다 프로젝트 데드라인주제 및 기획 선정 10/19~10/21MVP 기능 구현 완료 및 배포 ~11/6
UT 테스트 시작 ~11/8UT 테스트 기반 기능 개선 및 버그 수정 ~11/11최종 발표 11/21 주제 및 기획 선정 10/19~10/21 주제 및 기획 선정으로 팀원끼리 아이디어를 모아서 오늘 주제를 결정하게 되었는데내가 냈던 아이디어 중 하나인 친환경 관련 웹 서비스가 채택 되었다. 사실 맨 처음에 냈던 디지털 갤러리 및 마켓 플레이스가 상당히 좋은 아이디어로 떠올랐고긍정적인 반응이 많아서 이 아이디어가 채택될듯 했었다 왜냐하면 이 아이디어는 개발하고자 하는 것이 명확했다자신의 작품을 알리고 싶은 아..

tanStack Query? => 강력한 비동기나 서버 상태를 관리하게 해주는 도구 서버상태 -> 직접 서버에 저장되고 관리되는 데이터 서버 상태의 특징 데이터를 fetching하거나 update할 때 비동기 api 요청이 필요나 혼자만 사용하는게 아니기 때문에 다른 사람이 변경이 가능가져온 데이터가 최신 상태로 유지하기 어려울 수 있음 서버 상태를 관리하는데 어려움을 느끼는 점에서 캐싱, 데이터에 대한 중복 요청 해결, 오래된 데이터 업뎃,데이터 지연 로드 성능 최적화 등등등 이러한 과정을 tanStack Query로 관리가 가능!!!!!   TanStack Query 설치 명령어npm install @tanstack/react-queryyarn add @tanstack/react-query    기본..

json-server란?json-server는 간단한 API 서버를 빠르게 만들 수 있는 도구이며 JSON 파일을 RESTful API로 변환해줌프론트엔드 개발 시 데이터를 처리하거나 간단한 백엔드 기능을 구현할 때 유용함   설치 및 설정 프로젝트에 json-server 설치npm install json-server yarn add json-server  프로젝트 루트에 db.json 파일을 생성하고, 해당 파일에 초기 데이터를 작성 { "users": [ { "id": 1, "name": "Alice" }, { "id": 2, "name": "Bob" } ]}  서버 실행하기npx json-server db.json --port 3000yarn json-server db.json --p..

인증 (Authentication) 인증은 사용자가 시스템에 접근할 수 있는 권한이 있는 사용자인지 확인하는 과정시스템이 사용자가 누구인지 확인하는 것이 핵심임  ex) 사용자가 ID와 비밀번호를 입력하여 로그인  인가 (Authorization)인가는 인증된 사용자가 특정 리소스에 접근할 권한이 있는지를 확인하는 과정 ex) 사용자가 로그인한 후 마이페이지에 접근할 때, 해당 페이지에 접근할 권한이 있는지 확인    인증과 인가는 서로 밀접하게 연관되어 있고함께 작동하여 시스템의 보안성을 높임  인증 = 사용자 식별 인가 = 권한 확인   쿠키 (Cookie) 쿠키는 사용자의 브라우저에 저장되는 데이터 조각이고  주로 서버가 인증 정보를 기억하기 위해 사용됨 HTTP는 무상태(stateless) 이기 ..

안녕 안녕하세욥 오늘은 중요한 Key와 같은 값을 .env 파일 안에서 관리하는 방법을 정리하겠습니다.  .env 생성 및 사용법 1. 먼저 생성하는 방법은 프로젝트의 루트 디렉토리에 .env 를 생성합니다 2.해당 파일안에 key = value 형식으로 환경 변수를 작성합니다VITE_API_KEY=your_api_key_here 참고로 Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_ 라는 접두사를 붙여야 합니다 - 공식 문서 참고https://ko.vitejs.dev/guide/env-and-mode ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev  3. 환경 변수 사용const SUPABASE_KEY = import.meta.env.VITE_API_K..

템플릿 리터럴(Template Literal) 안녕하세요 오늘은 자바스크립트 ES6부터 제공된 템플릿 리터럴에 대해서 알아보겠습니다. 템플릿 리터럴은 자바스크립트에서 문자열을 좀 더 유연하게 다루고 싶을 때 유용하게 쓸 수 있는 문법입니다기존의 문자열 표현 방법보다 편리하고 코드도 훨씬 깔끔하게 작성할 수 있습니다.템플릿 리터럴은 백틱(``)으로 감싸서 사용합니다.      주요 기능   변수 삽입 const name = "이태규";const greeting = `안녕, ${이태규}!`;console.log(greeting); // "안녕, 이태규!"  문자열 안에 변수를 넣을 수 있습니다.${} 구문을 이용해서 변수나 표현식을 그대로 문자열에 삽입합니다.    다중 행 문자열 const multilin..

걷기반 실습에서 받은 실습 문제인데자바스크립트로 API 데이터를 불러와서DOM에 추가하는 과정을 정리해봤음.비동기 함수, 오류 처리, 데이터 정제를 다룸   비동기 함수 만들기먼저 fetchComments라는 함수를 비동기로 만들어야 함.async와 await 키워드를 활용해서 API 호출이 완료될 때까지 기다릴 수 있도록 해야 함.이렇게 하면 데이터가 다 로드된 다음에야 그 다음 작업을 진행할 수 있음. async function fetchComments() { try { const response = await fetch(apiUrl); const comments = await response.json(); // 이후 코드는 여기서 작성됨 } catch (error) { co..