본문 바로가기

카테고리

(18)
[모던 자바스크립트 Deep Dive] 22. this this 키워드객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다.동작을 나타내는 메서드는 자신의 프로퍼티를 참조하고 변경할 수 있어야 한다.이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 참조할 수 있어야 한다. 객체 리터럴 방식으로 생성한 객체의 경우 메서드 내부에서 재귀적으로 참조할 수 있다.const circle = { radius: 5, // 프로퍼티 getDiameter() { return 2 * circle.radius; // 메서드에서 자신이 속한 객체를 재귀적으로 참조하고 있다. }};console.log(circle.getDiameter()); //10  1. 자바스크립트 엔진에서..
모듈 번들러란? (부제: Webpack vs Vite) 이번에는 모듈 번들러에 대해서 그리고 대표적인 툴인 Webpack과 Vite에 대해서 써보려고 한다. https://sh-tg.tistory.com/11 React로 프로젝트를 시작 할 때1. 프로젝트 구조먼저, 프로젝트의 구조부터 살펴 보겠습니다.아래의 레포지토리는 지인이 공유해준 React 프로젝트 템플릿인데, 지인에게 미리 사용, 공유해도 된다는 허락을 받았다!https://github.sh-tg.tistory.com위의 포스트에도 웹팩, 컴파일러 등에 대해 대략적인 설명이 있지만 해당 포스트에서는 모듈 번들러에 대해서 좀 더 자세히 설명할 예정이다. 모듈 번들러란?브라우저를 구성하는 자원으로는 HTML, CSS, Javascript, 정적 자원(이미지) 등이 있다. 웹 애플리케이션이 커지고 복잡해..
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 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 =..