본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

전체 글

 (209)
[TypeScript] 제네릭 (Generics) 목차 1. "제네릭"이란?2. 제네릭의 기본 문법3. 제네릭의 동작 원리 4. 제네릭 타입 변수5. 제네릭 인터페이스6. 제네릭의 타입 제한 - 정의된 타입 이용하기7. 제네릭의 타입 제한 - keyof로 객체의 속성 제약하기8. 제네릭을 사용하는 이유   타입스크립트의 제네릭에 대해서 알아보자!        1. "제네릭"이란?   * 제네릭: 타입을 마치 함수의 파라미터처럼 사용하는 것     2. 제네릭의 기본 문법  function getText(text: T): T { return text;} - 함수의 이름 바로 뒤에  라는 코드를 추가한다. → 는 함수가 제네릭이며 타입 매개변수 T를 받을 수 있음을 나타낸다. - 함수의 인자와 반환 값에 모두 T 라는 타입을 추가한다. → T 타입의 매개..
[React] 리액트로 라디오 버튼(Radio button) 만들기 (신고 모달창 만들기) 리액트로 라디오 버튼을 만들어보자!       만들 예제의 완성본  - 버튼이나 텍스트를 클릭하면 버튼이 파란색으로 바뀐다.- 버튼을 hover 하면 버튼 테두리가 회색으로 바뀐다.      Radio 컴포넌트 만들기  Radio 컴포넌트는 개별 라디오 버튼을 나타낸다. 라디오 버튼은 HTML에서  요소의 type 속성을 radio로 설정해주면 얻을 수 있다.라디오 버튼은 여러 개의 선택 사항 중에 사용자로 부터 하나를 선택받기 위해서 사용된다. 텍스트를 클릭햇을 때도 라디오 버튼이 선택될 수 있도록 하려면,  요소로  요소와 children prop 모두 감싸주면 된다.  Radio.jsx import "./Radio.css";export const Radio = ({ children, value, n..
[JavaScript] 프로토타입 (Prototype) 목차 1. 프로토타입 (prototype)2. [[Prototype]]3. 프로토타입 상속 4. __proto__5. 프로토타입 메서드 6. 프로토타입 체인 7. 함수의 prototype 프로퍼티8. "prototype"과 [[Prototype]]의 차이9. constructor 프로퍼티10. 상속 트리    "어렵고 추상적인...(사실 프로토타입 개념이 넘 어려워서 미뤄왔다가 피할 수 없어서 이제야 씀 ㅎ..)프로토타입에 대해서 핵심 위주로 알아보자!"         1. 프로토타입(prototype)  - 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받는데, 이때 상속되는 정보를 제공하는 객체- "생성자 함수에만 존재하는 속성"이며, 해당 생성자 함수로부터 생성된 객체들이 공..
[React] 리액트로 서버에 데이터 요청하는 방법 (fetch, axios.then, async/await 사용하기) 목차 1. 서버 만들기 2. React 설치하기 3. 서버에 대이터 요청하는 방법 2가지4. fetch로 통신하기 5. 라이브러리(axios)를 사용해서 통신하기 6. async/await 이용하기7.  async/await과 axios.then() 차이점     리액트로 서버에 데이터를 요청하는 방법을 알아보자!       1. 서버 만들기  서버에 데이트를 요청하려면 서버가 있어야한다. 이해를 위해 직접 서버를 만들어보자! (express를 이용할 것이다)  1. 폴더 기본 구성하기  폴더 기본 구성은 아래와 같다.    2 . 터미널에서 server 폴더로 이동한다.      3. node.js 프로젝트를 하니까 npm init을 해서 package.json을 만들어준다.      4. npm i ..
[JavaScript] HTTP 프로토콜의 개념, 특징, 상태 코드, 통신 방법 (GET, POST, PUT, PATCH, DELETE) 완벽 총정리 목차 1. 'HTTP'2. HTTP의 특징3. HTTP 상태 코드4. HTTP 통신 방법의 종류    GET, POST, PUT, PATCH, DELETE  → 용도, 특징, 적용예시, 코드 예시    프론트엔드에서 서버에 데이터를 요청하는 것은 웹 애플리케이션을 개발할 때는 물론 백엔드와의 협업을 위해서도 매우 중요한 부분이다. 이를 이해하기 위해서 먼저 프로토콜과 기본적인 통신 방법에 대해서 알아보자!        1.  'HTTP' (HyperText Transfer Protocol : 하이퍼텍스트 전송 프로토콜)  HTTP 는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜이다.프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식 (데이터의 형식)을 정의하는 규..
[프로그래머스/JavaScript] 코딩 테스트 풀이 (문제 129 - flag에 따라 다른 값 반환하기) # 문제두 정수 a, b와 boolean 변수 flag가 매개변수로 주어질 때, flag가 true면 a + b를 false면 a - b를 return 하는 solution 함수를 작성해 주세요.# 답안// 1. 입력: 정수 a,b와 변수 flag// 2. 출력: flag ? a+b : a-bfunction solution(a, b, flag) { return flag ? a+b : a-b}
[프로그래머스/JavaScript] 코딩 테스트 풀이 (문제 128 - 원소들의 곱과 합) # 문제정수가 담긴 리스트 num_list가 주어질 때, 모든 원소들의 곱이 모든 원소들의 합의 제곱보다 작으면 1을 크면 0을 return하도록 solution 함수를 완성해주세요.# 답안// 1. 입력: 정수 배열 num_list// 2. 출력: (모든 원소들의 곱
[프로그래머스/JavaScript] 코딩 테스트 풀이 (문제 127 - 이어 붙인 수) # 문제정수가 담긴 리스트 num_list가 주어집니다. num_list의 홀수만 순서대로 이어 붙인 수와 짝수만 순서대로 이어 붙인 수의 합을 return하도록 solution 함수를 완성해주세요.# 답안// 1. 입력: 정수 배열 num_list// 2. 출력: 홀수이어붙인거 + 짝수이어붙인거// let odd = ""; let even = "" 만들고,// num_list 요소들 하나씩 조사하면서// (num_list[i] % 2 === 0) 이면, even에 더하기, 아니면 odd에 더하기// return odd, even 각각 숫자로 바꾸고 더하기function solution(num_list) { let odd = ""; let even = ""; for(let i=0; i

티스토리툴바