three kim three kim

분류 전체보기

• [CS] 신입 개발자 기술면접 질문 - 네트워크 편

  IT Study/컴퓨터 기초 2023. 9. 18. 21:49

  안녕하세요, Three입니다. 네이버클라우드 캠프를 마치고 취준생이 되며, 기술 면접에 대비하기 위해 CS를 다시 공부하려고 합니다. 함께 하는 동료가 공부법으로 "내 언어로 만들어 기억하기"를 추천하더라고요. 이를 수행하는 과정에 대해 블로그 글로 남겨보려고 합니다 :) 1. 네트워크가 뭐예요? 컴퓨터 네트워크란 컴퓨터 간에 케이블, 전파와 같은 수단을 통해 연결하고 데이터를 주고받을 수 있는 상태를 의미합니다. 그 종류로는 작은 규모의 LAN, 대규모 네트워크인 WAN 그리고 LAN, WAN을 연결한 인터넷이 있습니다. 2. HTTP 프로토콜에 대해 설명해 주세요. HTTP 프로토콜이란 웹 브라우저와 웹 서버가 대화하는 방법을 정한 규칙입니다. 이를 통해 웹 페이지를 요청하고 받아올 수 있습니다. 2..

  Read More
• TypeScript 5.2의 새로운 키워드: 'using' - 자원 관리의 혁신

  IT Study/FE 2023. 9. 18. 09:00

  안녕하세요! 오늘은 정말 흥미로운 소식을 들고 왔습니다. 함께 공부하는 친구가 갑자기 "대박"이라고 하며, 노마드 코더의 영상 링크를 공유했는데요, 그 내용은 바로 TypeScript의 새로운 키워드 'using'이 나왔다는 것입니다. 저도 이 흥미로운 키워드에 대해 더 알아보고 공유하려 합니다. 바로 시작하겠습니다! 'using' 키워드란? 'using'은 TypeScript 5.2에서 새롭게 도입할 키워드로, 'using' 키워드가 적용된 코드 블록이나 함수의 실행이 종료될 때 Symbol.dispose 또는 Symbol.asyncDispose 메서드가 있는 객체를 자동으로 해제해 줍니다. 이를 통해 코드를 깔끔하고 안전하게 만들어 주며, 자원 관리를 효율적으로 할 수 있습니다. Symbol.disp..

  Read More
• [JavaScript] 문제를 통해 `실행 컨텍스트, 클로저, 스코프` 이해하기

  IT Study/FE 2023. 9. 15. 16:57

  1. 다음 코드 조각을 살펴보고, 각 console.log 라인에서 출력될 값과 그 이유를 설명하세요. var a = 10; function outer() { var b = 20; function inner() { var c = 30; console.log(a); // 1번 라인 console.log(b); // 2번 라인 console.log(c); // 3번 라인 } inner(); console.log(a); // 4번 라인 console.log(b); // 5번 라인 console.log(c); // 6번 라인 } outer(); console.log(a); // 7번 라인 console.log(b); // 8번 라인 console.log(c); // 9번 라인 라인 답변 위치 접근 여부 1 10..

  Read More
• [TypeScript] TypeScript의 필수 문법 (기본 개념)

  IT Study/FE 2023. 7. 17. 16:37

  TypeScript 사용하는 이유 자바스크립트를 사용하며 접했던 모호한 에러메시지를 대신하여 타입스크립트는 엄격한 Type Rule로 인해 "에러메서지"를 친절하고 정확하게 알려줍니다. TypeScript를 사용하기 위해 알아야하는 기본 문법에 대해 아래의 예시를 통해 알아봅시다 :) 1. Type 지정 : Type string(소문자), number, boolean, null, undefined, bigint, [], {} | (Union Type) 여러 타입 중 하나를 지정하고 싶을 경우 사용하는 Union Type 지정 // 명시적 type 부여 let 이름: string = "Kim";// 이름이라는 변수에 string type만 지정 가능 let 이름: string[] = ["kim", "par..

  Read More
• [Next.js/코딩애플] 프로그램 만드는 법 (feat. 코딩애플)

  IT Study/FE 2023. 7. 10. 10:26

  프로그램 만드는 방법 오늘은 복잡해 보이는 코드 작성 과정을 단순하게 바꾸는 방법에 대해 이야기하려고 합니다. 저는 이번에 Next.js를 공부하며 터득한 중요한 교훈이 있었는데, "그것은 바로 기능을 먼저 정의하고 코드를 작성하라"입니다. 처음에는 코드를 작성하는 과정이 어려울 수 있지만, 아래의 예시를 통해 기능 정의를 연습해 보세요 :) 처음 보는 기능 만들기 1. 기능의 동작 방법에 대해 한글로 상세히 정의하고 2. 코드로 번역하기 글 목록 페이지와 기능 만들기 (글 목록 조회 기능) 1. HTML 페이지 작성하고 2. 페이지 방문 시, DB에 저장된 글을 꺼내와서 3. 글을 HTML에 넣어 보여주기 상세 페이지 기능 만들기 1. 글 제목 클릭 시, 상세 페이지 이동 2. 상세페이지 방문 시, D..

  Read More
• [Next.js] MongoDB의 Error: querySrv ENODATA 해결하기

  IT Study/FE 2023. 7. 3. 15:23

  Next.js를 공부하며 데이터베이스로 사용하던 MongoDB에 다음과 같은 에러가 발생했습니다. 'Error: querySrv ENODATA _mongodb._tcp.cluster.mrbwkwq.mongodb.net' 오류는 MongoDB 클라이언트가 서버 주소를 찾기 위해 DNS 서버를 사용하며 발생할 수 있다는 것을 알게 되었습니다. 평소 공부를 하던 장소가 아닌 카페(스타벅스)에서 접속했을 때 에러가 발생하여, 다음과 같은 단계로 해결하였습니다. DNS 서버 확인하기 MongoDB 클라이언트는 MongoDB 서버의 주소를 찾기 위해 *DNS 서버를 사용합니다. MacOS를 기준으로 사용 중인 DNS 서버를 확인하고 변경하기 위해서는 아래와 같은 단계를 따를 수 있습니다. *DNS: 인터넷에서 도메..

  Read More
• [Next.js/코딩애플] React에서 Next.js로의 라우팅 변화 (feat. Dynamic Route)

  IT Study/FE 2023. 6. 30. 19:09

  프론트엔드 개발에 있어 React는 가장 중요한 도구 중 하나입니다. 그러나 React는 라우팅 기능을 기본적으로 제공하지 않기 때문에, 개발자들은 라우팅을 위해 'react-router-dom'과 같은 별도 라이브러리를 별도로 사용해 왔습니다. 1. React의 라우팅 React Router는 널리 사용되는 React의 라우팅 라이브러리로, 사용자가 URL을 통해 어플리케이션 내 이동할 수 있도록 돕습니다. React에서는 아래와 같이 라우팅을 설정할 수 있습니다. import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; 위 예시에서는 Rou..

  Read More
• [Next.js/코딩애플] Next.js의 시작

  IT Study/FE 2023. 6. 27. 14:17

  Next.js의 독학을 시작하며, 주요한 내용을 기록하기 위해 블로그에 기록을 작성해보려고 합니다. 1. Next.js의 파일 구조 파일(폴더)명 내용 layout.js page.js를 감싸는 파일 페이지 간 공유하는 UI (상단 메뉴바 등) 내용 작성 layout.js의 {children}: page.js 들어가는 부분 page.js 메인 페이지 파일 page.module.css (____.module.css) 유일하게 한 페이지에 적용할 수 있는 css 파일 public 이미지, 폰트 파일 저장 폴더 2. JSX 사용 방법: React 버전 HTML (1) return() 내 HTML 작성 시 평행하여 태그 작성 불가: only 1개 태그로 시작/종료 필수 (2) className 사용 (class ..

  Read More