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

전체 글

 (224)
[프로그래머스/JavaScript] 코딩 테스트 풀이 (문제 7 - 숫자 비교하기) # 문제 7 (숫자 비교하기) 정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1 다르면 -1을 retrun하도록 solution 함수를 완성해주세요. # 답안 // 1. 입력: num1과 num2 -> 정수 1,2,3 같은거 // 2. 출력: 1, -1 // 3. 요구사항: num1===num2면? 1, num1 !== num2면? -1 function solution(num1, num2) { if (num1===num2){ return 1; }else{ return -1; } } # 인사이트 // 조건이 주어진다면, if, else 구문 사용 // 일치 연산자 === 사용 // *참고) 동등연산자 ==는 피연산자들의 값만 비교, 일치연산자(===)는 피연산자들의 값과 타입을 모두 비..
[프로그래머스/JavaScript] 코딩 테스트 풀이 (문제 5~6 - 몫, 나머지 구하기) # 문제 5 (몫 구하기) 정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요. # 답안 // 1. 입력: num1과 num2 -> 정수 1,2,3 같은거 // 2. 출력: num1을 num2로 나눈 몫 // 방법1) Math.floor 사용 function solution(num1, num2) { const answer = Math.floor(num1 / num2); return answer; } // 방법2) parseInt 사용 function solution(num1, num2) { const answer = parseInt(num1 / num2); return answer; } // 방법3) ~~ (double..
[프로그래머스/JavaScript] 코딩 테스트 풀이 (문제 1~4 - 사칙연산) # 문제 1 (두 수의 합) 정수 num1과 num2가 주어질 때, num1과 num2의 합을 return하도록 soltuion 함수를 완성해주세요. # 답안 // 1. 입력: num1과 num2 -> 정수 1,2,3 같은거 // 2. 출력: num1 + num2 function solution(num1, num2) { const answer = num1 + num2; return answer; } # 인사이트 // 덧셈은 + # 문제 2 (두 수의 차) 정수 num1과 num2가 주어질 때, num1에서 num2를 뺀 값을 return하도록 soltuion 함수를 완성해주세요. # 답안 // 1. 입력: num1과 num2 -> 정수 1,2,3 같은거 // 2. 출력: num1 - num2 functi..
[React] 스크롤 top 버튼 기능 구현하기 스크롤을 맨 위로 올리는 top 버튼을 만들어보자! 생각보다 코드가 매우 간단하다. 만들 예제의 완성본 1. 리스트 페이지를 만든다. List.jsx import "./List.css"; const List = () => { const dummyList = [ { id: 1, title: "1번", }, { id: 2, title: "2번", }, { id: 3, title: "3번", }, { id: 4, title: "4번", }, { id: 5, title: "5번", }, { id: 6, title: "6번", }, { id: 7, title: "7번", }, { id: 8, title: "8번", }, { id: 9, title: "9번", }, { id: 10, title: "10번", }, ..
[React] 작성 날짜 기준으로 지난 시간을 변환하기 (리뷰시간, 게시글 시간, 댓글시간, 방금전, 몇분전, 몇시간전, 며칠전) 작성날짜 기준으로 지난 시간을 계산해주는 코드를 구현해보자! 아래의 게시글을 참고한 다음 이 게시글을 보면 이해가 훨씬 더 빠릅니다! https://dev-ini.tistory.com/110 [Javascript] 시간 변환 함수 (newDate, getTime, toLocaleString, , toLocaleDateString, toLocaleTimeString) 시간 변환 함수에 대해서 알아보자! new Date() - Date 생성자는 특정 지점을 나타내는 Date 객체를 생성한다. - Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 dev-ini.tistory.com 활용 예시 이 게시글을 활용하면 아래와 같이 구현이 가능하다. 리뷰를 작성하면,..
[Javascript] 시간 변환 함수 (newDate, getTime, toLocaleString, , toLocaleDateString, toLocaleTimeString) 시간 변환 함수에 대해서 알아보자! new Date() - Date 생성자는 특정 지점을 나타내는 Date 객체를 생성한다. - Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX 타임스탬프를 담는다. console.log(new Date()); // Date {} getTime() - getTime() 메서드는 표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환한다. - 이 메서드를 사용하면 Date 객체에 날짜와 시간을 지정할 수 있다. - 1970년 1월 1일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자이다. console.log(new Date().getTime()); // 1704442186..
[React] 중복된 useState 상태 및 함수 코드 정리하기, 컴포넌트 분리하기 중복된 useState 상태 및 함수코드 정리하는 방법을 알아보자! 만들 예제의 완성본 4개의 버튼을 누르면 각각의 색깔이 연보라에서 진보라로 바뀌게 한다. 1. App.js에 MbtiButton 컴포넌트를 import한다. App.js import { MbtiButton } from "./MbtiButton"; import "./styles.css"; export default function App() { return ( ); } 2. MbtiButton.jsx를 마크업한다. MbtiButton.jsx import "./MbtiButton.css"; import LightPurpleE from "./assets/E-light-purple.png"; import LightPurpleI from "./a..
[React] Routing (5) 데이터에서 route 설정하기 더미데이터에서 route 설정하는 법을 알아보자! 구현해야할 것 메인페이지에는 먹거리, 볼거리, 놀거리, 카페, 테마카페가 있다. 각각의 항목에 맞는 개별 페이지로 이동하게 해야한다. 예컨대, 먹거리를 누르면 한식, 중식, 일식, 양식, 치킨 , 패스트푸드가 담긴 페이지가 뜨게끔 route를 설정해야한다. 메인페이지 (Main.jsx) 하위 카테고리 페이지 순서 1. App.js에 route를 설정한다. 메인, 먹거리, 볼거리, 놀거리, 카페, 테마카페 총 6개의 route를 설정한다. 2. main.js에다가 더미 데이터를 만들 때, 각각의 항목에 맞는 route를 설정해준다. 2. 메인페이지(Main.jsx)에서 main.js 데이터를 보라색 박스 컴포넌트에다가 map 돌린다. 3. 보라색 박스 컴포..

티스토리툴바