전체 글 83

[Javascript] This, 화살표 함수, 그리고 ES6 이전 (23.07)

나는 FE 개발 입문을 SPA 로 시작했다. 너무나 익숙하게 Arrow function과 this의 스펙을 활용하고 있다. 어느 날 갑자기 ES6 이전에는 비슷한 기능을 어떻게 구현했을지 궁금해졌다. 1. this: 알고있던 내용 호출한 대상을 가리킨다. 기본적으로는 전역 객체(Node 환경의 global, 웹 브라우저의 window) 를 가리킨다. 클래스나 메서드 등에서 호출될 시 ‘호출한’ 객체. this는 함수 호출 시 자동으로 bind됨. (ES6) this의 자동 bind 원하지 않을 시 Arrow function(화살표 함수) 를 사용할 것. 2. this: 궁금했던 내용 Arrow function(화살표 함수) 는 ES6 스펙이다. ES6는 ECMAscrpit 2015년 스펙이다. 2015년..

카테고리 없음 2024.01.12

[Server]gRPC와 Proto, Spring에서 활용

1. 어쩌다 쓰게 되었는가? 타 팀원이 개발한 gRPC 를 내가 개발중인 WAS에서 사용하게 되었다. gRPC 개발중인 Git repo와 내가 개발중인 Git repo는 별도로 분리되어 있다. 내가 개발중인 repo에서도 해당 gRPC를 사용하고 업데이트하기 위해 해당 gRPC를 proto 파일 형태로 관리하게 되었다. 2. 사용법 proto 파일을 적절한 위치에 배치 proto 파일 컴파일(with protoc) 컴파일된 gRPC를 서버 내에 적절히 import하여 활용 3. 실제 사용 환경: Spring Boot 기반의 서버. proto 파일의 개념과 사용법을 확인했다. pom.xml 파일을 확인함. 이미 WAS를 build할 때 Proto 파일을 컴파일하여 src 내의 적절한 위치에 컴파일하는 옵션..

TIL/Backend 2024.01.09

[CSS] 의사 클래스 hover, focus, active 차이점(23.12.22)

1. 찾아보게 된 이유 구현할 내용: 특정 객체에 mouse hover시 Bootstrap tooltip을 표시하는 기능 구현한 내용: 아래의 코드와 같이 구현. 버그: 클릭한 이후에도 tooltip 이 사라지지 않음. 2. 해결 tooltip의 옵션에 ‘hover’ 추가. 3. 배웠던 내용 의사 클래스들의 구체적인 사양 focus: 특정 html 요소가 focus 됨. 보통 요소가 클릭 or 탭 되었을 때. active: 특정 html 요소가 활성화 됨. 보통 사용자가 요소를 클릭한 이후 - 클릭 버튼 떼기 전까지. 4. 레퍼런스 의사 클래스: https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes :focus : https://developer.m..

TIL/Frontend 2023.12.26

5월 회고

I knew if I stayed around long enough, something like this would happen. 내 언젠가 이 꼴 날줄 알았다. 정규직으로 취직했다. 언젠가는 이렇게 될 줄 알았다. 이전보다 평탄하고 안정적으로 살게 될 것이다. 아쉬움이 크다. 그렇지만 반복되는 일상과 평온함 속에서도 또 다른 재미가 있으리라 믿는다. 1. 파워리프팅 1) PR측정 처음으로 세자릿수의 무게(102.5kg, 데드리프트)를 들었다. 야호! 2) 단기목표 / 중기 목표 / 장기 목표 (1) 단기 목표 [X] 세자릿수 무게 들기. [ ] 몸무게 넘는 중량 벤치프레스 하기 (2) 중기 목표 [ ] 3대 중량 몸무게 5배 이상 들기 [ ] 스쿼트 100kg 이상 들기 (3) 장기 목표 [ ] 전국 ..

4월 회고

1. 생산적인 일들 1) 구직 완료! 다음 달부터 출근합니다. 2. 내 이야기 1) 파워리프팅 (1) 입문 - 전신 협응력 및 스트렝스 전신 협응력과 스트렝스 상승을 위해 3대 운동을 배우려고 했다. 독학의 한계는 분명했다. 마침 멀지 않은 거리에 파워리프팅 짐이 있었다. 상담 후 PT에 등록했다. (2) 좋은 멘토 좋은 코치님을 만나 아주 잘 배우고 있다. 전문 지식 기반으로 체계적으로 알려주신다. 지금 충실히 배워두면 나중에 혼자서도 자세를 교정해가며 꾸준히 운동할 수 있을 것 같다. (3) 인체의 신비 인간의 몸은 경이롭다. 신체가 얼마나 복잡한지, 하나의 동작에 얼마나 많은 근육들이 다양하게 협응하는지를 알면 알수록 신기하다. 그리고 사람들은 이런 복잡한 동작들을 의식하지 않고 ‘자연스럽게’ 수행..

3월 회고 - 움직임의 재미

1. 생산적인 일들 1) 구직 (1) 전업 취준생 취준 기간의 우울함에 대해서는 익히 들었다. 기우였다. 아마추어 취준생 시절보다 더 많은 회사에 지원할 수 있다. 한 두개의 합불에 일희일비 하지 않을 수 있어 좋다. (2) 이력서 세 개의 반기동안 이력서를 썼다. 그 동안 1) 개발자로서 성장했고 2) 구체적인 성장 과정을 서술할 수 있게 되었고 3) 객관적인 증거도 확보했다. 경험과 문구들이 탬플릿화되어 보다 빠르고 편하게 이력서를 작성할 수 있다. (3) 코테 준비 코테 중 웹사이트 버그로 코드를 통째로 날렸다. 다행히도 빠르게 코드 복구 후 제출했다. 하지만 해당 웹사이트 환경에는 꼭 익숙해져야겠다 생각했다. 쉬운 문제를 많이 풀어보며 감을 찾는 중이다. (4) 면접 ‘왜 컴퓨터공학을 전공하지 않..

2월 회고

1. 비 생산적인 일들 1) 볼더링 (1) 문제: 어떻게 클라이밍 실력을 올리지? 클라이밍을 열심히 다녔다. 5개월 차(12월 초)가 되니 더클라임 빨강을 잡을 수 있을 것 같았다. 주 3회씩 클라이밍을 다녔다. 여기저기 쑤시기 시작했다. 등반 영상을 돌려 보니 당시의 수행 능력으로는 무리인 동작을 쥐어 짜내고 있었다. 아마 같은 방식으로 클라이밍을 지속했다가는 어디 한 군데 크게 다쳤을 것이다. 테이프 색깔 욕심을 내려놨다. 대신 내 동작을 더 깔끔하게 만드는 데에 집중했다. 발에 집중하며 천천히 홀드를 디뎠고, 탑을 찍은 후 매트까지 천천히 다운 클라이밍 했다. 손 홀드를 고쳐 잡는 습관도 줄이려고 노력했다. 지구력 벽 연습도 많은 도움이 되었다. 천천히 실력이 좋아졌다. 같은 지구력 코스를 더 쉽게..

싸피를 떠나며. - SSAFY 실습코치 회고

글을 마무리하기까지 세 달이 걸렸습니다. 알차게 놀고 신나게 운동하며 SSAFY에서의 시간들을 반추했습니다. 1. 제 이야기 저는 참 운이 좋았습니다. 직군을 두 번이나 전환하고도 직업 교육을 받을 수 있었습니다. 그러다 SSAFY에 추가 합격했습니다. 예상보다 경제적, 시간적으로 더 여유로운 환경에서 취직을 준비했습니다. 좋은 개발자 동료들과 선배들을 만났습니다. SSAFY 7기 실습코치로 선발되어 더 많은 분들과 교류할 수 있었습니다. 코로나-19 가 유행했습니다. 직장을 구하기 어려웠습니다. 덕분에 제 적성에 대해 충분히 고민할 수 있었습니다. 취업 시장이 불리했습니다. 그래서 커리어를 과감하게 전환할 수 있었습니다. 개발 직군이 각광받으며 개발 교육 프로그램에 대한 접근성이 늘었습니다. SSAFY..

18352. 특정 거리의 도시 찾기 - 파이썬. BFS, 큐

1. 사용한 알고리즘 | 자료 구조 BFS 큐 2. 풀이 접근 방식 전형적인 BFS 문제입니다. K회 만큼 BFS 연산 후 Queue 에 있는 값을 정렬, 출력합니다. 3. 특이사항 Stack 2개를 스왑하는 방식으로 사용하여 deque 를 import 하지 않고 BFS 알고리즘을 구현할 수 있습니다. 4. 언어 | 실행시간 | 메모리 사용량 Python3 | 1264ms | 97164kb from sys import stdin def solution(): # 1. 입력 # N: 정점의 수 | M: 간선의 수 # K: BFS 연산 횟수 | X: BFS 연산 시작점 N, M, K, X = map(int, stdin.readline().split()) # 2. 선언 # 2-1. paths: 간선 정보 pat..