quddkflty의 등록된 링크
quddkflty로 등록된 티스토리 포스트 수는 68건입니다.
SOLID : 객체지향 설계 5가지 원칙 [내부링크]
SOLID는 객체지향 프로그래밍에서 소프트웨어 설계를 더 견고하고 유지보수가 쉬운 방향으로 이끄는 다섯 가지 기본 원칙의 약어로, 소프트웨어가 변경될 때 코드를 쉽게 수정하고 확장할 수 있도록 돕는데 중점을 두고 있는 개념이다. S - 단일 책임 원칙 (Single Responsibility Principle) : 하나의 클래스는 오직 하나의 책임만을 가져야한다. 이를 통해 클래스가 변경되어야할 때 하나의 클래스만 바꾸면 된다는 것이다. 아래 코드와 같이 각 클래스는 하나의 책임만을 수행하게 되어 단일 책임 원칙을 지켜주어야 한다. class Order { private double totalPrice; // 주문 총 가격을 계산하는 책임 public double calculateTotalPrice() ..
프론트엔드 개발 면접 후기 & 회고 [내부링크]
면접 끝난지 30분 가량 지났는데, 면접에서 느꼈던 점에 대해 더 자세히 쓰기 위해 편하게 쓰겠습니다. 부족한 포트폴리오 구성 내가 한 프로젝트와 활동에 대해 노션을 통해 포토폴리오를 제작하였는데, 내가 사용한 프레임워크나 라이브러리, 프로그래밍 언어에 대해 자세히 작성하지 못하였던 거 같다. 단순하게 "00기능 구현"이런식으로 다루다보니, 활동에 대해 설명 없이 보는 면접자, 관계자 입장에서는 부족할 수 있다는 생각이 들었던 거 같다. 또한 활동에 대해 느끼고 성장한 부분에 대해 적었는데 어떤 활동에서 구체적으로 어떻게 행동하였고 결과는 어땠는지에 대해 보기 쉽게 표현할 수 있을지 고민해야겠다는 생각이 들었다. 더보기 K : 포토폴리오에 내가 활동과 프로젝트에 대해 배운점과 성장한 점 작성 P : 면접..
error: { message: 'You exceeded your current quota, please check your plan and billing details.', type: 'insufficient_quota', param: null, code: 'insufficient_quota' }, [내부링크]
Openai를 다루고 있는데 위에와 같은 에러가 달 당황하게 했다.. ou exceeded your current quota, please check your plan and billing details "아니 난 이제 처음 쓰는데..?" 라는 의문이 들 수 있겠지만 해결방법에 대해 적어보려고 합니다! 1. Open ai 페이지로 들어가기 저는 활용도를 볼 수 있는 Usage 페이지로 바로 이동하였습니다. https://platform.openai.com/usage OpenAI Platform Explore developer resources, tutorials, API docs, and dynamic examples to get the most out of OpenAI's platform. platfo..
React 파일 구조 설정 [내부링크]
React 파일 구조에 대해 써보겠습니다! + src 프로젝트의 주요 소스 코드가 위치하는 디렉터리입니다. 아래는 src 디렉터리 내의 각 하위 디렉터리 및 파일에 대한 설명입니다. - API 외부 API와 관련된 파일이 위치하는 디렉터리입니다. 프로젝트에서 사용하는 외부 서비스와의 통합을 위한 코드가 이곳에 위치할 수 있습니다. - Assets 프로젝트에서 사용하는 이미지 및 기타 자원 파일들이 저장되는 디렉터리입니다. 웹 페이지나 앱에서 사용되는 정적 자원들이 여기에 위치합니다. - Components 프로젝트의 주요 컴포넌트들이 위치하는 디렉터리입니다. Components 디렉터리 내부에는 Web 및 App 디렉터리가 있습니다. - Page 각 페이지에 해당하는 컴포넌트들이 위치하는 디렉터리입니다...
[Flutter] Factory constructors [내부링크]
Factory constructors 란? Dart는 하위 유형 또는 null을 반환할 수 있는 Factory constructors 를 지원하는데, 새로운 인스턴스를 생성하지 않는 생성자를 구현할 때 factory 키워드를 사용한다. 어떻게 생성할까? 예제 코드를 보며 확인해보자 class IntegerHolder { IntegerHolder( ); factory IntegerHolder.fromList(List list) { if (list.length == 1) { return IntegerSingle(list[0]); } else if (list.length == 2) { return IntegerDouble(list[0], list[1]); } else if (list.length == 3) {..
React Naver Map api 활용하기 [내부링크]
요즘 개인 프로젝트로 인해 다양한 지도 api를 사용하고 있는데 그 중에서 Naver 지도에 대해 설명해보고자 한다. 1. 모든 API를 사용하는 것이 그렇듯 API key를 발급 받는다. 발급 방법에 대해서는 아래 링크를 통해 확인할 수 있다. https://console.ncloud.com/dashboard 2. 발급 받은 key를 Public 파일 안에 있는 index.html에 head 부분에 아래 코드를 발급 받은 client id와 함께 넣어준다. 3. 아래 코드를 참고하여 map을 만들어보면 된다. 해당 지도는 기본 기능의 Web Dynamic Map 의 형태이며, 기능에 대해 주석을 달아놓았습니다. import { Container as MapDiv, NaverMap, useNavermap..
react custom 달력 axios 연동 [내부링크]
달력을 만들고 axsio에 연동하는 내용을 담고 있습니다. 2023.07.06 - [코딩/React] - [React] date-fns와 style-components로 커스텀하기 쉬운 달력 만들기(1편) [React] date-fns와 style-components로 커스텀하기 쉬운 달력 만들기(1편) 올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 da quddkflty.tistory.com 2023.07.06 - [코딩/React] - [React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기(2편) [React] date-fns와 St..
React Google Map으로 지역간 거리 및 이동 시간 계산하기 [내부링크]
1. 구글 맵 API key 받아오기 모든 api가 거의 그러하듯 인증키를 받아와야한다. 아래 링크에 접속하여 API key를 발급받으면 된다. https://console.cloud.google.com/google/maps-apis/start?utm_source=Docs_GS_Button&ref=https:%2F%2Fdevelopers.google.com%2Fmaps%2F&hl=ko Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 2. React에 입력창 제작하기 저는 간단한 기능 테스트용이라 2지역간의 좌표를 받아오는 입력창을 제작하였습니다. 더보기 import React, { useState } from "react"; import axi..
React AWS S3 업데이트 및 삭제 기능 (CRUD) [내부링크]
S3 파일 업로드에 대해 궁금하시다면 아래 포스트를 찾아주세요. 2023.10.26 - [코딩/React] - React AWS S3 파일 업로드 및 연동 React AWS S3 파일 업로드 및 연동 Amazon S3 (Amazon Simple Storage Service)란 Amazon Web Services (AWS)의 클라우드 기반 스토리지 서비스로, 사진, 영상과 같은 데이터를 저장하고, 해당 데이터에 대해 url로 제공해주어 프론트엔드에서 사용할 quddkflty.tistory.com S3 삭제 기능 S3에서 원하는 파일에 대해 삭제해야할 경우 아래와 같은 코드를 쓸 수 있다. 파일의 위치를 알 수 있는 Key를 파라미터로 받아 관리한다. const deleteS3File = async (fil..
React AWS S3 파일 업로드 및 연동 [내부링크]
Amazon S3 (Amazon Simple Storage Service)란 Amazon Web Services (AWS)의 클라우드 기반 스토리지 서비스로, 사진, 영상과 같은 데이터를 저장하고, 해당 데이터에 대해 url로 제공해주어 프론트엔드에서 사용할 수 있도록 해준다. Amazon S3 (Amazon Simple Storage Service) 구성 요소 버킷 (Bucket): Amazon S3에서 데이터를 저장하는 논리적인 컨테이너로 모든 객체(파일)는 버킷에 저장된다. 전역적으로 고유한 이름을 가져야 하며, 이름은 모든 AWS 고객 간에 고유해야 한다. 그렇게 .env를 통해 보안요소로 관리된다. 객체 (Object): Amazon S3에 저장되는 데이터 항목을 객체라고 하며, 객체는 파일, ..
Java 랜덤 함수 사용하기 (RandomNumberGenerator) [내부링크]
java에서 무작위 숫자를 생성하려면 java.util.Random 클래스를 사용할 수 있다. 1. 먼저 렌덤 클래스를 임폴트 한다. import java.util.Random; 2. Random 객체를 사용하여 난수를 생성할 수 있는데 아래 코드와 같은 함수를 사용할 수 있다. import java.util.Random; // Random 클래스를 import하고 객체를 생성한다. public class RandomNumberGenerator { public static void main(String[] args) { Random random = new Random(); } } int randomNumber = random.nextInt(); // 정수 범위 내의 난수를 생성할 수 있다. //특정 범위..
이산수학 재귀알고리즘 함수 모음 [내부링크]
팩토리얼 (Factorial): n 팩토리얼은 n부터 1까지의 모든 양의 정수를 곱한 값을 의미합니다. factorial(n)은 n! 값을 계산하는 함수이다. ex) 5! = 5 * 4 * 3 * 2 * 1 피보나치 수열 (Fibonacci Sequence): 피보나치 수열은 이전 두 숫자의 합이 다음 숫자를 생성하는 수열이다. fibonacci(n)은 피보나치 수열의 n번째 항을 계산하는 함수이다. ex) 0, 1, 1, 2, 3, 5, 8, 13, ... 거듭제곱 (Exponentiation): 거듭제곱 연산은 어떤 수를 특정 지수만큼 곱하는 연산이다. power(base, exponent)는 base를 exponent만큼 거듭제곱한 값을 계산하는 함수이다. 합계 (Summation): 1부터 n까지..
java의변수 유형 및 활용: 인스턴스, 클래스, 로컬, 매개변수 변수 [내부링크]
instance Variables(인스턴스 변수): 클래스에 정의된 변수로, 객체(인스턴스)가 생성될 때마다 고유한 메모리 공간을 할당받는다. 이러한 변수들은 해당 클래스의 모든 인스턴스에서 공유되지 않으며, 각 객체마다 서로 다른 값을 가질 수 있다. 예를 들어, 'Person' 클래스의 'name'과 'age' 필드가 인스턴스 변수다. Class Variables(클래스 변수): 클래스에 정의된 변수로, 클래스가 로드될 때 메모리를 할당받는다. 클래스 변수는 해당 클래스의 모든 인스턴스에서 공유된다. 이러한 변수들은 객체 간에 데이터를 공유하거나, 클래스 수준에서 상태를 유지하는 데 사용된다. 예를 들어, 'Person' 클래스의 'totalCount' 상수가 클래스 변수다. Local Variabl..
Java Method Signature: 개념, 구성 요소, 그리고 활용 방법 [내부링크]
method signature의 개념 method signature(메서드 시그니처)는 메서드를 고유하게 식별하는 데 사용되는 정보의 조합이다. method signature(메서드 시그니처)에는 다음과 같은 정보가 포함하여 식별하게 된다. 메서드 이름: 메서드의 실제 이름을 말한다. 매개변수 목록: 메서드가 받는 매개변수의 수, 유형 및 순서가 메서드 시그니처에 포함된다. 이 매개변수 목록은 메서드 호출 시 전달하는 인수와 일치해야 합니다. 만약 같은 경우 return 값이 달라도 컴파일 에러가 뜨게 된다. method signature 사용 방법 void printHello(String message); void printHello(String message, int num); 이렇듯 메서드 시그니처..
[JAVA] 객체, 클래스 및 인스턴스의 개념과 차이점 [내부링크]
클래스(Class): 클래스는 객체를 생성하기 위한 템플릿 또는 설계도이다. 클래스는 객체의 속성과 메서드를 정의하는데 사용되는데, 예를 들어, "자동차" 클래스는 자동차 객체를 만들기 위한 템플릿으로, 자동차의 속성(색상, 속도 등)과 메서드(가속, 정지 등)를 정의할 수 있다. public class Car { String color; int speed; public void Move() { // 가속 로직 코드 ~ } } 객체(Object): 객체는 클래스를 기반으로 생성된 실체로, 클래스는 객체를 생성하기 위한 틀을 제공하고, 객체는 이 틀에 따라 실제 데이터와 동작을 가지게 된다. 예를 들어, "레드 자동차"는 "자동차" 클래스로부터 생성된 객체로, 빨간색의 자동차이며 특정 속도로 가속할 수 있..
[JAVA]클래스 다이어그램에서 클래스 멤버 또는 속성의 접근 제한자 표기법 [내부링크]
클래스 다이어그램에서 클래스 멤버 또는 속성의 접근 제한자 표기법은 일반적으로 UML(Unified Modeling Language)을 따르고 있으며, 클래스 다이어그램에서 클래스 멤버와 속성을 시각적으로 표현하여 클래스의 구조와 동작을 더 잘 이해할 수 있도록 도와준다. + (public): + 기호는 멤버 또는 속성이 외부에서 공개되어 어떤 클래스에서든 접근할 수 있음을 나타낸다. 즉, public 멤버는 어디에서나 접근 가능하다. - (private): - 기호는 멤버 또는 속성이 클래스 내부에서만 접근 가능하고 외부에서 직접 접근할 수 없음을 나타낸다. 비공개 멤버는 클래스 내부에서만 사용된다. # (protected): # 기호는 멤버 또는 속성이 클래스 내부와 하위 클래스에서만 접근 가능하고 ..
[JAVA] overloading과 overriding의 개념과 차이 [내부링크]
Overloading (오버로딩): 오버로딩은 같은 메서드 이름을 가지고 매개변수의 형식 또는 개수를 다르게 정의하는 것을 의미한다. 같은 클래스 내에서 여러 메서드가 동일한 이름을 가질 수 있으며, 메서드 호출 시 전달되는 매개변수의 형식 또는 개수에 따라 호출될 메서드가 결정된다. 반환 유형은 오버로딩에 영향을 미치지 않습니다. 오버로딩은 다형성(polymorphism)을 향상시키고 코드의 가독성을 개선하며, 같은 이름의 메서드를 다양한 상황에 맞게 사용할 수 있게 한다. public class Calculator { // 메서드 add(int a, int b)는 두 정수를 받아 정수 합을 반환 public int add(int a, int b) { return a + b; } // 메서드 add(d..
Java Constructor(생성자)의 개념, 특징, 및 사용 방법 [내부링크]
Constructor(생성자)란? Java 클래스의 특별한 종류의 메서드로, 객체를 초기화하고 생성할 때 호출되는 함수다. 생성자는 클래스의 인스턴스(객체)를 생성할 때 필요한 초기화작업을수행한다. Constructor(생성자)의 특징 메서드명과 클래스명 동일: 생성자의 이름은 생성자를 식별하기 위해 항상 클래스의 이름과 동일하다. 매개변수를 가질 수 있음: 생성자는 필요에 따라 매개변수를 가질 수 있으며, 이러한 매개변수를 통해 객체의 초기 상태를 설정한다. 기본 생성자: 클래스가 어떠한 생성자도 정의하지 않으면 기본 생성자가 자동으로 생성된다. 기본 생성자는 매개변수를 가지지 않으며, 객체를 기본 상태로 초기화한다. 생성자 오버로딩: 클래스는 여러 개의 생성자를 가질 수 있고, 이들은 서로 다른 매개..
"Java에서 '=='와 'equals' 메소드 비교의 차이" [내부링크]
교수님이 저번 수업 시간 중 물어보셨다. a == b와 a.equals(b)의 차이에 대해. 하여 기말고사를 준비할겸 적어본다. "a == b " "==" 연산자는 두 변수가 동일한 메모리 위치를 참조하는지 확인한다. 그렇기에 a와 b가 같은 String 객체를 가리키는 경우에만 true를 반환하는 것이다. 그렇기 때문에 메모리 위치가 다르면 내용이 같아도 false를 반환할 수 있다. "a.equals(b) " "a.equals(b)" .equals() 메서드는 두 String 객체의 내용이 동일한지 비교한다. 그렇기에 문자열 내용이 동일한 경우, .equals()는 true 를 반환합니다. 문자열의 내용을 비교하므로 객체의 메모리 위치가 다르더라도 내용이 같으면 true 를 반환할 수 있다.
[JAVA] 비정적(non-static) 멤버 변수와 정적(static) 멤버 변수의 차이와 RAM(메모리) 배치 [내부링크]
자바를 공부하던 도중 비정적(non-static) 변수와 정적(static) 변수에 대해 RAM에 각각 어떻게 배치되는지에 대한 기록을 적어보도록 하겠다. 비정적(non-static) 멤버 변수 (인스턴스 변수): 비정적(non-static) 멤버 변수는 클래스의 각 인스턴스(객체)마다 별도의 메모리 공간에 저장된다. 각 객체(인스턴스)는 해당 변수의 값을 독립적으로 가질 수 있습니다. 인스턴스 변수는 객체가 생성될 때 초기화되며, 객체의 생명주기 동안 유지됩니다. 더보기 개별 메모리 공간: 비정적 멤버 변수는 클래스의 각 인스턴스(객체)마다 별도의 메모리 공간에 저장된다. 이것은 객체마다 독립적인 변수 값을 가질 수 있음을 의미하는데, 예를 들어, 여러 대의 자동차 객체가 있을 때, 각 자동차 객체는 ..
Discuss how Java program is executed on a computer. (자바가 컴퓨터에서 실행되는 과정) [내부링크]
+-----------------------------------------------------+ | Java Source Code | +-----------------------------------------------------+ ↓ +-----------------------------------------------------+ | Java 컴파일러 (javac) | +-----------------------------------------------------+ ↓ +-----------------------------------------------------+ | 바이트코드 (.class 파일) | +------------------------------------------------..
[JAVA] this의 역할 [내부링크]
Java에서 this는 현재 객체를 가리키는 참조로 사용된다. 아래와 같은 역할로 주로 쓰인다고 한다. 변수 및 메서드 호출: 현재 객체 내에서 변수와 메서드를 호출할 때 사용된다. EX) this.variableName은 현재 객체의 인스턴스 변수를 참조하고, this.methodName()은 현재 객체 내의 메서드를 호출합니다. 생성자 호출: 생성자 내에서 다른 생성자를 호출할 때 사용되는데, 생성자에서 this()를 사용하여 같은 클래스의 다른 생성자를 호출할 수 있으며, 이를 통해 중복되는 초기화 코드를 피할 수 있다. 메서드 오버로딩 구분: 여러 메서드가 동일한 이름을 가질 때, this를 사용하여 현재 객체를 구분하는 데 도움을 준다. 이를 통해 메서드 오버로딩을 구분할 수 있다. 인스턴스 변..
[JAVA] protected와 private static의 차이 & 개념 [내부링크]
protected (보호된): 이것은 일종의 "패스워드"와 같다. 패스워드가 가장 중요한 것을 보호하는 역할을 한다면, protected도 클래스 안에서 중요한 정보를 보호한다. 클래스 안에서만 사용하거나 상속받은 다른 클래스에서만 사용할 수 있다. 패스워드를 알지 못하면 중요한 정보에 접근할 수 없듯이, 다른 클래스가 protected로 보호된 정보에 접근할 수 없다. private static (개인적이고 고정된): 이건 비밀 상자에 무언가를 넣어두는 것과 비슷하다. 그 비밀 상자에는 키가 없고, 누구나 열 수 없는듯 말이다. 클래스 안에서만 사용하며, 클래스 외부에서는 사용하지 못해요. 다른 클래스나 상속 관계에서도 열 수 없다. 이것을 사용하면 중요한 정보를 외부로부터 완전히 숨길 수 있다. 간단..
[React] Open api clientId 값 알아내기 (공공 데이터 포털) [내부링크]
무장애 관광 api를 가져오던 중 api 값을 불러오기 위해 clientId 값이 필요하였는데 도저히 찾을 수가 없어 관광 데이터 관리자분께 문의를 드려보았다. 답변이 10분만에 와 놀랐고, 꼼꼼하게 보지 않는 나의 무지에 놀랐다.. 위에 사진과 같이 답이 왔는데 보통 맨위에 조회라는 데이터를 통해 쉽게 확인할 수 있고, Response body를 확인해보자!
[React] 공공데이터 포털 Open API 사용하기 [내부링크]
Axios로 Spring과 연동 연습을 한 후 새로운 api 사용 방법에 대해 공부해 보았다. 2023.07.18 - [코딩/React] - [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip Axios란? Axios는 JavaScript에서 HTTP 요청을 보내는 데 가장 많이 사용되는 라이브러리이다. 주로 웹 애플리케이션과 API를 통신하는 데 사용되는데, Axios는 HTTP 요청을 보내고 해당 작업이 완료되면 Pro quddkflty.tistory.com 이번 글에서는 공공데이터 포털에 있는 국가 Open Api를 사용하는 방법을 적어보고자 한다. 1. 원하는 공공 API 검색 공공데이터 포털에 회원 가입을 한 후..
[이산수학] 강 귀납법 (Strong Induction) [내부링크]
1. 강 귀납법? 이산수학에서 "강 귀납법"은 귀납법(Induction)의 한 형태로, 수학적인 증명에 사용되는 중요한 방법 중 하나이다. 귀납법은 주로 어떤 명제나 성질이 모든 자연수 또는 양의 정수에 대해 참임을 증명하기 위해 사용된다. 2. 귀나법과의 차이 기본 단계는 귀납법의 가본 단계와 같지만 일반 귀납법과 달리, 명제가 자연수 1부터 k까지 모든 자연수에 대해 참이라고 가정하고, 이를 기반으로 k+1에 대해 명제가 참임을 증명한다. 즉, 일반 귀납법에서는 k에 대한 가정이 하나였다면, 강 귀납법에서는 모든 1부터 k까지의 자연수에 대한 가정이 포함되는 것이다. 3. 강 귀나법의 예시 p(n)은 'n은 소수들의 곱으로 나타낼 수 있다" 라는 명제를 다루어보자. 초기 단계 (Base Case): ..
[React] 백엔드와 협업, Axios 에러 메세지 모음 [내부링크]
2xx (성공) 200 OK: 요청이 성공적으로 처리되었습니다. 201 Created: 요청으로 새 리소스가 생성되었습니다. 204 No Content: 요청은 성공적으로 처리되었지만 응답에 본문이 없습니다. 4xx (클라이언트 오류) 400 Bad Request: 요청이 잘못되었습니다. 클라이언트 요청에 오류가 있을 때 사용됩니다. 401 Unauthorized: 인증이 필요합니다. 403 Forbidden: 리소스에 접근 권한이 없습니다. 404 Not Found: 요청한 리소스를 찾을 수 없습니다. 405 Method Not Allowed: 요청된 HTTP 메소드가 허용되지 않습니다. 422 Unprocessable Entity: 입력 데이터가 유효하지 않거나 처리할 수 없습니다. 5xx (서버 오..
[이산수학] 조건문을 포함한 논리적 동치 [내부링크]
조건문을 포함한 논리적 동치는 논리식 간의 논리적 등가성을 나타내는 것으로, 두 논리식이 동일한 진리값을 가짐을 의미한다. 아래는 꼭 외우면 좋은 공식들이다. p → q = ¬p ∨ q p → q = ¬q → ¬p p ∨ q = ¬p → q p ^ q = ¬(p → ¬q) ¬(p → q) = p ^ ¬q (p → q) ∧ (q → r) = (p → r) = (¬p ∨ q) ∧ (¬q ∨ r) = (¬p ∨ ¬q) ∨ r p → p = 1 = p' ∨ p (p → q) ∧ (p → r) = p →(q ^ r) (p → q) ∨ (p → r) = p →(q ∨ r)
[이산수학] 논리적 동치 [내부링크]
1. 논리적 동치란? 논리적 동치란 두 개의 논리식이 논리적으로 동일하다는 의미이다. 우리는 논리적 동치를 활용하여 다양한 논리 규칙들을 증명할 수 있다. 예를 들어 p,q에 대하여 p↔q가 항진명제라면 p와q는 논리적 동치이다. 2. 드모르간 법칙 논리학과 불대수(Boole algebra)에서 사용되는 중요한 법칙 중 하나로, 이 법칙을 통해 논리식을 단순화하거나 변환하는 데 사용할 수 있다. 첫 번째 드모르간 법칙 (De Morgan's First Law) ¬(A ∧ B) = ¬A ∨ ¬B 즉, 두 개의 조건 A와 B가 모두 거짓이 아닌 경우, 그 논리 부정(Not)은 A의 부정 또는 B의 부정과 동일하다. 두 번째 드모르간 법칙 (De Morgan's Second Law): ¬(A ∨ B) = ¬A..
[이산수학] 다양한 조건문 표현 모음 (if~, then~) [내부링크]
수학적 추론에서 매우 중요한 역할을 하는 조건문 표현들에 대해 정리해보았다. "If P, then Q" (P가 참이면 Q가 참이다.) "If P is true, then Q is true" (P가 참이면 Q도 참이다.) "P implies Q" (P는 Q를 함축한다.) "P is a sufficient condition for Q" (P는 Q의 충분 조건이다.) "P only if Q" (P가 참이면 Q도 참이어야 한다.) "P is a necessary condition for Q" (P는 Q의 필요 조건이다.) "P leads to Q" (P는 Q로 이끈다.) "P entails Q" (P는 Q를 포함한다.) "P is a prerequisite for Q" (P는 Q의 선행 조건이다.) "P res..
[이산수학] 명제와 논리의 기초 (Logic and Proofs) [내부링크]
1. 명제 논리의 기본적인 구성 요소로,참 또는 거짓 둘 중 하나로 나타내는 선언적 문장(즉, 어떤 사실을 선언하는 문장)이다. 아래 예시 문장을 보면 문장이 사실이 아니더라도 참 또는 거짓으로 구별할 수 있어야 명제가 될 수 있다. 대한민국의 수도는 서울이다. 1 + 2 = 4 1 + 1 = 2 아래 예시 문장은 명제가 아닌데 이유는 참 또는 거짓으로 판정할 수 없고, 변수가 있을 경우 값이 배정되어야만 참 또는 거짓을 구분할 수 있기 때문이다. 어디가십니까? x + 2 = 4 x + y = 100 2. 명제 산술 (명제 논리) 명제를 다루는 논리를 명제 산술 또는 명제 논리라고 부르는데, 이산 수학에서는 해당 논리를 통해 새로운 명제(복합명제)를 만들기도 하며 여러가지 증명을 할 수도 있다. 만약 P..
[React] console, warning, error 메세지 제거 [내부링크]
개발을 하다보면 어쩔 수 없이 개발자도구 안에 콘솔에 warning과 console.log 메세지가 수도 없이 많을 수 있다. 배포 하기 전에 한 번쯤은 신경써야할 내용에 대해 써보겠습니다! 방법은 매우 간단하다 ㅋㅋ,,, App.js 에 아래와 같은 코드를 추가하면 된다..! 원리는 모든 console 메세지에 대해 빈 함수로 대체하여 재정의 하는 것이다. if (1+1 === 2) { window.console = { log: function () {}, warn: function () {}, error: function () {}, }; }
Git 터미널 명령어 모음 및 사용 방법 [내부링크]
변경 내용 확인: 프로젝트에서 변경된 파일 목록을 확인하고, 스테이징 할 준비를 한다. 개발자라면 한 번쯤은 사용해봤을 Git에 대해 명령어에 대해 정리해보겠다. Git 이란? Git은 버전 관리 시스템(Version Control System, VCS)으로, 소프트웨어 개발 프로젝트에서 코드와 파일의 변경 사항을 추적하고 관리하는 데 사용되고 있으며, 대부분의 현대적인 소프트웨어 개발 프로젝트에서 널리 사용되고 있다. 아래 그래프와 같이 사용량은 꾸준히 늘고 있으며 현재는 대부분의 오픈소스와 개발자들의 프로필이 등재되어 있다. Git의 장점 동시에 작업하는 병렬 개발 가능 : GIT은 브랜치를 통해 개발자들이 독립적으로 작업할 수 있도록 도와주며, 원격 저장소를 제공하여 ****동시에 같은 파일이 수정..
[React] filter 함수를 활용한 검색 기능 (feat Axios) [내부링크]
개발을 하다보니 검색 기능은 대부분 서비스에 있다는 것을 알게 되었다.. 하여 이참에 url에 대해 검색 기능을 고려하는 것은 아니지만 map()함수를 통해 나열하고 있는 data에 대해 검색으로 거르는 내용을 담아보자 1. Axios를 통해 데이터 불러오기 백엔드 또는 API url을 get() 함수를 통해 받아온다. useEffect(() => { // Axios를 사용하여 데이터를 불러옴 axios.get('https://api.example.com/data') .then((response) => { setData(response.data); // 데이터를 상태에 저장 }) .catch((error) => { console.error('데이터를 불러오는 동안 오류 발생: ', error); }); ..
PARD - 서핑데이 후기 [내부링크]
파드 행사에는 크게 3가지 중요 행사가 있는데요. 그 중에 첫 행사인 서핑데이에 다시 한 번 다녀오게 되었습니다. 이미 한 번 해보기도 했고, 운영진팀의 준비로 편하게 다녀올 수 있었던 것 같았습니다. 서핑 데이의 목적은 파드 구성원들의 친밀감을 높이고 심리적 안정감을 주어 앞으로의 활동에 있어 협업에 더욱 몰입할 수 있는데 있습니다. 다행히 2기 파디분들이 잘 어울려주시고, 적극적이셔서 비록 프로젝트 마감 이슈로 많이 함께하지는 못하였지만 뒤에서 지켜보면서 흐뭇하게 앞으로의 파드 2기 행보를 기대할 수 있었습니다 :) 한가지 우려되는 점이 있다면 이렇게 서핑데이에서 친해진 사람들끼리만 더 친해지고 비교적 덜 친해진 다른 사람과는 소통이 줄어드는 경향이 있는데 운영진분들도 더 많은 소통과 교류를 장려 하..
파드 2기 시작 [내부링크]
안녕하세요! IT 연합 동아리 PARD에서 개발 파트장을 맡고 있는 박정규라고 합니다. 벌써 2기 모집이 끝나고 OT가 지나갔는데요. 너무 반갑과 설레는 마음과 함께 저에 대한 간단한 소개와 함께 인사를 드리고자 해요 ㅎㅎ 박정규? 네, 제 이름은 박정규라고 합니다. 나이는 01년생이고요. 현재 2학년 컴퓨터 공학을 재학중입니다! 취미는 축구랑 공부이고요. mbti는 ENNTTTTJJJ 입니다. 낯을 가리지만 PARD 안에서는 안 가릴 예정이라 다들 편하게, 빠르게 친해지면 좋겠어요 ㅎㅎ 개발 파트장? 저의 역할은 PARD 안에서 3개의 개발 파트에 대한 전반적인 내용을 확인하고 각 파트의 파트장, 부파트장님들을 도와주는 역할을 하고 있습니다. 여러분들에게 더욱 더 좋은 프로그램과 프로젝트, 세미나 진행..
Spring 공부하기 전 알아야하는 JAVA 기초 개념 (6탄) - 스레드(Thread) [내부링크]
코딩에 대해 아예 처음 입문하시는 분들이라면 아래 링크의 1탄부터 보고 오시는 걸 추천드립니다. 2023.08.06 - [코딩/JAVA] - Spring 공부하기 전 알아야하는 JAVA 기초 개념 (1탄) Spring 공부하기 전 알아야하는 JAVA 기초 개념 (1탄) 처음 1탄은 완전 JAVA의 기초를 다루기에 다른 언어를 학습해보셨던 분들은 2탄부터 보시는 걸 추천드립니다 :) 변수와 데이터 타입 변수는 데이터를 저장하는 메모리 공간을 가리키며, 데이터 타 quddkflty.tistory.com 스레드에 정의된 주요 메서드 start(): 새로운 스레드를 생성하고 run() 메서드를 실행시킨다. run(): 스레드가 실행할 작업을 정의하는 메서드로, start() 메서드에 의해 호출된다. sleep(..
Spring 공부하기 전 알아야하는 JAVA 기초 개념 (5탄) - 배열과 컬렉션 & 인터페이스와 추상 클래스 [내부링크]
코딩에 대해 아예 처음 입문하시는 분들이라면 아래 링크의 1탄부터 보고 오시는 걸 추천드립니다. 2023.08.06 - [코딩/JAVA] - Spring 공부하기 전 알아야하는 JAVA 기초 개념 (1탄) Spring 공부하기 전 알아야하는 JAVA 기초 개념 (1탄) 처음 1탄은 완전 JAVA의 기초를 다루기에 다른 언어를 학습해보셨던 분들은 2탄부터 보시는 걸 추천드립니다 :) 변수와 데이터 타입 변수는 데이터를 저장하는 메모리 공간을 가리키며, 데이터 타 quddkflty.tistory.com 배열의 선언과 사용 public class ArrayExample { public static void main(String[] args) { // 배열 선언과 초기화 int[] numbers = new in..
Spring 공부하기 전 알아야하는 JAVA 기초 개념 (4탄) - 예외 처리 (Exception Handling) [내부링크]
예외 처리는 프로그램이 예기치 않은 상황에서 발생한 오류를 대비하여 처리하는 메커니즘으로, 예외 상황을 고려하여 코드를 작성한다. try-catch-finally 블록을 사용한 예외 처리 class ExceptionExample { void divide(int a, int b) { try { // try 블록 안에서 예외가 발생할 수 있는 코드 작성 int result = a / b; // 0으로 나눌 때 예외 발생 가능성 System.out.println("Result: " + result); // 예외 발생하지 않으면 결과 출력 } catch (ArithmeticException e) { // catch 블록에서 예외 처리 System.out.println("Error: " + e.getMessage..
Spring 공부하기 전 알아야하는 JAVA 기초 개념 (3탄) - 메서드와 메서드 호출 [내부링크]
코딩에 대해 아예 처음 입문하시는 분들이라면 아래 링크의 1탄부터 보고 오시는 걸 추천드립니다. 2023.08.06 - [코딩/JAVA] - Spring 공부하기 전 알아야하는 JAVA 기초 개념 (1탄) Spring 공부하기 전 알아야하는 JAVA 기초 개념 (1탄) 처음 1탄은 완전 JAVA의 기초를 다루기에 다른 언어를 학습해보셨던 분들은 2탄부터 보시는 걸 추천드립니다 :) 변수와 데이터 타입 변수는 데이터를 저장하는 메모리 공간을 가리키며, 데이터 타 quddkflty.tistory.com 메서드와 클래스 차이가 궁금하다면? 2023.08.06 - [코딩/JAVA] - 메어드와 클래스의 차이? 메어드와 클래스의 차이? 메서드(Method)와 클래스(Class)는 객체 지향 프로그래밍(OOP)에서..
메서드와 클래스의 차이? [내부링크]
메서드(Method)와 클래스(Class)는 객체 지향 프로그래밍(OOP)에서 서로 다른 개념을 나타낸다. 메서드(Method) • 메서드는 클래스에 속한 함수로, 특정 기능을 수행하는 코드 블록으로, 클래스 내부에 메서드를 정의하여 클래스의 동작을 구현한다. • 메서드는 입력값을 받을 수 있는 매개변수(Parameter)를 가질 수 있으며, 작업 결과를 반환할 수도 있다. • 메서드는 클래스 내부에서 정의하고, 해당 클래스의 객체(인스턴스)를 통해 호출하여 사용된다. class Calculator { int add(int a, int b) { return a + b; } void printResult(int result) { System.out.println("Result: " + result); } ..
Spring 공부하기 전 알아야하는 JAVA 기초 개념 (2탄) - 객체 지향 프로그래밍 (Object-Oriented Programming, OOP) [내부링크]
코딩에 대해 아예 처음 입문하시는 분들이라면 아래 링크의 1탄을 보고 오시는 걸 추천드립니다. 2023.08.06 - [코딩/JAVA] - Spring 공부하기 전 알아야하는 JAVA 기초 개념 (1탄) Spring 공부하기 전 알아야하는 JAVA 기초 개념 (1탄) 처음 1탄은 완전 JAVA의 기초를 다루기에 다른 언어를 학습해보셨던 분들은 2탄부터 보시는 걸 추천드립니다 :) 변수와 데이터 타입 변수는 데이터를 저장하는 메모리 공간을 가리키며, 데이터 타 quddkflty.tistory.com 클래스와 객체 // 클래스 정의 class Car { String brand; String model; // 메서드 void drive() { System.out.println("Driving " + brand..
Spring 공부하기 전 알아야하는 JAVA 기초 개념 (1탄) [내부링크]
처음 1탄은 완전 JAVA의 기초를 다루기에 다른 언어를 학습해보셨던 분들은 2탄부터 보시는 걸 추천드립니다 :) 변수와 데이터 타입 변수는 데이터를 저장하는 메모리 공간을 가리키며, 데이터 타입은 변수가 저장하는 데이터의 형식을 정의한다. int는 정수형, double은 실수형, String은 문자열, boolean은 논리형 데이터를 저장한다. 연산자 int a = 10; int b = 20; // 산술 연산자 int sum = a + b; // 30 int difference = a - b; // -10 int product = a * b; // 200 double division = (double) a / b; // 0.5 // 비교 연산자 boolean isEqual = a == b; // fal..
[Spring Boot & JAVA] 테스트 코드 작성시 @Test, @DisplayName 사용 [내부링크]
Spring을 공부하던 중 Test 코드 작성시 위와 같은 코드를 보게 되어 한 번 기록해보고자 하였다. 어노테이션 표시 : @ -> 컴파일러에게 추가적인 정보나 처리 방법을 알려주기 위해 사용된다. @Test 표시와 같이 코드를 분석하고 자동화하는 도구나 프레임워크에서 특정 기능을 구현하도록 사용되기도 한다. @Test : 메서드 위에 붙이면 해당 메서드가 JUnit에서 실행 가능한 테스트 메서드임을 표시하여 Test시 포함되도록 한다. @DisplayName() : 테스트의 이름을 지정하는 데 사용되며, @DisplayName 어노테이션을 테스트 메서드 위에 붙이고 원하는 이름을 설정하면, 해당 이름이 테스트 실행 결과에 표시되어 쉽게 확인할 수 있도록 도와준다. 사용 방법 import org.jun..
[React] Axios - Header에 토큰 전송 및 코드 관리 Tip [내부링크]
지난번 Axios 사용 방법에 이어서 Header에 토큰 사용 및 코드 관리 팁에 대해 알아보도록 하겠다. 저번 코드는 아래 링크로 ㄱㄱ 2023.07.18 - [코딩/React] - [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip Header에 Token 함께 전송하여 보안관리하기 + 코드 관리 Tip 사용자가 로그인을 했을 때 생기는 API Key를 사용하여 다른 페이지를 이동할 때 토큰 검사를 통해 페이지 관리와 API 보안을 설정하였다. Rest API 를 관리하는 모든 코드는 API 라는 파일을 따로 만들어 관리하였고, 코드를 import하여 함수들을 사용할 수 있도록하였다. 사용자의 API key가 담긴 token은 로컬 스토리지에 저장하여 사용하였다. ResourceApi..
[React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip [내부링크]
Axios란? Axios는 JavaScript에서 HTTP 요청을 보내는 데 가장 많이 사용되는 라이브러리이다. 주로 웹 애플리케이션과 API를 통신하는 데 사용되는데, Axios는 HTTP 요청을 보내고 해당 작업이 완료되면 Promise 객체를 반환하는 Promise 기반 API를 제공하여 비동기 요청을 처리하고 응답을 관리할 수 있습니다. 쉽게 말해 서버에 올린 Database 정보(Rest Api)를 프론트에서 사용할 수 있도록 읽어오는 과정이다. Axios의 장점 사용하기 쉽고 간결한 API: Axios는 간단하고 직관적인 API 사용 기능함수를 제공하여 HTTP 요청을 보내고 응답을 처리할 수 있다. 여러 플랫폼에서 동작: Axios는 브라우저 및 Node.js와 같은 다양한 환경에서 동작한다..
[JAVA] 멤버 변수 private으로 선언 후 생성자(Constructor)를 사용하는 이유 [내부링크]
class Car { private String modelName; private int modelYear; private String color; private int maxSpeed; private int currentSpeed; } 위에 코드를 보자 memberId, itemName, itemPrice, discountPrice가 private으로 선언되어있다. 이렇게 선언된 멤버 변수는 클래스 내부에서만 직접 접근이 가능하며, 외부에서는 직접 접근할 수 없으므로 클래스의 캡슐화를 보장할 수 있다. 그렇기에 클래스 외부에서 객체를 생성하고 초기화하기 위해서는 생성자를 사용해야 한다. 생성자는 클래스의 인스턴스를 생성할 때 사용되는 특수한 메서드로, 객체의 초기 상태를 설정하는 역할을 한다. 생성자란..
[JAVA] Getter와 Setter 개념과 사용방법 [내부링크]
JAVA 공부를 하다보면 객체를 생성한 후 생성자를 생성한 후에 Getter와 Setter를 설정하는 경우가 많다. Getter와 Setter란? Getter와 Setter는 객체 지향 프로그래밍에서 사용되는 메서드로, 객체의 데이터에 접근하고 수정하기 위해 사용된다. Getter는 멤버 변수의 값을 반환하고, Setter는 멤버 변수의 값을 설정하는 역할을 한다. Getter: 멤버 변수의 값을 읽어오는 메서드로, 주로get 접두사를 사용하며, 멤버 변수의 값을 반환한다. Setter: 멤버 변수의 값을 설정하는 메서드로, 주로 set 접두사를 사용하며, 전달받은 인자를 멤버 변수에 할당한다. Getter와 Setter를 왜 사용해야할까? Getter와 Setter를 사용하여 객체의 데이터는 캡슐화되어..
[JAVA] DIP 개념과 추상화 (Abstraction) VS 구체화 (Instantiation) [내부링크]
DIP는 "의존 역전 원칙(Dependency Inversion Principle)란? DIP는 객체 지향 설계 원칙 중 하나로, 소프트웨어의 모듈 간 의존성을 관리하는 방법을 아래와 같이 제시한다. 고수준 모듈은 저수준 모듈에 의존해서는 안 된다. 양쪽 모두 추상화에 의존해야 한다. 예를 들어, 고수준 비즈니스 로직 클래스가 저수준 데이터 액세스 클래스를 직접 생성하고 사용한다면, DIP를 위반하고 있을 수 있는 것이다. 추상화는 세부 사항에 의존해서는 안 된다. 세부 사항은 추상화에 의존해야 한다. 예를 들어, 고수준 서비스 클래스가 특정 구현 클래스에 직접 의존한다면, DIP를 위반하고 있을 수 있는 것이다. 더보기 고수준 모듈 (High-Level Module): 고수준 모듈은 상위 수준의 추상화..
[JAVA] store.put(), store.get() 함수 [내부링크]
Spring Boot를 공부하면서 회원 관리중에 필요한 store.put(), store.get() 함수에 대해 보게 되었다. 자바와 Spring Boot를 같이 시작하는 만큼 더욱 공부가 필요할 거 같다. Store.???() 함수? store.put과 store.get 함수는 일반적으로 자바에서 맵(Map) 인터페이스를 구현한 컬렉션 객체에서 사용되는 메서드이다. Map[]은 키-값(key-value) 쌍의 데이터를 저장하고 관리하는 자료구조입니다. put 함수는 데이터를 맵에 추가하고, get 함수는 맵에서 데이터를 검색하는 데 사용됩니다. const Map형식 = [ { id: 1, role: 'admin', theme: "#64C59A", }, { id: 2, role: 'developer', ..
Spring Boot 시작~! [내부링크]
IT 연합 동아리 PARD에서 서버 파트를 만들게 되면서 많이 사용하는 Spring boot 프레임워크에 대해 공부하기 시작했다. 앞으로의 모든 기록을 여기에 담을 예정이다. - 인프런 강의 듣고 블로그로 정리하며 복습하기 - 방학 끝나기 전까지 미니 프로젝트 하나 완성하기 위에 두가지를 목표로 두고 방학을 보내고 있다. 화이팅~! Spring Boot란? - Spring Boot는 Java 기반의 웹 애플리케이션 개발을 위한 프레임워크이다. Spring Framework의 일부로 개발되었으며, 애플리케이션의 구성을 간소화하고 개발 생산성을 높이는 데 중점을 두고 있다. 내장 서버와, 자동 구성, 스타터 페키지 등의 기능을 장점으로 두고 있지만, 많은 설정 옵션과 높은 진입장벽이라는 단점을 가지고 있다...
[React] useCallback을 활용해서 파일 다운로드 버튼&기능 구현하기 [내부링크]
프로젝트를 진행하면서 서버에 DummyData가 올라오기 전 useCallback 훅을 사용하여 버튼을 클릭했을 때 특정 파일이 기기에서 다운받아지도록 구현하였다. UseCallback이란? useCallback은 React에서 함수를 캐싱하고 재사용하기 위해 사용되는 훅이다. 이를 사용하여 함수가 불필요하게 재생성되는 것을 방지하고, 메모리 및 성능을 최적화할 수 있다. 나는 useCallback 함수 안에 document.createElement('a') 를 사용하여 다운로드를 위한 elements를 생성하였고, 생성한 elements에 대한 URL을 임시로 생성되게 하여 다운되도록 하였다. 1. UseCallback 콜백 함수 지정 const handleFileDownload = useCallbac..
[React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기 (3편 - 오늘 표시하기 + Event 날짜 표시) [내부링크]
이번 편에서는 특정 날짜를 클릭하면 해당 날짜에 있는 event가 뜨고, event가 있는 날짜들에 대해 하이라이트 표시를 확인할 수 있도록 설정하는 방법을 말씀해드리겠습니다.. 저는 Props와 hook(UseState)를 많이 사용하여 CSS에 전달하고 보여주는 편인데요. 아래 코드들과 설명들로 보여드릴게요 ㅎㅎ 1. Props 값으로 오늘 날짜와 현재 달, 이전 달, 다음 달 표시 하기 date-fns라이브러리에서 isSameMonth(), isSameDay()을 활용하여 Day 컴포넌트에서 day에 대해 map()으로 출력할 때 bool 값을 props로 전달하도록 하여 아래 코드처럼 is어쩌고 값을 전달한 후 bool 값에 따라 color와 BackGroundColor를 설정하였다. 에를 들어 ..
[React] 이미지 자동 슬라이더 carousel 기능 구현하기 [내부링크]
첫 화면에 배너 이미지가 자동으로 슬라이드 되고, 버튼 클릭으로도 사진 전환이 가능한 컴포넌트를 만들어야하는 과제가 주어졌다. 다양한 라이브러리가 있지만 나는 최대한 JS 코드만을 이용해서 만들어보았다! 1. 현재 보여지는 사진과 순서에 대한 Value 값 지정하기 UseState를 활용해서 사진 순서에 따라 값이 바뀌게 하였다. const [currentImageIndex, setCurrentImageIndex] = useState(0); const images = [HeroBanner1, HeroBanner2, HeroBanner3, HeroBanner2]; 2. useEffect와 setInterval() 함수를 통해 자동 전환 구현하기 setInterval()함수를 통해 currentImageIn..
[React] 스크롤하면 나타나는 위로가기 버튼 만들기(Floating Action Button & Style-Components) [내부링크]
프로젝트를 하며 디자이너가 스크롤 컨트롤이 일정 이상 생기면 나타나는 위로가기 버튼을 만들어달라고 했다..ㅎ 어떻게 개발할지 고민도 안하고 바로 만들었다 ㅋㅋ 1. window.pageYOffset를 통해 Scroll 높이 읽어오기 Scroll의 값을 읽어온 후 UseState를 통해 isVisible의 Bool 값을 지정했다. * window.pageYOffset 현재 문서의 수직 방향으로 스크롤된 픽셀의 양을 나타내는 속성 const [isVisible, setIsVisible] = useState(false); const handleScroll = () => { const scrollTop = window.pageYOffset; if (scrollTop >= 400) { setIsVisible(tr..
[React] 배경화면 동영상/사진 - Safari 자동재생 안됨, Chrome 구분하여 자동재생 작동하기 구현 [내부링크]
동아리 웹사이트를 만들면서 Home 화면 배경화면 동영상이 Safari에서는 자동 재생이 안된다는 사실을 알게 되었다.. 알고 보니 사파리는 사용자 경험을 향상시키기 위해 자동 재생 정책을 가지고 있는데, 광과민성 발작을 일으킬 수 있는 영상, 음란물, 폭력, 혐오, 공포가 포함된 영상 등이 자동 재생되어 원치 않게 보게되는 문제를 방지하기 위해 화면이 딱 켜졌을 때에 대한 자동 재생을 막아두었다. 그래서 사용자의 스크롤 컨트롤이 생기면 자동 재생이 되는 기능을 넣자고 하기도 했지만..ㅎㅎ 그래서 우리는 Safari일 때와 Chorme일때의 환경을 JS로 읽어와 서로 다른 인터렉션을 보여주기로 결정하였다. 사용자 에이전트(userAgent) 문자열 읽어오기 -> 사용자 에이전트 문자열을 읽어오기 위해 U..
[React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기(2편) [내부링크]
저번 1편에 이어서 2편으로 date-fns와 Style-Components로 커스텀 달력 편을 마무리 하고자 합니다! 2023.07.06 - [코딩/Javascript] - [React] date-fns와 style-components로 커스텀 달력 만들기(1편) [React] date-fns와 style-components로 커스텀 달력 만들기(1편) 올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 da quddkflty.tistory.com 커스텀 달력 만들기 이제 date-fns에 대한 이해도가 어느 정도 생겼다는 가정하에 글을 쓰도록 하겠다. 1. Date-fns 라..
[React] date-fns와 style-components로 커스텀하기 쉬운 달력 만들기(1편) [내부링크]
올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 date-fns를 사용하여 커스텀 달력을 만들어보았다. date-fns란? date-fns는 JavaScript와 TypeScript를 위한 유용한 날짜 관련 유틸리티 라이브러리이다. 이 라이브러리는 날짜를 다루는 다양한 함수를 제공하여 날짜 및 시간 관련 작업을 쉽게 처리할 수 있도록 도와주며 날짜 비교, 날짜 추가, 일,달,년, 요일 계산등의 다양한 기능이 많다. date-fns 라이브러리 설치하기 아래 코드를 입력하여 설치할 수 있다. npm install date-fns --save # or with yarn yarn a..
[React] 웹 배포하기 전 Index.html에 콘텐츠 설명(OG 태그) 넣어주기. [내부링크]
흔히 우리가 웹사이트 링크를 다른 사람들에게 공유하다보면 아래 사진과 같은 해당 링크에 대한 제목, 설명과, 썸네일 사진을 확인할 수 있을 것이다. 이러한 내용들 또한 배포하기 직전 웹에서 오픈 그래프를직접 설정해줘야한다! 오픈 그래프(Open Graph)란? 오픈 그래프(Open Graph, 이하 OG)는 웹사이트가 소셜 미디어 플랫폼에서 공유될 때 메타데이터를 제공하는 프로토콜이다. OG는 페이스북(Facebook)에서 처음 도입되었으며, 웹사이트의 콘텐츠가 소셜 미디어에서 미리보기로 제공되는 정보를 제어하기 위해 사용되고 있다. OG는 웹사이트의 만약 배포에 있어 개발자 도구 콘솔창을 관리하고 싶다면 아래 페이지로! https://quddkflty.tistory.com/39 [React] 배포 전 ..
웹사이트 스위그(SWYG)로 배포하기 2탄 [내부링크]
드디어! 웹사이트가 스위그(SWYG) 배포가 됐다. 배포 신청 하루만에 배포가 됐다는 메일이 오른쪽 사진처럼 왔다! 사진과 같은 메일을 확인했다면 배포에 성공한 것이다....! 프로젝트 업데이트 방법 : 배포 후 수정 내용이나 업데이트 내용이 있을 경우에는 프로젝트 코드 수정과 GIt push 한 후에 해당 스위그 프로젝트 페이지에서 배포 신청하기 버튼을 클릭하여 신청하면 된다. 광고 : 스위그에서는 배포한 웹사이트에 광고를 첨부할 수 있는데 원하는 광고 규격 크기에 맞는 광고 첨부 코드를 Body에 입력하여 업데이트한 후에 배포하여 활용할 수 있다.
[React] 배경화면 동영상 스크롤 제어 기능 코드 리뷰 [내부링크]
PARD 동아리 웹사이트를 만들면서 웹사이트 HomePage에 처음 딱 들어왔을 때 동영상으로 이루어진 배경화면을 스크롤 제어를 통해 마치 스크롤에 따른 애니메이션 기능을 구현하고자 아래와 같은 코드를 짜봤다. GSAP(GreenSock Animation Platform)라는 라이브러리를 통해 웹 애니메이션을 구현하고자 하였다. gsap.to(window, {}) 를 통해 동영상의 재생과 정지를 스크롤에 따라 제어하였으며, window.pageYOffset; 를 활용하여 현재 스크롤 위치 정보를 저장하였다. videoPRogress를 계산하여 스크롤 값에 따라 비디오의 정지 포인트를 관리하였다. 아래는 내가 기능 구현을 위해 짜보았던 코드이다. import React, { useRef, useEffect..
[React] Firebase CRUD 다양한 예시 코드! [내부링크]
React로 Firebase 연동 후 CRUD 기능에 대해서 복사해서 사용하려 했던 코드들을 공유하고자 한다. 개발자 모두 화이팅! create 원하는 collection 안에문서에 의미 있는 ID가 필요하지 않을 경우 id를 생성하여 DB에 저장한다. import { collection, addDoc } from "firebase/firestore"; function handleOnSubmit() { const docRef = addDoc(collection(dbService, "create"), { // create라는 collection 안에 넣겠다는 뜻 create: 'create', }); if (docRef) { console.log('create 성공'); } } 원하는 collection ..
웹사이트 스위그(SWYG)로 배포하기 [내부링크]
PARD에서 숏커톤 결과물에 대해 배포하게되면서 SWYG라는 좋은 플랫폼에 대해 알게 되었고, 사용 방법에 대해 나누고자 한다. 스위그(SWYG)? 스위그(SWYG)란 메타 콘텐츠 공유 및 호스팅 플랫폼이다. 웹 호스팅과 도메인을 제공해주며, 깃허브 연동으로 쉽고 빠른 출시를 할 수 있다는 장점이 있으며, 프로젝트를 배포한 후에도 플랫폼 내부에서 콘텐츠들을 홍보해주며 콘텐츠 제작자들과 개발자들의 네트워킹 기회를 제공해주고 있다. SWYG 이용가이드에 대해서는 아래 링크에 자세히 나와있으니 참고하면 된다. https://swygbro.notion.site/SWYG-4673dcfd50024f45af908bd80e44d5dd 아래는 내가 배포하면서 겪은 순서이다. 스위그에 웹 서비스 배포하기 프로젝트 개요 입..
IT 연합 동아리 PARD 해커톤&MT 회고 [내부링크]
PARD IT와 벤처 스타트업에 관심이 있고, Pay it forward를 실천하고자 하는 대학생들이 모인 학부 연합 IT/벤처 동아리입니다. 현재 한동대학교 21학번으로 들어와 나는 앱 개발 & UI/UX 디자인 교육 학회 SODA를 거쳐 새로운 시작을 준비하고 있다. 현재 한동대학교는 디자인,기획,개발에 있어 많은 관심과 열정을 가진 학생들이 많지만 이들이 하나의 목표를 가지고 협업하는 일은 거의 없다. 우리 PARD는 이러한 문제들을 해결하고, 한동대학교와 우리들의 발전을 위해 만들어졌다. 나는 PARD에서 앱 개발 파트장을 맡고 있으며, 웹&앱 전반적인 개발파트에 대해 고민하고, 준비하고 있다. 우리는 11월부터 사람들을 모으고 1월 초 마침내! 11명의 PARD 0기 맴버들이 모이게 됐다! 우리..
[Flutter] flutter 버전 업그레이드 오류 뜰 때 [내부링크]
Your flutter checkout has local changes that would be erased by upgrading. If you want to keep these changes, it is recommended that you stash them via "git stash" or else commit thechanges to a local branch. If it is okay to remove local changes, then re-run this command with "--force". flutter upgrade를 터미널에 입력했을 때 위에 글과 같이 오류가 발생했다면 코드 수정 때 IDE 부분에서 에러가 났을 경우가 대부분이다. flutter upgrade --force 를 ..
[Flutter] Theme 파일 (사진 첨부) [내부링크]
Flutter에서는 자주 반복되는 글자, 버튼 등의 크기와 색상등의 스타일 옵션값을 Theme으로 설정하여 관리할 수 있습니다. MaterialApp( theme: ThemeData( colorScheme: ColorScheme.fromSwatch( primarySwatch: Colors.blue, // PrimaryColor ).copyWith( secondary: Colors.green, // accentColor: Colors.cyan[600], ), textTheme:const TextTheme(bodyText2: TextStyle(color: Colors.purple)), ), home: Scaffold( appBar: AppBar( title:const Text('ThemeData Demo')..
[Flutter] 3.0.2 Firebase 연동 방법!(사진 많음) [내부링크]
1. Firebase 프로젝트 생성하기 - firebase 공식 사이트에 들어가 로그인 후 프로젝트를 생성한다. 2. Flutter 앱에 Firebase 추가 - firebase login을 터미널에 입력하여 vscode에 firebase를 로그인합니다. 간혹 Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path. 와 같은 에러가 뜰 수 있습니다. 이럴 땐 export PATH="$PATH":"$HOME/.pub-cache/bin"를 터미널에 입력 후 dart pub global activate fvm 를 입력하여 실행한 후 다시 FlutterFire CLI 설치 및 실행하면 된다. 3. 앱에서 Fire..
TISTORY 시작! [내부링크]
미래를 위한 준비 과정중 훌룡한 개발자로, 사업가로 성장하기 위해 코딩에 대한 주제를 시작으로 저를 기록하려고 합니다~!
네이버 블로그
티스토리
커뮤니티