배워서 남 주자

본문 바로가기

홈 안녕하세요, harperB 입니다. 더보기

최신 글✨

블로그 인기글🎉

둘러보세요🐾

Frontend [모던 자바스크립트 Deep Dive] 22. this this 키워드객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다.동작을 나타내는 메서드는 자신의 프로퍼티를 참조하고 변경할 수 있어야 한다.이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 재귀적으로 참조할 수 있다.const circle = { radius: 5, // 프로퍼티 getDiameter() { return 2 * circle.radius; // 메서드에서 자신이 속한 객체를 재귀적으로 참조하고 있다. }};console.log(circle.getDiameter()); //10 1. 자바스크립트 엔진에서..
Frontend 모듈 번들러란? (부제: Webpack vs Vite) 이번에는 모듈 번들러에 대해서 그리고 대표적인 툴인 Webpack과 Vite에 대해서 써보려고 한다. https://sh-tg.tistory.com/11 React로 프로젝트를 시작 할 때1. 프로젝트 구조먼저, 프로젝트의 구조부터 살펴 보겠습니다.아래의 레포지토리는 지인이 공유해준 React 프로젝트 템플릿인데, 지인에게 미리 사용, 공유해도 된다는 허락을 받았다!https://github.sh-tg.tistory.com위의 포스트에도 웹팩, 컴파일러 등에 대해 대략적인 설명이 있지만 해당 포스트에서는 모듈 번들러에 대해서 좀 더 자세히 설명할 예정이다. 모듈 번들러란?브라우저를 구성하는 자원으로는 HTML, CSS, Javascript, 정적 자원(이미지) 등이 있다. 웹 애플리케이션이 커지고 복잡해..
Frontend SSR과 CSR의 차이 (부제: React vs Next.js) SSR은 뭐고 CSR은 뭘까? 그리고 각각의 차이점은 무엇일까?CSR의 대표(?) 라이브러리이자 프론트엔드에서 많이 사용되는 React와 SSR 프레임워크인 Next.js를 사용하면서 느낀점도 적어보려고 한다. SSR이란?SSR(Server Side Rendering)이란 서버에서 렌더링 준비를 마친 후 클라이언트에 전달하는 방식이다. 번역하자면, 1. 사용자가 웹 사이트에 요청을 보낸다.2. 서버에서 즉시 렌더링 가능한 HTML 파일을 만든다. 3. 브라우저(클라이언트)에서 HTML을 렌더링하지만 상호작용(조작) 할 수 없다.4. 브라우저(클라이언트)에서 Javascript를 다운 받는다.5. 이때 사용자는 렌더링 된 HTML (콘텐츠)를 볼 수 있다. 만약 사이트를 조작한다면 이 행동은 기억된다..
홈 안녕하세요, harperB 입니다. 안녕하세요, 제 블로그에 방문해주셔서 감사합니다.저는 컴퓨터공학을 전공하고 SW개발자로 일하기 위해 취업을 준비하고 있는 취준생이며,SSAFY(삼성 청년 소프트웨어 아카데미)에서 11기로 교육을 받고 있습니다. (곧 방 뺏길 예정 ㅠㅠ) 개발 분야 중에서도 프론트엔드에 관심을 가지고 있고,주로 React, Typescript, Redux, TailwindCSS 등등을 사용합니다.닉네임인 harperB는 영어 이름인 harper와 성씨의 초성을 붙여서 짓게 되었습니다.블로그를 통해 개발(IT)에 관심이 있거나 개발자로 일하고 계시거나 준비하고 계신 여러 사람들과 소통하고 싶습니다 :)감사합니다! 연락처:developer.venice@gmail.comhttps://github.com/ramrami-B ..
프로젝트 회고록 Close To You (시각장애인을 위한 AIoT 옷장과 의류 관리 PWA 애플리케이션) 나의 첫 번째 프로젝트 회고록 대상으로 당첨된 🎉공통 PJT 🎉 의 회고록을 써보려고 한다.삼성 청년 소프트웨어 아카데미(이하 싸피)라는 곳에서 진행한 프로젝트인데,간략하게 싸피에 대해서 이야기하자면 1학기엔 교육, 2학기엔 3번의 자기 주도형 프로젝트를 진행한다.3번의 프로젝트에는 공통, 특화, 자율이라는 이름이 붙여져 있고, 오늘 쓸 프로젝트는 이 중 첫 번째 프로젝트인 공통 프로젝트이다. 싸피에 대해 더 자세히 알고 싶다면https://sh-tg.tistory.com/1 싸피(SSAFY) 11기 합격(최초합) 후기사실 이 글은 합격 소식을 접한 직후부터 쓰기 시작한 글인데 시간이 없어서 매번 제대로 완성을 하지 못했다.최대한 자세하게 작성하고 싶었지만, 기억이 희미해져서 작성하지 못한 내용도 있..
SSAFY [SSAFY 11기] 1년 동안 대전에서 싸피 해본 후기 이 글은 싸피의 입과를 앞두고 있는 사람(특히 대전 캠퍼스)에게 유용할 수 있는 정보 전달의 목적도 있지만,80% 이상 개인적인 감상과 느낌을 포함한 나만의 기록이 될 것 같다는 것을 먼저 이야기하고 싶다.대신 정보 전달이 될 수 있는 부분에는 "TIP!)"이라고 써두었으니 유용한 정보만 얻고 싶다면 TIP을 검색하길 :) 싸피의 꽃이라고 할 수 있는 2학기 3번의 프로젝트가 모두 끝나고 수료를 기다리고 있는 지금,나름 1년 동안 하나의 프로그램을 수행한 것을 기념하며 싸피에서의 지나간 1년을 기록해보려고 한다! 1. 입과*쓰다 보니 느낀 건데 1학기는 벌써 기억이 잘 안 난다🤣 틀린 내용이 있을 수 있으니 참고만 해주오.. 싸피 합격에 관한 것은 아래 포스팅을 참고해 주길 바란다 :)https:/..
알고리즘 [프로그래머스] Lv2. 괄호 회전하기 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/76502 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr풀이먼저 괄호 쌍을 hashmap으로 만들어 둔 다음, stack을 사용해서 괄호 쌍이 맞는 지 확인한다. 느낀 점 & 기억 할 것- 다른 사람 풀이를 보고 나서 깨달은 건데 StringBuilder를 쓰면 나처럼 concat이나 substring을 안써도 되고 실행 시간을 줄일 수 있을 것 같다.- 요즘 오랜만에 알고를 풀기 시작 했더니 최적화나 가독성 따위 신경 쓰지 않고 코드를 쓰게 되는..
알고리즘 [프로그래머스] Lv2. 연속 부분 수열 합의 개수 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/131701 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이주어진 배열(elements)를 두 개 이어붙인 배열을 만들어서 1개부터 elements의 길이 수까지 합을 set(HashSet)에 더해가면,set에서 중복이 제거되어 마지막에 set의 길이를 정답으로 제출정답 코드import java.util.*;class Solution { public int solution(int[] elements) { int[] eles =..
Frontend React로 프로젝트를 시작 할 때 1. 프로젝트 구조먼저, 프로젝트의 구조부터 살펴 보겠습니다.아래의 레포지토리는 지인이 공유해준 React 프로젝트 템플릿인데, 지인에게 미리 사용, 공유해도 된다는 허락을 받았다!https://github.com/WantedTeam17/Project-Starter-With-JS GitHub - WantedTeam17/Project-Starter-With-JS: WebPack, Babel, JS를 이용한 리액트 프로젝트 세팅WebPack, Babel, JS를 이용한 리액트 프로젝트 세팅. Contribute to WantedTeam17/Project-Starter-With-JS development by creating an account on GitHub.github.com이 외에도 깃헙에 'react..
알고리즘 [프로그래머스] LV2. 영어 끝말잇기 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/12981?language=java 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이흔히들 알고 있는 끝말잇기와 동일하게 끝말을 잇지 못하거나 이전에 나왔던 단어를 사용하면 틀리는 문제!이전에 나왔던 단어인지 중복 체크를 할 때 Set이나 ArrayList를 사용할 수 있다.정답(answer)이 나왔을 때 바로 탐색을 중단하여 제출해야 한다 (이걸 안해서 두 번 틀림 ㅠ,,) 정답 코드더보기import java.util.*;class Soluti..
알고리즘 [프로그래머스] LV2. 점프와 순간 이동 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/12980 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이처음엔 DP 문제인가? 했는데 N의 최댓값이 10억이길래 DFS 문제인가? 했는데 결국은 그냥 단순 구현 문제였다.순간 이동을 해서 N이 될 수 있는 경우에는 순간 이동을 하고, 순간 이동을 할 수 없을 때는 1칸씩만 점프한다.정답 코드public class Solution { public int solution(int n) { int ans = 0; whi..
알고리즘 [프로그래머스] LV2. 멀리 뛰기 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/12914 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr풀이dp를 이용해서 풀었다 주의 할 점은 1234567을 나눈 나머지를 정답으로 제출 해야 하는데마지막에 나누는 것이 아니라 dp 테이블에 저장 할 때 나눠야 한다는 것!정답 코드class Solution { public long solution(int n) { long answer = 0; int dp[] = new int[2000]; ..
알고리즘 [프로그래머스] LV2. 카펫 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/42842?language=java 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 풀이문제 분류는 완전 탐색으로 되어 있지만 완전 탐색 보다는 수학 문제에 가까운 것 같다!정답 코드class Solution { public int[] solution(int brown, int yellow) { int[] answer = new int[2]; for(int i = 1; i
알고리즘 [프로그래머스] LV2. 짝지어 제거하기 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/12973 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr풀이stack을 이용해서 푸는 문제 stack 사용법 참고https://inpa.tistory.com/entry/JCF-%F0%9F%A7%B1-Stack-%EA%B5%AC%EC%A1%B0-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%A0%95%EB%A6%AC 🧱 자바 Stack 구조 & 사용법 정리Stack 컬렉션 스택(Stack)의 사전적 정의는 '쌓다', '더미' 로서 접시 ..
Frontend [Window 10] VSCode 초기 세팅하기 for React 원래 맥북을 사용하다가 이번에 window 환경에서 VSCode를 사용하게 되어서 기록합니다.VSCode로 React 또는 프론트엔드 개발을 하기 위한 초기 세팅입니다!1. (선택) 우분투 또는 리눅스 환경 만들기 윈도우에서 VSCode를 설치 후, 터미널을 열면 기본적으로 powershell이 열리는데 익숙한 명령어를 사용하기 위해 우분투를 따로 설치했다.*git bash 등 다른 프로그램을 사용해도 된다. 먼저 powershell을 통해 wsl을 설치해 준다. wsl --install VSCode의 터미널을 열어서 "+"를 누르면 wsl이 있는 것을 알 수 있다. * 추가로 zsh를 설치해도 된다 (아래 레퍼런스 참고) 2. Git, nodejs 설치하기- git 설치sudo apt install..
Git 내가 자주 쓰는 Git 명령어 (feat. 우여곡절) 햐 요즘엔 GUI도 잘 되어 있다지만 나는 여전히 터미널에 한 땀 한 땀 명령어 입력하는 것을 선호한다.(이것도 몇 년간 하다 보니 익숙해지기도 했다)기왕 쓰는거 한 번 정리해 보자!라는 생각에 포스팅을 하게 되었다. 기본(add, commit, pull, push, clone, checkout, branch)Git을 사용하다보면 자주 많이 사용하는 명령어이다.그 외에는 그때 그때 구글링 해도 문제없다고 생각한다.하지만 '이 정도 명령어도 구글링을 하면 시간 낭비다'라고 생각되는 명령어를 정리해 보았다!git initgit remote add {remote name 보통 origin을 쓴다} {url}git branch -M maingit checkout [-B] {branch name}git add ..
취준 일기 IBK기업은행 2024 상반기 신입 디지털 필기 시험 후기 이번에 IBK기업은행 신입 채용에 지원해서 필기시험을 치고 온 후기를 쓰려고 한다!기업 은행 서류는 블라인드 채용 가이드라인에 위반되지 않으면 합격이다.(면접까지 생각한다면 자소서를 꼭 신경 써서 써야 한다!)그러나 지난번에 블라인드를 어겨서 떨어진 적 있기 때문에,,^^ (바보,,)긴장의 끈을 놓지 않고 결과를 기다렸다. 이번엔 서류는 통과했고, 처음으로 필기시험을 치게 되었다.특이했던 점은 이번 채용에서는 디지털, IT를 구분해서 뽑는데 두 분야의 시험 과목이 달랐다는 것이다.전산학은 정보 처리 기사를 기반으로 준비하면 된다고 들었는데 디지털 분야의 시험 과목인 데이터베이스, 빅데이터, AI, 블록체인 과목은 어떤 식으로 준비해야 할지 조금 막막했다.구글링을 해봐도 정보가 많지도 않고, 최신 정보가 ..
SSAFY 싸피(SSAFY) 11기 합격(최초합) 후기 사실 이 글은 합격 소식을 접한 직후부터 쓰기 시작한 글인데 시간이 없어서 매번 제대로 완성을 하지 못했다.최대한 자세하게 작성하고 싶었지만, 기억이 희미해져서 작성하지 못한 내용도 있다는 것 참고하시길..어차피 제목이 "합격 후기" 이므로 기분 좋게 합격 사진으로 시작하겠다.만약 합격하게 된다면 내가 봤던 많은 후기글처럼 꼭 글을 쓰겠다고 생각했는데정말 합격을 하게 되어서 이렇게 후기를 남길 수 있게 되어서 감사하다.TMI지만 지금 제주도 여행을 와 있어서 더 행복하고, 합격해서 더 기쁘게 여행을 즐길 수 있을 것 같다. 1. 싸피(SSAFY)란? 먼저, 싸피에 대해서 잘 모르는 사람을 위해 간략히 설명하자면 싸피(SSAFY, 이하 싸피)는 삼성 S..

티스토리툴바