본문 바로가기
4. 리액트로 포트폴리오 사이트 만들기 (스킬 영역) https://webstoryboy.co.kr/1938 15. 포트폴리오 사이트 만들기 : React-Site : 스킬 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 05 포트폴리오 사이트 만들기 : 스킬 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)이것 또한 코드가 길기에 다음 깃허브 사이트를 참고하자.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta develo.. 2024. 9. 18.
3. 리액트로 포트폴리오 사이트 만들기 (인트로 영역) https://webstoryboy.co.kr/1937 14. 포트폴리오 사이트 만들기 : React-Site : 인트로 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 04 포트폴리오 사이트 만들기 : 인트로 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토webstoryboy.co.kr(참고 사이트)인트로 부분이 완성이 되었다.왼쪽은 마우스를 hover하지 않은 상태. 오른쪽은 마우스를 hover한 상태이다.이것또한 코드가 길어서, 코드는 밑의 링크를 참고하자.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/Portfolio.. 2024. 9. 18.
2. 리액트로 포트폴리오 사이트 만들기 (헤더 영역) https://webstoryboy.co.kr/1936 13. 포트폴리오 사이트 만들기 : React-Site : 헤더 영역Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 03 포트폴리오 사이트 만들기 : 헤더 영역 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(관련 사이트)이번에는 "헤더" 영역을 세팅했다.https://github.com/kss2002/PortfolioWebsite-beta GitHub - kss2002/PortfolioWebsite-betaContribute to kss2002/PortfolioWebsite-beta development by cre.. 2024. 9. 18.
1. 리액트로 포트폴리오 사이트 만들기 (셋팅, 컴포넌트화) 원래 자바스크립트 심화 버전 강의를 듣고 있었지만, 너무 이론적이고... 무엇보다 아직 리액트로 사이트를 빌딩 하는 과정에 대해서는 완벽히 모르고 있기에, 따른 유튜브 강의를 듣기로 했다.물론 추가 활동인 "백준 문제 풀기"도 지속할 것이다. https://webstoryboy.co.kr/1934 11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리webstoryboy.co.kr(여기 블로그를 참고하였다.)스킬은 리액트가 되어줄 것이고, SCSS, GA.. 2024. 9. 16.
10. [Reflect 6~7챕터] 자바스크립트 완전 끝내기: ES6+ 심화 6. getPrototypeof(), setPrototypeof(), ownKeys(), getOwnPropertyDescriptor() Reflect.getPrototypeOf() 정적 메서드는 주어진 객체의 프로토타입을 반환합니다. Object.getPrototypeOf()와 거의 동일합니다. 참고로 Object.getPrototypeOf() 메서드는 지정된 객체의 프로토타입(가령 내부 [[Prototype]] 속성값)을 반환합니다. __proto__ 는 프로토타입을 설정할 수 있다.실제로 Object.getPrototypeOf()를 통해 확인한 프로토타입이 parent와 동일한 것을 보면 알 수 있다. Reflect.setPrototypeOf() 정적 메서드는 주어진 객체의 프로토타입(내부 [[Pr.. 2024. 9. 15.
27. 문자열 분석(10820), 단어 길이 재기(2743) 문제. 문자열 N개가 주어진다. 이때, 문자열에 포함되어 있는 소문자, 대문자, 숫자, 공백의 개수를 구하는 프로그램을 작성하시오.각 문자열은 알파벳 소문자, 대문자, 숫자, 공백으로만 이루어져 있다.첫째 줄부터 N번째 줄까지 문자열이 주어진다. (1 ≤ N ≤ 100) 문자열의 길이는 100을 넘지 않는다.첫째 줄부터 N번째 줄까지 각각의 문자열에 대해서 소문자, 대문자, 숫자, 공백의 개수를 공백으로 구분해 출력한다.답:while True: try: #예외 구문 string = input() answer = [0] * 4 for s in string: if s.islower(): answer[0] += 1 .. 2024. 9. 15.
9. [Reflect 4~5챕터] 자바스크립트 완전 끝내기: ES6+ 심화 4. has(), deleteProperty()Set 객체의 has() 메서드는 이 Set 객체에 주어진 요소가 존재하는지 여부를 판별해 반환합니다. 또한 결국 has는 true 혹은 false을 반환하는 함수라고 결론을 지을 수 있습니다.handler.deleteProperty() 메서드는 delete 연산자에 대한 트랩입니다. Reflect.deleteProperty() 정적 메서드는 속성을 제거할 수 있습니다. delete 연산자의 함수판이라고 할 수 있습니다. 5. defineProperty(), preventExtensions(), isExtensible() Object.defineProperty() 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체.. 2024. 9. 14.
26. 알파벳 개수(10808), 알파벳 찾기(10809) 문제.알파벳 소문자로만 이루어진 단어 S가 주어진다. 각 알파벳이 단어에 몇 개가 포함되어 있는지 구하는 프로그램을 작성하시오.첫째 줄에 단어 S가 주어진다. 단어의 길이는 100을 넘지 않으며, 알파벳 소문자로만 이루어져 있다.단어에 포함되어 있는 a의 개수, b의 개수, …, z의 개수를 공백으로 구분해서 출력한다.답:arr=input()cnt=[0]*26for i in arr: cnt[ord(i)-97]+=1print(*cnt) 이 파이썬 코드는 입력된 문자열에서 각 소문자 알파벳('a'부터 'z'까지)이 몇 번씩 등장하는지를 계산하여 그 결과를 출력하는 역할을 한다. arr = input():사용자로부터 문자열을 입력받는다. 이 문자열은 arr 변수에 저장된다.cnt = [0] * 26:길이.. 2024. 9. 14.
8. [Reflect 2~3챕터] 자바스크립트 완전 끝내기: ES6+ 심화 2. get(): this 참조 오브젝트, Proxy 핸들러의 get() 트랩객체의 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 나뉜다. 일반적으로 선언 또는 할당으로 지정되는 property는 데이터 프로퍼티이다.let myObj = {str: 'a', num: 1}접근자 프로퍼티는 획득자 함수 get(){}, 설정자 함수set(){} 인데, 객체 외부에서 property를 호출했을 때에는 함수가 아닌 일반 property처럼 보인다. get(){}getter(획득자) 라고도 불린다.property를 읽으려고 할 때 함수를 호출(실행)하여 값을 리턴한다.즉 함수에서 리턴하는 값이 property 값이 된다.let myFriend ={ get name(){ return 'Jin Woo'; }}.. 2024. 9. 13.
25. 후기표기식2(1935), 후기표기식(1918) 문제. 후위 표기식과 각 피연산자에 대응하는 값들이 주어져 있을 때, 그 식을 계산하는 프로그램을 작성하시오.입력첫째 줄에 피연산자의 개수(1 ≤ N ≤ 26) 가 주어진다. 그리고 둘째 줄에는 후위 표기식이 주어진다. (여기서 피연산자는 A~Z의 영대문자이며, A부터 순서대로 N개의 영대문자만이 사용되며, 길이는 100을 넘지 않는다) 그리고 셋째 줄부터 N+2번째 줄까지는 각 피연산자에 대응하는 값이 주어진다. 3번째 줄에는 A에 해당하는 값, 4번째 줄에는 B에 해당하는값 , 5번째 줄에는 C ...이 주어진다, 그리고 피연산자에 대응 하는 값은 100보다 작거나 같은 자연수이다.후위 표기식을 앞에서부터 계산했을 때, 식의 결과와 중간 결과가 -20억보다 크거나 같고, 20억보다 작거나 같은 입력만.. 2024. 9. 13.
7. [Reflect 1챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. Reflect 특징: Reflect 오브젝트, Proxy 사용이번에 배운 것은 Reflect 오브젝트이다.(코드는 다음과 같다.)Reflect 는 중간에서 가로챌 수 있는 JavaScript 작업에 대한 메서드를 제공하는 내장 객체입니다. 메서드의 종류는 프록시 처리기와 동일합니다. Reflect는 함수 객체가 아니므로 생성자로 사용할 수 없습니다. 다른 대부분의 전역 객체와 다르게, Reflect는 생성자가 아닙니다. 따라서 함수처럼 호출하거나 new 연산자로 인스턴스를 만들 수 없습니다. Math 객체처럼, Reflect의 모든 속성과 메서드는 정적입니다.Reflect 객체의 정적 메서드 이름은 프록시 처리기 메서드의 이름과 같습니다. 또한 Reflect는 proxy를 사용할 수 있다.이때 pr.. 2024. 9. 12.
24. 오등큰수(17299) 문제. 크기가 N인 수열 A = A1, A2, ..., AN이 있다. 수열의 각 원소 Ai에 대해서 오등큰수 NGF(i)를 구하려고 한다.Ai가 수열 A에서 등장한 횟수를 F(Ai)라고 했을 때, Ai의 오등큰수는 오른쪽에 있으면서 수열 A에서 등장한 횟수가 F(Ai)보다 큰 수 중에서 가장 왼쪽에 있는 수를 의미한다. 그러한 수가 없는 경우에 오등큰수는 -1이다.예를 들어, A = [1, 1, 2, 3, 4, 2, 1]인 경우 F(1) = 3, F(2) = 2, F(3) = 1, F(4) = 1이다. A1의 오른쪽에 있으면서 등장한 횟수가 3보다 큰 수는 없기 때문에, NGF(1) = -1이다. A3의 경우에는 A7이 오른쪽에 있으면서 F(A3=2) 답:from collections import Cou.. 2024. 9. 12.
6. [Proxy Trap 5~7챕터] 자바스크립트 완전 끝내기: ES6+ 심화 5. defineProperty(), preventExtensions() , isExtensible() 트랩 Object.defineProperty() 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환합니다. Object.preventExtensions() 메서드는 새로운 속성이 이제까지 객체에 추가되는 것을 방지합니다 (즉 객체의 장래 확장을 막습니다). Object.isExtensible() 메서드는 객체가 확장 가능한지(객체에 새 속성을 추가할 수 있는지 여부)를 결정합니다. 6. getPrototypeof(), setPrototypeof() 트랩 Object.getPrototypeOf() 메서드는 지정된 객체의 프로토타입(가령 내부 [[Pr.. 2024. 9. 11.
23. 쇠막대기(10799), 오큰수(17298) 문제. 여러 개의 쇠막대기를 레이저로 절단하려고 한다. 효율적인 작업을 위해서 쇠막대기를 아래에서 위로 겹쳐 놓고, 레이저를 위에서 수직으로 발사하여 쇠막대기들을 자른다. 쇠막대기와 레이저의 배치는 다음 조건을 만족한다.쇠막대기는 자신보다 긴 쇠막대기 위에만 놓일 수 있다. - 쇠막대기를 다른 쇠막대기 위에 놓는 경우 완전히 포함되도록 놓되, 끝점은 겹치지 않도록 놓는다. 각 쇠막대기를 자르는 레이저는 적어도 하나 존재한다. 레이저는 어떤 쇠막대기의 양 끝점과도 겹치지 않는다.아래 그림은 위 조건을 만족하는 예를 보여준다. 수평으로 그려진 굵은 실선은 쇠막대기이고, 점은 레이저의 위치, 수직으로 그려진 점선 화살표는 레이저의 발사 방향이다.답:n= input()stack=[]cnt = 0for i in .. 2024. 9. 11.
[9/10] 프론트엔드 스터디 후기 1. 참여한 과정구름톤 유니브에 프론트엔드로 지원하게 되었고, 운이 좋게도 뽑히게 되었다.이후 리액트를 배우게 되었다. 지금은 자바스크립트 심화버전을 듣고 있다.2. 어떻게 진행했는가진행은 파트 스터디와 전체 스터디로 나뉘게 되었다.두 개의 스터디 모두 일단은 온라인으로 진행이 되었으며, 일요일에 파트 스터디, 화요일에 전체 스터디를 진행한다. 시간은 오후 6시이다. (파트는 다름)또한, 개강 이후에 전체 스터디는 오프라인으로 진행하고 있다.이후 시간은 바뀔 수 있다. (지금 오후 6시임)3. 어떤 내용을 공부했는가 자바스크립트 심화 버전에 대한 공부를 진행하였다.(물론 이 전 내용도 포함되지만, 일단 주간에 대한 것만 올리겠다. 그 동안 배운 것은 티스토리에 전부 기록을 해두었다.)다만 내용이 좀 심화.. 2024. 9. 11.
VITE / React / VUE / NEXT 프레임워크를 이용한 포트폴리오 사이트 만들기 <프로젝트> VITE / React / VUE / NEXT 프레임워크/라이브러리를 이용한 포트폴리오 사이트 만들기https://www.youtube.com/playlist?list=PL4UVBBIc6giLabEb4ygOmKDWCnsSKq2uP 포트폴리오 사이트 만들기 2023안녕하세요! 웹스토리보이입니다. 이 강의는 Vite, React, Vue, 그리고 Next.js를 사용하여 멋진 포트폴리오 사이트를 만드는 방법을 소개합니다. 다양한 프레임워크를 활용하여 프론트엔드 개발자로www.youtube.com관련 영상이다. (이런 게 있었다니.. 역시 유튜브와 구글의 세계는 엄청 큰 거 같다.)나의 경우 가장 많이 쓰이는 리액트를 배웠기 때문에, 일단은 리액트로 진행할 거 같다.다만, 다른 라이브러리를 배운 분들도 참고가.. 2024. 9. 10.
배달의 민족 폰트 css 적용법 (배달의 민족뿐 아니라 다른 폰트들도 이런 식으로 적용해 주면 됩니다. 원리는 똑같음)https://youtu.be/wWa-iDiZG44?si=ezGRiPHJanN3wUb8(영상 참고)> 핵심은 "배달의 민족 폰트"를 검색하고, 이후 사이트에 가서 TTF를 다운(윈도우 용이라고 생각하면 편함.) - (맥이면 OTF를 다운로드하면 됨)이후 얻은 파일을 적용하고 싶은 파일로 이동시켜주면 됨.(나의 경우, 아예 외부 폴더로 "font"를 만들고 거기에 넣어 두었다. 이러면 관리가 굉장히 쉽고, 추가하기도 좋다.)보면 비주얼 스튜디오 코드라는 "메인 폴더" 밑에 font라는 폴더를 만들었다. 그리고 다운로드를 받은 BMJUA_ttf.ttf을 font 폴더 안에 넣어주었다.이후 @font-face 구문을 사용해 .. 2024. 9. 9.
5. [Proxy Trap 1~4챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. set() 트랩-1: set(), set() 트랩 호출, set() 트랩 준수사항 세트(Set)는 자바스크립트에서 고유한 값들의 집합을 다루는 자료구조이다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있다.세트(set)는 한마디로 순서가 없는 중복되지 않은 데이터의 집합이다. 배열(array)과 차이점을 이해하는 것이 무엇보다 중요하다.배열은 데이터를 순서 있게 저장한다. 그래서 인덱스(index)를 통해서 특정 위치에 저장되어 있는 데이터에 접근이 가능하다. 그리고 배열에는 동일한 값을 여러 번 저장할 수 있다. 값이 동일하더라도 인덱스가 틀리기 때문에 데이터의 중복이 문제 되지 않는다.반면에 세트는 얼핏 보기에는 배열과 비슷해보일 수 있지만 사실 결이 아주 다른 자.. 2024. 9. 8.
22. 덱(10866) ,단어 뒤집기2(17413) 문제.정수를 저장하는 덱(Deque)를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.명령은 총 여덟 가지이다.push_front X: 정수 X를 덱의 앞에 넣는다.push_back X: 정수 X를 덱의 뒤에 넣는다.pop_front: 덱의 가장 앞에 있는 수를 빼고, 그 수를 출력한다. 만약, 덱에 들어있는 정수가 없는 경우에는 -1을 출력한다.pop_back: 덱의 가장 뒤에 있는 수를 빼고, 그 수를 출력한다. 만약, 덱에 들어있는 정수가 없는 경우에는 -1을 출력한다.size: 덱에 들어있는 정수의 개수를 출력한다.empty: 덱이 비어있으면 1을, 아니면 0을 출력한다.front: 덱의 가장 앞에 있는 정수를 출력한다. 만약 덱에 들어있는 정수가 없는 경우에는 -1을 출력.. 2024. 9. 8.
4. [Proxy 1~4챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. 기본 오퍼레이션: Proxy란, 기본 오퍼레이션 논리이번에는 proxy를 배워보았다. (오퍼레이션은 연산자를 뜻함.) Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다.let proxy = new Proxy(target, handler)target – 감싸게 될 객체로, 함수를 포함한 모든 객체가 가능하다.handler – 동작을 가로채는 메서드인 '트랩(trap)'이 담긴 객체로, 여기서 프락시를 설정한다.(예시: get 트랩은 target의 프로퍼티를 읽을 때, set 트랩은 target의 프로퍼티를 쓸 때 활성화됨).2. Proxy 논리.. 2024. 9. 7.